fix: added unsaved changes guard to new project button, and fixed bug…

compose/neurosynth-frontend/src/components/Buttons/CreateProjectButton.tsx

@@ -1,16 +1,17 @@
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
-import { ButtonGroup } from '@mui/material';
 import LoadingButton from 'components/Buttons/LoadingButton';
+import ConfirmationDialog from 'components/Dialogs/ConfirmationDialog';
 import NavToolbarStyles from 'components/Navbar/NavToolbar.styles';
+import { hasUnsavedChanges, unsetUnloadHandler } from 'helpers/BeforeUnload.helpers';
 import { useCreateProject } from 'hooks';
 import { generateNewProjectData } from 'pages/Project/store/ProjectStore.helpers';
-import { useRef } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 const CreateProjectButton: React.FC = () => {
     const { mutate, isLoading: createProjectIsLoading } = useCreateProject();
     const navigate = useNavigate();
-    const buttonGroupRef = useRef<HTMLDivElement>(null);
+    const [confirmationDialogIsOpen, setConfirmationDialogIsOpen] = useState(false);
 
     const handleCreateProject = () => {
         mutate(generateNewProjectData('Untitled', ''), {
@@ -20,24 +21,48 @@ const CreateProjectButton: React.FC = () => {
         });
     };
 
+    const handleButtonClick = () => {
+        const unsavedChangesExist = hasUnsavedChanges();
+        if (unsavedChangesExist) {
+            setConfirmationDialogIsOpen(true);
+            return;
+        } else {
+            handleCreateProject();
+        }
+    };
+
+    const handleConfirmationDialogClose = (ok: boolean | undefined) => {
+        if (ok) {
+            unsetUnloadHandler('project');
+            unsetUnloadHandler('study');
+            unsetUnloadHandler('annotation');
+            handleCreateProject();
+        }
+        setConfirmationDialogIsOpen(false);
+    };
+
     return (
-        <ButtonGroup
-            ref={buttonGroupRef}
-            sx={{ marginRight: '8px' }}
-            variant="contained"
-            disableElevation
-            color="secondary"
-        >
+        <>
+            <ConfirmationDialog
+                dialogTitle="You have unsaved changes"
+                dialogMessage="Are you sure you want to continue? You'll lose your unsaved changes"
+                confirmText="Continue"
+                rejectText="Cancel"
+                onCloseDialog={handleConfirmationDialogClose}
+                isOpen={confirmationDialogIsOpen}
+            />
             <LoadingButton
                 variant="contained"
+                color="secondary"
+                disableElevation
                 loaderColor="primary"
-                onClick={handleCreateProject}
+                onClick={handleButtonClick}
                 isLoading={createProjectIsLoading}
                 sx={[NavToolbarStyles.menuItem, NavToolbarStyles.createProjectButton]}
                 startIcon={<AddCircleOutlineIcon />}
                 text="NEW PROJECT"
             />
-        </ButtonGroup>
+        </>
     );
 };
 

compose/neurosynth-frontend/src/helpers/Annotation.helpers.tsx

@@ -8,7 +8,7 @@ export const setAnalysesInAnnotationAsIncluded = async (annotationId: string) =>
             annotationId
         )) as AxiosResponse<NeurostoreAnnotation>;
 
-        let notes = (annotation.data.notes || []) as NoteCollectionReturn[];
+        const notes = (annotation.data.notes || []) as NoteCollectionReturn[];
 
         await API.NeurostoreServices.AnnotationsService.annotationsIdPut(annotationId, {
             notes: notes.map((x) => ({
@@ -18,7 +18,10 @@ export const setAnalysesInAnnotationAsIncluded = async (annotationId: string) =>
                     ...x.note,
                     // included can be null meaning it has not been instantiated. We only want to set it to true
                     // if it has not been instantiated as that will overwrite the value is the user previously set it to false
-                    included: (x.note as any)?.included === false ? false : true,
+                    // null ?? true === true
+                    // undefined ?? true === true
+                    // false ?? true === false
+                    included: (x.note as any)?.included ?? true,
                 },
             })),
         });

compose/neurosynth-frontend/src/pages/Study/hooks/useSaveStudy.tsx

@@ -128,7 +128,9 @@ const useSaveStudy = () => {
 
     const handleUpdateDB = async () => {
         try {
-            if (studyHasBeenEdited && annotationIsEdited) {
+            const newAnalysesWereCreated = storeStudy.analyses.some((analysis) => analysis.isNew);
+
+            if (studyHasBeenEdited && (annotationIsEdited || newAnalysesWereCreated)) {
                 await handleUpdateBothInDB();
             } else if (studyHasBeenEdited) {
                 await handleUpdateStudyInDB();