- added state to set sound set settings for sightings and NPED hits

- added function to save mute settings

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -2,15 +2,14 @@ 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 { useCameraBlackboard } from "../../../hooks/useCameraBlackboard";
 import { toast } from "sonner";
 
 const SoundSettingsFields = () => {
   const { state, dispatch } = useSoundContext();
-  const hotlists: Hotlist[] = [
-    { name: "hotlist0", sound: "" },
-    { name: "hotlist1", sound: "" },
-    { name: "hotlist2", sound: "" },
-  ];
+  const { mutation } = useCameraBlackboard();
+
+  const hotlists: Hotlist[] = state.hotlists;
 
   const soundOptions = state?.soundOptions?.map((soundOption) => ({
     value: soundOption?.name,
@@ -23,9 +22,18 @@ const SoundSettingsFields = () => {
     hotlists,
   };
 
-  const handleSubmit = (values: FormValues) => {
+  const handleSubmit = async (values: FormValues) => {
     dispatch({ type: "UPDATE", payload: values });
-    toast.success("Sound settings updated");
+    const result = await mutation.mutateAsync({
+      operation: "INSERT",
+      path: "soundSettings",
+      value: values,
+    });
+    if (result.reason !== "OK") {
+      toast.error("Cannot update sound settings");
+    } else {
+      toast.success("Sound Settings successfully updated");
+    }
   };
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit}>
@@ -68,8 +76,8 @@ const SoundSettingsFields = () => {
                 name="hotlists"
                 render={() => (
                   <div className="w-full m-2">
-                    {values.hotlists.length > 0 ? (
-                      values.hotlists.map((hotlist, index) => (
+                    {values?.hotlists?.length > 0 ? (
+                      values?.hotlists?.map((hotlist, index) => (
                         <div
                           key={hotlist.name}
                           className="flex items-center m-2 w-full justify-between"

src/components/UI/SoundBtn.tsx

@@ -1,13 +1,25 @@
 import { faVolumeHigh, faVolumeXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useSoundEnabled } from "react-sounds";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
+import { useEffect } from "react";
 
 const SoundBtn = () => {
+  const { mutation, query } = useCameraBlackboard();
   const [enabled, setEnabled] = useSoundEnabled();
 
-  const handleClick = () => {
-    setEnabled(!enabled);
+  const handleClick = async () => {
+    const newEnabled = !enabled;
+    setEnabled(newEnabled);
+    await mutation.mutateAsync({
+      operation: "INSERT",
+      path: "soundEnabled",
+      value: { enabled: newEnabled },
+    });
   };
+  useEffect(() => {
+    setEnabled(query?.data?.soundEnabled?.enabled);
+  }, [query?.data?.soundEnabled?.enabled, setEnabled]);
 
   return (
     <button onClick={handleClick}>