fixed type errors

2025-09-16 14:20:38 +01:00
parent c506c395e6
commit b98e3ed85d
21 changed files with 161 additions and 130 deletions
--- a/src/components/CameraSettings/CameraSettingFields.tsx
+++ b/src/components/CameraSettings/CameraSettingFields.tsx
@@ -4,23 +4,31 @@ import type {
  CameraSettingErrorValues,
  CameraSettingValues,
 } from "../../types/types";
+import { useMemo, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";

 type CameraSettingsProps = {
  initialData: CameraConfig;
-  updateCameraConfig: (values: CameraSettingValues) => void;
+  updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
 };

 const CameraSettingFields = ({
  initialData,
  updateCameraConfig,
 }: CameraSettingsProps) => {
-  const initialValues: CameraSettingValues = {
-    friendlyName: initialData?.propLEDDriverControlURI?.value,
+  const [showPwd, setShowPwd] = useState(false);
+
+  const initialValues = useMemo<CameraSettingValues>(
+    () => ({
+      friendlyName: initialData?.propLEDDriverControlURI?.value ?? "",
      cameraAddress: "",
      userName: "",
      password: "",
      id: initialData?.id,
-  };
+    }),
+    [initialData?.id, initialData?.propLEDDriverControlURI?.value]
+  );

  const validateValues = (values: CameraSettingValues) => {
    const errors: CameraSettingErrorValues = {};
@@ -34,7 +42,6 @@ const CameraSettingFields = ({

  const handleSubmit = (values: CameraSettingValues) => {
    updateCameraConfig(values);
-    return;
  };

  return (
@@ -43,6 +50,7 @@ const CameraSettingFields = ({
      onSubmit={handleSubmit}
      validate={validateValues}
      validateOnChange={false}
+      enableReinitialize
    >
      {({ errors, touched }) => (
        <Form className="flex flex-col space-y-4 p-2">
@@ -103,14 +111,21 @@ const CameraSettingFields = ({
                {errors.password}
              </small>
            )}
+            <div className="flex gap-2 items-center relative">
              <Field
                id="password"
                name="password"
-              type="password"
-              className="p-2 border border-gray-400 rounded-lg"
+                type={showPwd ? "text" : "password"}
+                className="p-2 border border-gray-400 rounded-lg w-full "
                placeholder="Enter password"
                autoComplete="new-password"
              />
+              <FontAwesomeIcon
+                type="button"
+                className="absolute right-5 end-0"
+                onClick={() => setShowPwd((s) => !s)}
+                icon={showPwd ? faEyeSlash : faEye}
+              />
            </div>

            <button
@@ -119,6 +134,7 @@ const CameraSettingFields = ({
            >
              Save settings
            </button>
+          </div>
        </Form>
      )}
    </Formik>
--- a/src/components/HistoryList/HistoryList.tsx
+++ b/src/components/HistoryList/HistoryList.tsx
@@ -6,16 +6,17 @@ import AlertItem from "./AlertItem";
 const HistoryList = () => {
  const { state } = useAlertHitContext();
  console.log(state);
+
  return (
    <Card className="h-100">
      <CardHeader title="Alert History" />
      <div className="flex flex-col gap-1">
-        {state?.alertList?.length >= 0 ? (
+        {state?.alertList?.length > 0 ? (
          state?.alertList?.map((alertItem, index) => (
            <AlertItem key={index} item={alertItem} />
          ))
        ) : (
-          <p>No Search results</p>
+          <p>No Alert results</p>
        )}
      </div>
    </Card>
--- a/src/components/RearCameraOverview/RearCameraOverviewCard.tsx
+++ b/src/components/RearCameraOverview/RearCameraOverviewCard.tsx
@@ -27,7 +27,6 @@ const RearCameraOverviewCard = ({ className }: CardProps) => {
      <div className="flex flex-col space-y-3 h-full" {...handlers}>
        <CardHeader title="Rear Overview" icon={faCamera} />
        <SightingOverview />
-        {/* <SnapshotContainer side="TargetDetectionRear" /> */}
      </div>
    </Card>
  );
--- a/src/components/SessionForm/HitSearchCard.tsx
+++ b/src/components/SessionForm/HitSearchCard.tsx
@@ -6,9 +6,8 @@ import { useState } from "react";

 const SessionCard = () => {
  const [searchTerm, setSearchTerm] = useState("");
-  const { state, disptach } = useAlertHitContext();
+  const { dispatch } = useAlertHitContext();

-  console.log(state);
  return (
    <Card>
      <CardHeader title={"Hit Search"} />
@@ -27,16 +26,29 @@ const SessionCard = () => {
              type="text"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
              placeholder="Enter VRM"
+              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
        </FormGroup>
        <button
          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
-          onClick={() => disptach({ type: "SEARCH", payload: searchTerm })}
+          onClick={() => dispatch({ type: "SEARCH", payload: searchTerm })}
+          disabled={searchTerm.trim().length < 2}
        >
          Search Hit list
        </button>
+        {searchTerm && (
+          <button
+            className="bg-gray-300 text-gray-900 px-4 py-2 rounded hover:bg-gray-700 transition w-full max-w-md"
+            onClick={() => {
+              setSearchTerm("");
+              dispatch({ type: "SEARCH", payload: "" });
+            }}
+          >
+            Clear Search
+          </button>
+        )}
      </div>
    </Card>
  );
--- a/src/components/SessionForm/SessionCard.tsx
+++ b/src/components/SessionForm/SessionCard.tsx
@@ -2,22 +2,29 @@ import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";

 const SessionCard = () => {
+  function onStart(): void {
+    throw new Error("Function not implemented.");
+  }
+
  return (
    <Card>
-      <CardHeader title={"Session"} />
+      <CardHeader title="Session" />
      <div className="flex flex-col gap-4">
        <button
          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
-          //onClick={() => handleModemSave(apn, username, password, authType)}
+          onClick={onStart}
        >
          Start Session
        </button>
-        <h2 className="text-white mb-2">Number of Vehicles: </h2>
-        <h2 className="text-white mb-2">Vehicles without Tax: </h2>
-        <h2 className="text-white mb-2">Vehicles without MOT: </h2>
-        <h2 className="text-white mb-2">Vehicles with NPED Cat A: </h2>
-        <h2 className="text-white mb-2">Vehicles with NPED Cat B: </h2>
-        <h2 className="text-white mb-2">Vehicles with NPED Cat C: </h2>
+
+        <ul className="text-white space-y-2">
+          <li>Number of Vehicles: </li>
+          <li>Vehicles without Tax: </li>
+          <li>Vehicles without MOT: </li>
+          <li>Vehicles with NPED Cat A: </li>
+          <li>Vehicles with NPED Cat B: </li>
+          <li>Vehicles with NPED Cat C: </li>
+        </ul>
      </div>
    </Card>
  );
--- a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
+++ b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
@@ -1,9 +1,12 @@
 import { Field, useFormikContext } from "formik";
 import FormGroup from "../components/FormGroup";
+import { useState } from "react";
+import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 const ChannelFields = () => {
  useFormikContext();
-
+  const [showPwd, setShowPwd] = useState(false);
  return (
    <div className="flex flex-col space-y-2">
      <FormGroup>
@@ -32,11 +35,17 @@ const ChannelFields = () => {
        <label htmlFor="password">Password</label>
        <Field
          name={"password"}
-          type="password"
+          type={showPwd ? "text" : "password"}
          id="password"
          placeholder="Back office password"
          className="p-1.5 border border-gray-400 rounded-lg"
        />
+        <FontAwesomeIcon
+          type="button"
+          className="absolute right-5 end-0"
+          onClick={() => setShowPwd((s) => !s)}
+          icon={showPwd ? faEyeSlash : faEye}
+        />
      </FormGroup>
      <FormGroup>
        <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
--- a/src/components/SettingForms/NPED/NPEDFields.tsx
+++ b/src/components/SettingForms/NPED/NPEDFields.tsx
@@ -3,14 +3,18 @@ import FormGroup from "../components/FormGroup";
 import type { NPEDErrorValues, NPEDFieldType } from "../../../types/types";
 import { useNPEDAuth } from "../../../hooks/useNPEDAuth";
 import { toast } from "sonner";
+import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";

 const NPEDFields = () => {
+  const [showPwd, setShowPwd] = useState(false);
  const { signIn, user, signOut } = useNPEDAuth();

  const initialValues = user
    ? {
        username: user.propUsername.value,
-        password: "",
+        password: user.propPassword.value,
        clientId: user.propClientID.value,
        frontId: "NPED",
        rearId: "NPED",
@@ -49,6 +53,7 @@ const NPEDFields = () => {
      initialValues={initialValues}
      onSubmit={handleSubmit}
      validate={validateValues}
+      enableReinitialize
    >
      {({ errors, touched }) => (
        <Form className="flex flex-col space-y-5">
@@ -76,11 +81,17 @@ const NPEDFields = () => {
            )}
            <Field
              name="password"
-              type="password"
+              type={showPwd ? "text" : "password"}
              id="password"
              placeholder="NPED Password"
              className="p-1.5 border border-gray-400 rounded-lg"
            />
+            <FontAwesomeIcon
+              type="button"
+              className="absolute right-5 end-0"
+              onClick={() => setShowPwd((s) => !s)}
+              icon={showPwd ? faEyeSlash : faEye}
+            />
          </FormGroup>
          <FormGroup>
            <label htmlFor="clientId">Client ID</label>
--- a/src/components/SettingForms/System/SystemConfigFields.tsx
+++ b/src/components/SettingForms/System/SystemConfigFields.tsx
@@ -7,13 +7,13 @@ import type { SystemValues, SystemValuesErrors } from "../../../types/types";
 import { useSystemConfig } from "../../../hooks/useSystemConfig";

 const SystemConfigFields = () => {
-  const { saveSystemSettings, getSystemSettingsData } = useSystemConfig();
-  console.log(getSystemSettingsData);
+  const { saveSystemSettings, systemSettingsData } = useSystemConfig();
+
  const initialvalues: SystemValues = {
-    deviceName: "",
-    timeZone: "",
-    sntpServer: "",
-    sntpInterval: 60,
+    deviceName: systemSettingsData?.deviceName ?? "",
+    timeZone: systemSettingsData?.timeZone ?? "",
+    sntpServer: systemSettingsData?.sntpServer ?? "",
+    sntpInterval: systemSettingsData?.sntpInterval ?? 60,
    softwareUpdate: null,
  };

@@ -34,6 +34,9 @@ const SystemConfigFields = () => {
      initialValues={initialvalues}
      onSubmit={handleSubmit}
      validate={validateValues}
+      enableReinitialize
+      validateOnChange
+      validateOnBlur
    >
      {({ values, errors, touched }) => (
        <Form className="flex flex-col space-y-5">
@@ -55,6 +58,7 @@ const SystemConfigFields = () => {
              type="text"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
              placeholder="Enter device name"
+              autoComplete="off"
            />
          </FormGroup>
          <FormGroup>
@@ -75,6 +79,7 @@ const SystemConfigFields = () => {
              as="select"
              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full max-w-xs"
            >
+              <option value="">Select a timezone…</option>
              {timezones.map((timezone) => (
                <option value={timezone.value} key={timezone.label}>
                  {timezone.label}
@@ -100,6 +105,7 @@ const SystemConfigFields = () => {
              type="text"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
              placeholder="Enter SNTP server address"
+              autoComplete="off"
            />
          </FormGroup>
          <FormGroup>
@@ -119,6 +125,7 @@ const SystemConfigFields = () => {
              name="sntpInterval"
              type="number"
              min={1}
+              inputMode="numeric"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
            />
          </FormGroup>
@@ -133,12 +140,14 @@ const SystemConfigFields = () => {
            selectedFile={values.softwareUpdate}
          />
          <button
+            type="button"
            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full max-w-md"
            onClick={handleSoftReboot}
          >
            Software Reboot
          </button>
          <button
+            type="button"
            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full max-w-md"
            onClick={handleHardReboot}
          >
--- a/src/components/SettingForms/System/timezones.ts
+++ b/src/components/SettingForms/System/timezones.ts
@@ -1,5 +1,4 @@
 export const timezones = [
-  { value: "Europe/London (UTC+00)", label: "Select Time Zone" },
  { value: "Europe/London (UTC+00)", label: "UTC (UTC+00)" },
  { value: "Africa/Cairo (UTC+02)", label: "Africa/Cairo (UTC+02)" },
  {
--- a/src/components/SightingsWidget/InfoBar.tsx
+++ b/src/components/SightingsWidget/InfoBar.tsx
@@ -1,15 +1,14 @@
-import type { SightingType, SightingWidgetType } from "../../types/types";
+import type { SightingType } from "../../types/types";
 import { capitalize, formatAge } from "../../utils/utils";

 type InfoBarprops = {
-  obj: SightingWidgetType | SightingType;
+  obj: SightingType;
 };
 const InfoBar = ({ obj }: InfoBarprops) => {
  const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;
  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">
-        {" "}
        <div className="min-w-14">CH: {obj ? obj.charHeight : "—"}</div>
        <div className="min-w-14">Seen: {obj ? obj.seenCount : "—"}</div>
        <div className="min-w-20">{obj ? capitalize(obj.motion) : "—"}</div>
--- a/src/components/SightingsWidget/SightingWidget.tsx
+++ b/src/components/SightingsWidget/SightingWidget.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import type { SightingType, SightingWidgetType } from "../../types/types";
+import type { SightingType } from "../../types/types";
 import { BLANK_IMG } from "../../utils/utils";
 import NumberPlate from "../PlateStack/NumberPlate";
 import Card from "../UI/Card";
@@ -44,10 +44,10 @@ export default function SightingHistoryWidget({
    selectedSighting,
  } = useSightingFeedContext();

-  const { disptach } = useAlertHitContext();
+  const { dispatch } = useAlertHitContext();

  const onRowClick = useCallback(
-    (sighting: SightingType | SightingWidgetType) => {
+    (sighting: SightingType) => {
      if (!sighting) return;
      setSightingModalOpen(!isSightingModalOpen);
      setSelectedSighting(sighting);
@@ -55,7 +55,7 @@ export default function SightingHistoryWidget({
    [isSightingModalOpen, setSelectedSighting, setSightingModalOpen]
  );
  const rows = useMemo(
-    () => sightings?.filter(Boolean) as SightingWidgetType[],
+    () => sightings?.filter(Boolean) as SightingType[],
    [sightings]
  );

@@ -64,13 +64,13 @@ export default function SightingHistoryWidget({
      const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;

      if (isNPEDHit) {
-        disptach({
+        dispatch({
          type: "ADD",
          payload: obj,
        });
      }
    });
-  }, [rows, disptach]);
+  }, [rows, dispatch]);

  const handleClose = () => {
    setSightingModalOpen(false);
--- a/src/components/SightingsWidget/SightingWidgetDetails.tsx
+++ b/src/components/SightingsWidget/SightingWidgetDetails.tsx
@@ -1,8 +1,8 @@
-import type { SightingWidgetType } from "../../types/types";
+import type { SightingType } from "../../types/types";
 import { useState } from "react";

 type SightingWidgetDetailsProps = {
-  effectiveSelected: SightingWidgetType | null;
+  effectiveSelected: SightingType | null;
 };

 const SightingWidgetDetails = ({
--- a/src/context/AlertHitContext.ts
+++ b/src/context/AlertHitContext.ts
@@ -1,10 +1,10 @@
 import { createContext, useContext } from "react";
-import type { AlertState, AlertPayload, ActionType } from "../types/types";
+import type { AlertState, AlertPayload } from "../types/types";

 type AlertHitContextValueType = {
  state: AlertState;
-  action: AlertPayload;
-  disptach: (action: ActionType) => AlertState;
+  action?: AlertPayload;
+  dispatch: React.Dispatch<AlertPayload>;
 };

 export const AlertHitContext = createContext<
--- a/src/context/NPEDUserContext.ts
+++ b/src/context/NPEDUserContext.ts
@@ -1,8 +1,8 @@
 import { createContext, useContext, type SetStateAction } from "react";
-import type { NPEDCameraConfig, NPEDUser } from "../types/types";
+import type { NPEDUser } from "../types/types";

 type UserContextValue = {
-  user: NPEDCameraConfig | null;
+  user: NPEDUser | null;
  setUser: React.Dispatch<SetStateAction<NPEDUser | null>>;
 };

--- a/src/context/SightingFeedContext.ts
+++ b/src/context/SightingFeedContext.ts
@@ -1,17 +1,15 @@
 import { createContext, useContext } from "react";
-import type { SightingType, SightingWidgetType } from "../types/types";
+import type { SightingType } from "../types/types";

 type SightingFeedContextType = {
-  sightings: (SightingWidgetType | null | undefined)[];
+  sightings: (SightingType | null | undefined)[];
  selectedRef: number | null;
  setSelectedRef: (ref: number | null) => void;
-  // effectiveSelected: SightingWidgetType | null;
-  mostRecent: SightingWidgetType | null;
+  // effectiveSelected: SightingType | null;
+  mostRecent: SightingType | null;
  side: string;
  selectedSighting: SightingType | null;
-  setSelectedSighting: (
-    sighting: SightingType | SightingWidgetType | null
-  ) => void;
+  setSelectedSighting: (sighting: SightingType | SightingType | null) => void;
  setSightingModalOpen: (isSightingModalOpen: boolean) => void;
  isSightingModalOpen: boolean;
 };
--- a/src/context/providers/AlertHitProvider.tsx
+++ b/src/context/providers/AlertHitProvider.tsx
@@ -7,10 +7,10 @@ type AlertHitProviderTypeProps = {
 };

 export const AlertHitProvider = ({ children }: AlertHitProviderTypeProps) => {
-  const [state, disptach] = useReducer(reducer, initalState);
+  const [state, dispatch] = useReducer(reducer, initalState);

  return (
-    <AlertHitContext.Provider value={{ state, disptach }}>
+    <AlertHitContext.Provider value={{ state, dispatch }}>
      {children}
    </AlertHitContext.Provider>
  );
--- a/src/context/reducers/AlertReducers.ts
+++ b/src/context/reducers/AlertReducers.ts
@@ -8,18 +8,20 @@ export const initalState = {
 export function reducer(state: AlertState, action: AlertPayload) {
  switch (action.type) {
    case "ADD": {
+      if (action.payload && "vrm" in action.payload) {
        const alreadyExists = state.allAlerts.some(
          (alertItem) => alertItem.vrm === action.payload.vrm
        );
        if (alreadyExists) {
-        return { ...state };
-      } else {
+          return state;
+        }
        return {
          ...state,
-          alertList: [...state.allAlerts, action.payload],
          allAlerts: [...state.allAlerts, action.payload],
+          alertList: [...state.allAlerts, action.payload],
        };
      }
+      return state;
    }

    case "SEARCH": {
--- a/src/hooks/useOverviewOverlay.ts
+++ b/src/hooks/useOverviewOverlay.ts
@@ -1,11 +1,11 @@
 import { useEffect } from "react";
-import type { SightingWidgetType } from "../types/types";
+import type { SightingType } from "../types/types";
 import { drawRects } from "../utils/utils";

 type Mode = 0 | 1 | 2;

 export function useOverviewOverlay(
-  selected: SightingWidgetType | null | undefined,
+  selected: SightingType | null | undefined,
  overlayMode: Mode,
  imgRef: React.RefObject<HTMLImageElement | null>,
  canvasRef: React.RefObject<HTMLCanvasElement | null>
--- a/src/hooks/useSightingFeed.ts
+++ b/src/hooks/useSightingFeed.ts
@@ -1,19 +1,16 @@
 import { useEffect, useRef, useState } from "react";
-import type { SightingType, SightingWidgetType } from "../types/types";
+import type { SightingType } from "../types/types";

-async function fetchSighting(
-  url: string,
-  ref: number
-): Promise<SightingWidgetType> {
+async function fetchSighting(url: string, ref: number): Promise<SightingType> {
  const res = await fetch(`${url}${ref}`);
  if (!res.ok) throw new Error(String(res.status));
  return await res.json();
 }

 export function useSightingFeed(url: string) {
-  const [sightings, setSightings] = useState<SightingWidgetType[]>([]);
+  const [sightings, setSightings] = useState<SightingType[]>([]);
  const [selectedRef, setSelectedRef] = useState<number | null>(null);
-  const [mostRecent, setMostRecent] = useState<SightingWidgetType | null>(null);
+  const [mostRecent, setMostRecent] = useState<SightingType | null>(null);
  const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(
    null
  );
--- a/src/hooks/useSystemConfig.ts
+++ b/src/hooks/useSystemConfig.ts
@@ -27,6 +27,6 @@ export const useSystemConfig = () => {
  return {
    uploadSettings: uploadSettingsMutation.mutate,
    saveSystemSettings: saveSystemSettings.mutate,
-    getSystemSettingsData: getSystemSettings.data,
+    systemSettingsData: getSystemSettings.data,
  };
 };
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -9,8 +9,8 @@ export type SightingType = {
  countryCode: string;
  timeStamp: string;
  detailsUrl: string;
-  overviewPlateRect: number[];
-  plateTrack: Array<number[]>;
+  overviewPlateRect?: [number, number, number, number];
+  plateTrack?: [number, number, number, number][];
  make: string;
  model: string;
  color: string;
@@ -71,39 +71,6 @@ export type HotlistUploadType = {
  file: string | null;
 };

-export type SightingWidgetType = {
-  debug: string;
-  SaFID: string;
-  ref: number; // unique, increasing
-  idx?: number; // client-side slot index
-  vrm: string;
-  vrmSecondary: string; // empty string means missing
-  countryCode: string;
-  timeStamp: string; // formatted string
-  timeStampMillis: number; // epoch millis
-  motion: string; // e.g., "AWAY" or "TOWARDS"
-  seenCount: string;
-  charHeight: string;
-  overviewUrl: string;
-  detailsUrl: string;
-  make: string;
-  model: string;
-  color: string;
-  category: string;
-  plateSize: string | number;
-  overviewSize: string | number;
-  locationName: string;
-  laneID: string | number;
-  radarSpeed: string | number;
-  trackSpeed: string | number;
-  srcCam: 0 | 1;
-  plateUrlInfrared: string;
-  plateUrlColour: string;
-  overviewPlateRect: [number, number, number, number]; // [x,y,w,h] normalized 0..1
-  plateTrack: [number, number, number, number][];
-  metadata: Metadata;
-};
-
 export type VersionFieldType = {
  version: string;
  revision: string;
@@ -183,10 +150,15 @@ export type AlertState = {
  allAlerts: SightingType[];
 };

-export type AlertPayload = {
-  payload: SightingType | string;
-  type: string;
-};
+export type AlertPayload =
+  | {
+      payload: SightingType;
+      type: "ADD";
+    }
+  | {
+      payload: string;
+      type: "SEARCH";
+    };

 export type ActionType = {
  payload: SightingType | string;