code fixes and adding modal

src/hooks/useCameraConfig.ts

@@ -0,0 +1,52 @@
+// Used to fetch and load the configs for the camera side
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+const base_url = import.meta.env.VITE_OUTSIDE_BASEURL;
+
+const fetchCameraSideConfig = async ({ queryKey }) => {
+  const [, cameraSide] = queryKey;
+  const fetchUrl = `${base_url}/fetch-config?id=${cameraSide}`;
+  const response = await fetch(fetchUrl);
+  if (!response.ok) throw new Error("cannot react cameraSide ");
+  return response.json();
+};
+
+const updateCamerasideConfig = async (data) => {
+  const updateUrl = `${base_url}/update-config?id=${data.id}`;
+
+  const updateConfigPayload = {
+    id: data.id,
+    fields: [
+      {
+        property: "propLEDDriverControlURI",
+        value: data.friendlyName,
+      },
+    ],
+  };
+  console.log(updateConfigPayload);
+  const response = await fetch(updateUrl, {
+    method: "POST",
+    body: JSON.stringify(updateConfigPayload),
+  });
+  if (!response.ok) throw new Error("Cannot reach update camera endpoint");
+};
+
+export const useFetchCameraConfig = (cameraSide: string) => {
+  const fetchedConfigQuery = useQuery({
+    queryKey: ["cameraSideConfig", cameraSide],
+    queryFn: fetchCameraSideConfig,
+  });
+
+  const updateConfigMutation = useMutation({
+    mutationKey: ["cameraSideConfigUpdate"],
+    mutationFn: updateCamerasideConfig,
+  });
+
+  return {
+    data: fetchedConfigQuery.data,
+    isPending: fetchedConfigQuery.isPending,
+    isError: fetchedConfigQuery.isError,
+    updateCameraConfig: updateConfigMutation.mutate,
+  };
+};

src/hooks/useGetConfigs.ts

@@ -7,6 +7,7 @@ export const useGetConfigs = () => {
     async function getConfigs() {
       try {
         const response = await fetch(`${apiUrl}/api/config-ids`);
+
         if (!response.ok) {
           console.log("failed fetching");
         }

src/hooks/useGetOverviewSnapshot.ts

@@ -5,12 +5,13 @@ const apiUrl = import.meta.env.VITE_BASEURL;
 
 async function fetchSnapshot(cameraSide: string) {
   const response = await fetch(
-    // `http://100.116.253.81/Colour-preview`
-    `${apiUrl}/${cameraSide}-preview`
+    `http://100.116.253.81/Colour-preview`
+    // `${apiUrl}/${cameraSide}-preview`
   );
   if (!response.ok) {
     throw new Error("Cannot reach endpoint");
   }
+
   return await response.blob();
 }
 

src/hooks/useNPEDAuth.ts

@@ -35,7 +35,7 @@ async function signIn(loginDetails: NPEDFieldType) {
       { property: "propClientID", value: clientId },
     ],
   };
-
+  console.log(frontId);
   const frontCameraResponse = await fetch(NPEDLoginURLFront, {
     method: "POST",
     body: JSON.stringify(frontCameraPayload),

src/hooks/useSightingFeed.ts

@@ -1,7 +1,10 @@
 import { useEffect, useRef, useState } from "react";
-import type { SightingWidgetType } from "../types/types";
+import type { SightingType, SightingWidgetType } from "../types/types";
 
-async function fetchSighting(url: string, ref: number): Promise<SightingWidgetType> {
+async function fetchSighting(
+  url: string,
+  ref: number
+): Promise<SightingWidgetType> {
   const res = await fetch(`${url}${ref}`);
   if (!res.ok) throw new Error(String(res.status));
   return await res.json();
@@ -11,6 +14,9 @@ export function useSightingFeed(url: string) {
   const [sightings, setSightings] = useState<SightingWidgetType[]>([]);
   const [selectedRef, setSelectedRef] = useState<number | null>(null);
   const [mostRecent, setMostRecent] = useState<SightingWidgetType | null>(null);
+  const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(
+    null
+  );
 
   const currentRef = useRef<number>(-1);
   const pollingTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -35,7 +41,7 @@ export function useSightingFeed(url: string) {
           currentRef.current = data.ref;
           lastValidTimestamp.current = now;
 
-          setSightings(prev => {
+          setSightings((prev) => {
             const updated = [data, ...prev].slice(0, 7);
             return updated;
           });
@@ -58,13 +64,15 @@ export function useSightingFeed(url: string) {
     };
   }, [url]);
 
-  const selected = sightings.find(s => s?.ref === selectedRef) ?? mostRecent;
+  // const selected = sightings.find(s => s?.ref === selectedRef) ?? mostRecent;
 
   return {
     sightings,
     selectedRef,
     setSelectedRef,
     mostRecent,
-    effectiveSelected: selected,
+    setSelectedSighting,
+    selectedSighting,
+    // effectiveSelected: selected,
   };
 }