Merge pull request #436 from Lemoncode/feature/#328-enable-disable-au…

…tosave-on-settings [READY_TO_REVIEW]feature/#328 Enable disable autosave on settings
Lemoncode · Apr 10, 2024 · ce37145 · ce37145
2 parents aac14a9 + 8a49f8b
commit ce37145
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 8 deletions.
diff --git a/src/core/autosave/autosave.hook.ts b/src/core/autosave/autosave.hook.ts
@@ -12,17 +12,18 @@ const useAutosave = () => {
   const AUTOSAVE_KEY = 'autoSaveFile';
 
   const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const autoSaveRef = useRef<boolean | null>(null);
 
   const { canvasSchema, setCanvasSchema } = useCanvasSchemaContext();
-  const { filename, setFilename, setLoadSample } =
+  const { filename, setFilename, setLoadSample, autoSave } =
     useCanvasViewSettingsContext();
 
   const [autosaveError, setAutosaveError] = useState(0);
 
   const autosaveHandler = () => {
     if (autosaveError > 1) stopAutosave();
 
-    if (canvasSchema.tables.length !== 0) {
+    if (canvasSchema.tables.length !== 0 && autoSave) {
       saveToLocal(
         AUTOSAVE_KEY,
         {
@@ -59,11 +60,30 @@ const useAutosave = () => {
     }
   };
 
+  const deleteAutosaveStorage = () => {
+    localStorage.removeItem(AUTOSAVE_KEY);
+  };
+
   useEffect(() => {
     retrieveAutosave();
   }, [AUTOSAVE_KEY]);
 
-  return { retrieveAutosave, startAutosave, stopAutosave };
+  useEffect(() => {
+    autoSaveRef.current = autoSave;
+    if (autoSaveRef.current) {
+      startAutosave();
+    } else {
+      stopAutosave();
+      deleteAutosaveStorage();
+    }
+  }, [autoSave]);
+
+  return {
+    retrieveAutosave,
+    startAutosave,
+    stopAutosave,
+    deleteAutosaveStorage,
+  };
 };
 
 export default useAutosave;
diff --git a/src/core/providers/canvas-view-settings/canvas-view-settings.model.ts b/src/core/providers/canvas-view-settings/canvas-view-settings.model.ts
@@ -30,4 +30,6 @@ export interface CanvasViewSettingsContextModel {
   zoomIn: () => void;
   zoomOut: () => void;
   setLoadSample: (loadSample: boolean) => void;
+  autoSave: boolean;
+  setAutoSave: (autoSave: boolean) => void;
 }
diff --git a/src/core/providers/canvas-view-settings/canvas-view-settings.provider.tsx b/src/core/providers/canvas-view-settings/canvas-view-settings.provider.tsx
@@ -5,6 +5,10 @@ import {
 } from './canvas-view-settings.model';
 import { CanvasViewSettingsContext } from './canvas-view-settings.context';
 import { Coords, Size } from '@/core/model';
+import {
+  retrieveValueFromLocalStorage,
+  saveValueToLocalStorage,
+} from '@/common/local-storage';
 
 interface Props {
   children: React.ReactNode;
@@ -30,6 +34,8 @@ const DEFAULT_ZOOM_FACTOR = isMobile
     ? DEFAULT_TABLET_ZOOM_FACTOR
     : DEFAULT_DESKTOP_ZOOM_FACTOR;
 
+const USERSAVE_KEY = 'userSettings';
+
 export const CanvasViewSettingsProvider: React.FC<Props> = props => {
   const { children } = props;
   const [canvasViewSettings, setCanvasViewSettings] =
@@ -41,6 +47,19 @@ export const CanvasViewSettingsProvider: React.FC<Props> = props => {
     y: 0,
   });
 
+  const savedSettingsObject = retrieveValueFromLocalStorage(USERSAVE_KEY);
+
+  const initialValue =
+    savedSettingsObject && savedSettingsObject.autoSave !== undefined
+      ? savedSettingsObject.autoSave
+      : true;
+
+  const [autoSave, setAutoSave] = React.useState<boolean>(initialValue);
+
+  React.useEffect(() => {
+    saveValueToLocalStorage(USERSAVE_KEY, { autoSave: autoSave });
+  }, [autoSave]);
+
   const zoomIn = () =>
     setCanvasViewSettings(canvasViewSettings => ({
       ...canvasViewSettings,
@@ -86,6 +105,8 @@ export const CanvasViewSettingsProvider: React.FC<Props> = props => {
         setScrollPosition,
         setFilename,
         setLoadSample,
+        autoSave,
+        setAutoSave,
       }}
     >
       {children}

diff --git a/src/pods/canvas-settings/canvas-settings.pod.module.css b/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);
+}
diff --git a/src/pods/canvas-settings/canvas-settings.pod.tsx b/src/pods/canvas-settings/canvas-settings.pod.tsx
@@ -3,28 +3,56 @@ import { Formik, Form } from 'formik';
 
 import { formValidation } from './canvas-settings.validation';
 import classes from './canvas-settings.pod.module.css';
+
+import { Checkbox } from '@/common/components';
+import { useCanvasViewSettingsContext } from '@/core/providers';
 interface Props {
   onChangeSettings: () => void;
 }
 export const CanvasSettingsComponent: React.FC<Props> = props => {
   const { onChangeSettings } = props;
+  const { autoSave, setAutoSave } = useCanvasViewSettingsContext();
+  const [changedValue, setChangedValue] = React.useState<boolean>(false);
+
+  const handleCheckboxChange = () => {
+    setChangedValue(!changedValue);
+  };
+
   const handleSubmitSize = () => {
+    setAutoSave(changedValue);
     onChangeSettings();
   };
-  const initialValues = {};
+
+  React.useEffect(() => {
+    setChangedValue(autoSave);
+  }, [autoSave]);
 
   return (
     <div className={classes.center}>
       <Formik
         onSubmit={handleSubmitSize}
-        initialValues={initialValues}
+        initialValues={autoSave}
         validate={formValidation.validateForm}
       >
         {() => (
           <Form>
             <div className={classes.container}>
+              <div className={classes.checkboxAutoSave}>
+                <Checkbox
+                  id="checkboxAutoSave"
+                  onChange={handleCheckboxChange}
+                  checked={changedValue}
+                />
+                <label htmlFor="checkboxAutoSave">
+                  {changedValue ? (
+                    <span>Disable Auto Save</span>
+                  ) : (
+                    <span>Enable Auto Save</span>
+                  )}
+                </label>
+              </div>
               <button type="submit" className="button-secondary">
-                On Change Settings
+                Save Settings
               </button>
             </div>
           </Form>

diff --git a/src/pods/toolbar/toolbar.pod.tsx b/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>