added sound context, and functionality to select sighting sound

src/App.tsx

@@ -8,9 +8,11 @@ import Session from "./pages/Session";
 import { NPEDUserProvider } from "./context/providers/NPEDUserContextProvider";
 import { AlertHitProvider } from "./context/providers/AlertHitProvider";
 import { SoundProvider } from "react-sounds";
+import SoundContextProvider from "./context/providers/SoundContextProvider";
 
 function App() {
   return (
+    <SoundContextProvider>
       <SoundProvider initialEnabled={true}>
         <NPEDUserProvider>
           <AlertHitProvider>
@@ -27,6 +29,7 @@ function App() {
           </AlertHitProvider>
         </NPEDUserProvider>
       </SoundProvider>
+    </SoundContextProvider>
   );
 }
 

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -1,8 +1,10 @@
 import { Field, FieldArray, Form, Formik } from "formik";
 import FormGroup from "../components/FormGroup";
 import type { FormValues, Hotlist } from "../../../types/types";
+import { useSoundContext } from "../../../context/SoundContext";
 
 const SoundSettingsFields = () => {
+  const { state, dispatch } = useSoundContext();
   const hotlists: Hotlist[] = [
     { name: "hotlist0", sound: "" },
     { name: "hotlist1", sound: "" },
@@ -25,15 +27,15 @@ const SoundSettingsFields = () => {
   ];
 
   const initialValues: FormValues = {
-    sightingSound: "switch",
-    NPEDsound: "popup",
+    sightingSound: state.sightingSound ?? "switch",
+    NPEDsound: state.NPEDsound ?? "popup",
     hotlists,
   };
 
   const handleSubmit = (values: FormValues) => {
-    console.log(values);
+    dispatch({ type: "UPDATE", payload: values });
   };
-
+  console.log(state);
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit}>
       {({ values }) => (

src/context/SoundContext.ts

@@ -0,0 +1,18 @@
+import { createContext, useContext, type Dispatch } from "react";
+import type { SoundPayload, SoundState } from "../types/types";
+
+type SoundContextType = {
+  state: SoundState;
+  dispatch: Dispatch<SoundPayload>;
+};
+
+export const SoundContext = createContext<SoundContextType | undefined>(
+  undefined
+);
+
+export const useSoundContext = () => {
+  const ctx = useContext(SoundContext);
+  if (!ctx)
+    throw new Error("useSoundContext must be used within <SoundContext>");
+  return ctx;
+};

src/context/providers/SoundContextProvider.tsx

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

src/context/reducers/SoundContextReducer.ts

@@ -0,0 +1,19 @@
+import type { SoundPayload, SoundState } from "../../types/types";
+
+export const initalState: SoundState = {
+  sightingSound: "switch",
+  NPEDsound: "popup",
+  hotlists: [],
+};
+
+export function reducer(state: SoundState, action: SoundPayload) {
+  switch (action.type) {
+    case "UPDATE":
+      return {
+        ...state,
+        sightingSound: action.payload.sightingSound,
+        NPEDsound: action.payload.NPEDsound,
+      };
+  }
+  return state;
+}

src/hooks/useSightingFeed.ts

@@ -1,8 +1,11 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import type { SightingType } from "../types/types";
 import { useSoundOnChange } from "react-sounds";
 import switchSound from "../assets/sounds/ui/switch.mp3";
+import popup from "../assets/sounds/ui/popup_open.mp3";
+import notification from "../assets/sounds/ui/notification.mp3";
+import { useSoundContext } from "../context/SoundContext";
 
 async function fetchSighting(
   url: string | undefined,
@@ -13,7 +16,17 @@ async function fetchSighting(
   return res.json();
 }
 
+function getSoundFileName(name: string) {
+  const sounds: Record<string, string> = {
+    switch: switchSound,
+    popup: popup,
+    notification: notification,
+  };
+  return sounds[name] ?? null;
+}
+
 export function useSightingFeed(url: string | undefined) {
+  const { state } = useSoundContext();
   const [sightings, setSightings] = useState<SightingType[]>([]);
   const [selectedRef, setSelectedRef] = useState<number | null>(null);
   const [sessionStarted, setSessionStarted] = useState(false);
@@ -23,8 +36,11 @@ export function useSightingFeed(url: string | undefined) {
   const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(
     null
   );
+  const soundSrc = useMemo(() => {
+    return getSoundFileName(state.sightingSound) ?? switchSound;
+  }, [state.sightingSound]);
 
-  useSoundOnChange(switchSound, latestRef, {
+  useSoundOnChange(soundSrc, latestRef, {
     volume: 1,
   });
 

src/hooks/useSound.ts

@@ -1,64 +0,0 @@
-// useBeep.ts
-import { useEffect, useRef } from "react";
-import { useSoundEnabled } from "react-sounds"; // so it respects your SoundBtn toggle
-
-/**
- * Plays a sound whenever `latestRef` changes.
- *
- * @param src Path to the sound file
- * @param latestRef The primitive value to watch (e.g. sighting.ref)
- * @param opts volume: 0..1, enabledOverride: force enable/disable, minGapMs: throttle interval
- */
-export function useBeep(
-  src: string,
-  latestRef: number | null,
-  opts?: { volume?: number; enabledOverride?: boolean; minGapMs?: number }
-) {
-  const audioRef = useRef<HTMLAudioElement>(undefined);
-  const prevRef = useRef<number | null>(null);
-  const lastPlay = useRef(0);
-  const [enabled] = useSoundEnabled();
-
-  const minGap = opts?.minGapMs ?? 250; // don’t play more than 4 times/sec
-
-  // Create the audio element once
-  useEffect(() => {
-    const a = new Audio(src);
-    a.preload = "auto";
-    if (opts?.volume !== undefined) a.volume = opts.volume;
-    audioRef.current = a;
-    return () => {
-      a.pause();
-    };
-  }, [src, opts?.volume]);
-
-  // Watch for ref changes
-  useEffect(() => {
-    if (latestRef == null) return;
-
-    const canPlay =
-      (opts?.enabledOverride ?? enabled) &&
-      document.visibilityState === "visible";
-    if (!canPlay) {
-      prevRef.current = latestRef; // consume the change
-      return;
-    }
-
-    if (prevRef.current !== null && latestRef !== prevRef.current) {
-      const now = Date.now();
-      if (now - lastPlay.current >= minGap) {
-        const a = audioRef.current;
-        if (a) {
-          try {
-            a.currentTime = 0; // restart from beginning
-            void a.play(); // fire and forget
-            lastPlay.current = now;
-          } catch (err) {
-            console.warn("Audio play failed:", err);
-          }
-        }
-      }
-    }
-    prevRef.current = latestRef;
-  }, [latestRef, enabled, opts?.enabledOverride, minGap]);
-}

src/types/types.ts

@@ -278,3 +278,14 @@ export type FormValues = {
 export type SoundUploadValue = {
   soundFile: File | null;
 };
+
+export type SoundState = {
+  sightingSound: SoundValue;
+  NPEDsound: SoundValue;
+  hotlists: Hotlist[];
+};
+
+export type SoundPayload = {
+  type: string;
+  payload: SoundState;
+};