code fixes and adding modal

src/context/SightingFeedContext.tsx

@@ -1,15 +1,17 @@
 import { createContext, useContext } from "react";
-import type { SightingWidgetType } from "../types/types";
+import type { SightingType, SightingWidgetType } from "../types/types";
 
 type SightingFeedContextType = {
   sightings: (SightingWidgetType | null | undefined)[];
   selectedRef: number | null;
   setSelectedRef: (ref: number | null) => void;
-  effectiveSelected: SightingWidgetType | null;
+  // effectiveSelected: SightingWidgetType | null;
   mostRecent: SightingWidgetType | null;
   side: string;
-  isPending: boolean;
-  noSighting: boolean;
+  selectedSighting: SightingType | null;
+  setSelectedSighting: (sighting: SightingType | null) => void;
+  setSightingModalOpen: (isSightingModalOpen: boolean) => void;
+  isSightingModalOpen: boolean;
 };
 
 export const SightingFeedContext = createContext<

src/context/providers/SightingFeedProvider.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 import { useSightingFeed } from "../../hooks/useSightingFeed";
 import { SightingFeedContext } from "../SightingFeedContext";
 
@@ -17,23 +17,25 @@ export const SightingFeedProvider = ({
     sightings,
     selectedRef,
     setSelectedRef,
-    effectiveSelected,
+    // effectiveSelected,
+    setSelectedSighting,
+    selectedSighting,
     mostRecent,
-    isPending,
-    noSighting,
   } = useSightingFeed(url);
-
+  const [isSightingModalOpen, setSightingModalOpen] = useState(false);
   return (
     <SightingFeedContext.Provider
       value={{
         sightings,
         selectedRef,
         setSelectedRef,
-        effectiveSelected,
+        setSelectedSighting,
+        selectedSighting,
+        setSightingModalOpen,
+        isSightingModalOpen,
+        // effectiveSelected,
         mostRecent,
         side,
-        isPending,
-        noSighting,
       }}
     >
       {children}