- got to a good place on individual hotlist sounds

src/context/providers/SoundContextProvider.tsx

@@ -2,6 +2,8 @@ import { useEffect, useMemo, useReducer, useRef, useState, type ReactNode } from
 import { SoundContext } from "../SoundContext";
 import { initialState, reducer } from "../reducers/SoundContextReducer";
 import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
+import { useHotlistData } from "../../hooks/useHotListData";
+import type { HotlistFile } from "../../types/types";
 
 type SoundContextProviderProps = {
   children: ReactNode;
@@ -13,6 +15,7 @@ const SoundContextProvider = ({ children }: SoundContextProviderProps) => {
   const audioCtxRef = useRef<AudioContext | null>(null);
   const [state, dispatch] = useReducer(reducer, initialState);
   const { mutation } = useCameraBlackboard();
+  const { query: hotlistQuery } = useHotlistData();
 
   useEffect(() => {
     const fetchSound = async () => {
@@ -36,6 +39,25 @@ const SoundContextProvider = ({ children }: SoundContextProviderProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (!hotlistQuery?.data) return;
+    const fetchedHotlists = hotlistQuery.data.hotlists || [];
+    const hotlistSoundSettings = fetchedHotlists.map((hotlist: HotlistFile) => {
+      return {
+        name: hotlist.filename,
+        sound: state.hotlistSound,
+      };
+    });
+
+    const hotlistSoundMap = new Map<string, string>();
+    fetchedHotlists.forEach((hotlist: HotlistFile) => {
+      hotlistSoundMap.set(hotlist.filename, state.hotlistSound);
+    });
+
+    dispatch({ type: "SETHOTLISTSOUNDMAP", payload: hotlistSoundMap });
+    dispatch({ type: "SETHOTLISTS", payload: hotlistSoundSettings });
+  }, [hotlistQuery.data, state.hotlistSound]);
+
   useEffect(() => {
     const unlock = async () => {
       if (!audioCtxRef.current) audioCtxRef.current = new AudioContext();

src/context/reducers/SoundContextReducer.ts

@@ -5,6 +5,7 @@ export const initialState: SoundState = {
   NPEDsound: "popup",
   hotlistSound: "warning",
   hotlists: [{ name: "hotlistName", sound: "notification" }],
+  hotlistSoundMap: new Map<string, string>(),
   soundOptions: [
     { name: "Switch (Default)", soundFileName: "switch" },
     { name: "Popup", soundFileName: "popup" },
@@ -24,19 +25,23 @@ export const initialState: SoundState = {
 export function reducer(state: SoundState, action: SoundAction): SoundState {
   switch (action.type) {
     case "UPDATE": {
+      const nextHotlistSoundMap = new Map<string, string>();
+      if (action.payload.hotlistSoundMap) {
+        for (const [key, value] of Object.entries(action.payload.hotlistSoundMap)) {
+          nextHotlistSoundMap.set(key, value);
+        }
+      }
       return {
         ...state,
         sightingSound: action.payload.sightingSound,
         NPEDsound: action.payload.NPEDsound,
         hotlistSound: action.payload.hotlistSound,
-        hotlists: action.payload.hotlists?.map((hotlist) => ({
-          name: hotlist.name,
-          sound: hotlist.sound,
-        })),
         NPEDsoundVolume: action.payload.NPEDsoundVolume,
         sightingVolume: action.payload.sightingVolume,
         hotlistSoundVolume: action.payload.hotlistSoundVolume,
         soundOptions: action.payload.soundOptions,
+        hotlists: action.payload.hotlists,
+        hotlistSoundMap: nextHotlistSoundMap,
       };
     }
 
@@ -69,6 +74,16 @@ export function reducer(state: SoundState, action: SoundAction): SoundState {
         ...state,
         uploadedSound: action.payload,
       };
+    case "SETHOTLISTS":
+      return {
+        ...state,
+        hotlists: action.payload,
+      };
+    case "SETHOTLISTSOUNDMAP":
+      return {
+        ...state,
+        hotlistSoundMap: action.payload,
+      };
     case "RESET":
       return initialState;
     default: