Skip to content

Commit

Permalink
use redux return values to show state and return rules to make text f…
Browse files Browse the repository at this point in the history 
…ield required
  • Loading branch information
@Andrewy-gh
Andrewy-gh committed Aug 9, 2024
1 parent 184b387 commit f7fdbb8
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 76 deletions.
1 change: 1 addition & 0 deletions frontend/front/src/components/SurveyComponent/HeatPumpTextField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export const HeatPumpTextField = ({
message: "Invalid ZIP code.",
};
}
return ruleList;
}, [type, required]);

return (
Expand Down
174 changes: 98 additions & 76 deletions frontend/front/src/pages/Admin/user/CreateNewUser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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: {
Expand All @@ -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>
Expand All @@ -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}
Expand All @@ -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>
Expand Down

0 comments on commit f7fdbb8

Please sign in to comment.