Implement sound settings update and integrate sound context in sightings widget

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -2,6 +2,7 @@ import { Field, FieldArray, Form, Formik } from "formik";
 import FormGroup from "../components/FormGroup";
 import type { FormValues, Hotlist } from "../../../types/types";
 import { useSoundContext } from "../../../context/SoundContext";
+import { toast } from "sonner";
 
 const SoundSettingsFields = () => {
   const { state, dispatch } = useSoundContext();
@@ -34,6 +35,7 @@ const SoundSettingsFields = () => {
 
   const handleSubmit = (values: FormValues) => {
     dispatch({ type: "UPDATE", payload: values });
+    toast.success("Sound settings updated");
   };
   console.log(state);
   return (
@@ -70,20 +72,18 @@ const SoundSettingsFields = () => {
               ))}
             </Field>
           </FormGroup>
-
           <div>
             <h3 className="text-lg font-semibold mb-2">Hotlist Sounds</h3>
-
             <FormGroup>
               <FieldArray
                 name="hotlists"
                 render={() => (
-                  <div>
+                  <div className="w-full m-2">
                     {values.hotlists.length > 0 ? (
                       values.hotlists.map((hotlist, index) => (
                         <div
                           key={hotlist.name}
-                          className="flex items-center gap-3"
+                          className="flex items-center m-2 w-full justify-between"
                         >
                           <label
                             htmlFor={`hotlists.${index}.sound`}
@@ -106,14 +106,13 @@ const SoundSettingsFields = () => {
                         </div>
                       ))
                     ) : (
-                      <>No hotlists yet, Add one</>
+                      <p>No hotlists yet, Add one</p>
                     )}
                   </div>
                 )}
               />
             </FormGroup>
           </div>
-
           <button
             type="submit"
             className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"

src/components/SightingsWidget/SightingWidget.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { SightingType } from "../../types/types";
-import { BLANK_IMG } from "../../utils/utils";
+import { BLANK_IMG, getSoundFileName } from "../../utils/utils";
 import NumberPlate from "../PlateStack/NumberPlate";
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
@@ -15,6 +15,7 @@ import NPED_CAT_C from "/NPED_Cat_C.svg";
 import popup from "../../assets/sounds/ui/popup_open.mp3";
 import { useSound } from "react-sounds";
 import { useNPEDContext } from "../../context/NPEDUserContext";
+import { useSoundContext } from "../../context/SoundContext";
 
 function useNow(tickMs = 1000) {
   const [, setNow] = useState(() => Date.now());
@@ -39,7 +40,13 @@ export default function SightingHistoryWidget({
   title,
 }: SightingHistoryProps) {
   useNow(1000);
-  const { play } = useSound(popup);
+  const { state } = useSoundContext();
+
+  const soundSrc = useMemo(() => {
+    return getSoundFileName(state.sightingSound) ?? popup;
+  }, [state.sightingSound]);
+
+  const { play } = useSound(soundSrc);
   const {
     sightings,
     setSelectedSighting,

src/components/UI/NavigationArrow.tsx

@@ -9,6 +9,7 @@ type NavigationArrowProps = {
 
 const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
   const navigate = useNavigate();
+
   const navigationDest = (side: string | undefined) => {
     if (settingsPage) {
       navigate("/");
@@ -25,7 +26,7 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
   if (settingsPage) {
     return (
       <>
-        {side === "CameraFront" ? (
+        {side === "CameraA" ? (
           <FontAwesomeIcon
             icon={faArrowRight}
             className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30"

src/context/reducers/SoundContextReducer.ts

@@ -13,6 +13,10 @@ export function reducer(state: SoundState, action: SoundPayload) {
         ...state,
         sightingSound: action.payload.sightingSound,
         NPEDsound: action.payload.NPEDsound,
+        hotlists: action.payload.hotlists.map((hotlist) => ({
+          name: hotlist.name,
+          sound: hotlist.sound,
+        })),
       };
   }
   return state;

src/hooks/useSightingFeed.ts

@@ -2,10 +2,10 @@ 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";
+import { getSoundFileName } from "../utils/utils";
+import switchSound from "../assets/sounds/ui/switch.mp3";
 
 async function fetchSighting(
   url: string | undefined,
@@ -16,15 +16,6 @@ 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[]>([]);

src/utils/utils.ts

@@ -1,3 +1,16 @@
+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";
+
+export function getSoundFileName(name: string) {
+  const sounds: Record<string, string> = {
+    switch: switchSound,
+    popup: popup,
+    notification: notification,
+  };
+  return sounds[name] ?? null;
+}
+
 const randomChars = () => {
   const uppercaseAsciiStart = 65;
   const letterIndex = Math.floor(Math.random() * 26);