feat(user-signup): [next-ts-middle-out] 🔵 extract logic to useSignUp hook

Author: nuria-fl

exercises/user_signup/solutions/codely_next-typescript-middle-out/src/components/SignUpForm.tsx

@@ -1,24 +1,15 @@
-import React, { useState } from "react";
-import { signUpUser } from "../services/signUpUser";
 import { Input } from "./Input";
-
-type FormStatus = "success" | "error" | "initial"
+import { useSignUpUser } from "./useSignUpUser";
 
 export function SignUpForm() {
-  const [formStatus, setFormStatus] = useState<FormStatus>("initial")
+  const {formStatus, signUp} = useSignUpUser();
 
   async function handleSubmit(ev: React.FormEvent) {
     ev.preventDefault()
     const data = new FormData(ev.target as HTMLFormElement);
     const entries = Object.fromEntries(data.entries()) as { [key: string]: string };
 
-    return signUpUser({name: entries.name, email: entries.email})
-      .then(() => {
-        setFormStatus("success");
-      })
-      .catch(() => {
-        setFormStatus("error");
-      });
+    return signUp({name: entries.name, email: entries.email});
   }
 
   if (formStatus === "success") {

exercises/user_signup/solutions/codely_next-typescript-middle-out/src/components/useSignUpUser.ts

@@ -0,0 +1,23 @@
+import { useState } from "react";
+import { signUpUser } from "../services/signUpUser";
+
+type FormStatus = "success" | "error" | "initial"
+
+export function useSignUpUser() {
+  const [formStatus, setFormStatus] = useState<FormStatus>("initial")
+
+  function signUp({name, email}: {name: string; email: string;}) {
+    return signUpUser({name, email})
+      .then(() => {
+        setFormStatus("success");
+      })
+      .catch(() => {
+        setFormStatus("error");
+      });
+  }
+
+  return {
+    signUp,
+    formStatus
+  }
+}