- saving current work before refactor

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -7,14 +7,13 @@ import { toast } from "sonner";
 import SliderComponent from "../../UI/Slider";
 import { useFileUpload } from "../../../hooks/useFileUpload";
 import { useSound } from "react-sounds";
-import { useEffect, useState } from "react";
+import { useMemo } from "react";
+import { getSoundFileURL } from "../../../utils/utils";
 
 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,
   });
@@ -33,20 +32,32 @@ const SoundSettingsFields = () => {
     hotlists,
   };
 
-  useEffect(() => {
-    setTest(test);
-  }, [test]);
-  const handletest = () => {
-    console.log(test);
-    play({ volume: 1 });
+  const soundSrc = useMemo(() => {
+    if (state?.sightingSound?.includes(".mp3") || state.sightingSound?.includes(".wav")) {
+      const file = state.soundOptions?.find((item) => item.name === state.sightingSound);
       query?.refetch();
+      console.log(query?.data);
+
+      // set state
+      dispatch({ type: "UPLOADEDSOUND", payload: query?.data });
+      if (!query?.data) {
+        query?.refetch();
+        return;
+      }
+      //get from state?
+      if (!state.uploadedSound) return "switchSound";
+      const url = URL.createObjectURL(state.uploadedSound);
+      return url ?? "switchSound";
+    }
+    return getSoundFileURL(state?.sightingSound) ?? "switchSound";
+  }, [state.sightingSound, state.soundOptions]);
+
+  const { play } = useSound(soundSrc);
+  const handletest = () => {
+    console.log(state.uploadedSound);
+    play();
   };
   const handleSubmit = async (values: FormValues) => {
-    console.log(query?.data);
-    const url = query?.data ? URL.createObjectURL(query.data) : "";
-    // const audio = new Audio(url);
-    // console.log(audio);
-    setTest(url);
     const updatedValues = {
       ...values,
       sightingVolume: state.sightingVolume,

src/context/reducers/SoundContextReducer.ts

@@ -18,6 +18,7 @@ export const initialState: SoundState = {
   sightingVolume: 1,
   NPEDsoundVolume: 1,
   hotlistSoundVolume: 1,
+  uploadedSound: null,
 };
 
 export function reducer(state: SoundState, action: SoundAction): SoundState {
@@ -63,7 +64,11 @@ export function reducer(state: SoundState, action: SoundAction): SoundState {
         ...state,
         hotlistSoundVolume: action.payload,
       };
-
+    case "UPLOADEDSOUND":
+      return {
+        ...state,
+        uploadedSound: action.payload,
+      };
     default:
       return state;
   }

src/hooks/useFileUpload.ts

@@ -22,7 +22,6 @@ const uploadFile = async (file: File) => {
 
 const getUploadFiles = async ({ queryKey }: { queryKey: string[] }) => {
   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");

src/types/types.ts

@@ -305,6 +305,7 @@ export type SoundState = {
   sightingVolume: number;
   NPEDsoundVolume: number;
   hotlistSoundVolume: number;
+  uploadedSound?: Blob | null;
 };
 
 type UpdateAction = {
@@ -331,7 +332,12 @@ type VolumeAction = {
   payload: number;
 };
 
-export type SoundAction = UpdateAction | AddAction | VolumeAction;
+type UploadedState = {
+  type: "UPLOADEDSOUND";
+  payload: Blob | undefined;
+};
+
+export type SoundAction = UpdateAction | AddAction | VolumeAction | UploadedState;
 export type WifiSettingValues = {
   ssid: string;
   password: string;