Add a new feature to reload the task list automatically.

remap-keys · Nov 17, 2023 · 0468a0c · 0468a0c
1 parent 15bc284
commit 0468a0c
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 4 deletions.
diff --git a/src/actions/catalog.action.ts b/src/actions/catalog.action.ts
@@ -317,7 +317,6 @@ export const catalogActionsThunk = {
       dispatch: ThunkDispatch<RootState, undefined, ActionTypes>,
       getState: () => RootState
     ) => {
-      dispatch(CatalogAppActions.updatePhase('processing'));
       dispatch(StorageActions.updateFirmwareBuildingTasks([]));
       const { storage } = getState();
       const result = await storage.instance!.fetchFirmwareBuildingTasks(
@@ -328,7 +327,6 @@ export const catalogActionsThunk = {
         return;
       }
       dispatch(StorageActions.updateFirmwareBuildingTasks(result.value));
-      dispatch(CatalogAppActions.updatePhase('build'));
     },
 
   deleteFirmwareBuildingTask:

diff --git a/src/components/catalog/keyboard/build/CatalogBuild.tsx b/src/components/catalog/keyboard/build/CatalogBuild.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import './CatalogBuild.scss';
 import {
   CatalogBuildActionsType,
@@ -10,10 +10,12 @@ import {
   Card,
   CardActions,
   CardContent,
+  FormControlLabel,
   Paper,
   Step,
   StepLabel,
   Stepper,
+  Switch,
   Tab,
   Table,
   TableBody,
@@ -51,6 +53,42 @@ export default function CatalogBuild(props: CatalogBuildProps) {
     useState<boolean>(false);
   const [targetDeleteTask, setTargetDeleteTask] =
     useState<IFirmwareBuildingTask | null>(null);
+  const [autoReload, setAutoReload] = useState<boolean>(false);
+  const autoStopRef = useRef<number | null>(null);
+
+  const autoReloadRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (autoReload) {
+      if (autoReloadRef.current !== null) return;
+      const reload = () => {
+        props.updateFirmwareBuildingTasks!(props.definitionDocument!.id);
+        autoReloadRef.current = window.setTimeout(reload, 30000);
+      };
+      reload();
+      autoStopRef.current = window.setTimeout(() => {
+        setAutoReload(false);
+      }, 180000);
+    } else {
+      if (autoReloadRef.current !== null) {
+        window.clearTimeout(autoReloadRef.current);
+        autoReloadRef.current = null;
+      }
+      if (autoStopRef.current !== null) {
+        window.clearTimeout(autoStopRef.current);
+        autoStopRef.current = null;
+      }
+    }
+    return () => {
+      if (autoReloadRef.current !== null) {
+        window.clearTimeout(autoReloadRef.current);
+        autoReloadRef.current = null;
+      }
+      if (autoStopRef.current !== null) {
+        window.clearTimeout(autoStopRef.current);
+        autoStopRef.current = null;
+      }
+    };
+  }, [autoReload]);
 
   const createDefaultParameterValues = (
     files: IBuildableFirmwareFile[]
@@ -200,13 +238,23 @@ export default function CatalogBuild(props: CatalogBuildProps) {
     }
   };
 
+  const onChangeAutoReload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setAutoReload(event.target.checked);
+  };
+
   return (
     <div className="catalog-build-container">
       <React.Fragment>
         <Paper sx={{ p: '16px', mb: '32px' }}>
           <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <FormControlLabel
+              control={
+                <Switch checked={autoReload} onChange={onChangeAutoReload} />
+              }
+              label="Auto"
+            />
             <Button
-              variant="text"
+              variant="outlined"
               sx={{ mr: '32px' }}
               onClick={onClickReload}
               disabled={!props.signedIn}