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

src/components/CameraSettings/CameraSettingFields.tsx

@@ -24,7 +24,7 @@ const CameraSettingFields = ({
   onZoomLevelChange,
 }: CameraSettingsProps) => {
   const [showPwd, setShowPwd] = useState(false);
-  console.log(initialData);
+
   const initialValues = useMemo<CameraSettingValues>(
     () => ({
       friendlyName: initialData?.id ?? "",
@@ -48,7 +48,6 @@ const CameraSettingFields = ({
   };
 
   const handleSubmit = (values: CameraSettingValues) => {
-    console.log(values);
     updateCameraConfig(values);
   };
 

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -12,20 +12,10 @@ const SoundSettingsFields = () => {
     { name: "hotlist2", sound: "" },
   ];
 
-  const soundOptions = [
-    {
-      value: "switch",
-      label: "Switch (Default)",
-    },
-    {
-      value: "notification",
-      label: "Notification",
-    },
-    {
-      value: "popup",
-      label: "popup",
-    },
-  ];
+  const soundOptions = state?.soundOptions?.map((soundOption) => ({
+    value: soundOption?.name,
+    label: soundOption?.name,
+  }));
 
   const initialValues: FormValues = {
     sightingSound: state.sightingSound ?? "switch",
@@ -37,7 +27,6 @@ const SoundSettingsFields = () => {
     dispatch({ type: "UPDATE", payload: values });
     toast.success("Sound settings updated");
   };
-  console.log(state);
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit}>
       {({ values }) => (
@@ -49,7 +38,7 @@ const SoundSettingsFields = () => {
               name="sightingSound"
               className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
             >
-              {soundOptions.map(({ value, label }) => {
+              {soundOptions?.map(({ value, label }) => {
                 return (
                   <option key={value} value={value}>
                     {label}
@@ -65,7 +54,7 @@ const SoundSettingsFields = () => {
               name="NPEDsound"
               className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
             >
-              {soundOptions.map(({ value, label }) => (
+              {soundOptions?.map(({ value, label }) => (
                 <option key={value} value={value}>
                   {label}
                 </option>
@@ -97,7 +86,7 @@ const SoundSettingsFields = () => {
                             id={`hotlists.${index}.sound`}
                             className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
                           >
-                            {soundOptions.map(({ value, label }) => (
+                            {soundOptions?.map(({ value, label }) => (
                               <option key={value} value={value}>
                                 {label}
                               </option>

src/components/SettingForms/Sound/SoundUpload.tsx

@@ -1,38 +1,61 @@
 import { Form, Formik } from "formik";
 import FormGroup from "../components/FormGroup";
 import type { SoundUploadValue } from "../../../types/types";
+import { useSoundContext } from "../../../context/SoundContext";
+import { toast } from "sonner";
 
 const SoundUpload = () => {
+  const { dispatch } = useSoundContext();
   const initialValues: SoundUploadValue = {
+    name: "",
     soundFile: null,
   };
 
   const handleSubmit = (values: SoundUploadValue) => {
-    console.log(values);
+    if (!values.soundFile) {
+      toast.warning("Please select an audio file");
+    } else {
+      dispatch({ type: "ADD", payload: values });
+      toast.success("Sound file upload successfully");
+    }
   };
 
   return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      {({ setFieldValue }) => (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      enableReinitialize
+    >
+      {({ setFieldValue, errors, setFieldError }) => (
         <Form>
           <FormGroup>
-            <label htmlFor="soundFile">Sighting Sound</label>
+            <label htmlFor="soundFile">Sound File</label>
             <input
               type="file"
               name="soundFile"
               id="sightingSoundinput"
+              accept="audio/mpeg"
               onChange={(e) => {
                 if (
-                  e.target.files &&
-                  e.target.files[0].type.lastIndexOf(".mp3")
-                )
-                  setFieldValue("sightingSound", e.target.files[0]);
+                  e.target?.files &&
+                  e.target?.files[0]?.type === "audio/mpeg"
+                ) {
+                  setFieldValue("name", e.target.files[0].name);
+                  setFieldValue("soundFile", e.target.files[0]);
+                } else {
+                  setFieldError("soundFile", "Not an mp3 file");
+                  toast.error("Not an mp3 file");
+                }
               }}
             />
           </FormGroup>
+          {errors.soundFile && (
+            <p className="text-red-500 text-sm mt-1">Not an mp3 file</p>
+          )}
           <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"
+            disabled={errors.soundFile ? true : false}
           >
             Upload
           </button>

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, getSoundFileName } from "../../utils/utils";
+import { BLANK_IMG, getSoundFileURL } from "../../utils/utils";
 import NumberPlate from "../PlateStack/NumberPlate";
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
@@ -43,8 +43,8 @@ export default function SightingHistoryWidget({
   const { state } = useSoundContext();
 
   const soundSrc = useMemo(() => {
-    return getSoundFileName(state.sightingSound) ?? popup;
-  }, [state.sightingSound]);
+    return getSoundFileURL(state.NPEDsound) ?? popup;
+  }, [state.NPEDsound]);
 
   const { play } = useSound(soundSrc);
   const {