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

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>