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

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) {
-  const response = await fetch(`${apiUrl}/${cameraSide}-preview`);
+async function fetchSnapshot() {
+  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],
-    queryFn: () => fetchSnapshot(cameraSide),
+    queryKey: ["overviewSnapshot"],
+    queryFn: () => fetchSnapshot(),
     refetchOnWindowFocus: false,
     refetchInterval: 250,
   });