refactor: usePersistedState state value to not be undefined

And in the one odd use case, create a new useClearablePersistedState to allow for that too

Author: darrenvong

app/web/features/auth/useAuthStore.test.ts

@@ -1,7 +1,7 @@
 import { act, renderHook } from "@testing-library/react";
 import { Empty } from "google-protobuf/google/protobuf/empty_pb";
 import { StatusCode } from "grpc-web";
-import { usePersistedState } from "platform/usePersistedState";
+import { useClearablePersistedState } from "platform/usePersistedState";
 import { service } from "service";
 
 import wrapper from "../../test/hookWrapper";
@@ -15,44 +15,48 @@ const getIsJailedMock = service.jail.getIsJailed as jest.Mock;
 const logoutMock = service.user.logout as jest.Mock;
 const getAccountInfoMock = service.account.getAccountInfo as jest.Mock;
 
-describe("usePersistedState hook", () => {
+describe("useClearablePersistedState hook", () => {
   it("uses a default value", () => {
     const defaultValue = "Test string";
-    const { result } = renderHook(() => usePersistedState("key", defaultValue));
+    const { result } = renderHook(() =>
+      useClearablePersistedState("key", defaultValue),
+    );
     expect(result.current[0]).toBe(defaultValue);
   });
 
   it("saves then loads a value", () => {
     const value = { test: "Test string" };
-    const { result } = renderHook(() => usePersistedState("key", { test: "" }));
+    const { result } = renderHook(() =>
+      useClearablePersistedState("key", { test: "" }),
+    );
     expect(result.current[0]).toStrictEqual({ test: "" });
     act(() => result.current[1](value));
     expect(result.current[0]).toStrictEqual(value);
     expect(localStorage.getItem("key")).toBe(JSON.stringify(value));
     const { result: result2 } = renderHook(() =>
-      usePersistedState("key", { test: "" }),
+      useClearablePersistedState("key", { test: "" }),
     );
     expect(result2.current[0]).toStrictEqual(value);
   });
 
   it("saves then loads a value from sessionStorage", () => {
     const value = { test: "session test" };
     const { result } = renderHook(() =>
-      usePersistedState("key", { test: "" }, "sessionStorage"),
+      useClearablePersistedState("key", { test: "" }, "sessionStorage"),
     );
     expect(result.current[0]).toStrictEqual({ test: "" });
     act(() => result.current[1](value));
     expect(result.current[0]).toStrictEqual(value);
     expect(sessionStorage.getItem("key")).toBe(JSON.stringify(value));
     const { result: result2 } = renderHook(() =>
-      usePersistedState("key", { test: "" }, "sessionStorage"),
+      useClearablePersistedState("key", { test: "" }, "sessionStorage"),
     );
     expect(result2.current[0]).toStrictEqual(value);
   });
 
   it("clears a value", () => {
     const { result } = renderHook(() =>
-      usePersistedState("key", { test: "" }, "sessionStorage"),
+      useClearablePersistedState("key", { test: "" }, "sessionStorage"),
     );
     expect(result.current[0]).toStrictEqual({ test: "" });
     act(() => result.current[2]());

app/web/features/messages/groupchats/GroupChatSendField.tsx

@@ -6,7 +6,7 @@ import { Empty } from "google-protobuf/google/protobuf/empty_pb";
 import { RpcError } from "grpc-web";
 import { useTranslation } from "i18n";
 import { GLOBAL, MESSAGES } from "i18n/namespaces";
-import { usePersistedState } from "platform/usePersistedState";
+import { useClearablePersistedState } from "platform/usePersistedState";
 import React from "react";
 import { useForm } from "react-hook-form";
 
@@ -43,7 +43,7 @@ export default function GroupChatSendField({
   const { register, handleSubmit, reset, watch } = useForm<MessageFormData>();
 
   const [persistedMessage, setPersistedMessage, clearPersistedMessage] =
-    usePersistedState(
+    useClearablePersistedState(
       `messages.${currentUserId}.${chatId}`,
       "",
       "sessionStorage",

app/web/platform/usePersistedState.ts

@@ -6,7 +6,7 @@ import {
 
 type StorageType = "localStorage" | "sessionStorage";
 
-export function usePersistedState<T>(
+export function useClearablePersistedState<T>(
   key: string,
   defaultValue: T,
   storage: StorageType = "localStorage",
@@ -37,6 +37,15 @@ export function usePersistedState<T>(
   return [_state, setState, clearState];
 }
 
+export function usePersistedState<T>(
+  key: string,
+  defaultValue: T,
+  storage: StorageType = "localStorage",
+) {
+  const [state, setState] = useClearablePersistedState(key, defaultValue, storage);
+  return [state as T, setState] as const;
+}
+
 export function clearStorage() {
   window.sessionStorage.clear();
 }