apply stashed change before merge bradley

src/components/CameraOverview/SnapshotContainer.tsx

@@ -10,7 +10,10 @@ export const SnapshotContainer = ({
   side,
   settingsPage,
 }: SnapshotContainerProps) => {
-  const { canvasRef } = useGetOverviewSnapshot(side);
+  const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
+
+  if (isError) return <>An error occurred</>;
+  if (isPending) return <>loading...</>;
 
   return (
     <div className="relative w-full aspect-video">

src/components/CameraSettings/CameraSettingFields.tsx

@@ -16,15 +16,20 @@ const CameraSettingFields = () => {
 
   const validateValues = (values: CameraSettingValues) => {
     const errors: CameraSettingErrorValues = {};
+    // if (Object.keys(errors).length === 0) {
+    //   toast.error("Please fill in required fields");
+    // }
     if (!values.friendlyName) errors.friendlyName = "Required";
     if (!values.cameraAddress) errors.cameraAddress = "Required";
     if (!values.userName) errors.userName = "Required";
     if (!values.password) errors.password = "Required";
+
     return errors;
   };
 
   const handleSubmit = (values: CameraSettingValues) => {
     // post values to endpoint
+    console.log(values);
     toast("Settings Saved");
   };
 
@@ -35,10 +40,10 @@ const CameraSettingFields = () => {
       validate={validateValues}
       validateOnChange={false}
     >
-      {({ errors, touched, setFieldValue }) => (
+      {({ errors, touched }) => (
         <Form className="flex flex-col space-y-4 p-2">
           <div className="flex flex-col space-y-2 relative">
-            <label htmlFor="friendlyName">Friendly Name</label>
+            <label htmlFor="friendlyName">Name</label>
             {touched.friendlyName && errors.friendlyName && (
               <small className="absolute right-0 top-0 text-red-500">
                 {errors.friendlyName}
@@ -53,24 +58,6 @@ const CameraSettingFields = () => {
             />
           </div>
 
-          <div className="flex flex-col space-y-2 relative">
-            <label htmlFor="setupCamera">Setup Camera</label>
-            <Field
-              as="select"
-              id="setupCamera"
-              name="setupCamera"
-              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
-              onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-                setFieldValue("setupCamera", parseInt(e.target.value, 10))
-              }
-            >
-              <option value={1}>1</option>
-              <option value={2}>2</option>
-              <option value={3}>3</option>
-              <option value={4}>4</option>
-            </Field>
-          </div>
-
           <div className="flex flex-col space-y-2 relative">
             <label htmlFor="cameraAddress">Camera Address</label>
             {touched.cameraAddress && errors.cameraAddress && (
@@ -83,8 +70,7 @@ const CameraSettingFields = () => {
               name="cameraAddress"
               type="text"
               className="p-2 border border-gray-400 rounded-lg"
-              placeholder="123, London Road..."
-              autoComplete="street-address"
+              placeholder="RTSP://..."
             />
           </div>
 

src/components/SettingForms/NPED/NPEDFields.tsx

@@ -6,7 +6,6 @@ import { toast } from "sonner";
 
 const NPEDFields = () => {
   const { signIn, user, signOut } = useNPEDAuth();
-
   const initialValues = user
     ? {
         username: user.propUsername.value,
@@ -28,7 +27,7 @@ const NPEDFields = () => {
       ...values,
     };
     signIn(valuesToSend);
-    toast.success("Signed in successfully");
+    toast.success("Signed into NPED Successfully");
   };
 
   const validateValues = (values: NPEDFieldType) => {
@@ -41,6 +40,7 @@ const NPEDFields = () => {
 
   const handleLogoutClick = () => {
     signOut();
+    toast.warning("logged out of NPED");
   };
 
   return (

src/components/SightingsWidget/SightingWidget.tsx

@@ -50,7 +50,6 @@ export default function SightingHistoryWidget({
         {/* Rows */}
         <div className="flex flex-col">
           {rows?.map((obj, idx) => {
-            console.log(obj);
             const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 201;
             const isSelected = obj?.ref === selectedRef;
             const motionAway = (obj?.motion ?? "").toUpperCase() === "AWAY";

src/components/UI/CardHeader.tsx

@@ -12,7 +12,7 @@ const CardHeader = ({ title, icon }: CameraOverviewHeaderProps) => {
   return (
     <div
       className={clsx(
-        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 md:mb-6"
+        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 md:mb-6 relative"
       )}
     >
       {icon && <FontAwesomeIcon icon={icon} className="size-4" />}

src/hooks/useGetOverviewSnapshot.ts

@@ -36,6 +36,7 @@ export function useGetOverviewSnapshot(cameraSide: string) {
     data: snapshotBlob,
     isError,
     error,
+    isPending,
   } = useQuery({
     queryKey: ["overviewSnapshot", cameraSide],
     queryFn: () => fetchSnapshot(cameraSide),
@@ -79,5 +80,5 @@ export function useGetOverviewSnapshot(cameraSide: string) {
     console.error("Snapshot error:", error);
   }
 
-  return { canvasRef };
+  return { canvasRef, isError, isPending };
 }

src/hooks/useNPEDAuth.ts

@@ -8,8 +8,7 @@ async function fetchNPEDDetails() {
   const fetchUrl = `${base_url}/fetch-config?id=NPED`;
   const response = await fetch(fetchUrl);
   if (!response.ok) throw new Error("Cannot reach fetch-config endpoint");
-  const data = await response.json();
-  console.log(data);
+
   return response.json();
 }
 
@@ -99,10 +98,7 @@ export const useNPEDAuth = () => {
   useEffect(() => {
     if (fetchdataQuery.isSuccess && fetchdataQuery.data) {
       setUser(fetchdataQuery.data);
-    } else if (
-      !fetchdataQuery?.data?.propUsername?.value &&
-      !fetchdataQuery?.data?.propClientID?.value
-    ) {
+    } else {
       setUser(null);
     }
   }, [fetchdataQuery.data, fetchdataQuery.isSuccess, setUser]);

src/pages/RearCamera.tsx

@@ -2,6 +2,7 @@ import { useNavigate } from "react-router";
 import { useSwipeable } from "react-swipeable";
 import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVideoContainer";
 import CameraSettings from "../components/CameraSettings/CameraSettings";
+import { Toaster } from "sonner";
 
 const RearCamera = () => {
   const navigate = useNavigate();
@@ -21,6 +22,7 @@ const RearCamera = () => {
         side={"TargetDetectionRear"}
         settingsPage={true}
       />
+      <Toaster />
     </div>
   );
 };