feat: added local-storage-hook, minor lint-fix

src/components/landing-page/join-production.tsx

@@ -19,6 +19,7 @@ import { darkText, errorColour } from "../../css-helpers/defaults.ts";
 import { TJoinProductionOptions } from "../production-line/types.ts";
 import { uniqBy } from "../../helpers.ts";
 import { FormInputWithLoader } from "./form-input-with-loader.tsx";
+import { useLocalStorage } from "./use-access-local-storage.ts";
 
 type FormValues = TJoinProductionOptions;
 
@@ -47,6 +48,12 @@ export const JoinProduction = ({
   addAdditionalCallId,
 }: TProps) => {
   const [joinProductionId, setJoinProductionId] = useState<null | number>(null);
+  const [localStorageType, setLocalStorageType] = useState<string | null>(null);
+  const [localStorageData, setLocalStorageData] = useState<string | null>(null);
+  const cachedUsername = useLocalStorage({
+    localStorageType,
+    localStorageData,
+  });
   const {
     formState: { errors, isValid },
     register,
@@ -58,7 +65,7 @@ export const JoinProduction = ({
       productionId:
         preSelected?.preSelectedProductionId || addAdditionalCallId || "",
       lineId: preSelected?.preSelectedLineId || undefined,
-      username: window.localStorage?.getItem("username") || "",
+      username: cachedUsername || "",
     },
     resetOptions: {
       keepDirtyValues: true, // user-interacted input will be retained
@@ -74,6 +81,10 @@ export const JoinProduction = ({
     loading,
   } = useFetchProduction(joinProductionId);
 
+  useEffect(() => {
+    setLocalStorageType("username");
+  }, []);
+
   // Update selected line id when a new production is fetched
   useEffect(() => {
     // Don't run this hook if we have pre-selected values
@@ -96,16 +107,14 @@ export const JoinProduction = ({
 
   // Use local cache
   useEffect(() => {
-    const cachedUsername = window.localStorage?.getItem("username");
-
     if (cachedUsername) {
       setValue("username", cachedUsername);
     }
 
     if (addAdditionalCallId) {
       setValue("productionId", addAdditionalCallId);
     }
-  }, [addAdditionalCallId, setValue]);
+  }, [addAdditionalCallId, cachedUsername, setValue]);
 
   // If user selects a production from the productionlist
   useEffect(() => {
@@ -124,7 +133,7 @@ export const JoinProduction = ({
 
   const onSubmit: SubmitHandler<FormValues> = (payload) => {
     if (payload.username) {
-      window.localStorage?.setItem("username", payload.username);
+      setLocalStorageData(payload.username);
     }
 
     dispatch({

src/components/landing-page/use-access-local-storage.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+
+type TLocalStorage = {
+  localStorageType: string | null;
+  localStorageData: string | null;
+};
+
+export const useLocalStorage = ({
+  localStorageType,
+  localStorageData,
+}: TLocalStorage) => {
+  const [cachedData, setCachedData] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (localStorageType) {
+      setCachedData(window.localStorage.getItem(localStorageType));
+    }
+  }, [localStorageType]);
+
+  useEffect(() => {
+    if (localStorageType && localStorageData) {
+      window.localStorage.setItem(localStorageType, localStorageData);
+      setCachedData(localStorageData);
+    }
+  }, [localStorageData, localStorageType]);
+
+  return cachedData;
+};

src/components/production-line/production-line.tsx

@@ -146,7 +146,8 @@ export const ProductionLine = ({
     speakerHotkey: "n",
     pressToTalkHotkey: "t",
   });
-  const { joinProductionOptions, dominantSpeaker, audioLevelAboveThreshold } = callState;
+  const { joinProductionOptions, dominantSpeaker, audioLevelAboveThreshold } =
+    callState;
 
   const inputAudioStream = useAudioInput({
     inputId: joinProductionOptions?.audioinput ?? null,