Create loading state for save button on ProjectForm.js

client/src/components/ProjectForm.js

@@ -3,6 +3,7 @@ import { useHistory } from 'react-router-dom';
 import { useForm, useFormState } from 'react-hook-form';
 import { Redirect } from 'react-router-dom';
 import {
+  CircularProgress,
   Typography,
   Box,
   Button,
@@ -69,10 +70,11 @@ export default function ProjectForm({
   const history = useHistory();
 
   // ----------------- States -----------------
+  const { auth } = useAuth();
+  const [isLoading, setIsLoading] = useState(false);
   const [locationType, setLocationType] = useState('remote');
   // State to track the toggling from Project view to Edit Project View via edit icon.
   const [editMode, setEditMode] = useState(false);
-  const { auth } = useAuth();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const handleOpen = () => setIsModalOpen(true);
   const handleClose = () => setIsModalOpen(false);
@@ -111,25 +113,31 @@ export default function ProjectForm({
   // Handles POST request found in api/ProjectApiService.
   const submitNewProject = async (data) => {
     const projectApi = new ProjectApiService();
+
     try {
+      setIsLoading(true);
       const id = await projectApi.create(data);
       history.push(`/projects/${id}`);
     } catch (errors) {
       console.error(errors);
-      return;
     }
+    return () => setIsLoading(false);
   };
 
   // Fires PUT request to update the project,
   const submitEditProject = async (data) => {
     const projectApi = new ProjectApiService();
     try {
+      setIsLoading(true);
       await projectApi.updateProject(projectToEdit._id, data);
     } catch (errors) {
       console.error(errors);
+      setIsLoading(false);
       return;
     }
     // setOriginalProjectData(data);
+
+    setIsLoading(false);
     setFormData(data);
     setEditMode(false);
   };
@@ -266,17 +274,39 @@ export default function ProjectForm({
         <Box>
           <Grid container justifyContent="space-evenly" sx={{ my: 3 }}>
             <Grid item xs="auto">
-              <StyledButton
-                type="submit"
-                form="project-form"
-                variant={
-                  !isEdit ? 'secondary' : !editMode ? 'contained' : 'secondary'
-                }
-                cursor="pointer"
-                disabled={isEdit ? !editMode : false}
-              >
-                Save
-              </StyledButton>
+              {isLoading ? (
+                <StyledButton
+                  type="submit"
+                  form="project-form"
+                  variant={
+                    !isEdit
+                      ? 'secondary'
+                      : !editMode
+                      ? 'contained'
+                      : 'secondary'
+                  }
+                  cursor="pointer"
+                  disabled={isEdit && !isLoading ? !editMode : false}
+                >
+                  <CircularProgress />
+                </StyledButton>
+              ) : (
+                <StyledButton
+                  type="submit"
+                  form="project-form"
+                  variant={
+                    !isEdit
+                      ? 'secondary'
+                      : !editMode
+                      ? 'contained'
+                      : 'secondary'
+                  }
+                  cursor="pointer"
+                  disabled={isEdit && !isLoading ? !editMode : false}
+                >
+                  Save
+                </StyledButton>
+              )}
             </Grid>
             <Grid item xs="auto">
               <StyledButton

client/src/pages/ManageProjects.js

@@ -31,7 +31,7 @@ const ManageProjects = () => {
 
   const user = auth?.user;
 
-    const fetchProjects = useCallback(async () => {
+  const fetchProjects = useCallback(async () => {
     setProjectsLoading(true);
     const projectRes = await projectApiService.fetchProjects();
     setProjects(projectRes);
@@ -43,7 +43,7 @@ const ManageProjects = () => {
     const eventsRes = await EventsApiService.fetchEvents();
     setRegularEvents(eventsRes);
     setEventsLoading(false);
-  }, [recurringEventsApiService]);
+  }, [EventsApiService]);
 
   const fetchRecurringEvents = useCallback(async () => {
     setEventsLoading(true);
@@ -94,13 +94,10 @@ const ManageProjects = () => {
 
   const updateRegularEvent = useCallback(
     async (eventToUpdate, eventId) => {
-      await EventsApiService.updateEvent(
-        eventToUpdate,
-        eventId
-      );
+      await EventsApiService.updateEvent(eventToUpdate, eventId);
       fetchRegularEvents();
     },
-    [recurringEventsApiService, fetchRegularEvents]
+    [fetchRegularEvents, EventsApiService]
   );
 
   useEffect(() => {