feature/#328 Added enable/disable autosave on settings

src/core/autosave/autosave.hook.ts

@@ -59,11 +59,20 @@ const useAutosave = () => {
     }
   };
 
+  const deleteAutosaveStorage = () => {
+    localStorage.removeItem(AUTOSAVE_KEY);
+  };
+
   useEffect(() => {
     retrieveAutosave();
   }, [AUTOSAVE_KEY]);
 
-  return { retrieveAutosave, startAutosave, stopAutosave };
+  return {
+    retrieveAutosave,
+    startAutosave,
+    stopAutosave,
+    deleteAutosaveStorage,
+  };
 };
 
 export default useAutosave;

src/pods/canvas-settings/canvas-settings.pod.module.css

@@ -9,3 +9,10 @@
   flex-direction: column;
   gap: 20px;
 }
+
+.checkboxAutoSave {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  margin-top: var(--space-xl);
+}

src/pods/canvas-settings/canvas-settings.pod.tsx

@@ -3,28 +3,75 @@ import { Formik, Form } from 'formik';
 
 import { formValidation } from './canvas-settings.validation';
 import classes from './canvas-settings.pod.module.css';
+import useAutosave from '@/core/autosave/autosave.hook';
+import { Checkbox } from '@/common/components';
 interface Props {
   onChangeSettings: () => void;
 }
 export const CanvasSettingsComponent: React.FC<Props> = props => {
   const { onChangeSettings } = props;
+  const { startAutosave, stopAutosave, deleteAutosaveStorage } = useAutosave();
+  const USERSAVE_KEY = 'userSettings';
+
+  const savedSettings = JSON.parse(localStorage.getItem(USERSAVE_KEY) || '{}');
+
+  const initialValues = {
+    autoSave:
+      savedSettings.autoSave !== undefined ? savedSettings.autoSave : true,
+  };
+
+  const [settingsValues, setSettingsValues] = React.useState(initialValues);
+  const [autoSaveToggled, setAutoSaveToggled] = React.useState(false);
+
+  const handleToggleAutoSave = () => {
+    const newAutoSave = !settingsValues.autoSave;
+    setSettingsValues({ ...settingsValues, autoSave: newAutoSave });
+    setAutoSaveToggled(true);
+  };
+
   const handleSubmitSize = () => {
+    if (autoSaveToggled) {
+      if (settingsValues.autoSave) {
+        startAutosave();
+      } else {
+        stopAutosave();
+        deleteAutosaveStorage();
+      }
+    }
+    localStorage.setItem(USERSAVE_KEY, JSON.stringify(settingsValues));
     onChangeSettings();
   };
-  const initialValues = {};
+
+  React.useEffect(() => {
+    setSettingsValues(prevValues => ({
+      ...prevValues,
+      autoSave:
+        savedSettings.autoSave !== undefined ? savedSettings.autoSave : true,
+    }));
+  }, [savedSettings.autoSave]);
 
   return (
     <div className={classes.center}>
       <Formik
         onSubmit={handleSubmitSize}
-        initialValues={initialValues}
+        initialValues={settingsValues}
         validate={formValidation.validateForm}
       >
         {() => (
           <Form>
             <div className={classes.container}>
+              <div className={classes.checkboxAutoSave}>
+                <Checkbox
+                  id="checkboxAutoSave"
+                  onChange={handleToggleAutoSave}
+                  checked={settingsValues.autoSave}
+                />
+                <label htmlFor="checkboxAutoSave">
+                  <span>Toggle Auto Save</span>
+                </label>
+              </div>
               <button type="submit" className="button-secondary">
-                On Change Settings
+                Save Settings
               </button>
             </div>
           </Form>

src/pods/canvas/canvas.pod.tsx

@@ -40,6 +40,8 @@ export const CanvasPod: React.FC = () => {
   const { canvasViewSettings, setScrollPosition, setLoadSample } =
     useCanvasViewSettingsContext();
   const { canvasSize, zoomFactor, loadSample } = canvasViewSettings;
+  const USERSAVE_KEY = 'userSettings';
+  const userSettings = JSON.parse(localStorage.getItem(USERSAVE_KEY) || '{}');
 
   const { isTabletOrMobileDevice } = useDeviceContext();
   // TODO: This is temporary code, once we get load and save
@@ -145,9 +147,12 @@ export const CanvasPod: React.FC = () => {
       setRetrieveAutosaveHasInitialized(true);
     }
 
-    startAutosave();
+    if (userSettings.autoSave) {
+      startAutosave();
+    }
+
     return stopAutosave;
-  }, [canvasSchema]);
+  }, [canvasSchema, userSettings.autoSave]);
 
   React.useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {

src/pods/toolbar/toolbar.pod.tsx

@@ -14,6 +14,7 @@ import {
   RedoButton,
   DeleteButton,
   AboutButton,
+  CanvasSettingButton,
 } from './components';
 import classes from './toolbar.pod.module.css';
 
@@ -31,8 +32,7 @@ export const ToolbarPod: React.FC = () => {
       <RedoButton />
       <ExportButton />
       <DeleteButton />
-      {/* At the moment there are no settings to display. When autosave is implemented, uncomment CanvasSettingButton */}
-      {/* <CanvasSettingButton /> */}
+      <CanvasSettingButton />
       <AboutButton />
       <ThemeToggleButton darkLabel="Dark Mode" lightLabel="Light Mode" />
     </div>