code quality improvements and improved file error handling

src/hooks/useGetOverviewSnapshot.ts

@@ -2,10 +2,11 @@ import { useRef, useCallback, useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 
 const apiUrl = import.meta.env.VITE_BASEURL;
-
+const folkstoneUrl = import.meta.env.VITE_FOLKESTONE_BASE;
 async function fetchSnapshot(cameraSide: string) {
+  console.log(`${folkstoneUrl}/${cameraSide}-preview`);
   const response = await fetch(
-    // `http://100.116.253.81/Colour-preview`
+    // `${folkstoneUrl}/Colour-preview`
     `${apiUrl}/${cameraSide}-preview`
   );
   if (!response.ok) {

src/hooks/useOverviewVideo.ts

@@ -2,8 +2,6 @@ import { useQuery } from "@tanstack/react-query";
 import { useRef } from "react";
 
 const apiUrl = import.meta.env.VITE_BASEURL;
-const FAST_MS = 200; // tab visible
-const SLOW_MS = 2000; // tab hidden
 
 async function fetchOverviewImage(cameraSide: string) {
   const response = await fetch(`${apiUrl}${cameraSide}-preview`);

src/hooks/useSightingFeed.ts

@@ -1,75 +1,97 @@
 import { useEffect, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import type { SightingType } from "../types/types";
 
 async function fetchSighting(url: string, ref: number): Promise<SightingType> {
   const res = await fetch(`${url}${ref}`);
   if (!res.ok) throw new Error(String(res.status));
-  return await res.json();
+  return res.json();
 }
 
 export function useSightingFeed(url: string) {
   const [sightings, setSightings] = useState<SightingType[]>([]);
   const [selectedRef, setSelectedRef] = useState<number | null>(null);
-  const [mostRecent, setMostRecent] = useState<SightingType | null>(null);
+  const mostRecent = sightings[0] ?? null;
   const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(
     null
   );
 
   const currentRef = useRef<number>(-1);
-  const pollingTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
   const lastValidTimestamp = useRef<number>(Date.now());
 
-  useEffect(() => {
-    const poll = async () => {
-      try {
-        const data = await fetchSighting(url, currentRef.current);
+  const query = useQuery({
+    queryKey: ["sighting-feed", url],
+    enabled: !!url,
+    queryFn: () => fetchSighting(url, currentRef.current),
 
-        const now = Date.now();
+    refetchInterval: (q) => {
+      const data = q.state.data as SightingType | undefined;
+      const now = Date.now();
 
-        if (data.ref === -1) {
-          if (now - lastValidTimestamp.current > 60000) {
-            console.warn("No valid sighting in over a minute. Restarting...");
-            currentRef.current = -1;
-            lastValidTimestamp.current = now;
-          }
-
-          pollingTimeout.current = setTimeout(poll, 400);
-        } else {
-          currentRef.current = data.ref;
-          lastValidTimestamp.current = now;
-
-          setSightings((prev) => {
-            const updated = [data, ...prev].slice(0, 7);
-            return updated;
-          });
-
-          setMostRecent(data);
-          setSelectedRef(data.ref);
-
-          pollingTimeout.current = setTimeout(poll, 100);
-        }
-      } catch (err) {
-        console.error("Polling error:", err);
-        pollingTimeout.current = setTimeout(poll, 100);
+      if (data && data.ref !== -1) {
+        lastValidTimestamp.current = now;
+        return 100;
       }
-    };
 
-    poll();
+      if (now - lastValidTimestamp.current > 60_000) {
+        currentRef.current = -1;
+        lastValidTimestamp.current = now;
+      }
+      return 400;
+    },
+    refetchIntervalInBackground: true,
+    refetchOnWindowFocus: false,
+    retry: false,
+    staleTime: 0,
+  });
 
-    return () => {
-      if (pollingTimeout.current) clearTimeout(pollingTimeout.current);
-    };
-  }, [url]);
+  useEffect(() => {
+    const data = query.data;
+    if (!data) return;
 
-  // const selected = sightings.find(s => s?.ref === selectedRef) ?? mostRecent;
+    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;
+    }
+
+    currentRef.current = data.ref;
+    lastValidTimestamp.current = now;
+
+    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);
+    });
+
+    setSelectedRef(data.ref);
+  }, [query.data]);
+
+  useEffect(() => {
+    if (query.error) {
+      // you can add logging/telemetry here
+      // console.error("Sighting feed error:", query.error);
+    }
+  }, [query.error]);
 
   return {
     sightings,
     selectedRef,
     setSelectedRef,
     mostRecent,
-    setSelectedSighting,
     selectedSighting,
-    // effectiveSelected: selected,
+    setSelectedSighting,
+    data: query.data,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    isError: query.isError,
+    error: query.error as Error | null,
+    refetch: query.refetch,
   };
 }

src/hooks/useSystemConfig.ts

@@ -10,8 +10,8 @@ export const useSystemConfig = () => {
   const uploadSettingsMutation = useMutation({
     mutationKey: ["uploadSettings"],
     mutationFn: sendBlobFileUpload,
-    onError: () => console.log("upload failed"),
-    onSuccess: (test) => console.log(test),
+    onError: (error) => toast.error(error.message),
+    onSuccess: (test) => toast(test),
   });
 
   const saveSystemSettings = useMutation({