Refactor sound context and update sound settings functionality; remove console logs and improve sound file handling

src/context/SoundContext.ts

@@ -1,9 +1,9 @@
 import { createContext, useContext, type Dispatch } from "react";
-import type { SoundPayload, SoundState } from "../types/types";
+import type { SoundAction, SoundState } from "../types/types";
 
 type SoundContextType = {
   state: SoundState;
-  dispatch: Dispatch<SoundPayload>;
+  dispatch: Dispatch<SoundAction>;
 };
 
 export const SoundContext = createContext<SoundContextType | undefined>(

src/context/providers/SoundContextProvider.tsx

@@ -1,17 +1,16 @@
-import { useReducer, type ReactNode } from "react";
+import { useMemo, useReducer, type ReactNode } from "react";
 import { SoundContext } from "../SoundContext";
-import { initalState, reducer } from "../reducers/SoundContextReducer";
+import { initialState, reducer } from "../reducers/SoundContextReducer";
 
 type SoundContextProviderProps = {
   children: ReactNode;
 };
 
 const SoundContextProvider = ({ children }: SoundContextProviderProps) => {
-  const [state, dispatch] = useReducer(reducer, initalState);
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const value = useMemo(() => ({ state, dispatch }), [state, dispatch]);
   return (
-    <SoundContext.Provider value={{ state, dispatch }}>
-      {children}
-    </SoundContext.Provider>
+    <SoundContext.Provider value={value}>{children}</SoundContext.Provider>
   );
 };
 

src/context/reducers/SoundContextReducer.ts

@@ -1,14 +1,19 @@
-import type { SoundPayload, SoundState } from "../../types/types";
+import type { SoundAction, SoundState } from "../../types/types";
 
-export const initalState: SoundState = {
+export const initialState: SoundState = {
   sightingSound: "switch",
   NPEDsound: "popup",
   hotlists: [],
+  soundOptions: [
+    { name: "switch (Default)", soundFile: null },
+    { name: "popup", soundFile: null },
+    { name: "notification", soundFile: null },
+  ],
 };
 
-export function reducer(state: SoundState, action: SoundPayload) {
+export function reducer(state: SoundState, action: SoundAction): SoundState {
   switch (action.type) {
-    case "UPDATE":
+    case "UPDATE": {
       return {
         ...state,
         sightingSound: action.payload.sightingSound,
@@ -18,6 +23,16 @@ export function reducer(state: SoundState, action: SoundPayload) {
           sound: hotlist.sound,
         })),
       };
+    }
+
+    case "ADD": {
+      return {
+        ...state,
+        soundOptions: [...(state.soundOptions ?? []), action.payload],
+      };
+    }
+
+    default:
+      return state;
   }
-  return state;
 }