- minor tweaks on zoom and navigation arrow

src/App.tsx

@@ -19,8 +19,8 @@ function App() {
             <Routes>
               <Route path="/" element={<Container />}>
                 <Route index element={<Dashboard />} />
-                <Route path="camera-settings" element={<FrontCamera />} />
+                <Route path="a-camera-settings" element={<FrontCamera />} />
-                <Route path="rear-camera-settings" element={<RearCamera />} />
+                <Route path="b-camera-settings" element={<RearCamera />} />
                 <Route path="system-settings" element={<SystemSettings />} />
                 <Route path="session-settings" element={<Session />} />
                 <Route path="*" element={<Navigate to="/" replace />} />

src/components/CameraOverview/SnapshotContainer.tsx

@@ -1,12 +1,8 @@
 import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
-import type { ZoomInOptions } from "../../types/types";
 import NavigationArrow from "../UI/NavigationArrow";
-import { useCameraZoom } from "../../hooks/useCameraZoom";
+
-import { useEffect } from "react";
 import Loading from "../UI/Loading";
 import ErrorState from "../UI/ErrorState";
-import { reverseZoomMapping, zoomMapping } from "../../utils/utils";
-
 type SnapshotContainerProps = {
   side: string;
   settingsPage?: boolean;
@@ -16,10 +12,6 @@ type SnapshotContainerProps = {
 
 export const SnapshotContainer = ({ side, settingsPage, zoomLevel, onZoomLevelChange }: SnapshotContainerProps) => {
   const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
-  const cameraControllerSide = side === "CameraA" ? "CameraControllerA" : "CameraControllerB";
-  const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
-  const magnification = query?.data?.propMagnification?.value;
-  const apiZoom = reverseZoomMapping(magnification);
 
   const handleZoomClick = () => {
     const baseLevel = zoomLevel ?? 1;
@@ -30,19 +22,6 @@ export const SnapshotContainer = ({ side, settingsPage, zoomLevel, onZoomLevelCh
     if (!zoomLevel) return;
   };
 
-  useEffect(() => {
-    if (zoomLevel) {
-      const text = zoomMapping(apiZoom);
-      const zoomInOptions: ZoomInOptions = {
-        camera: cameraControllerSide,
-        multiplier: zoomLevel,
-        multiplierText: text,
-      };
-      console.log(zoomInOptions);
-      mutation.mutate(zoomInOptions);
-    }
-  }, [cameraControllerSide, apiZoom, zoomLevel]);
-
   return (
     <div className="flex flex-col md:flex-row">
       <NavigationArrow side={side} settingsPage={settingsPage} />

src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx

@@ -8,8 +8,8 @@ import SightingOverview from "../SightingOverview/SightingOverview";
 const FrontCameraOverviewCard = () => {
   const navigate = useNavigate();
   const handlers = useSwipeable({
-    onSwipedRight: () => navigate("/camera-settings"),
+    onSwipedRight: () => navigate("/a-camera-settings"),
-    onSwipedLeft: () => navigate("/rear-camera-settings"),
+    onSwipedLeft: () => navigate("/b-camera-settings"),
     trackMouse: true,
   });
 

src/components/FrontCameraSettings/OverviewVideoContainer.tsx

@@ -20,11 +20,11 @@ const OverviewVideoContainer = ({
   const location = useLocation();
   const handlers = useSwipeable({
     onSwipedLeft: () => {
-      if (location.pathname === "/rear-camera-settings") return;
+      if (location.pathname === "/b-camera-settings") return;
       navigate("/");
     },
     onSwipedRight: () => {
-      if (location.pathname === "/camera-settings") return;
+      if (location.pathname === "/a-camera-settings") return;
       navigate("/");
     },
     trackMouse: true,

src/components/RearCameraOverview/RearCameraOverviewCard.tsx

@@ -13,7 +13,7 @@ type CardProps = React.HTMLAttributes<HTMLDivElement>;
 const RearCameraOverviewCard = ({ className }: CardProps) => {
   const navigate = useNavigate();
   const handlers = useSwipeable({
-    onSwipedLeft: () => navigate("/rear-camera-settings"),
+    onSwipedLeft: () => navigate("/b-camera-settings"),
     trackMouse: true,
   });
   const { mostRecent } = useSightingFeedContext();

src/components/SettingForms/WiFi&Modem/ModemSettings.tsx

@@ -57,78 +57,81 @@ const ModemSettings = () => {
   return (
     <>
       <ModemToggle showSettings={showSettings} onShowSettings={setShowSettings} />
-      {!showSettings && (
+
-        <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
+      <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
-          {({ isSubmitting }) => (
+        {({ isSubmitting }) => (
-            <Form className="flex flex-col space-y-5 px-2">
+          <Form className="flex flex-col space-y-5 px-2">
-              <FormGroup>
+            {!showSettings && (
-                <label htmlFor="apn" className="font-medium whitespace-nowrap md:w-2/3">
+              <>
-                  APN
+                <FormGroup>
-                </label>
+                  <label htmlFor="apn" className="font-medium whitespace-nowrap md:w-2/3">
-                <Field
+                    APN
-                  placeholder="Enter APN"
+                  </label>
-                  name="apn"
-                  id="apn"
-                  type="text"
-                  className="p-1.5 border border-gray-400 rounded-lg"
-                />
-              </FormGroup>
-              <FormGroup>
-                <label htmlFor="username" className="font-medium whitespace-nowrap md:w-2/3">
-                  Username
-                </label>
-                <Field
-                  placeholder="Enter Username"
-                  name="username"
-                  id="username"
-                  type="text"
-                  className="p-1.5 border border-gray-400 rounded-lg"
-                />
-              </FormGroup>
-              <FormGroup>
-                <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
-                  Password
-                </label>
-                <div className="flex gap-2 items-center relative mb-4">
                   <Field
-                    id="password"
+                    placeholder="Enter APN"
-                    name="password"
+                    name="apn"
-                    type={showPwd ? "text" : "password"}
+                    id="apn"
-                    className="p-2 border border-gray-400 rounded-lg w-full"
+                    type="text"
-                    placeholder="Enter Password"
+                    className="p-1.5 border border-gray-400 rounded-lg"
                   />
-                  <FontAwesomeIcon
+                </FormGroup>
-                    type="button"
+                <FormGroup>
-                    className="absolute right-5 end-0"
+                  <label htmlFor="username" className="font-medium whitespace-nowrap md:w-2/3">
-                    onClick={() => setShowPwd((s) => !s)}
+                    Username
-                    icon={showPwd ? faEyeSlash : faEye}
+                  </label>
+                  <Field
+                    placeholder="Enter Username"
+                    name="username"
+                    id="username"
+                    type="text"
+                    className="p-1.5 border border-gray-400 rounded-lg"
                   />
-                </div>
+                </FormGroup>
-              </FormGroup>
+                <FormGroup>
-              <FormGroup>
+                  <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
-                <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
+                    Password
-                  Password
+                  </label>
-                </label>
+                  <div className="flex gap-2 items-center relative mb-4">
-                <Field
+                    <Field
-                  name="authenticationType"
+                      id="password"
-                  as="select"
+                      name="password"
-                  className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
+                      type={showPwd ? "text" : "password"}
-                >
+                      className="p-2 border border-gray-400 rounded-lg w-full"
-                  <option value="PAP">PAP</option>
+                      placeholder="Enter Password"
-                  <option value="CHAP">CHAP</option>
+                    />
-                  <option value="none">None</option>
+                    <FontAwesomeIcon
-                </Field>
+                      type="button"
-              </FormGroup>
+                      className="absolute right-5 end-0"
-              <button
+                      onClick={() => setShowPwd((s) => !s)}
-                type="submit"
+                      icon={showPwd ? faEyeSlash : faEye}
-                className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+                    />
-              >
+                  </div>
-                {isSubmitting || modemMutation.isPending ? "Saving..." : "Save Modem settings"}
+                </FormGroup>
-              </button>
+                <FormGroup>
-            </Form>
+                  <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
-          )}
+                    Password
-        </Formik>
+                  </label>
-      )}
+                  <Field
+                    name="authenticationType"
+                    as="select"
+                    className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
+                  >
+                    <option value="PAP">PAP</option>
+                    <option value="CHAP">CHAP</option>
+                    <option value="none">None</option>
+                  </Field>
+                </FormGroup>
+              </>
+            )}
+            <button
+              type="submit"
+              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            >
+              {isSubmitting || modemMutation.isPending ? "Saving..." : "Save Modem settings"}
+            </button>
+          </Form>
+        )}
+      </Formik>
     </>
   );
 };

src/components/UI/NavigationArrow.tsx

@@ -17,9 +17,9 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
     }
 
     if (side === "Front") {
-      navigate("/camera-settings");
+      navigate("/a-camera-settings");
     } else if (side === "Rear") {
-      navigate("/Rear-Camera-settings");
+      navigate("/b-Camera-settings");
     }
   };
 
@@ -31,14 +31,14 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
             size="2xl"
             icon={faArrowRight}
             className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30"
-            onClick={() => navigationDest("Front")}
+            onClick={() => navigationDest("a")}
           />
         ) : (
           <FontAwesomeIcon
             icon={faArrowLeft}
             size="2xl"
             className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30"
-            onClick={() => navigationDest("Rear")}
+            onClick={() => navigationDest("b")}
           />
         )}
       </>

src/hooks/useCameraWifiandModem.ts

@@ -3,9 +3,10 @@ import { CAM_BASE } from "../utils/config";
 import type { ModemConfig, WifiConfig } from "../types/types";
 import { useEffect } from "react";
 import { toast } from "sonner";
+const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : "";
 
 const getWiFiSettings = async () => {
-  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-wifi`, {
+  const response = await fetch(`${camBase}/api/fetch-config?id=ModemAndWifiManager-wifi`, {
     signal: AbortSignal.timeout(500),
   });
   if (!response.ok) {
@@ -15,7 +16,7 @@ const getWiFiSettings = async () => {
 };
 
 const updateWifiSettings = async (wifiConfig: WifiConfig) => {
-  const response = await fetch(`${CAM_BASE}/api/update-config?id=ModemAndWifiManager-wifi`, {
+  const response = await fetch(`${camBase}/api/update-config?id=ModemAndWifiManager-wifi`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(wifiConfig),
@@ -27,7 +28,7 @@ const updateWifiSettings = async (wifiConfig: WifiConfig) => {
 };
 
 const getModemSettings = async () => {
-  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-modem`, {
+  const response = await fetch(`${camBase}/api/fetch-config?id=ModemAndWifiManager-modem`, {
     signal: AbortSignal.timeout(500),
   });
   if (!response.ok) {
@@ -37,7 +38,7 @@ const getModemSettings = async () => {
 };
 
 const updateModemSettings = async (modemConfig: ModemConfig) => {
-  const response = await fetch(`${CAM_BASE}/api/update-config?id=ModemAndWifiManager-modem`, {
+  const response = await fetch(`${camBase}/api/update-config?id=ModemAndWifiManager-modem`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(modemConfig),

src/hooks/useCameraZoom.ts

@@ -5,6 +5,7 @@ import { toast } from "sonner";
 import { useEffect } from "react";
 
 async function zoomIn(options: ZoomInOptions) {
+  console.log(options);
   const response = await fetch(
     `${CAM_BASE}/Ip${options.camera}-command?magnification=${options.multiplierText?.toLowerCase()}`,
     {