refactor: update camera settings route and improve error/loading messages in components by increasing swipe size

src/App.tsx

@@ -17,7 +17,7 @@ function App() {
           <Routes>
             <Route path="/" element={<Container />}>
               <Route index element={<Dashboard />} />
-              <Route path="front-camera-settings" element={<FrontCamera />} />
+              <Route path="camera-settings" element={<FrontCamera />} />
               <Route path="rear-camera-settings" element={<RearCamera />} />
               <Route path="system-settings" element={<SystemSettings />} />
               <Route path="session-settings" element={<Session />} />

src/components/CameraOverview/SnapshotContainer.tsx

@@ -10,10 +10,10 @@ export const SnapshotContainer = ({
   side,
   settingsPage,
 }: SnapshotContainerProps) => {
-  const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
+  const { canvasRef, isError, isPending } = useGetOverviewSnapshot();
 
-  if (isError) return <>An error occurred</>;
+  if (isError) return <p className="h-100">An error occurred</p>;
-  if (isPending) return <>Loading...</>;
+  if (isPending) return <p className="h-100">Loading...</p>;
 
   const handleZoomClick = (event: React.MouseEvent<HTMLCanvasElement>) => {
     const bounds = canvasRef.current?.getBoundingClientRect();

src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx

@@ -9,7 +9,7 @@ const FrontCameraOverviewCard = () => {
   useOverviewVideo();
   const navigate = useNavigate();
   const handlers = useSwipeable({
-    onSwipedRight: () => navigate("/front-camera-settings"),
+    onSwipedRight: () => navigate("/camera-settings"),
     trackMouse: true,
   });
 

src/components/SightingOverview/SightingOverview.tsx

@@ -22,9 +22,10 @@ const SightingOverview = () => {
 
   const { sync } = useHiDPICanvas(imgRef, canvasRef);
 
-  if (isLoading) return <p>Loading</p>;
+  if (isLoading) return <p className="h-100">Loading</p>;
 
-  if (isError) return <p>An error occurred, Cannot display footage</p>;
+  if (isError)
+    return <p className="h-100">An error occurred, Cannot display footage</p>;
 
   return (
     <div className="flex flex-col md:flex-row">

src/hooks/useCameraBlackboard.ts

@@ -1,9 +1,9 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { OUTSIDE_CAM_BASE } from "../utils/config";
+import { CAM_BASE } from "../utils/config";
 import type { CameraBlackBoardOptions } from "../types/types";
 
 const getBlackboardData = async () => {
-  const response = await fetch(`${OUTSIDE_CAM_BASE}/api/blackboard`);
+  const response = await fetch(`${CAM_BASE}/api/blackboard`);
   if (!response.ok) {
     throw new Error("Failed to fetch blackboard data");
   }
@@ -11,7 +11,7 @@ const getBlackboardData = async () => {
 };
 
 const viewBlackboardData = async (options: CameraBlackBoardOptions) => {
-  const response = await fetch(`${OUTSIDE_CAM_BASE}/api/blackboard`, {
+  const response = await fetch(`${CAM_BASE}/api/blackboard`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(options),

src/hooks/useCameraConfig.ts

@@ -1,8 +1,8 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { toast } from "sonner";
-import { OUTSIDE_CAM_BASE } from "../utils/config";
+import { CAM_BASE } from "../utils/config";
 
-const base_url = `${OUTSIDE_CAM_BASE}/api`;
+const base_url = `${CAM_BASE}/api`;
 console.log(base_url);
 
 const fetchCameraSideConfig = async ({ queryKey }: { queryKey: string[] }) => {

src/hooks/useGetOverviewSnapshot.ts

@@ -1,11 +1,11 @@
 import { useRef, useCallback, useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { OUTSIDE_CAM_BASE } from "../utils/config";
+import { CAM_BASE } from "../utils/config";
 
-const apiUrl = OUTSIDE_CAM_BASE;
+const apiUrl = CAM_BASE;
 
-async function fetchSnapshot(cameraSide: string) {
+async function fetchSnapshot() {
-  const response = await fetch(`${apiUrl}/${cameraSide}-preview`);
+  const response = await fetch(`${apiUrl}/CameraA-preview`);
   if (!response.ok) {
     throw new Error("Cannot reach endpoint");
   }
@@ -13,7 +13,7 @@ async function fetchSnapshot(cameraSide: string) {
   return await response.blob();
 }
 
-export function useGetOverviewSnapshot(cameraSide: string) {
+export function useGetOverviewSnapshot() {
   const latestUrlRef = useRef<string | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const imageRef = useRef<HTMLImageElement | null>(null);
@@ -37,8 +37,8 @@ export function useGetOverviewSnapshot(cameraSide: string) {
     error,
     isPending,
   } = useQuery({
-    queryKey: ["overviewSnapshot", cameraSide],
+    queryKey: ["overviewSnapshot"],
-    queryFn: () => fetchSnapshot(cameraSide),
+    queryFn: () => fetchSnapshot(),
     refetchOnWindowFocus: false,
     refetchInterval: 250,
   });

src/pages/Dashboard.tsx

@@ -1,13 +1,12 @@
 import FrontCameraOverviewCard from "../components/FrontCameraOverview/FrontCameraOverviewCard";
 import SightingHistoryWidget from "../components/SightingsWidget/SightingWidget";
 import { SightingFeedProvider } from "../context/providers/SightingFeedProvider";
-import { OUTSIDE_CAM_BASE } from "../utils/config";
+import { CAM_BASE } from "../utils/config";
 
 const Dashboard = () => {
-  const dev_OUTSIDE_URL = `${OUTSIDE_CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`;
+  const base_url = `${CAM_BASE}/SightingList/sightingSummary?mostRecentRef=`;
-  // const folkestone_OUTSIDE_URL = `http://100.116.253.81/mergedHistory/sightingSummary?mostRecentRef=`;
   return (
-    <SightingFeedProvider url={dev_OUTSIDE_URL} side="Front">
+    <SightingFeedProvider url={base_url} side="Front">
       <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
         <FrontCameraOverviewCard />
         <SightingHistoryWidget title="Sightings" />