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" />}