Migrate Workbench to React

specifyweb/frontend/js_src/lib/components/WbActions/WbNoUploadPlan.tsx

@@ -35,7 +35,7 @@ export function WbNoUploadPlan({
 
   return (
     <>
-      {noUploadPlan ? (
+      {noUploadPlan && (
         <Dialog
           buttons={
             <>
@@ -50,7 +50,7 @@ export function WbNoUploadPlan({
         >
           {wbPlanText.noUploadPlanDescription()}
         </Dialog>
-      ) : undefined}
+      )}
     </>
   );
 }

specifyweb/frontend/js_src/lib/components/WbActions/WbRollback.tsx

@@ -16,26 +16,26 @@ export function WbRollback({
   readonly datasetId: number;
   readonly triggerStatusComponent: (mode: WbStatus) => void;
 }): JSX.Element {
-  const [rollback, handleOpen, handleClose] = useBooleanState();
+  const [confirmRollback, handleOpen, handleClose] = useBooleanState();
 
   const handleRollback = () => triggerStatusComponent('unupload');
 
   return (
     <>
       <Button.Small
         aria-haspopup="dialog"
-        aria-pressed={rollback}
+        aria-pressed={confirmRollback}
         onClick={handleOpen}
       >
         {wbText.rollback()}
       </Button.Small>
-      {rollback ? (
+      {confirmRollback && (
         <RollbackConfirmation
           datasetId={datasetId}
           onClose={handleClose}
           onRollback={handleRollback}
         />
-      ) : undefined}
+      )}
     </>
   );
 }

specifyweb/frontend/js_src/lib/components/WbActions/WbSave.tsx

@@ -8,7 +8,6 @@ import { ping } from '../../utils/ajax/ping';
 import { overwriteReadOnly } from '../../utils/types';
 import { Button } from '../Atoms/Button';
 import { className } from '../Atoms/className';
-import { LoadingContext } from '../Core/Contexts';
 import { loadingBar } from '../Molecules';
 import { Dialog } from '../Molecules/Dialog';
 import type { Workbench } from '../WorkBench/WbView';
@@ -28,7 +27,6 @@ export function WbSave({
 }): JSX.Element {
   const [showProgressBar, openProgressBar, closeProgressBar] =
     useBooleanState();
-  const loading = React.useContext(LoadingContext);
 
   const handleSave = () => {
     // Clear validation
@@ -39,24 +37,22 @@ export function WbSave({
     openProgressBar();
 
     // Send data
-    loading(
-      ping(`/api/workbench/rows/${workbench.dataset.id}/`, {
-        method: 'PUT',
-        body: workbench.data,
-        expectedErrors: [Http.NO_CONTENT, Http.NOT_FOUND],
-      })
-        .then((status) => checkDeletedFail(status))
-        .then(() => {
-          handleSpreadsheetUpToDate();
-          workbench.cells.cellMeta = [];
-          workbench.utils?.searchCells(
-            { key: 'SettingsChange' },
-            searchRef.current
-          );
-          workbench.hot?.render();
-          closeProgressBar();
-        })
-    );
+    ping(`/api/workbench/rows/${workbench.dataset.id}/`, {
+      method: 'PUT',
+      body: workbench.data,
+      expectedErrors: [Http.NO_CONTENT, Http.NOT_FOUND],
+    })
+      .then((status) => checkDeletedFail(status))
+      .then(() => {
+        handleSpreadsheetUpToDate();
+        workbench.cells.cellMeta = [];
+        workbench.utils?.searchCells(
+          { key: 'SettingsChange' },
+          searchRef.current
+        );
+        workbench.hot?.render();
+        closeProgressBar();
+      });
   };
 
   return (
@@ -69,15 +65,15 @@ export function WbSave({
       >
         {commonText.save()}
       </Button.Small>
-      {showProgressBar ? (
+      {showProgressBar && (
         <Dialog
           buttons={undefined}
           header={wbText.saving()}
           onClose={closeProgressBar}
         >
           {loadingBar}
         </Dialog>
-      ) : undefined}
+      )}
     </>
   );
 }

specifyweb/frontend/js_src/lib/components/WbActions/WbUpload.tsx

@@ -53,7 +53,7 @@ export function WbUpload({
       >
         {wbText.upload()}
       </Button.Small>
-      {showUpload ? (
+      {showUpload && (
         <Dialog
           buttons={
             <>
@@ -68,7 +68,7 @@ export function WbUpload({
         >
           {wbText.startUploadDescription()}
         </Dialog>
-      ) : undefined}
+      )}
     </>
   );
 }

specifyweb/frontend/js_src/lib/components/WbActions/WbValidate.tsx

@@ -35,7 +35,7 @@ export function WbValidate({
 
   return (
     <>
-      {canLiveValidate ? (
+      {canLiveValidate && (
         <Button.Small
           aria-pressed={validation.validationMode === 'live'}
           disabled={!isMapped || isResultsOpen}
@@ -57,7 +57,7 @@ export function WbValidate({
               : wbText.dataCheckOn()
             : wbText.dataCheck()}
         </Button.Small>
-      ) : undefined}
+      )}
       <Button.Small
         aria-haspopup="dialog"
         disabled={hasUnsavedChanges || !isMapped}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { LocalizedString } from 'typesafe-i18n';
 
 import { useBooleanState } from '../../hooks/useBooleanState';
 import { commonText } from '../../localization/common';
@@ -10,8 +11,7 @@ import { LoadingContext } from '../Core/Contexts';
 import { ErrorBoundary } from '../Errors/ErrorBoundary';
 import { Dialog } from '../Molecules/Dialog';
 import { hasPermission } from '../Permissions/helpers';
-import type { Status } from '../WbPlanView/Wrapped';
-import type { Dataset } from '../WbPlanView/Wrapped';
+import type { Dataset, Status } from '../WbPlanView/Wrapped';
 import type { WbCellCounts } from '../WorkBench/CellMeta';
 import type { WbMapping } from '../WorkBench/mapping';
 import { CreateRecordSetButton } from '../WorkBench/RecordSet';
@@ -57,13 +57,14 @@ export function WbActions({
     useBooleanState();
   const [operationCompleted, openOperationCompleted, closeOperationCompleted] =
     useBooleanState();
-  const { mode, refreshInitiatorAborted, ...actions } = useWbActions({
-    datasetId: dataset.id,
-    onRefresh: handleRefresh,
-    checkDeletedFail,
-    onOpenStatus: openStatus,
-    workbench,
-  });
+  const { mode, refreshInitiatorAborted, startUpload, triggerStatusComponent } =
+    useWbActions({
+      datasetId: dataset.id,
+      onRefresh: handleRefresh,
+      checkDeletedFail,
+      onOpenStatus: openStatus,
+      workbench,
+    });
 
   const message = mode === undefined ? undefined : getMessage(cellCounts, mode);
 
@@ -90,7 +91,7 @@ export function WbActions({
             hasUnsavedChanges={hasUnsavedChanges}
             isMapped={isMapped}
             isResultsOpen={isResultsOpen}
-            startUpload={actions.startUpload}
+            startUpload={startUpload}
             validation={workbench.validation}
           />
         </ErrorBoundary>
@@ -116,7 +117,7 @@ export function WbActions({
         <ErrorBoundary dismissible>
           <WbRollback
             datasetId={dataset.id}
-            triggerStatusComponent={actions.triggerStatusComponent}
+            triggerStatusComponent={triggerStatusComponent}
           />
         </ErrorBoundary>
       ) : undefined}
@@ -127,7 +128,7 @@ export function WbActions({
             hasUnsavedChanges={hasUnsavedChanges}
             mappings={mappings}
             openNoUploadPlan={openNoUploadPlan}
-            startUpload={actions.startUpload}
+            startUpload={startUpload}
           />
         </ErrorBoundary>
       ) : undefined}
@@ -180,7 +181,7 @@ export function WbActions({
           }}
         />
       ) : undefined}
-      {operationCompleted ? (
+      {operationCompleted && (
         <Dialog
           buttons={
             <>
@@ -203,8 +204,8 @@ export function WbActions({
         >
           {message?.message}
         </Dialog>
-      ) : undefined}
-      {operationAborted ? (
+      )}
+      {operationAborted && (
         <Dialog
           buttons={commonText.close()}
           header={
@@ -222,7 +223,7 @@ export function WbActions({
             ? wbText.rollbackCanceledDescription()
             : wbText.uploadCanceledDescription()}
         </Dialog>
-      ) : undefined}
+      )}
     </>
   );
 }
@@ -239,7 +240,12 @@ function useWbActions({
   readonly checkDeletedFail: (statusCode: number) => void;
   readonly onRefresh: () => void;
   readonly onOpenStatus: () => void;
-}) {
+}): {
+  readonly mode: WbStatus | undefined;
+  readonly refreshInitiatorAborted: React.MutableRefObject<boolean>;
+  readonly startUpload: (newMode: WbStatus) => void;
+  readonly triggerStatusComponent: (newMode: WbStatus) => void;
+} {
   const [mode, setMode] = React.useState<WbStatus | undefined>(undefined);
   const refreshInitiatorAborted = React.useRef<boolean>(false);
   const loading = React.useContext(LoadingContext);
@@ -250,12 +256,11 @@ function useWbActions({
       ping(`/api/workbench/${newMode}/${datasetId}/`, {
         method: 'POST',
         expectedErrors: [Http.CONFLICT],
+      }).then((statusCode): void => {
+        checkDeletedFail(statusCode);
+        checkConflictFail(statusCode);
+        triggerStatusComponent(newMode);
       })
-        .then((statusCode): void => {
-          checkDeletedFail(statusCode);
-          checkConflictFail(statusCode);
-        })
-        .then(() => triggerStatusComponent(newMode))
     );
   };
 
@@ -282,7 +287,13 @@ function useWbActions({
   };
 }
 
-function getMessage(cellCounts: WbCellCounts, mode: WbStatus) {
+function getMessage(
+  cellCounts: WbCellCounts,
+  mode: WbStatus
+): {
+  readonly header: LocalizedString;
+  readonly message: JSX.Element | LocalizedString;
+} {
   const messages = {
     validate:
       cellCounts.invalidCells === 0

specifyweb/frontend/js_src/lib/components/WbActions/useResults.ts

@@ -2,6 +2,7 @@ import type Handsontable from 'handsontable';
 import React from 'react';
 
 import { useBooleanState } from '../../hooks/useBooleanState';
+import { f } from '../../utils/functools';
 import { getHotPlugin, identifyDefaultValues } from '../WorkBench/handsontable';
 import type { Workbench } from '../WorkBench/WbView';
 
@@ -13,32 +14,36 @@ export function useResults({
   readonly hot: Handsontable | undefined;
   readonly workbench: Workbench;
   readonly triggerDatasetRefresh: () => void;
-}) {
+}): {
+  readonly showResults: boolean;
+  readonly closeResults: () => void;
+  readonly toggleResults: () => void;
+} {
   const [showResults, _, closeResults, toggleResults] = useBooleanState();
 
   const initialHiddenRows = React.useMemo(
     () =>
       hot === undefined ? [] : getHotPlugin(hot, 'hiddenRows').getHiddenRows(),
-    [hot]
+    [hot, workbench.dataset.columns]
   );
   const initialHiddenCols = React.useMemo(
     () =>
       hot === undefined
         ? []
         : getHotPlugin(hot, 'hiddenColumns').getHiddenColumns(),
-    [hot]
+    [hot, workbench.dataset.columns]
   );
 
   // Makes the hot changes required for upload view results
   React.useEffect(() => {
     if (hot === undefined) return;
 
-    const rowsToInclude = new Set();
-    const colsToInclude = new Set();
+    const rowsToInclude = new Set<number>();
+    const colsToInclude = new Set<number>();
     Object.entries(workbench.cells.cellMeta).forEach(([physicalRow, rowMeta]) =>
       rowMeta.forEach((metaArray, physicalCol) => {
         if (!workbench.cells.getCellMetaFromArray(metaArray, 'isNew')) return;
-        rowsToInclude.add((physicalRow as unknown as number) | 0);
+        rowsToInclude.add(f.fastParseInt(physicalRow));
         colsToInclude.add(physicalCol);
       })
     );

specifyweb/frontend/js_src/lib/components/WbToolkit/CoordinateConverter.tsx

@@ -6,6 +6,7 @@ import { useCachedState } from '../../hooks/useCachedState';
 import { commonText } from '../../localization/common';
 import { localityText } from '../../localization/locality';
 import { wbText } from '../../localization/workbench';
+import { f } from '../../utils/functools';
 import type { ConversionFunction } from '../../utils/latLong';
 import { Lat, Long } from '../../utils/latLong';
 import type { RA, RR } from '../../utils/types';
@@ -135,13 +136,13 @@ function CoordinateConverter({
   >(undefined);
   const [showDirection, setShowDirection] = React.useState<boolean>(false);
 
-  const changeCount = React.useRef<number>(0);
+  const changeCountRef = React.useRef<number>(0);
 
   // List of coordinate columns
   const columnsToWorkWith = React.useMemo(
     () =>
       Object.keys(coordinateColumns).map((physicalCol) =>
-        hot.toVisualColumn(Number.parseInt(physicalCol))
+        hot.toVisualColumn(f.fastParseInt(physicalCol))
       ),
     []
   );
@@ -205,7 +206,7 @@ function CoordinateConverter({
         return value !== data[physicalRow][physicalCol];
       });
     if (changes.length > 0) {
-      changeCount.current += 1;
+      changeCountRef.current += 1;
       setHotData(hot, changes);
     }
   }, [
@@ -231,7 +232,9 @@ function CoordinateConverter({
       modal={false}
       onClose={(): void => {
         hot.batch(() =>
-          Array.from({ length: changeCount.current }).forEach(() => hot.undo())
+          Array.from({ length: changeCountRef.current }).forEach(() =>
+            hot.undo()
+          )
         );
         handleClose();
       }}