Merge pull request #775 from Northeastern-Electric-Racing/#662-projec…

…t-edit-reload-fix

#662 - Fixed Project Details Re-render

src/frontend/pages/ProjectDetailPage/project-edit-container/project-edit-container.tsx

@@ -41,7 +41,7 @@ interface ProjectEditContainerProps {
 const ProjectEditContainer: React.FC<ProjectEditContainerProps> = ({ proj, exitEditMode }) => {
   const auth = useAuth();
   const allUsers = useAllUsers();
-  const { mutateAsync } = useEditSingleProject();
+  const { mutateAsync } = useEditSingleProject(proj.wbsNum);
 
   const [crId, setCrId] = useState(-1);
   const [name, setName] = useState(proj.name);
@@ -199,6 +199,7 @@ const ProjectEditContainer: React.FC<ProjectEditContainerProps> = ({ proj, exitE
 
     try {
       await mutateAsync(payload);
+      exitEditMode();
     } catch (e) {
       if (e instanceof Error) {
         alert(e.message);

src/frontend/pages/WorkPackageDetailPage/work-package-edit-container/work-package-edit-container.tsx

@@ -37,7 +37,7 @@ const WorkPackageEditContainer: React.FC<WorkPackageEditContainerProps> = ({
   exitEditMode
 }) => {
   const auth = useAuth();
-  const { mutateAsync } = useEditWorkPackage();
+  const { mutateAsync } = useEditWorkPackage(workPackage.wbsNum);
   const { data: userData, isLoading, isError, error } = useAllUsers();
 
   // states for the form's payload
@@ -165,6 +165,7 @@ const WorkPackageEditContainer: React.FC<WorkPackageEditContainerProps> = ({
 
     try {
       await mutateAsync(payload);
+      exitEditMode();
     } catch (_) {
       return;
     }

src/services/projects.hooks.ts

@@ -3,7 +3,7 @@
  * See the LICENSE file in the repository root folder for details.
  */
 
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { EditProjectPayload, CreateProjectPayload, Project, WbsNumber } from 'utils';
 import {
   editSingleProject,
@@ -51,12 +51,18 @@ export const useCreateSingleProject = () => {
 /**
  * Custom React Hook to edit a project
  */
-export const useEditSingleProject = () => {
+export const useEditSingleProject = (wbsNum: WbsNumber) => {
+  const queryClient = useQueryClient();
   return useMutation<{ message: string }, Error, EditProjectPayload>(
     ['projects', 'edit'],
     async (projectPayload: EditProjectPayload) => {
       const { data } = await editSingleProject(projectPayload);
       return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['projects', wbsNum]);
+      }
     }
   );
 };

src/services/work-packages.hooks.ts

@@ -3,7 +3,7 @@
  * See the LICENSE file in the repository root folder for details.
  */
 
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { WorkPackage, WbsNumber, CreateWorkPackagePayload, EditWorkPackagePayload } from 'utils';
 import {
   createSingleWorkPackage,
@@ -54,7 +54,8 @@ export const useCreateSingleWorkPackage = () => {
  *
  * @returns React-query tility functions exposed by the useMutation hook
  */
-export const useEditWorkPackage = () => {
+export const useEditWorkPackage = (wbsNum: WbsNumber) => {
+  const queryClient = useQueryClient();
   return useMutation<{ message: string }, Error, EditWorkPackagePayload>(
     ['work packages', 'edit'],
     async (wpPayload: EditWorkPackagePayload) => {
@@ -64,6 +65,9 @@ export const useEditWorkPackage = () => {
     {
       onError: (error) => {
         alert(error.message + " but it's probably invalid cr id"); // very scuffed, find a better way to surface errors on front end
+      },
+      onSuccess: () => {
+        queryClient.invalidateQueries(['work packages', wbsNum]);
       }
     }
   );