Fix up activation of notebooks

Signed-off-by: Steve Cassidy <[email protected]>
FAIMS · Jun 21, 2024 · a50cf39 · a50cf39
1 parent e393d60
commit a50cf39
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 20 deletions.
diff --git a/src/gui/components/notebook/settings/sync_switch.tsx b/src/gui/components/notebook/settings/sync_switch.tsx
@@ -51,7 +51,7 @@ type NotebookSyncSwitchProps = {
   project: ProjectInformation;
   showHelperText: boolean;
   project_status: string | undefined;
-  handleTabChange?: Function;
+  handleNotebookActivation?: Function;
 };
 
 async function listenSync(
@@ -60,6 +60,7 @@ async function listenSync(
 ): Promise<any> {
   return listenSyncingProject(active_id, callback); // the callback here will set isSyncing
 }
+
 export default function NotebookSyncSwitch(props: NotebookSyncSwitchProps) {
   const {project} = props;
   const {dispatch} = useContext(store);
@@ -99,7 +100,8 @@ export default function NotebookSyncSwitch(props: NotebookSyncSwitchProps) {
       .then(async () => {
         await handleStartSync();
         setIsWorking(false); // unblock the UI
-        props.handleTabChange !== undefined && props.handleTabChange('1'); // switch to "Activated" tab
+        console.log('calling handleNotebookActivation', props.handleNotebookActivation);
+        props.handleNotebookActivation !== undefined && props.handleNotebookActivation();
       })
       .catch(e => {
         dispatch({

diff --git a/src/gui/components/workspace/notebooks.tsx b/src/gui/components/workspace/notebooks.tsx
@@ -18,9 +18,9 @@
  *   TODO
  */
 
-import React, {useEffect, useMemo, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useNavigate} from 'react-router-dom';
-import {Box, Paper, Typography, Alert, Button, Stack} from '@mui/material';
+import {Box, Paper, Typography, Button, Stack} from '@mui/material';
 import FolderIcon from '@mui/icons-material/Folder';
 
 import {
@@ -31,8 +31,7 @@ import {
 } from '@mui/x-data-grid';
 
 import * as ROUTES from '../../../constants/routes';
-import {getAllProjectList, listenProjectList} from '../../../databaseAccess';
-import {useEventedPromise} from '../../pouchHook';
+import {getAllProjectList} from '../../../databaseAccess';
 import {ProjectInformation, TokenContents} from 'faims3-datamodel';
 import CircularLoading from '../../components/ui/circular_loading';
 import ProjectStatus from '../notebook/settings/status';
@@ -57,10 +56,10 @@ type NoteBookListProps = {
 export default function NoteBooks(props: NoteBookListProps) {
   const [loading, setLoading] = useState<boolean>(true);
   const [counter, setCounter] = React.useState(5);
-  const [value, setValue] = React.useState('1');
+  const [tabID, setTabID] = React.useState('1');
 
   const handleChange = (event: React.SyntheticEvent, newValue: string) => {
-    setValue(newValue);
+    setTabID(newValue);
   };
 
   const history = useNavigate();
@@ -71,18 +70,20 @@ export default function NoteBooks(props: NoteBookListProps) {
     ProjectInformation[]
   >([]);
 
-  useEffect(() => {
+  const updateProjectList = () => {
     getAllProjectList().then(projectList => {
+      console.log('got projects', projectList);
       setPouchProjectList(projectList);
       setLoading(false);
     });
+  };
+
+  useEffect(() => {
+    updateProjectList();
 
     if (counter === 0) {
       if (pouchProjectList.length === 0) {
-        getAllProjectList().then(projectList => {
-          setPouchProjectList(projectList);
-          setLoading(false);
-        });
+        updateProjectList();
         // reset counter
         setCounter(5);
       }
@@ -91,6 +92,11 @@ export default function NoteBooks(props: NoteBookListProps) {
     }
   }, [counter]);
 
+  const handleNotebookActivation = () => {
+    updateProjectList();
+    setTabID('1'); // select the activated tab
+  };
+
   const handleRowClick: GridEventListener<'rowClick'> = params => {
     if (params.row.is_activated) {
       history(ROUTES.NOTEBOOK + params.row.project_id);
@@ -164,7 +170,7 @@ export default function NoteBooks(props: NoteBookListProps) {
               project={params.row}
               showHelperText={false}
               project_status={params.row.status}
-              handleTabChange={setValue}
+              handleNotebookActivation={handleNotebookActivation}
             />
           ),
         },
@@ -227,7 +233,7 @@ export default function NoteBooks(props: NoteBookListProps) {
               project={params.row}
               showHelperText={false}
               project_status={params.row.status}
-              handleTabChange={setValue}
+              handleNotebookActivation={handleNotebookActivation}
             />
           ),
         },
@@ -250,22 +256,43 @@ export default function NoteBooks(props: NoteBookListProps) {
               variant="text"
               size={'small'}
               onClick={() => {
-                setValue('2');
+                setTabID('2');
               }}
             >
               Available
             </Button>{' '}
             tab and click the activate button.
           </Typography>
-          <TabContext value={pouchProjectList.filter(r => r.is_activated).length === 0 ? '2' : value}>
+          <TabContext
+            value={
+              pouchProjectList.filter(r => r.is_activated).length === 0
+                ? '2'
+                : tabID
+            }
+          >
             <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
               <TabList onChange={handleChange} aria-label="tablist">
                 <Tab
-                  label={'Activated (' + pouchProjectList.filter(r => r.is_activated).length + ')'}
+                  label={
+                    'Activated (' +
+                    pouchProjectList.filter(r => r.is_activated).length +
+                    ')'
+                  }
                   value="1"
-                  disabled={pouchProjectList.filter(r => r.is_activated).length === 0 ? true : false}
+                  disabled={
+                    pouchProjectList.filter(r => r.is_activated).length === 0
+                      ? true
+                      : false
+                  }
+                />
+                <Tab
+                  label={
+                    'Available (' +
+                    pouchProjectList.filter(r => !r.is_activated).length +
+                    ')'
+                  }
+                  value="2"
                 />
-                <Tab label={'Available (' + pouchProjectList.filter(r => r.is_activated).length + ')'} value="2" />
               </TabList>
             </Box>
             <TabPanel value="1" sx={{px: 0}}>