Adds reset & fixes Typescript bug (#5)

* Adds reset

* A test to verify the found bug in isolation

* Enhance Documentation

* Tidy

* Tidy

* Linting

* chore(): clean up tests

* chore(): update key naming convention to match others

Co-authored-by: Paulo Miguel Ferreira Jorge <[email protected]>

Author: John Richard Chipps-Harding

README.md

@@ -13,7 +13,7 @@ Just swap out your `useState` calls with `useLocalState` to persist the data bet
 ```javascript
 import useLocalState from "@phntms/use-local-state";
 
-const [token, setToken] = useLocalState("USER_TOKEN", "");
+const [value, setValue, resetValue] = useLocalState("KEY", "");
 ```
 
 ## Installation
@@ -59,14 +59,15 @@ interface Bookmark {
 }
 
 const BookmarkExample = () = {
-  const [bookmarks, setBookmarks] = useLocalState<Bookmark[]>("BOOKMARKS", []);
+  const [bookmarks, setBookmarks, clearBookmarks] = useLocalState<Bookmark[]>("BOOKMARKS", []);
 
   const addBookmark = (bookmark: Bookmark) => setBookmarks([...bookmarks, bookmark]);
 
   return (
     <>
       <h1>Bookmarks</h2>
       <NewBookmark add={addBookmark} />
+      <button onClick={clearBookmarks}>Clear Bookmarks</button>
       <ul>
         {bookmarks.map(((bookmark, i) => (
           <li key={i}>
@@ -88,7 +89,11 @@ const BookmarkExample = () = {
 
 ### Output
 
-An array containing the value and a function to set the value. Signature is exactly like the standard [React.useState](https://reactjs.org/docs/hooks-state.html) hook.
+An array containing the value, a function to set the value and another function to reset the value.
+
+- `[0]` : The value of the data stored in LocalStorage or the defaultValue if not set.
+- `[1]` : A function to set the value stored in LocalStorage. Signature is exactly like the standard [React.useState](https://reactjs.org/docs/hooks-state.html) hook.
+- `[2]` : A function to reset the data stored in the LocalStorage.
 
 [npm-image]: https://img.shields.io/npm/v/@phntms/use-local-state.svg?style=flat-square&logo=react
 [npm-url]: https://npmjs.org/package/@phntms/use-local-state

src/index.ts

@@ -2,13 +2,17 @@ import { useState } from "react";
 
 import { SUPPORTED } from "./utils";
 
-const useLocalState = <T>(
+type Dispatch<A> = (value: A) => void;
+type SetStateAction<S> = S | ((prevState: S) => S);
+
+const useLocalState = <S>(
   key: string,
-  defaultValue: T
-): [T, (v: T | ((v: T) => T)) => void] => {
-  const [value, setValue] = useState<T>(() => {
-    const toStore =
-      typeof defaultValue === "function" ? defaultValue() : defaultValue;
+  defaultValue: S | (() => S)
+): [S, Dispatch<SetStateAction<S>>, () => void] => {
+  const [value, setValue] = useState<S>(() => {
+    const isCallable = (value: unknown): value is () => S =>
+      typeof value === "function";
+    const toStore = isCallable(defaultValue) ? defaultValue() : defaultValue;
     if (!SUPPORTED) return toStore;
     const item = window.localStorage.getItem(key);
     try {
@@ -18,15 +22,23 @@ const useLocalState = <T>(
     }
   });
 
-  const setLocalStateValue = (newValue: T | ((v: T) => T)) => {
-    const isCallable = (value: unknown): value is (v: T) => T =>
+  const setLocalStateValue = (newValue: SetStateAction<S>) => {
+    const isCallable = (value: unknown): value is (prevState: S) => S =>
       typeof value === "function";
     const toStore = isCallable(newValue) ? newValue(value) : newValue;
     if (SUPPORTED) window.localStorage.setItem(key, JSON.stringify(toStore));
     setValue(toStore);
   };
 
-  return [value, setLocalStateValue];
+  const reset = () => {
+    const isCallable = (value: unknown): value is (prevState: S) => S =>
+      typeof value === "function";
+    const toStore = isCallable(defaultValue) ? defaultValue() : defaultValue;
+    setValue(toStore);
+    if (SUPPORTED) window.localStorage.removeItem(key);
+  };
+
+  return [value, setLocalStateValue, reset];
 };
 
 export default useLocalState;

test/index.test.tsx

@@ -56,7 +56,7 @@ describe("useLocalState()", () => {
     expect(todos).toEqual(values);
   });
 
-  it("accepts callback as a value", async () => {
+  it("accepts callback as an initial value", async () => {
     const key = "todos";
     const values = ["first", "second"];
     const callback = () => values;
@@ -66,12 +66,32 @@ describe("useLocalState()", () => {
     expect(todos).toEqual(values);
   });
 
+  it("accepts callback as a initial value and can be updated", async () => {
+    const key = "todos";
+    const values = ["first", "second"];
+    const callback = () => values;
+    const { result } = renderHook(() => useLocalState(key, callback));
+
+    const [initialValues] = result.current;
+    expect(initialValues).toEqual(values);
+
+    const newValue = ["third", "fourth"];
+    act(() => {
+      const setValue = result.current[1];
+      setValue(newValue);
+    });
+
+    const [changedValues] = result.current;
+    expect(changedValues).toEqual(newValue);
+  });
+
   it("can update value as string", async () => {
     const key = "key";
     const value = "something";
-
     const { result } = renderHook(() => useLocalState(key, value));
-    expect(result.current[0]).toEqual(value);
+
+    const [initialValue] = result.current;
+    expect(initialValue).toEqual(value);
 
     const newValue = "something else";
     act(() => {
@@ -87,9 +107,10 @@ describe("useLocalState()", () => {
   it("can update value as object", async () => {
     const key = "key";
     const value = { something: "something" };
-
     const { result } = renderHook(() => useLocalState(key, value));
-    expect(result.current[0]).toEqual(value);
+
+    const [initialValue] = result.current;
+    expect(initialValue).toEqual(value);
 
     const newValue = { something: "else" };
     act(() => {
@@ -118,8 +139,7 @@ describe("useLocalState()", () => {
     expect(todos).toEqual(newValues);
   });
 
-  // todo(): this logic could be super handy...
-  it("updates state with callback function", () => {
+  it("updates state with callback function", async () => {
     const key = "todos";
     const values = ["first", "second"];
     const { result } = renderHook(() => useLocalState(key, values));
@@ -182,7 +202,6 @@ describe("useLocalState()", () => {
   it("can handle `undefined` values", async () => {
     const key = "todos";
     const values = ["first", "second"];
-
     const { result } = renderHook(() =>
       useLocalState<string[] | undefined>(key, values)
     );
@@ -199,7 +218,6 @@ describe("useLocalState()", () => {
   it("can handle `null` values", async () => {
     const key = "todos";
     const values = ["first", "second"];
-
     const { result } = renderHook(() =>
       useLocalState<string[] | null>(key, values)
     );
@@ -212,4 +230,61 @@ describe("useLocalState()", () => {
     const [value] = result.current;
     expect(value).toBe(null);
   });
+
+  it("can reset to default value", async () => {
+    if (!SUPPORTED) return;
+
+    const key = "key";
+    const value = "something";
+    const { result } = renderHook(() => useLocalState(key, value));
+
+    const [initialValue] = result.current;
+    expect(initialValue).toEqual(value);
+
+    const newValue = "something else";
+    act(() => {
+      const setValue = result.current[1];
+      setValue(newValue);
+    });
+
+    const [changedValue] = result.current;
+    expect(changedValue).toEqual(newValue);
+
+    act(() => {
+      const resetValue = result.current[2];
+      resetValue();
+    });
+
+    const [resetValue] = result.current;
+    expect(resetValue).toEqual(value);
+    expect(localStorage.getItem(key)).toEqual(null);
+  });
+
+  it("can reset to default value as callback", async () => {
+    const key = "todos";
+    const values = ["first", "second"];
+    const callback = () => values;
+    const { result } = renderHook(() => useLocalState(key, callback));
+
+    const [initialValues] = result.current;
+    expect(initialValues).toEqual(values);
+
+    const newValues = ["third", "fourth"];
+    act(() => {
+      const setValues = result.current[1];
+      setValues(newValues);
+    });
+
+    const [changedValues] = result.current;
+    expect(changedValues).toEqual(newValues);
+
+    act(() => {
+      const resetValues = result.current[2];
+      resetValues();
+    });
+
+    const [resetValues] = result.current;
+    expect(resetValues).toEqual(values);
+    expect(localStorage.getItem(key)).toEqual(null);
+  });
 });