Merge pull request #4 from murageh/refactor#functions

Refactor#functions

README.md

@@ -1,6 +1,6 @@
 # save-progress
 
-I was recently working on a project that involved lots of data entry.
+I recently worked on a project that involved lots of data entry.
 The forms were too long, and I wanted to make sure that the user's progress was saved,
 so that they could come back to the form later,
 and continue where they left off.
@@ -76,7 +76,7 @@ const MyFormComponent = () => {
 
 ### The AutoSaveForm component
 
-This component is designed to be used inside a Formik form. It only takes one prop, which is the saveFunction. You can
+This component is designed to be used inside a Formik form. It only takes one prop, which is `saveFunction`. You can
 pass any function to this prop, but it was designed to use the `updateValues` function returned by the `useSaveProgress`
 hook.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crispice/save-progress",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "A React hook to save progress in a form, or any other scenario, and restore it when the user returns to the form. It uses localStorage to save the progress.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/components/utilities/AutoSaveForm.tsx

@@ -2,7 +2,7 @@ import {useFormikContext} from 'formik';
 import React from 'react';
 
 export interface AutoSaveFormProps {
-    saveFunction: any;
+    saveFunction: (values: any) => void;
 }
 
 /**

src/hooks/saveProgress/useSaveProgress.ts

@@ -16,24 +16,26 @@ import React from 'react';
  *
  * @param key The key to use to save the data in local storage
  * @param initialValue The initial value to use if there is no data in local storage
+ * @param storage The storage to use, defaults to local storage
  *
  * @returns [values, updateValues, clearValues] The data, a function to update the data, and a function to clear the data
  */
-const useSaveProgress = ({key, initialValues}: { key: string, initialValues?: any }) => {
+const useSaveProgress = ({key, initialValues, storage}: { key: string, initialValues?: any, storage?: Storage }) => {
     const [values, setValues] = React.useState(() => {
-        const saved = localStorage.getItem(key);
+        const saved = (storage ?? localStorage).getItem(key);
         const initialValue = JSON.parse(saved!);
-        return initialValue || {};
+        return initialValue || initialValues || {};
     });
 
     // Helper function to save the data to local storage
     const saveValues = (value: any) => {
-        localStorage.setItem(key, JSON.stringify(value));
+        (storage ?? localStorage).setItem(key, JSON.stringify(value));
     };
 
     // Provide helper function to clear the data from local storage
     const clearValues = () => {
-        localStorage.removeItem(key);
+        setValues(initialValues || {});
+        (storage ?? localStorage).removeItem(key);
     };
 
     // Provide helper function to update the data in local storage
@@ -42,13 +44,6 @@ const useSaveProgress = ({key, initialValues}: { key: string, initialValues?: an
         saveValues(value);
     }
 
-    React.useEffect(() => {
-        if (initialValues) {
-            setValues(initialValues);
-            saveValues(initialValues);
-        }
-    }, [initialValues]);
-
     return [values, updateValues, clearValues];
 };