got to a good point with sighting modal, want to do cleanup

src/context/AlertHitContext.ts

@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+import type { AlertState, AlertPayload, ActionType } from "../types/types";
+
+type AlertHitContextValueType = {
+  state: AlertState;
+  action: AlertPayload;
+  disptach: (action: ActionType) => AlertState;
+};
+
+export const AlertHitContext = createContext<
+  AlertHitContextValueType | undefined
+>(undefined);
+
+export const useAlertHitContext = () => {
+  const ctx = useContext(AlertHitContext);
+  if (!ctx)
+    throw new Error("useAlertHitContext must be used within <AlertHitContext>");
+  return ctx;
+};
+
+export default AlertHitContext;

src/context/providers/AlertHitProvider.tsx

@@ -0,0 +1,19 @@
+import { useReducer, type ReactNode } from "react";
+import AlertHitContext from "../AlertHitContext";
+import { reducer, initalState } from "../reducers/AlertReducers";
+
+type AlertHitProviderTypeProps = {
+  children: ReactNode;
+};
+
+export const AlertHitProvider = ({ children }: AlertHitProviderTypeProps) => {
+  const [state, disptach] = useReducer(reducer, initalState);
+
+  return (
+    <AlertHitContext.Provider value={{ state, disptach }}>
+      {children}
+    </AlertHitContext.Provider>
+  );
+};
+
+export default AlertHitProvider;

src/context/reducers/AlertReducers.ts

@@ -0,0 +1,46 @@
+import type { AlertPayload, AlertState } from "../../types/types";
+
+export const initalState = {
+  alertList: [],
+  allAlerts: [],
+};
+
+export function reducer(state: AlertState, action: AlertPayload) {
+  switch (action.type) {
+    case "ADD": {
+      const alreadyExists = state.allAlerts.some(
+        (alertItem) => alertItem.vrm === action.payload.vrm
+      );
+      if (alreadyExists) {
+        return { ...state };
+      } else {
+        return {
+          ...state,
+          alertList: [...state.allAlerts, action.payload],
+          allAlerts: [...state.allAlerts, action.payload],
+        };
+      }
+    }
+
+    case "SEARCH": {
+      if (action.payload && typeof action.payload === "string") {
+        const searchTerm = action.payload.toLowerCase();
+        return {
+          ...state,
+          alertList: state.alertList.filter((alertItem) =>
+            alertItem.vrm.toLowerCase().includes(searchTerm)
+          ),
+        };
+      } else {
+        console.log(state);
+        return {
+          ...state,
+          alertList: state.allAlerts,
+        };
+      }
+    }
+
+    default:
+      return { ...state };
+  }
+}