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"