Merge pull request 'develop' (#9) from develop into main

Reviewed-on: #9

src/components/PopupSettings/NPEDCategoryPopup.tsx

@@ -1,65 +0,0 @@
-import Card from "../UI/Card";
-import CardHeader from "../UI/CardHeader";
-import NPEDCatToggle from "../SettingForms/NPED/NPEDCatToggle";
-import FormGroup from "../SettingForms/components/FormGroup";
-import { Form, Formik } from "formik";
-import { useIntegrationsContext } from "../../context/IntegrationsContext";
-import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
-import type { CategoryPopups } from "../../types/types";
-
-const NPEDCategoryPopup = () => {
-  const { state, dispatch } = useIntegrationsContext();
-  const { mutation } = useCameraBlackboard();
-
-  const isCatAEnabled = state?.iscatEnabled?.catA;
-  const isCatBEnabled = state?.iscatEnabled?.catB;
-  const isCatCEnabled = state?.iscatEnabled?.catC;
-  const isCatDEnabled = state?.iscatEnabled?.catD;
-
-  const initialValues = {
-    catA: isCatAEnabled ?? true,
-    catB: isCatBEnabled ?? true,
-    catC: isCatCEnabled ?? true,
-    catD: isCatDEnabled ?? false,
-  };
-
-  const handleSubmit = async (values: CategoryPopups) => {
-    await mutation.mutateAsync({
-      operation: "INSERT",
-      value: values,
-      path: "CategoryPopup",
-    });
-    dispatch({ type: "NPEDCATENABLED", payload: values });
-  };
-
-  return (
-    <Card className="p-4">
-      <CardHeader title={"Alert Pop ups"} />
-      <p className="italic my-2">Allows alerts to pop up to user.</p>
-      <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-        <Form className="flex flex-col space-y-5 px-2">
-          <FormGroup>
-            <NPEDCatToggle name={"catA"} label="NPED Category A" />
-          </FormGroup>
-          <FormGroup>
-            <NPEDCatToggle name={"catB"} label="NPED Category B" />
-          </FormGroup>
-          <FormGroup>
-            <NPEDCatToggle name={"catC"} label="NPED Category C" />
-          </FormGroup>
-          <FormGroup>
-            <NPEDCatToggle name={"catD"} label="NPED Category D" />
-          </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"
-          >
-            Save
-          </button>
-        </Form>
-      </Formik>
-    </Card>
-  );
-};
-
-export default NPEDCategoryPopup;

src/components/SettingForms/NPED/NPEDCatToggle.tsx

@@ -1,22 +0,0 @@
-import { Field } from "formik";
-
-type NPEDToggleProps = {
-  name: string;
-  label: string;
-};
-
-const NPEDCatToggle = ({ name, label }: NPEDToggleProps) => {
-  return (
-    <label className="flex items-center gap-3 cursor-pointer select-none w-full justify-between">
-      <span className="text-lg">{label}</span>
-      <Field id={name} type="checkbox" name={name} className="sr-only peer" />
-      <div
-        className="relative w-10 h-5 rounded-full bg-gray-300 transition peer-checked:bg-blue-500 after:content-[''] 
-      after:absolute after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:rounded-full after:bg-white after:shadow after:transition 
-      after:duration-300 peer-checked:after:translate-x-5"
-      />
-    </label>
-  );
-};
-
-export default NPEDCatToggle;

src/components/SettingForms/NPED/NPEDFields.tsx

@@ -13,18 +13,20 @@ const NPEDFields = () => {
   const [showPwd, setShowPwd] = useState(false);
   const { signIn, signOut } = useNPEDAuth();
 
-  const username = state.npedUser?.propUsername?.value;
+  const initialValues = state.npedUser
-  const password = state.npedUser?.propPassword?.value;
+    ? {
-  const clientId = state.npedUser?.propClientID?.value;
+        username: state.npedUser?.propUsername?.value,
-  const frontId = "NPED";
+        password: state.npedUser?.propPassword?.value,
-  const rearId = "NPED";
+        clientId: state.npedUser?.propClientID?.value,
-
+        frontId: "NPED",
-  const initialValues = {
+        rearId: "NPED",
-    username: username ?? "",
+      }
-    password: password ?? "",
+    : {
-    clientId: clientId ?? "",
+        username: "",
-    frontId: frontId,
+        password: "",
-    rearId: rearId,
+        clientId: "",
+        frontId: "NPED",
+        rearId: "NPED",
       };
 
   const handleSubmit = async (values: NPEDFieldType) => {
@@ -98,7 +100,6 @@ const NPEDFields = () => {
               className="p-1.5 border border-gray-400 rounded-lg"
             />
           </FormGroup>
-
           {!state.npedUser?.propClientID?.value ? (
             <button
               type="submit"

src/components/SightingModal/SightingModal.tsx

@@ -21,7 +21,6 @@ type SightingModalProps = {
 
 const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }: SightingModalProps) => {
   const { dispatch } = useAlertHitContext();
-
   const { query, mutation } = useCameraBlackboard();
 
   const hotlistNames = getHotlistName(sighting?.metadata?.hotlistMatches);
@@ -161,26 +160,27 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
                   <dd className="font-medium text-2xl">{sighting?.seenCount ?? "-"}</dd>
                 </div>
 
-                {sighting?.make && sighting.make.trim() && sighting.make.toLowerCase() !== "disabled" && (
+                {sighting?.make ||
+                  (sighting?.make.trim() && (
                     <div>
                       <dt className="text-gray-300">Make</dt>
-                    <dd className="font-medium text-2xl">{sighting.make}</dd>
+                      <dd className="font-medium text-2xl">{sighting?.make ?? "-"}</dd>
                     </div>
-                )}
+                  ))}
-
+                {sighting?.model ||
-                {sighting?.model && sighting.model.trim() && sighting.model.toLowerCase() !== "disabled" && (
+                  (!sighting?.model.trim() && (
                     <div>
                       <dt className="text-gray-300">Model</dt>
-                    <dd className="font-medium text-2xl">{sighting.model}</dd>
+                      <dd className="font-medium text-2xl">{sighting?.model ?? "-"}</dd>
                     </div>
-                )}
+                  ))}
-
+                {sighting?.color ||
-                {sighting?.color && sighting.color.trim() && sighting.color.toLowerCase() !== "disabled" && (
+                  (!sighting?.color.trim() && (
                     <div className="sm:col-span-2">
                       <dt className="text-gray-300">Colour</dt>
-                    <dd className="font-medium text-2xl">{sighting.color}</dd>
+                      <dd className="font-medium text-2xl">{sighting?.color ?? "-"}</dd>
                     </div>
-                )}
+                  ))}
 
                 <div>
                   <dt className="text-gray-300">Time</dt>

src/components/SightingsWidget/SightingWidget.tsx

@@ -68,11 +68,6 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
   const hasAutoOpenedRef = useRef(false);
   const npedRef = useRef(false);
 
-  const isCatAEnabled = integrationState?.iscatEnabled?.catA;
-  const isCatBEnabled = integrationState?.iscatEnabled?.catB;
-  const isCatCEnabled = integrationState?.iscatEnabled?.catC;
-  const isCatDEnabled = integrationState?.iscatEnabled?.catD;
-
   const enqueue = useCallback((sighting: SightingType, kind: HitKind) => {
     const id = sighting.vrm ?? sighting.ref;
     if (processedRefs.current.has(id)) return;
@@ -123,11 +118,7 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
       if (processedRefs.current.has(id)) continue;
       const isHotlistHit = checkIsHotListHit(sighting);
       const npedcategory = sighting?.metadata?.npedJSON?.["NPED CATEGORY"];
-      const isNPED =
+      const isNPED = npedcategory === "A" || npedcategory === "B" || npedcategory === "C";
-        (npedcategory === "A" && isCatAEnabled) ||
-        (npedcategory === "B" && isCatBEnabled) ||
-        (npedcategory === "C" && isCatCEnabled) ||
-        (npedcategory === "D" && isCatDEnabled);
 
       if (isNPED || isHotlistHit) {
         enqueue(sighting, isNPED ? "NPED" : "HOTLIST"); // enqueue ONLY
@@ -157,8 +148,7 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
       const isNPEDHitA = cat === "A";
       const isNPEDHitB = cat === "B";
       const isNPEDHitC = cat === "C";
-      const isNPEDHitD = cat === "D";
+      return isNPEDHitA || isNPEDHitB || isNPEDHitC;
-      return isNPEDHitA || isNPEDHitB || isNPEDHitC || isNPEDHitD;
     });
     const firstHot = rows?.find((r) => {
       const isHotListHit = checkIsHotListHit(r);

src/context/providers/IntegrationsContextProvider.tsx

@@ -12,39 +12,17 @@ export const IntegrationsProvider = ({ children }: IntegrationsProviderType) =>
   const { mutation } = useCameraBlackboard();
 
   useEffect(() => {
-    let isMounted = true;
-
     const fetchData = async () => {
-      try {
       const result = await mutation.mutateAsync({
         operation: "VIEW",
         path: "sessionStats",
       });
+      if (!result.result || typeof result.result === "string") return;
 
-        if (!isMounted) return;
+      dispatch({ type: "UPDATE", payload: result?.result });
-
-        const catResult = await mutation.mutateAsync({
-          operation: "VIEW",
-          path: "CategoryPopup",
-        });
-
-        if (!isMounted) return;
-        if (!result?.result || typeof result.result === "string") return;
-
-        dispatch({ type: "UPDATE", payload: result.result });
-        dispatch({ type: "NPEDCATENABLED", payload: catResult.result });
-      } catch (error) {
-        console.error("Error in fetchData:", error);
-      }
     };
-
     fetchData();
-
-    return () => {
-      isMounted = false;
-    };
   }, []);
-
   return (
     <IntegrationsContext.Provider
       value={{

src/context/reducers/IntegrationsContextReducer.ts

@@ -6,12 +6,6 @@ export const initialState = {
   sessionPaused: false,
   savedSightings: [],
   npedUser: null,
-  iscatEnabled: {
-    catA: true,
-    catB: true,
-    catC: true,
-    catD: false,
-  },
 };
 
 export function reducer(state: NPEDSTATE, action: NPEDACTION) {
@@ -46,11 +40,6 @@ export function reducer(state: NPEDSTATE, action: NPEDACTION) {
         ...state,
         sessionList: action.payload,
       };
-    case "NPEDCATENABLED":
-      return {
-        ...state,
-        iscatEnabled: action.payload,
-      };
     default:
       return { ...state };
   }

src/hooks/useCameraZoom.ts

@@ -11,6 +11,7 @@ const getCameraMode = async (options: { camera: string }) => {
 };
 
 const updateCameraMode = async (options: { camera: string; mode: string }) => {
+  console.log(options);
   const dayNightPayload = {
     id: options.camera,
     fields: [

src/pages/SystemSettings.tsx

@@ -10,7 +10,6 @@ import { Toaster } from "sonner";
 import { useNPEDAuth } from "../hooks/useNPEDAuth";
 import SoundSettingsCard from "../components/SettingForms/Sound/SoundSettingsCard";
 import SoundUploadCard from "../components/SettingForms/Sound/SoundUploadCard";
-import NPEDCategoryPopup from "../components/PopupSettings/NPEDCategoryPopup";
 
 const SystemSettings = () => {
   useNPEDAuth();
@@ -39,7 +38,6 @@ const SystemSettings = () => {
           <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
             <NPEDCard />
             <NPEDHotlistCard />
-            <NPEDCategoryPopup />
           </div>
         </TabPanel>
         <TabPanel>

src/types/types.ts

@@ -423,7 +423,6 @@ export type NPEDSTATE = {
   sessionPaused: boolean;
   savedSightings: DedupedSightings;
   npedUser: NPEDUser;
-  iscatEnabled: CategoryPopups;
 };
 
 export type NPEDACTION = {
@@ -431,10 +430,3 @@ export type NPEDACTION = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   payload: any;
 };
-
-export type CategoryPopups = {
-  catA: boolean;
-  catB: boolean;
-  catC: boolean;
-  catD: boolean;
-};