From a64fa76ecb5a1cf6af90d495da4815a53c2376ff Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Tue, 28 Oct 2025 08:50:55 +0000
Subject: [PATCH] - saving current work before refactor

---
 .../Sound/SoundSettingsFields.tsx             | 39 ++++++++++++-------
 src/context/reducers/SoundContextReducer.ts   |  7 +++-
 src/hooks/useFileUpload.ts                    |  1 -
 src/types/types.ts                            |  8 +++-
 4 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/src/components/SettingForms/Sound/SoundSettingsFields.tsx b/src/components/SettingForms/Sound/SoundSettingsFields.tsx
index be098cb..59437c7 100644
--- a/src/components/SettingForms/Sound/SoundSettingsFields.tsx
+++ b/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 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(test);
-    play({ volume: 1 });
-    query?.refetch();
+    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,
diff --git a/src/context/reducers/SoundContextReducer.ts b/src/context/reducers/SoundContextReducer.ts
index 0880b6c..15e2139 100644
--- a/src/context/reducers/SoundContextReducer.ts
+++ b/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;
   }
diff --git a/src/hooks/useFileUpload.ts b/src/hooks/useFileUpload.ts
index da3f9b8..7fbbb1f 100644
--- a/src/hooks/useFileUpload.ts
+++ b/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");
diff --git a/src/types/types.ts b/src/types/types.ts
index 45d8c79..2eea1c4 100644
--- a/src/types/types.ts
+++ b/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;