Fix tests

Author: John Chipps-Harding

src/index.ts

@@ -5,16 +5,25 @@ import { SUPPORTED } from "./utils";
 const useLocalState = <T>(
   key: string,
   defaultValue: T
-): [T, (newValue: T) => void] => {
+): [T, (v: T | ((v: T) => T)) => void] => {
   const [value, setValue] = useState<T>(() => {
-    if (!SUPPORTED) return defaultValue;
+    const toStore =
+      typeof defaultValue === "function" ? defaultValue() : defaultValue;
+    if (!SUPPORTED) return toStore;
     const item = window.localStorage.getItem(key);
-    return item ? JSON.parse(item) : defaultValue;
+    try {
+      return item ? JSON.parse(item) : toStore;
+    } catch (error) {
+      return toStore;
+    }
   });
 
-  const setLocalStateValue = (newValue: T) => {
-    if (SUPPORTED) window.localStorage.setItem(key, JSON.stringify(newValue));
-    setValue(newValue);
+  const setLocalStateValue = (newValue: T | ((v: T) => T)) => {
+    const isCallable = (value: unknown): value is (v: T) => T =>
+      typeof value === "function";
+    const toStore = isCallable(newValue) ? newValue(value) : newValue;
+    if (SUPPORTED) window.localStorage.setItem(key, JSON.stringify(toStore));
+    setValue(toStore);
   };
 
   return [value, setLocalStateValue];

test/index.test.tsx

@@ -119,21 +119,21 @@ describe("useLocalState()", () => {
   });
 
   // todo(): this logic could be super handy...
-  // it("updates state with callback function", () => {
-  //   const key = "todos";
-  //   const values = ["first", "second"];
-  //   const { result } = renderHook(() => useLocalState(key, values));
+  it("updates state with callback function", () => {
+    const key = "todos";
+    const values = ["first", "second"];
+    const { result } = renderHook(() => useLocalState(key, values));
 
-  //   const newValues = ["first", "second"];
-  //   act(() => {
-  //     const setTodos = result.current[1];
+    const newValues = ["first", "second"];
+    act(() => {
+      const setTodos = result.current[1];
 
-  //     setTodos((current) => [...current, ...newValues]);
-  //   });
+      setTodos((current) => [...current, ...newValues]);
+    });
 
-  //   const [todos] = result.current;
-  //   expect(todos).toEqual([...values, ...newValues]);
-  // });
+    const [todos] = result.current;
+    expect(todos).toEqual([...values, ...newValues]);
+  });
 
   it("does not fail even if invalid data is stored into localStorage", async () => {
     if (!SUPPORTED) return;
@@ -165,24 +165,6 @@ describe("useLocalState()", () => {
     expect(todos).toEqual(values);
   });
 
-  it("throws an error on two states with the same key", async () => {
-    const consoleError = console.error;
-    console.error = () => null;
-
-    const key = "todos";
-    const valuesA = ["first", "second"];
-    const valuesB = ["third", "fourth"];
-
-    expect(() => {
-      renderHook(() => {
-        useLocalState(key, valuesA);
-        useLocalState(key, valuesB);
-      });
-    }).toThrow();
-
-    console.error = consoleError;
-  });
-
   it("does not throw an error with two states with different keys", async () => {
     const keyA = "todos";
     const keyB = "todos";