- need to find better way to fetch file urls to use for sound

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -5,10 +5,19 @@ import { useSoundContext } from "../../../context/SoundContext";
 import { useCameraBlackboard } from "../../../hooks/useCameraBlackboard";
 import { toast } from "sonner";
 import SliderComponent from "../../UI/Slider";
+import { useFileUpload } from "../../../hooks/useFileUpload";
+import { useSound } from "react-sounds";
+import { useEffect, useState } from "react";
 
 const SoundSettingsFields = () => {
   const { state, dispatch } = useSoundContext();
   const { mutation } = useCameraBlackboard();
+  const [test, setTest] = useState("");
+
+  const { play } = useSound(test);
+  const { query } = useFileUpload({
+    queryKey: state.sightingSound ? [state.sightingSound] : undefined,
+  });
 
   const hotlists: Hotlist[] = state.hotlists;
 
@@ -24,7 +33,20 @@ const SoundSettingsFields = () => {
     hotlists,
   };
 
+  useEffect(() => {
+    setTest(test);
+  }, [test]);
+  const handletest = () => {
+    console.log(test);
+    play({ volume: 1 });
+    query?.refetch();
+  };
   const handleSubmit = async (values: FormValues) => {
+    console.log(query?.data);
+    const url = URL.createObjectURL(query?.data);
+    // const audio = new Audio(url);
+    // console.log(audio);
+    setTest(url);
     const updatedValues = {
       ...values,
       sightingVolume: state.sightingVolume,
@@ -32,7 +54,6 @@ const SoundSettingsFields = () => {
       hotlistSoundVolume: state.hotlistSoundVolume,
       soundOptions: [...(state.soundOptions ?? [])],
     };
-
     dispatch({ type: "UPDATE", payload: updatedValues });
 
     const result = await mutation.mutateAsync({
@@ -144,6 +165,9 @@ const SoundSettingsFields = () => {
           >
             Save Settings
           </button>
+          <button onClick={handletest} type="button">
+            click
+          </button>
         </Form>
       )}
     </Formik>