feat: progress bar in my sites

api/src/couchdb/initialise.ts

@@ -240,7 +240,7 @@ export const initialiseAuthDb = async (db: PouchDB.Database): Promise<void> => {
   } catch (err: any) {
     // 404 for not found
     if (err.status !== 404) {
-        console.log("Error was not 404")
+      console.log('Error was not 404');
       throw err;
     }
 

app/src/gui/components/notebook/record_table.tsx

@@ -42,6 +42,7 @@
 import {
   ProjectID,
   ProjectUIViewsets,
+  Record,
   RecordMetadata,
   getFullRecordData,
   getMetadataForAllRecords,
@@ -53,8 +54,9 @@
 import {logError} from '../../../logging';
 import ProgressBar from '../progress-bar';
 import {percentComplete, requiredFields} from '../../../lib/form-utils';
 import {getUiSpecForProject} from '../../../uiSpecification';
 import {useQuery} from '@tanstack/react-query';
+import {useGetUISpec} from '../../../lib/queries';
 
 type RecordsTableProps = {
   project_id: ProjectID;
@@ -77,10 +79,7 @@
 function RecordsTable(props: RecordsTableProps) {
   const {project_id, maxRows, rows, loading} = props;
 
-  const {data: uiSpec} = useQuery({
-    queryKey: ['uiSpec', project_id],
-    queryFn: () => getUiSpecForProject(project_id),
-  });
+  const {data: uiSpec} = useGetUISpec(project_id);
 
   // default for mobileView is on (collapsed table)
   const [mobileViewSwitchValue, setMobileViewSwitchValue] =
@@ -253,14 +252,6 @@
           minWidth: 150,
           filterable: true,
           renderCell: (params: GridCellParams) => {
-            const {project_id, record_id, revision_id} = params.row;
-
-            const {data: record} = useQuery({
-              queryKey: ['recordData', project_id, record_id, revision_id],
-              queryFn: () =>
-                getFullRecordData(project_id, record_id, revision_id),
-            });
-
             return (
               <Box sx={{width: '100%', my: 1}}>
                 <Grid
@@ -312,10 +303,10 @@
                 )}
                 <ProgressBar
                   percentage={
-                    uiSpec && record
+                    uiSpec && params.row.record
                       ? percentComplete(
                           requiredFields(uiSpec.fields),
-                          record.data
+                          params.row.record.data
                         )
                       : 0
                   }
@@ -448,29 +439,45 @@
   );
 }
 
+interface RecordMetaDataExtended extends RecordMetadata {
+  record: Record;
+}
+
 export function RecordsBrowseTable(props: RecordsBrowseTableProps) {
   const [query, setQuery] = React.useState('');
-  const [pouchData, setPouchData] = React.useState(
-    undefined as RecordMetadata[] | undefined
-  );
+  const [pouchData, setPouchData] = React.useState<
+    RecordMetaDataExtended[] | undefined
+  >(undefined);
 
   useEffect(() => {
     const getData = async () => {
       try {
-        if (query.length === 0) {
-          const ma = await getMetadataForAllRecords(
-            props.project_id,
-            props.filter_deleted
-          );
-          setPouchData(ma);
-        } else {
-          const ra = await getRecordsWithRegex(
-            props.project_id,
-            query,
-            props.filter_deleted
+        const records = (
+          query.length === 0
+            ? await getMetadataForAllRecords(
+                props.project_id,
+                props.filter_deleted
+              )
+            : await getRecordsWithRegex(
+                props.project_id,
+                query,
+                props.filter_deleted
+              )
+        ) as RecordMetaDataExtended[];
+
+        for (const record of records) {
+          const data = await getFullRecordData(
+            record.project_id,
+            record.record_id,
+            record.revision_id
           );
-          setPouchData(ra);
+
+          if (!data) continue;
+
+          record.record = data;
         }
+
+        setPouchData(records);
       } catch (err) {
         logError(err); // unable to load records
         setPouchData(undefined);

app/src/lib/queries.ts

@@ -0,0 +1,9 @@
+import {useQuery} from '@tanstack/react-query';
+import {getUiSpecForProject} from '../uiSpecification';
+
+export const useGetUISpec = (project_id: string) => {
+  return useQuery({
+    queryKey: ['uiSpec', project_id],
+    queryFn: () => getUiSpecForProject(project_id),
+  });
+};