From f7fdbb8003b639937be17ca2ee2c1b74e9c393b7 Mon Sep 17 00:00:00 2001
From: Andrew <andrewydev6@gmail.com>
Date: Fri, 9 Aug 2024 01:58:26 +0000
Subject: [PATCH] use redux return values to show state and return rules to
 make text field required

---
 .../SurveyComponent/HeatPumpTextField.js      |   1 +
 .../src/pages/Admin/user/CreateNewUser.js     | 174 ++++++++++--------
 2 files changed, 99 insertions(+), 76 deletions(-)

diff --git a/frontend/front/src/components/SurveyComponent/HeatPumpTextField.js b/frontend/front/src/components/SurveyComponent/HeatPumpTextField.js
index 3f26a4da..c8a75647 100644
--- a/frontend/front/src/components/SurveyComponent/HeatPumpTextField.js
+++ b/frontend/front/src/components/SurveyComponent/HeatPumpTextField.js
@@ -43,6 +43,7 @@ export const HeatPumpTextField = ({
         message: "Invalid ZIP code.",
       };
     }
+    return ruleList;
   }, [type, required]);
 
   return (
diff --git a/frontend/front/src/pages/Admin/user/CreateNewUser.js b/frontend/front/src/pages/Admin/user/CreateNewUser.js
index 60b489b4..e712cbf8 100644
--- a/frontend/front/src/pages/Admin/user/CreateNewUser.js
+++ b/frontend/front/src/pages/Admin/user/CreateNewUser.js
@@ -7,7 +7,7 @@ import {
   Typography,
 } from "@mui/material";
 import { ROLE_ADMIN, ROLE_SURVEYOR } from "../../../features/login/loginUtils";
-import React, { useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 import { useCreateUserMutation } from "../../../api/apiSlice";
 
 import CustomSnackbar from "../../../components/CustomSnackbar";
@@ -25,9 +25,8 @@ const ACTION_NEW = "NEW";
 const CreateNewUser = () => {
   const navigate = useNavigate();
 
-  const [modalData, setModalData] = useState(null);
-  const [userError, setUserError] = useState(null);
-  const [isUserLoading, setIsUserLoading] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [userError, setUserError] = useState(false);
 
   const { handleSubmit, control, reset } = useForm({
     defaultValues: {
@@ -42,96 +41,97 @@ const CreateNewUser = () => {
       role: ROLE_SURVEYOR,
     },
   });
-
-  const [createUser] = useCreateUserMutation();
+  const [
+    createUser,
+    {
+      data: createUserData,
+      isLoading: isCreateUserLoading,
+      error: createUserError,
+      isSuccess: isCreateUserSuccess,
+    },
+  ] = useCreateUserMutation();
 
   const handleCancel = useCallback(() => {
     navigate(withAdminPrefix(ADMIN_USER));
   }, [navigate]);
 
-  const onSubmit = useCallback(
-    async (data) => {
-      setIsUserLoading(true);
-      try {
-        const { email, role, ...surveyor } = data;
-        const user = await createUser({
-          email,
-          role,
-          surveyor,
-        }).unwrap();
-        setModalData({ ...user });
-      } catch (e) {
-        setUserError(e);
-      } finally {
-        setIsUserLoading(false);
-      }
-    },
-    [createUser]
-  );
-
   const handleModalClose = useCallback(
     (action) => {
       if (action === ACTION_BACK) {
         handleCancel();
       } else if (action === ACTION_NEW) {
         reset();
-        setModalData(null);
+        setModalOpen(false);
       }
     },
     [reset, handleCancel]
   );
 
   const modal = useCallback(
-    () => (
-      <Modal
-        open={modalData !== null}
-        onClose={() => handleModalClose(ACTION_NEW)}
-      >
-        <Box
-          // style stolen from mui modal example
-          sx={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            width: 400,
-            bgcolor: "background.paper",
-            border: "2px solid #000",
-            boxShadow: 24,
-            p: 4,
-          }}
-        >
-          <Stack direction="row" justifyContent="center" sx={{ mb: 2 }}>
-            <p>
-              Succesfully created user <b>'{modalData?.email}'</b>
-            </p>
-          </Stack>
-          <Stack direction="row" justifyContent="right" spacing={2}>
-            <Button onClick={() => handleModalClose(ACTION_BACK)}>
-              Dashboard
-            </Button>
-            <Button
-              variant="contained"
-              onClick={() => handleModalClose(ACTION_NEW)}
-            >
-              Create Another
-            </Button>
-          </Stack>
-        </Box>
-      </Modal>
-    ),
-    [handleModalClose, modalData]
+    (user) => {
+      return (
+        <Modal open={modalOpen} onClose={() => handleModalClose(ACTION_NEW)}>
+          <Box
+            // style stolen from mui modal example
+            sx={{
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              width: 400,
+              bgcolor: "background.paper",
+              border: "2px solid #000",
+              boxShadow: 24,
+              p: 4,
+            }}
+          >
+            <Stack direction="row" justifyContent="center" sx={{ mb: 2 }}>
+              <p>
+                Succesfully created user <b>'{user?.email}'</b>
+              </p>
+            </Stack>
+            <Stack direction="row" justifyContent="right" spacing={2}>
+              <Button onClick={() => handleModalClose(ACTION_BACK)}>
+                Dashboard
+              </Button>
+              <Button
+                variant="contained"
+                onClick={() => handleModalClose(ACTION_NEW)}
+              >
+                Create Another
+              </Button>
+            </Stack>
+          </Box>
+        </Modal>
+      );
+    },
+    [handleModalClose, modalOpen]
+  );
+
+  const onSubmit = useCallback(
+    async (data) => {
+      setUserError(() => false);
+      try {
+        const { email, role, ...surveyor } = data;
+        const user = await createUser({
+          email,
+          role,
+          surveyor,
+        }).unwrap();
+        if (user) {
+          setModalOpen(true);
+        }
+      } catch (error) {
+        setUserError(() => true);
+      }
+    },
+    [createUser]
   );
 
   return (
     <Container>
-      {modal()}
-      {!!userError && (
-        <CustomSnackbar
-          message="Error creating user account."
-          onClose={() => setUserError(null)}
-        />
-      )}
+      {!!isCreateUserSuccess && !!createUserData && modal(createUserData)}
+      {userError && <CustomSnackbar message="Error creating user account." />}
       <Box sx={{ bgcolor: "primary.main", color: "white" }} p={1} m={1}>
         <Typography variant="h5">Create User Profile</Typography>
       </Box>
@@ -141,35 +141,57 @@ const CreateNewUser = () => {
             control={control}
             name="firstname"
             label="First Name"
+            required
           />
           <HeatPumpTextField
             control={control}
             name="lastname"
             label="Last Name"
+            required
           />
           <HeatPumpTextField
             control={control}
             name="email"
             label="Email"
             type="email"
+            required
           />
+          {/* Error message in case duplicate email */}
+          {createUserError?.data?.email.length > 0 && (
+            <Typography color="red" variant="body2">
+              Email {createUserError?.data?.email?.join(" ")}
+            </Typography>
+          )}
           <HeatPumpPhoneField
             control={control}
             name="phone"
             label="Phone Number"
+            required
           />
           <HeatPumpTextField
             control={control}
             name="street_address"
             label="Street Address"
+            required
+          />
+          <HeatPumpTextField
+            control={control}
+            name="city"
+            label="City"
+            required
+          />
+          <HeatPumpTextField
+            control={control}
+            name="state"
+            label="State"
+            required
           />
-          <HeatPumpTextField control={control} name="city" label="City" />
-          <HeatPumpTextField control={control} name="state" label="State" />
           <HeatPumpTextField
             control={control}
             name="zipcode"
             label="ZIP code"
             type="zipcode"
+            required
           />
           <HeatPumpDropdown
             control={control}
@@ -182,7 +204,7 @@ const CreateNewUser = () => {
             ]}
           />
           <Stack direction="row" justifyContent="right" spacing={2}>
-            {isUserLoading && <Loader />}
+            {!!isCreateUserLoading && <Loader />}
             <Button variant="outlined" sx={{ ml: 2 }} type="submit">
               Create
             </Button>