feat: finished edit study page

neurostuff · Oct 4, 2024 · 3c5f1ae · 3c5f1ae
1 parent 8e89dcb
commit 3c5f1ae
Show file tree

Hide file tree

Showing 16 changed files with 679 additions and 417 deletions.
diff --git a/compose/neurosynth-frontend/src/components/Dialogs/ConfirmationDialog.spec.tsx b/compose/neurosynth-frontend/src/components/Dialogs/ConfirmationDialog.spec.tsx
@@ -103,7 +103,6 @@ describe('ConfirmationDialog', () => {
                 onCloseDialog={mockOnClose}
                 confirmText="confirm"
                 rejectText="reject"
-                data={{ data: 'test-data' }}
             />
         );
 

diff --git a/compose/neurosynth-frontend/src/components/Dialogs/ConfirmationDialog.tsx b/compose/neurosynth-frontend/src/components/Dialogs/ConfirmationDialog.tsx
@@ -13,12 +13,11 @@ import React, { useMemo } from 'react';
 
 export interface IConfirmationDialog {
     isOpen: boolean;
-    onCloseDialog: (confirm: boolean | undefined, data?: any) => void;
+    onCloseDialog: (confirm: boolean | undefined) => void;
     dialogTitle: string;
     dialogMessage?: JSX.Element | string;
     confirmText?: string;
     rejectText?: string;
-    data?: any;
 }
 
 const ConfirmationDialog: React.FC<IConfirmationDialog> = (props) => {
@@ -33,13 +32,13 @@ const ConfirmationDialog: React.FC<IConfirmationDialog> = (props) => {
     }, [props.dialogMessage]);
 
     return (
-        <Dialog open={props.isOpen} onClose={() => props.onCloseDialog(undefined, props.data)}>
+        <Dialog open={props.isOpen} onClose={() => props.onCloseDialog(undefined)}>
             <DialogTitle sx={{ display: 'flex' }}>
                 <Box sx={{ display: 'flex', flexGrow: 1, alignItems: 'center' }}>
                     <Typography variant="h6">{props.dialogTitle}</Typography>
                 </Box>
                 <Box>
-                    <IconButton onClick={() => props.onCloseDialog(undefined, props.data)}>
+                    <IconButton onClick={() => props.onCloseDialog(undefined)}>
                         <CloseIcon sx={{ fontSize: '2rem' }} />
                     </IconButton>
                 </Box>
@@ -49,15 +48,15 @@ const ConfirmationDialog: React.FC<IConfirmationDialog> = (props) => {
                 <Box sx={{ display: 'flex', justifyContent: 'space-between', marginTop: '1rem' }}>
                     <Button
                         sx={{ width: '250px', marginRight: '15px' }}
-                        onClick={() => props.onCloseDialog(false, props.data)}
+                        onClick={() => props.onCloseDialog(false)}
                         variant="text"
                         color="error"
                     >
                         {props.rejectText ? props.rejectText : 'Reject'}
                     </Button>
                     <Button
                         sx={{ width: '250px' }}
-                        onClick={() => props.onCloseDialog(true, props.data)}
+                        onClick={() => props.onCloseDialog(true)}
                         variant="contained"
                         color="primary"
                         disableElevation

diff --git a/compose/neurosynth-frontend/src/components/NeurosynthConfirmationChip.tsx b/compose/neurosynth-frontend/src/components/NeurosynthConfirmationChip.tsx
@@ -12,7 +12,7 @@ const NeurosynthConfirmationChip: React.FC<ChipProps & { isLoading?: boolean }>
         setConfirmationDialogIsOpen(true);
     };
 
-    const handleCloseDialog = (confirm: boolean | undefined, _data: any) => {
+    const handleCloseDialog = (confirm: boolean | undefined) => {
         if (confirm && props.onDelete) {
             props.onDelete(undefined);
         }

diff --git a/compose/neurosynth-frontend/src/helpers/BeforeUnload.helpers.ts b/compose/neurosynth-frontend/src/helpers/BeforeUnload.helpers.ts
@@ -4,8 +4,18 @@ enum EUnloadStatus {
     ANNOTATIONSTORE = 'annotation-store-unsaved-changes',
 }
 
-const onUnloadHandler = (event: BeforeUnloadEvent) => {
-    return (event.returnValue = 'Are you sure you want to leave?');
+let eventListenerSet = false;
+
+const onBeforeUnloadHandler = (event: BeforeUnloadEvent) => {
+    event.preventDefault();
+    return 'Are you sure you want to leave?';
+};
+
+const onUnloadHandler = (event: any) => {
+    event.preventDefault();
+    window.sessionStorage.removeItem(EUnloadStatus.PROJECTSTORE);
+    window.sessionStorage.removeItem(EUnloadStatus.STUDYSTORE);
+    window.sessionStorage.removeItem(EUnloadStatus.ANNOTATIONSTORE);
 };
 
 export const setUnloadHandler = (store: 'project' | 'study' | 'annotation') => {
@@ -16,7 +26,11 @@ export const setUnloadHandler = (store: 'project' | 'study' | 'annotation') => {
     } else if (store === 'annotation') {
         window.sessionStorage.setItem(EUnloadStatus.ANNOTATIONSTORE, 'true');
     }
-    if (!window.onbeforeunload) window.onbeforeunload = onUnloadHandler;
+    if (!eventListenerSet) {
+        window.addEventListener('beforeunload', onBeforeUnloadHandler);
+        window.addEventListener('unload', onUnloadHandler);
+        eventListenerSet = true;
+    }
 };
 
 export const unsetUnloadHandler = (store: 'project' | 'study' | 'annotation') => {
@@ -33,6 +47,23 @@ export const unsetUnloadHandler = (store: 'project' | 'study' | 'annotation') =>
         window.sessionStorage.getItem(EUnloadStatus.STUDYSTORE) === null &&
         window.sessionStorage.getItem(EUnloadStatus.ANNOTATIONSTORE) === null
     ) {
-        window.onbeforeunload = null;
+        window.removeEventListener('beforeunload', onBeforeUnloadHandler);
+        window.removeEventListener('unload', onUnloadHandler);
+        eventListenerSet = false;
     }
 };
+
+export const hasUnsavedChanges = () => {
+    return (
+        window.sessionStorage.getItem(EUnloadStatus.PROJECTSTORE) === 'true' ||
+        window.sessionStorage.getItem(EUnloadStatus.STUDYSTORE) === 'true' ||
+        window.sessionStorage.getItem(EUnloadStatus.ANNOTATIONSTORE) === 'true'
+    );
+};
+
+export const hasUnsavedStudyChanges = () => {
+    return (
+        window.sessionStorage.getItem(EUnloadStatus.STUDYSTORE) === 'true' ||
+        window.sessionStorage.getItem(EUnloadStatus.ANNOTATIONSTORE) === 'true' // you can edit annotations via study annotations which counts as a study edit
+    );
+};
diff --git a/compose/neurosynth-frontend/src/hooks/external/useGetFullText.tsx b/compose/neurosynth-frontend/src/hooks/external/useGetFullText.tsx
@@ -2,6 +2,8 @@ import axios from 'axios';
 import { AxiosResponse } from 'axios';
 import { useQuery } from 'react-query';
 
+const env = process.env.REACT_APP_ENV as 'DEV' | 'STAGING' | 'PROD';
+
 interface ISemanticScholarResponse {
     data: {
         externalIds: {
@@ -41,7 +43,7 @@ const useGetFullText = (paperTitle?: string | null) => {
                     return paperList[0].openAccessPdf.url;
                 }
             },
-            enabled: !!paperTitle,
+            enabled: !!paperTitle && env !== 'DEV' && env !== 'STAGING',
         }
     );
 };

diff --git a/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTable.helpers.ts b/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTable.helpers.ts
@@ -0,0 +1,44 @@
+import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
+
+export const retrieveExtractionTableState = (projectId: string | undefined) => {
+    if (!projectId) return null;
+    try {
+        const parsedState = JSON.parse(
+            window.sessionStorage.getItem(`${projectId}-extraction-table`) || '{}'
+        ) as IExtractionTableState | null;
+
+        if (!parsedState?.columnFilters || !parsedState?.sorting || !parsedState?.studies) {
+            return null;
+        } else {
+            return parsedState;
+        }
+    } catch (e) {
+        return null;
+    }
+};
+
+export const updateExtractionTableStateInStorage = (
+    projectId: string | undefined,
+    studyId: string,
+    newStudyId: string
+) => {
+    if (!projectId) return;
+    const extractionTableState = retrieveExtractionTableState(projectId);
+    if (!extractionTableState) return;
+
+    const foundIndex = extractionTableState.studies.findIndex((id) => id === studyId);
+    if (foundIndex < 0) return;
+
+    extractionTableState.studies[foundIndex] = newStudyId;
+
+    window.sessionStorage.setItem(
+        `${projectId}-extraction-table`,
+        JSON.stringify(extractionTableState)
+    );
+};
+
+export interface IExtractionTableState {
+    columnFilters: ColumnFiltersState;
+    sorting: SortingState;
+    studies: string[];
+}
diff --git a/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTable.tsx b/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTable.tsx
@@ -43,6 +43,7 @@ import { ExtractionTableNameCell, ExtractionTableNameHeader } from './Extraction
 import { ExtractionTablePMIDCell, ExtractionTablePMIDHeader } from './ExtractionTablePMID';
 import { ExtractionTableStatusCell, ExtractionTableStatusHeader } from './ExtractionTableStatus';
 import { ExtractionTableYearCell, ExtractionTableYearHeader } from './ExtractionTableYear';
+import { retrieveExtractionTableState } from './ExtractionTable.helpers';
 
 //allows us to define custom properties for our columns
 declare module '@tanstack/react-table' {
@@ -69,17 +70,11 @@ const ExtractionTable: React.FC = () => {
     });
 
     useEffect(() => {
-        const state = sessionStorage.getItem(`${projectId}-extraction-table`);
+        const state = retrieveExtractionTableState(projectId);
         if (!state) return;
 
-        const parsedState = JSON.parse(state) as {
-            columnFilters: ColumnFiltersState;
-            sorting: SortingState;
-            studies: string[];
-        };
-
-        if (parsedState.columnFilters) setColumnFilters(parsedState.columnFilters);
-        if (parsedState.sorting) setSorting(parsedState.sorting);
+        if (state.columnFilters) setColumnFilters(state.columnFilters);
+        if (state.sorting) setSorting(state.sorting);
     }, [projectId]);
 
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
@@ -159,21 +154,6 @@ const ExtractionTable: React.FC = () => {
                     filterVariant: 'journal-autocomplete',
                 },
             }),
-            // columnHelper.accessor('doi', {
-            //     id: 'doi',
-            //     size: 10,
-            //     minSize: 10,
-            //     maxSize: 10,
-            //     sortingFn: 'alphanumeric',
-            //     enableSorting: true,
-            //     enableColumnFilter: true,
-            //     filterFn: 'includesString',
-            //     cell: ExtractionTableDOICell,
-            //     header: ExtractionTableDOIHeader,
-            //     meta: {
-            //         filterVariant: 'text',
-            //     },
-            // }),
             columnHelper.accessor('pmid', {
                 id: 'pmid',
                 size: 100,

diff --git a/compose/neurosynth-frontend/src/pages/Project/components/ProjectViewMetaAnalyses.tsx b/compose/neurosynth-frontend/src/pages/Project/components/ProjectViewMetaAnalyses.tsx
@@ -1,22 +1,21 @@
 import { Add } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
-import CreateMetaAnalysisSpecificationDialogBase from 'pages/MetaAnalysis/components/CreateMetaAnalysisSpecificationDialogBase';
 import StateHandlerComponent from 'components/StateHandlerComponent/StateHandlerComponent';
 import { useGetMetaAnalysesByIds, useGuard } from 'hooks';
+import useUserCanEdit from 'hooks/useUserCanEdit';
+import { MetaAnalysisReturn } from 'neurosynth-compose-typescript-sdk';
+import CreateMetaAnalysisSpecificationDialogBase from 'pages/MetaAnalysis/components/CreateMetaAnalysisSpecificationDialogBase';
+import ProjectViewMetaAnalysis from 'pages/Project/components/ProjectViewMetaAnalysis';
 import {
     useProjectId,
     useProjectMetaAnalyses,
     useProjectMetaAnalysisCanEdit,
     useProjectUser,
 } from 'pages/Project/store/ProjectStore';
-import { MetaAnalysisReturn } from 'neurosynth-compose-typescript-sdk';
 import { useState } from 'react';
-import { useParams } from 'react-router-dom';
-import ProjectViewMetaAnalysis from 'pages/Project/components/ProjectViewMetaAnalysis';
-import useUserCanEdit from 'hooks/useUserCanEdit';
 
 const ProjectViewMetaAnalyses: React.FC = () => {
-    const { projectId } = useParams<{ projectId: string }>();
+    const projectId = useProjectId();
     const projectUser = useProjectUser();
     const canEdit = useUserCanEdit(projectUser || undefined);
     const projectMetaAnalyses = useProjectMetaAnalyses() || [];