Feat/pr fixes (#321)

src/App.tsx

@@ -17,10 +17,10 @@ import { isValidBrowser } from "./bowser.ts";
 import { DisplayContainerHeader } from "./components/landing-page/display-container-header.tsx";
 import { NavigateToRootButton } from "./components/navigate-to-root-button/navigate-to-root-button.tsx";
 import { CallsPage } from "./components/calls-page/calls-page.tsx";
-import { CreateProductionPage } from "./components/create-production/create-production-page.tsx";
 import { Header } from "./components/header.tsx";
 import { useLocalUserSettings } from "./hooks/use-local-user-settings.ts";
 import { ManageProductionsPage } from "./components/manage-productions-page/manage-productions-page.tsx";
+import { CreateProductionPage } from "./components/create-production/create-production-page.tsx";
 
 const DisplayBoxPositioningContainer = styled(FlexContainer)`
   justify-content: center;
@@ -126,16 +126,16 @@ const App = () => {
                   />
                   <Route
                     path="/create-production"
-                    element={
-                      <CreateProductionPage
-                        setApiError={() => setApiError(true)}
-                      />
-                    }
+                    element={<CreateProductionPage />}
                     errorElement={<ErrorPage />}
                   />
                   <Route
                     path="/manage-productions"
-                    element={<ManageProductionsPage />}
+                    element={
+                      <ManageProductionsPage
+                        setApiError={() => setApiError(true)}
+                      />
+                    }
                     errorElement={<ErrorPage />}
                   />
                   <Route

src/api/api.ts

@@ -29,10 +29,6 @@ type TLine = {
 export type TBasicProductionResponse = {
   name: string;
   productionId: string;
-  lines?: TLine[];
-};
-
-type TFetchProductionResponse = TBasicProductionResponse & {
   lines: TLine[];
 };
 
@@ -97,8 +93,8 @@ export const API = {
         },
       })
     ),
-  fetchProduction: (id: number): Promise<TFetchProductionResponse> =>
-    handleFetchRequest<TFetchProductionResponse>(
+  fetchProduction: (id: number): Promise<TBasicProductionResponse> =>
+    handleFetchRequest<TBasicProductionResponse>(
       fetch(`${API_URL}production/${id}`, {
         method: "GET",
         headers: {

src/components/accessing-local-storage/access-local-storage.ts

@@ -1,32 +1,48 @@
-import { createStorage, StorageType } from "@martinstark/storage-ts";
+import { createStorage, StorageTS, StorageType } from "@martinstark/storage-ts";
+import { useCallback, useEffect, useState } from "react";
 
 type Schema = {
   username: string;
   audioinput?: string;
   audiooutput?: string;
 };
 
-// Create a store of the desired type. If it is not available,
-// in-memory storage will be used as a fallback.
-const store = createStorage<Schema>({
-  type: StorageType.LOCAL,
-  prefix: "id",
-  silent: true,
-});
-
 export function useStorage() {
+  const [store, setStore] = useState<StorageTS<Schema>>();
+
+  useEffect(() => {
+    // Create a store of the desired type. If it is not available,
+    // in-memory storage will be used as a fallback.
+    setStore(
+      createStorage<Schema>({
+        type: StorageType.LOCAL,
+        prefix: "id",
+        silent: true,
+      })
+    );
+  }, []);
+
   type Key = keyof Schema;
-  const readFromStorage = (key: keyof Schema): Schema[Key] | null => {
-    return store.read(key);
-  };
+  const readFromStorage = useCallback(
+    (key: keyof Schema): Schema[Key] | null => {
+      return store?.read(key);
+    },
+    [store]
+  );
 
-  const writeToStorage = (key: keyof Schema, value: Schema[Key]): void => {
-    store.write(key, value);
-  };
+  const writeToStorage = useCallback(
+    (key: keyof Schema, value: Schema[Key]): void => {
+      store?.write(key, value);
+    },
+    [store]
+  );
 
-  const clearStorage = (key: keyof Schema) => {
-    store.delete(key);
-  };
+  const removeFromStorage = useCallback(
+    (key: keyof Schema) => {
+      store?.delete(key);
+    },
+    [store]
+  );
 
-  return { readFromStorage, writeToStorage, clearStorage };
+  return { readFromStorage, writeToStorage, removeFromStorage };
 }