- 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>

src/components/SettingForms/Sound/SoundUpload.tsx

@@ -9,7 +9,9 @@ import { useFileUpload } from "../../../hooks/useFileUpload";
 const SoundUpload = () => {
   const { state, dispatch } = useSoundContext();
   const { mutation } = useCameraBlackboard();
-  const { mutation: fileMutation } = useFileUpload();
+  const { mutation: fileMutation } = useFileUpload({
+    queryKey: state.sightingSound ? [state.sightingSound] : undefined,
+  });
 
   const initialValues: SoundUploadValue = {
     name: "",

src/hooks/useFileUpload.ts

@@ -3,6 +3,10 @@ import { CAM_BASE } from "../utils/config";
 import { toast } from "sonner";
 const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : CAM_BASE;
 
+type UseFileUploadProps = {
+  queryKey?: string[];
+};
+
 const uploadFile = async (file: File) => {
   const form = new FormData();
   form.append("upload", file, file.name);
@@ -16,26 +20,29 @@ const uploadFile = async (file: File) => {
   return response.text();
 };
 
-const getUploadFiles = async () => {
+const getUploadFiles = async ({ queryKey }: { queryKey: string[] }) => {
-  const response = await fetch(`${camBase}/upload/file-upload/3`);
+  const [, fileName] = queryKey;
+  console.log(`${camBase}/Mobile/${fileName}.mp3`);
+  const response = await fetch(`${camBase}/Mobile/${fileName}`);
   if (!response.ok) {
     throw new Error("Cannot reach upload file endpoint");
   }
-  return response.json();
+  return response.blob();
 };
 
-export const useFileUpload = () => {
+export const useFileUpload = ({ queryKey }: UseFileUploadProps) => {
   const query = useQuery({
-    queryKey: ["getUploadFiles"],
+    queryKey: ["getUploadFiles", ...(queryKey ?? [])],
-    queryFn: getUploadFiles,
+    queryFn: () => getUploadFiles({ queryKey: ["getUploadFiles", ...(queryKey ?? [])] }),
+    enabled: !!queryKey,
   });
 
   const mutation = useMutation({
     mutationFn: (file: File) => uploadFile(file),
     mutationKey: ["uploadFile"],
-    onError: (err) => console.log(err),
+    onError: (err) => toast.error(err ? err.message : ""),
     onSuccess: (msg) => toast.success(msg),
   });
 
-  return { query, mutation };
+  return { query: queryKey ? query : undefined, mutation };
 };