- added prettier config file

- improved sound state to remove pooling

- increased size of naviagtion arrows and fixed navigation onClick

-  decreased width of nav bar

- fixed button to reveal passwords in some password fields

src/hooks/useCameraBlackboard.ts

@@ -50,8 +50,7 @@ export const useCameraBlackboard = () => {
   });
 
   useEffect(() => {
-    if (query.isError)
-      toast.error(query.error.message, { id: "viewBlackboardData" });
+    if (query.isError) toast.error(query.error.message, { id: "viewBlackboardData" });
   }, [query?.error?.message, query.isError]);
 
   return { query, mutation };

src/hooks/useCameraConfig.ts

@@ -14,11 +14,7 @@ const fetchCameraSideConfig = async ({ queryKey }: { queryKey: string[] }) => {
   return response.json();
 };
 
-const updateCamerasideConfig = async (data: {
-  id: string | number;
-  friendlyName: string;
-  cameraAddress: string;
-}) => {
+const updateCamerasideConfig = async (data: { id: string | number; friendlyName: string; cameraAddress: string }) => {
   const updateUrl = `${base_url}/update-config?id=${data.id}`;
 
   const updateConfigPayload = {
@@ -30,7 +26,7 @@ const updateCamerasideConfig = async (data: {
       },
     ],
   };
-  console.log(updateConfigPayload);
+
   const response = await fetch(updateUrl, {
     method: "POST",
     body: JSON.stringify(updateConfigPayload),

src/hooks/useCameraOutput.ts

@@ -34,9 +34,7 @@ const updateDispatcherConfig = async (data: BearerTypeFieldType) => {
 };
 
 const getBackOfficeConfig = async () => {
-  const response = await fetch(
-    `${CAM_BASE}/api/fetch-config?id=Dispatcher-json`
-  );
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher-json`);
   if (!response.ok) throw new Error("Cannot get Back Office configuration");
   return response.json();
 };
@@ -67,13 +65,10 @@ const updateBackOfficeConfig = async (data: InitialValuesForm) => {
       },
     ],
   };
-  const response = await fetch(
-    `${CAM_BASE}/api/update-config?id=Dispatcher-json`,
-    {
-      method: "POST",
-      body: JSON.stringify(updateConfigPayload),
-    }
-  );
+  const response = await fetch(`${CAM_BASE}/api/update-config?id=Dispatcher-json`, {
+    method: "POST",
+    body: JSON.stringify(updateConfigPayload),
+  });
   if (!response.ok) throw new Error("Cannot update Back Office configuration");
   return response.json();
 };

src/hooks/useCameraWifiandModem.ts

@@ -5,12 +5,9 @@ import { useEffect } from "react";
 import { toast } from "sonner";
 
 const getWiFiSettings = async () => {
-  const response = await fetch(
-    `${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-wifi`,
-    {
-      signal: AbortSignal.timeout(500),
-    }
-  );
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-wifi`, {
+    signal: AbortSignal.timeout(500),
+  });
   if (!response.ok) {
     throw new Error("Cannot fetch Wifi settings");
   }
@@ -18,14 +15,11 @@ const getWiFiSettings = async () => {
 };
 
 const updateWifiSettings = async (wifiConfig: WifiConfig) => {
-  const response = await fetch(
-    `${CAM_BASE}/api/update-config?id=ModemAndWifiManager-wifi`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(wifiConfig),
-    }
-  );
+  const response = await fetch(`${CAM_BASE}/api/update-config?id=ModemAndWifiManager-wifi`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(wifiConfig),
+  });
   if (!response.ok) {
     throw new Error("Cannot update wifi settings");
   }
@@ -33,12 +27,9 @@ const updateWifiSettings = async (wifiConfig: WifiConfig) => {
 };
 
 const getModemSettings = async () => {
-  const response = await fetch(
-    `${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-modem`,
-    {
-      signal: AbortSignal.timeout(500),
-    }
-  );
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-modem`, {
+    signal: AbortSignal.timeout(500),
+  });
   if (!response.ok) {
     throw new Error("Cannot fetch modem settings");
   }
@@ -46,14 +37,11 @@ const getModemSettings = async () => {
 };
 
 const updateModemSettings = async (modemConfig: ModemConfig) => {
-  const response = await fetch(
-    `${CAM_BASE}/api/update-config?id=ModemAndWifiManager-modem`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(modemConfig),
-    }
-  );
+  const response = await fetch(`${CAM_BASE}/api/update-config?id=ModemAndWifiManager-modem`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(modemConfig),
+  });
   if (!response.ok) {
     throw new Error("cannot update modem settings");
   }
@@ -100,13 +88,11 @@ export const useWifiAndModem = () => {
   });
 
   useEffect(() => {
-    if (wifiQuery.isError)
-      toast.error("Cannot get WiFi settings", { id: "wiFiSettings" });
+    if (wifiQuery.isError) toast.error("Cannot get WiFi settings", { id: "wiFiSettings" });
   }, [wifiQuery?.error?.message, wifiQuery.isError]);
 
   useEffect(() => {
-    if (modemQuery.isError)
-      toast.error("Cannot get Modem settings", { id: "modemSettings" });
+    if (modemQuery.isError) toast.error("Cannot get Modem settings", { id: "modemSettings" });
   }, [modemQuery?.error?.message, modemQuery.isError]);
   return {
     wifiQuery,

src/hooks/useSightingFeed.ts

@@ -1,15 +1,12 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { Query, useQuery } from "@tanstack/react-query";
 import type { SightingType } from "../types/types";
 import { useSoundOnChange } from "react-sounds";
 import { useSoundContext } from "../context/SoundContext";
 import { getSoundFileURL } from "../utils/utils";
 import switchSound from "../assets/sounds/ui/switch.mp3";
 
-async function fetchSighting(
-  url: string | undefined,
-  ref: number
-): Promise<SightingType> {
+async function fetchSighting(url: string | undefined, ref: number): Promise<SightingType> {
   const res = await fetch(`${url}${ref}`, {
     signal: AbortSignal.timeout(5000),
   });
@@ -18,86 +15,77 @@ async function fetchSighting(
 }
 
 export function useSightingFeed(url: string | undefined) {
-  const { state } = useSoundContext();
+  const { state, audioArmed } = useSoundContext();
   const [sightings, setSightings] = useState<SightingType[]>([]);
   const [selectedRef, setSelectedRef] = useState<number | null>(null);
   const [sessionStarted, setSessionStarted] = useState(false);
+  const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(null);
+
   const mostRecent = sightings[0] ?? null;
   const latestRef = mostRecent?.ref ?? null;
-  const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(
-    null
-  );
+
   const first = useRef(true);
+  const lastSoundAt = useRef(0);
+  const COOLDOWN_MS = 1500;
+  const currentRef = useRef<number>(-1);
+  const lastValidTimestamp = useRef<number>(Date.now());
 
   const trigger = useMemo(() => {
-    if (latestRef == null) return null;
+    if (latestRef == null || !audioArmed) return null;
     if (first.current) {
       first.current = false;
       return Symbol("skip");
     }
+    const now = Date.now();
+    if (now - lastSoundAt.current < COOLDOWN_MS) return Symbol("skip");
+    lastSoundAt.current = now;
     return latestRef;
-  }, [latestRef]);
+  }, [audioArmed, latestRef]);
+
   const soundSrc = useMemo(() => {
     return getSoundFileURL(state?.sightingSound) ?? switchSound;
   }, [state.sightingSound]);
 
-  //use latestref instead of trigger to revert back
-  useSoundOnChange(soundSrc, trigger, {
-    volume: 1,
-  });
+  function refetchInterval(query: Query<SightingType, Error, SightingType, (string | undefined)[]>) {
+    if (!query) return;
+    const data = query.state.data as SightingType | undefined;
+    const now = Date.now();
 
-  const currentRef = useRef<number>(-1);
-  const lastValidTimestamp = useRef<number>(Date.now());
+    if (data && data.ref !== -1) {
+      lastValidTimestamp.current = now;
+      return 100;
+    }
+
+    if (now - lastValidTimestamp.current > 60_000) {
+      currentRef.current = -1;
+      lastValidTimestamp.current = now;
+    }
+    return 400;
+  }
 
   const query = useQuery({
     queryKey: ["sighting-feed", url],
     enabled: !!url,
     queryFn: () => fetchSighting(url, currentRef.current),
-
-    refetchInterval: (q) => {
-      const data = q.state.data as SightingType | undefined;
-      const now = Date.now();
-
-      if (data && data.ref !== -1) {
-        lastValidTimestamp.current = now;
-        return 100;
-      }
-
-      if (now - lastValidTimestamp.current > 60_000) {
-        currentRef.current = -1;
-        lastValidTimestamp.current = now;
-      }
-      return 400;
-    },
+    refetchInterval: (q) => refetchInterval(q),
     refetchIntervalInBackground: true,
     refetchOnWindowFocus: false,
     retry: false,
     staleTime: 0,
   });
 
+  //use latestref instead of trigger to revert back
+  useSoundOnChange(soundSrc, trigger, {
+    volume: 1,
+    initial: false,
+  });
+
   useEffect(() => {
     const data = query.data;
-    if (!data) return;
+    if (!data || data.ref === -1) return;
 
     const now = Date.now();
 
-    if (data.ref === -1) {
-      // setSightings((prev) => {
-      //   if (prev[0]?.ref === data.ref) return prev;
-      //   const dedupPrev = prev.filter((s) => s.ref !== data.ref);
-      //   return [data, ...dedupPrev].slice(0, 7);
-      // });
-
-      return;
-    }
-
-    // if (Notification.permission === "granted") {
-    //   new Notification("New Sighting!", {
-    //     body: `Ref: ${data.ref}`,
-    //     icon: "/MAV-blue.svg",
-    //   });
-    // }
-
     currentRef.current = data.ref;
     lastValidTimestamp.current = now;
 
@@ -110,11 +98,6 @@ export function useSightingFeed(url: string | undefined) {
     setSelectedRef(data.ref);
   }, [query.data]);
 
-  useEffect(() => {
-    if (query.error) {
-      // console.error("Sighting feed error:", query.error);
-    }
-  }, [query.error]);
   return {
     sightings,
     selectedRef,