update create home function value

frontend/front/src/pages/Admin/home/CreateNewHome.js

@@ -1,28 +1,40 @@
-import { Box, Button, TextField, Typography } from "@mui/material";
+import { Alert, Box, Button, TextField, Typography } from "@mui/material";
 import { Controller, useForm } from "react-hook-form";
 
-import React from "react";
+import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-
-import { withAdminPrefix, ADMIN_HOME } from "../../../routing/routes";
+import { useCreateHomeMutation } from "../../../api/apiSlice";
+import { ADMIN_HOME, withAdminPrefix } from "../../../routing/routes";
 
 const CreateNewHome = () => {
   const navigate = useNavigate();
-  const { handleSubmit, control } = useForm({
+  const { handleSubmit, control, reset } = useForm({
     defaultValues: {
-      streetNumber: "",
-      address: "",
-      zipCode: "",
+      street_number: "",
+      street_name: "",
+      unit_number: "",
       city: "",
+      state: "",
+      zip_code: "",
     },
   });
 
-  const onSubmit = (data) => console.log(data);
+  const [createHome, { isLoading, isSuccess, isError }] =
+    useCreateHomeMutation();
 
+  const onSubmit = async (data) => {
+    createHome({ home: data });
+  };
   const handleCancel = () => {
     navigate(withAdminPrefix(ADMIN_HOME));
   };
 
+  useEffect(() => {
+    if (isSuccess) {
+      reset();
+    }
+  }, [isSuccess, reset]);
+
   return (
     <Box
       display="flex"
@@ -36,66 +48,96 @@ const CreateNewHome = () => {
         </Box>
         <form onSubmit={handleSubmit(onSubmit)}>
           <Controller
-            name={"streetNumber"}
+            name="street_number"
             control={control}
             render={({ field: { onChange, value } }) => (
               <TextField
                 onChange={onChange}
                 value={value}
-                label={"Street Number"}
+                label="Street Number"
                 variant="standard"
                 sx={{ width: "95%", mx: 2, mt: 3 }}
               />
             )}
           />
           <Controller
-            name={"address"}
+            name="street_name"
             control={control}
             render={({ field: { onChange, value } }) => (
               <TextField
                 onChange={onChange}
                 value={value}
-                label={"Address"}
+                label="Street Name"
                 variant="standard"
                 sx={{ width: "95%", mx: 2, mt: 3 }}
               />
             )}
           />
           <Controller
-            name={"zipCode"}
+            name="unit_number"
             control={control}
             render={({ field: { onChange, value } }) => (
               <TextField
                 onChange={onChange}
                 value={value}
-                label={"Zip Code"}
+                label="Unit Number"
                 variant="standard"
                 sx={{ width: "95%", mx: 2, mt: 3 }}
               />
             )}
           />
-
           <Controller
-            name={"city"}
+            name="city"
             control={control}
             render={({ field: { onChange, value } }) => (
               <TextField
                 onChange={onChange}
                 value={value}
-                label={"City"}
+                label="City"
                 variant="standard"
                 sx={{ width: "95%", mx: 2, mt: 3 }}
               />
             )}
           />
-
+          <Controller
+            name="state"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <TextField
+                onChange={onChange}
+                value={value}
+                label="State"
+                variant="standard"
+                sx={{ width: "95%", mx: 2, mt: 3 }}
+              />
+            )}
+          />
+          <Controller
+            name="zip_code"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <TextField
+                onChange={onChange}
+                value={value}
+                label="Zip Code"
+                variant="standard"
+                sx={{ width: "95%", mx: 2, mt: 3 }}
+              />
+            )}
+          />
+          {isError && (
+            <Alert severity="error" sx={{ my: 1 }}>
+              Error Saving home
+            </Alert>
+          )}
           <Box pt={5} textAlign="right">
             <Button
               variant="outlined"
               sx={{ ml: 2 }}
               onClick={handleSubmit(onSubmit)}
+              disabled={isLoading ? true : false}
             >
-              Create
+              {isLoading ? "Saving" : "Save"}
             </Button>
             <Button
               variant="outlined"