Display a loading bar for the merging process

specifyweb/frontend/js_src/lib/components/Merging/index.tsx

@@ -11,7 +11,7 @@ import { treeText } from '../../localization/tree';
 import { ajax } from '../../utils/ajax';
 import { Http } from '../../utils/ajax/definitions';
 import { f } from '../../utils/functools';
-import type { RA } from '../../utils/types';
+import type { GetSet, RA } from '../../utils/types';
 import { filterArray } from '../../utils/types';
 import { multiSortFunction, removeKey } from '../../utils/utils';
 import { ErrorMessage } from '../Atoms';
@@ -39,6 +39,9 @@ import { userPreferences } from '../Preferences/userPreferences';
 import { SpecifyResource } from '../DataModel/legacyTypes';
 import { SaveBlockedDialog } from '../Forms/Save';
 import { useBooleanState } from '../../hooks/useBooleanState';
+import { softFail } from '../Errors/Crash';
+import { wbText } from '../../localization/workbench';
+import { RemainingLoadingTime } from '../WorkBench/RemainingLoadingTime';
 
 export const recordMergingTables = new Set<keyof Tables>(['Agent']);
 
@@ -171,6 +174,16 @@ function Merging({
     true
   );
 
+  const [mergeId, setMergeId] = React.useState('');
+
+  const [loadingBar, setLoadingBar] = React.useState(false);
+
+  React.useEffect(() => {
+    if (mergeId !== '') {
+      setLoadingBar(true);
+    }
+  }, [mergeId]);
+
   return records === undefined || merged === undefined ? null : (
     <MergeDialogContainer
       buttons={
@@ -199,6 +212,9 @@ function Merging({
       onClose={handleClose}
     >
       {typeof error === 'string' && <ErrorMessage>{error}</ErrorMessage>}
+      {loadingBar && (
+        <Status mergingId={mergeId} loadingBar={[loadingBar, setLoadingBar]} />
+      )}
       <CompareRecords
         formId={id('form')}
         needUpdate={needUpdate}
@@ -239,6 +255,7 @@ function Merging({
                 errorMode: 'dismissible',
               }
             ).then((response) => {
+              setMergeId(response.data);
               if (response.status === Http.NOT_ALLOWED) {
                 setError(response.data);
                 return;
@@ -248,6 +265,7 @@ function Merging({
               }
 
               setError(undefined);
+              // setLoadingBar(true);
               handleClose();
             })
           );
@@ -261,9 +279,11 @@ function Merging({
 function MergeButton<SCHEMA extends AnySchema>({
   id,
   mergeResource,
-}: {
+}: // mergeId,
+{
   readonly id: (suffix: string) => string;
   readonly mergeResource: SpecifyResource<SCHEMA>;
+  // readonly mergeId: string;
 }): JSX.Element {
   const [formId] = React.useState(id('form'));
   const [saveBlocked, setSaveBlocked] = React.useState(false);
@@ -361,6 +381,58 @@ function MergeButton<SCHEMA extends AnySchema>({
   );
 }
 
+export function Status({
+  mergingId,
+  loadingBar: [_, setLoadingBar],
+}: {
+  readonly mergingId: string;
+  readonly loadingBar: GetSet<boolean>;
+}): JSX.Element {
+  const [status, setStatus] = React.useState<string>();
+  const [total, setTotal] = React.useState<number>();
+  const [current, setCurrent] = React.useState<number>();
+
+  React.useEffect(() => {
+    const fetchStatus = () =>
+      void ajax(`/api/merging_status/${mergingId}/`, {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        headers: { Accept: 'application/json' },
+      })
+        .then((data) => {
+          console.log(data);
+          if (data === null) return undefined;
+          else {
+            // setStatus(data.status);
+            // setTotal(data.total);
+            // setCurrent(data.current);
+            globalThis.setTimeout(fetchStatus, 2000);
+          }
+          return undefined;
+        })
+        .catch(softFail);
+    fetchStatus();
+  }, [mergingId]);
+
+  return (
+    <Dialog
+      buttons={
+        <Button.Danger onClick={() => setLoadingBar(false)}>
+          {wbText.stop()}
+        </Button.Danger>
+      }
+      className={{ container: dialogClassNames.narrowContainer }}
+      header={mergingText.mergeRecords()}
+      onClose={undefined}
+    >
+      {'test'}
+      {status}
+      {current !== undefined && total !== undefined ? (
+        <RemainingLoadingTime current={current} total={total} />
+      ) : null}
+    </Dialog>
+  );
+}
+
 export function MergeDialogContainer({
   children,
   buttons,