refactor: improve signup code

AAISS · Nov 27, 2023 · 59c971e · 59c971e
1 parent f7342c3
commit 59c971e
Showing 1 changed file with 44 additions and 34 deletions.
diff --git a/frontend/src/pages/Signup/Signup.jsx b/frontend/src/pages/Signup/Signup.jsx
@@ -48,19 +48,20 @@ const SignUpForm = ({ onLoginClick }) => {
     navigate(ROUTES.myAccount);
   };
 
-  const handleSignUp = useCallback(() => {
-    const data = {};
-    data.name = fullname;
-    data.phone_number = phoneNumber;
-    data.account = {
-      password: password,
-      email: email,
-    };
-    createUser(data);
-  }, [createUser, email, fullname, password, phoneNumber]);
+  // const handleSignUp = useCallback(() => {
+  //   const data = {};
+  //   data.name = fullname;
+  //   data.phone_number = phoneNumber;
+  //   data.account = {
+  //     password: password,
+  //     email: email,
+  //   };
+  //   createUser(data);
+  // }, [createUser, email, fullname, password, phoneNumber]);
 
   // TODO: add form validation
-  const handleFormSubmit = (e) => {
+  const handleFormSubmit = async (e) => {
+    console.log('handle form submit');
     e.preventDefault();
     if (hasEmailError(email)) {
       setIsEmailWrong(true);
@@ -83,28 +84,40 @@ const SignUpForm = ({ onLoginClick }) => {
       setSecondPassHelperText('Passwords are not the same');
       return;
     }
-    // TODO: route to my-account page
+
+    // API call
+    const data = {
+      name: fullname,
+      phone_number: phoneNumber,
+      account: {
+        password: password,
+        email: email,
+      },
+    };
+    createUser(data);
   };
 
   useEffect(() => {
     if (createUserData == null) return;
 
     const toastDataTemp = {};
-    switch (createUserData.status) {
-      case 200:
-      case 201:
-        toastDataTemp.message = 'Account Created Successfully! Please Check Your Email.';
-        toastDataTemp.alertType = 'success';
-        navToMyAccountPage();
-        break;
-      case 400:
-        toastDataTemp.message = 'User with This Email Already Exists!';
-        toastDataTemp.alertType = 'error';
-        break;
-      default:
-        toastDataTemp.message = 'Unexpected Error! Please Try Again Later.';
-        toastDataTemp.alertType = 'error';
-        break;
+    if (createUserData) {
+      switch (createUserData.status) {
+        case 200:
+        case 201:
+          toastDataTemp.message = 'Account Created Successfully! Please Check Your Email.';
+          toastDataTemp.alertType = 'success';
+          navToMyAccountPage();
+          break;
+        case 400:
+          toastDataTemp.message = 'User with This Email Already Exists!';
+          toastDataTemp.alertType = 'error';
+          break;
+        default:
+          toastDataTemp.message = 'Unexpected Error! Please Try Again Later.';
+          toastDataTemp.alertType = 'error';
+          break;
+      }
     }
 
     setAccessTokenFromLocalStorage();
@@ -185,7 +198,7 @@ const SignUpForm = ({ onLoginClick }) => {
               }}
             />
             <Stack gap={2}>
-              <Button onClick={handleSignUp} color="primary" variant="contained" type="submit">
+              <Button color="primary" variant="contained" type="submit">
                 SignUp
               </Button>
               <Button color="primary" variant="outlined" onClick={onLoginClick}>
@@ -224,11 +237,9 @@ const LoginForm = ({ onSignUpClick }) => {
     // TODO: route to my-account page if it's successful
   };
 
-  const {navigate} = useNavigate()
+  const { navigate } = useNavigate();
   const { issueToken, issueTokenResponse } = useAPI();
-  const {
-    setAccessTokenFromLocalStorage
-  } = useConfig()
+  const { setAccessTokenFromLocalStorage } = useConfig();
 
   useEffect(() => {
     if (issueTokenResponse == null) return;
@@ -237,8 +248,7 @@ const LoginForm = ({ onSignUpClick }) => {
     setOpenToast(true);
 
     localStorage['user'] = JSON.stringify(issueTokenResponse.data);
-    setAccessTokenFromLocalStorage()
-
+    setAccessTokenFromLocalStorage();
   }, [issueTokenResponse]);
 
   const handleClickOnForgotPass = () => {