Merged in develop (pull request #20)

Develop

src/components/HistoryList/AlertItem.tsx

@@ -9,7 +9,7 @@ import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
 import NPED_CAT_A from "/NPED_Cat_A.svg";
 import NPED_CAT_B from "/NPED_Cat_B.svg";
 import NPED_CAT_C from "/NPED_Cat_C.svg";
-import { checkIsHotListHit } from "../../utils/utils";
+import { checkIsHotListHit, getNPEDCategory } from "../../utils/utils";
 
 type AlertItemProps = {
   item: SightingType;
@@ -24,9 +24,10 @@ const AlertItem = ({ item }: AlertItemProps) => {
   const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
 
   const isHotListHit = checkIsHotListHit(item);
-  const isNPEDHitA = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
+  const cat = getNPEDCategory(item);
-  const isNPEDHitB = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
+  const isNPEDHitA = cat === "A";
-  const isNPEDHitC = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
+  const isNPEDHitB = cat === "B";
+  const isNPEDHitC = cat === "C";
 
   const handleClick = () => {
     setIsModalOpen(true);

src/components/SightingModal/SightingModal.tsx

@@ -10,7 +10,7 @@ import HotListImg from "/Hotlist_Hit.svg";
 import NPED_CAT_A from "/NPED_Cat_A.svg";
 import NPED_CAT_B from "/NPED_Cat_B.svg";
 import NPED_CAT_C from "/NPED_Cat_C.svg";
-import { checkIsHotListHit } from "../../utils/utils";
+import { checkIsHotListHit, getNPEDCategory } from "../../utils/utils";
 
 type SightingModalProps = {
   isSightingModalOpen: boolean;
@@ -68,9 +68,10 @@ const SightingModal = ({
 
   const motionAway = (sighting?.motion ?? "").toUpperCase() === "AWAY";
   const isHotListHit = checkIsHotListHit(sighting);
-  const isNPEDHitA = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
+  const cat = getNPEDCategory(sighting);
-  const isNPEDHitB = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
+  const isNPEDHitA = cat === "A";
-  const isNPEDHitC = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
+  const isNPEDHitB = cat === "B";
+  const isNPEDHitC = cat === "C";
 
   return (
     <>

src/components/SightingsWidget/InfoBar.tsx

@@ -5,8 +5,6 @@ type InfoBarprops = {
   obj: SightingType;
 };
 const InfoBar = ({ obj }: InfoBarprops) => {
-  const isNPEDHitD = obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "D";
-
   return (
     <div className="flex items-center gap-3 text-xs bg-neutral-900 px-2 py-1 rounded justify-between">
       <div className="flex items-center gap-3 text-xs">
@@ -18,13 +16,7 @@ const InfoBar = ({ obj }: InfoBarprops) => {
         </div>
       </div>
 
-      <div className="min-w-14 opacity-80 ">
+      <div className="min-w-14 opacity-80 "></div>
-        {isNPEDHitD ? (
-          <span className="text-amber-500 font-semibold">NPED HIT CAT D</span>
-        ) : (
-          ""
-        )}
-      </div>
     </div>
   );
 };

src/components/SightingsWidget/SightingWidget.tsx

@@ -18,7 +18,7 @@ import { useSound } from "react-sounds";
 import { useNPEDContext } from "../../context/NPEDUserContext";
 import { useSoundContext } from "../../context/SoundContext";
 import Loading from "../UI/Loading";
-import { checkIsHotListHit } from "../../utils/utils";
+import { checkIsHotListHit, getNPEDCategory } from "../../utils/utils";
 
 function useNow(tickMs = 1000) {
   const [, setNow] = useState(() => Date.now());
@@ -68,6 +68,11 @@ export default function SightingHistoryWidget({
   const { dispatch } = useAlertHitContext();
   const { sessionStarted, setSessionList, sessionList } = useNPEDContext();
 
+  const processedRefs = useRef<Set<number | string>>(new Set());
+
+  const hasAutoOpenedRef = useRef(false);
+  const npedRef = useRef(false);
+
   const reduceObject = (obj: SightingType): ReducedSightingType => {
     return {
       vrm: obj.vrm,
@@ -84,9 +89,6 @@ export default function SightingHistoryWidget({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mostRecent, sessionStarted, setSessionList]);
 
-  const hasAutoOpenedRef = useRef(false);
-  const npedRef = useRef(false);
-
   const onRowClick = useCallback(
     (sighting: SightingType) => {
       if (!sighting) return;
@@ -102,11 +104,45 @@ export default function SightingHistoryWidget({
   );
 
   useEffect(() => {
-    rows?.forEach((obj) => {
+    if (!rows?.length) return;
-      const isNPEDHitA = obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
-      const isNPEDHitB = obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
-      const isNPEDHitC = obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
 
+    for (const sighting of rows) {
+      const id = sighting.vrm;
+
+      if (processedRefs.current.has(id)) continue;
+      const isHot = checkIsHotListHit(sighting);
+      const cat = sighting?.metadata?.npedJSON?.["NPED CATEGORY"];
+
+      if (cat === "A" || cat === "B" || cat === "C") {
+        npedSound();
+        setSelectedSighting(sighting);
+        setSightingModalOpen(true);
+        processedRefs.current.add(id);
+        break; // stop after one new open per render cycle
+      }
+
+      if (isHot) {
+        hotlistsound();
+        setSelectedSighting(sighting);
+        setSightingModalOpen(true);
+        processedRefs.current.add(id);
+        break;
+      }
+    }
+  }, [
+    rows,
+    hotlistsound,
+    npedSound,
+    setSightingModalOpen,
+    setSelectedSighting,
+  ]);
+
+  useEffect(() => {
+    rows?.forEach((obj) => {
+      const cat = getNPEDCategory(obj);
+      const isNPEDHitA = cat === "A";
+      const isNPEDHitB = cat === "B";
+      const isNPEDHitC = cat === "C";
       if (isNPEDHitA || isNPEDHitB || isNPEDHitC) {
         dispatch({
           type: "ADD",
@@ -119,9 +155,10 @@ export default function SightingHistoryWidget({
   useEffect(() => {
     if (hasAutoOpenedRef.current || npedRef.current) return;
     const firstNPED = rows.find((r) => {
-      const isNPEDHitA = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
+      const cat = getNPEDCategory(r);
-      const isNPEDHitB = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
+      const isNPEDHitA = cat === "A";
-      const isNPEDHitC = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
+      const isNPEDHitB = cat === "B";
+      const isNPEDHitC = cat === "C";
       return isNPEDHitA || isNPEDHitB || isNPEDHitC;
     });
     const firstHot = rows?.find((r) => {
@@ -132,7 +169,6 @@ export default function SightingHistoryWidget({
 
     if (firstNPED) {
       setSelectedSighting(firstNPED);
-      console.log("first");
       npedSound();
       setSightingModalOpen(true);
       npedRef.current = true;
@@ -144,13 +180,7 @@ export default function SightingHistoryWidget({
       setSightingModalOpen(true);
       hasAutoOpenedRef.current = true;
     }
-  }, [
+  }, [hotlistsound, npedSound, setSelectedSighting]);
-    hotlistsound,
-    npedSound,
-    rows,
-    setSelectedSighting,
-    setSightingModalOpen,
-  ]);
 
   const handleClose = () => {
     setSightingModalOpen(false);
@@ -173,12 +203,10 @@ export default function SightingHistoryWidget({
           {/* Rows */}
           <div className="flex flex-col">
             {rows?.map((obj) => {
-              const isNPEDHitA =
+              const cat = getNPEDCategory(obj);
-                obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
+              const isNPEDHitA = cat === "A";
-              const isNPEDHitB =
+              const isNPEDHitB = cat === "B";
-                obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
+              const isNPEDHitC = cat === "C";
-              const isNPEDHitC =
-                obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
               const motionAway = (obj?.motion ?? "").toUpperCase() === "AWAY";
               const isHotListHit = checkIsHotListHit(obj);
               return (

src/utils/utils.ts

@@ -140,3 +140,6 @@ export const checkIsHotListHit = (sigthing: SightingType | null) => {
     return isHotListHit;
   }
 };
+
+export const getNPEDCategory = (r?: SightingType | null) =>
+  r?.metadata?.npedJSON?.["NPED CATEGORY"] as "A" | "B" | "C" | undefined;