added clearData option (based on jaredpalmer#33)

Myzel394 · Mar 26, 2021 · a612ada · a612ada
1 parent 8a22b0d
commit a612ada
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 5 deletions.
diff --git a/src/formik-persist.tsx b/src/formik-persist.tsx
@@ -6,29 +6,38 @@ export interface PersistProps<T> {
   name: string;
 
   debounceWaitMs?: number;
+  clearOnOnmount?: boolean;
 
   parse?: (rawString: string) => T;
   dump?: (data: T) => string;
 
   setData?: (name: string, stringData: string) => void;
   getData?: (name: string) => string | undefined | null;
+  clearData?: (name: string) => void;
 }
 
 const DEFAULT_PROPS = {
   debounceWaitMs: 300,
+  clearOnOnmount: true,
   parse: JSON.parse,
   dump: JSON.stringify,
   setData: window.localStorage && window.localStorage.setItem,
   getData: window.localStorage && window.localStorage.getItem,
+  clearData: window.localStorage && window.localStorage.removeItem,
 };
 
 const FormikPersist = <T extends any = any>(props: PersistProps<T>) => {
-  const { parse, getData, setData, name, dump } = Object.assign(
-    DEFAULT_PROPS,
-    props
-  );
+  const {
+    parse,
+    getData,
+    setData,
+    name,
+    dump,
+    clearData,
+    clearOnOnmount,
+  } = Object.assign(DEFAULT_PROPS, props);
 
-  const { setValues, values } = useFormikContext<T>();
+  const { setValues, values, isSubmitting } = useFormikContext<T>();
 
   // Debounce doesn't work with tests
   const saveForm = useCallback(
@@ -64,6 +73,16 @@ const FormikPersist = <T extends any = any>(props: PersistProps<T>) => {
     [values, saveForm]
   );
 
+  // Clear data after unmount
+  useEffect(
+    () => () => {
+      if (clearOnOnmount && isSubmitting) {
+        clearData(name);
+      }
+    },
+    [clearOnOnmount, isSubmitting, clearData, name]
+  );
+
   return null;
 };
 

diff --git a/test/formik-persist.test.tsx b/test/formik-persist.test.tsx
@@ -131,4 +131,74 @@ describe('Formik Persist', () => {
 
     expect(window.localStorage.setItem).toHaveBeenCalledWith('signup', 'dump');
   });
+
+  it('clears data when submitted', () => {
+    (window as any).localStorage = {
+      getItem: jest.fn(),
+      setItem: jest.fn(),
+      removeItem: jest.fn(),
+    };
+    let injectedFormik: FormikProps<any>;
+
+    const { unmount } = render(
+      <Formik initialValues={{ name: 'jared' }} onSubmit={noop}>
+        {formik => {
+          injectedFormik = formik;
+
+          return (
+            <Persist
+              name="signup"
+              debounceWaitMs={0}
+              getData={localStorage.getItem}
+              setData={localStorage.setItem}
+              clearData={localStorage.removeItem}
+            />
+          );
+        }}
+      </Formik>
+    );
+
+    act(() => {
+      injectedFormik.setSubmitting(true);
+    });
+
+    unmount();
+
+    expect(window.localStorage.removeItem).toHaveBeenCalled();
+  });
+
+  it('does not clear data when not submitted', () => {
+    (window as any).localStorage = {
+      getItem: jest.fn(),
+      setItem: jest.fn(),
+      removeItem: jest.fn(),
+    };
+    let injectedFormik: FormikProps<any>;
+
+    const { unmount } = render(
+      <Formik initialValues={{ name: 'jared' }} onSubmit={noop}>
+        {formik => {
+          injectedFormik = formik;
+
+          return (
+            <Persist
+              name="signup"
+              debounceWaitMs={0}
+              getData={localStorage.getItem}
+              setData={localStorage.setItem}
+              clearData={localStorage.removeItem}
+            />
+          );
+        }}
+      </Formik>
+    );
+
+    act(() => {
+      injectedFormik.setSubmitting(false);
+    });
+
+    unmount();
+
+    expect(window.localStorage.removeItem).not.toHaveBeenCalled();
+  });
 });