code fixes and adding modal

src/hooks/useSightingFeed.ts

@@ -1,7 +1,10 @@
 import { useEffect, useRef, useState } from "react";
-import type { SightingWidgetType } from "../types/types";
+import type { SightingType, SightingWidgetType } from "../types/types";
 
-async function fetchSighting(url: string, ref: number): Promise<SightingWidgetType> {
+async function fetchSighting(
+  url: string,
+  ref: number
+): Promise<SightingWidgetType> {
   const res = await fetch(`${url}${ref}`);
   if (!res.ok) throw new Error(String(res.status));
   return await res.json();
@@ -11,6 +14,9 @@ export function useSightingFeed(url: string) {
   const [sightings, setSightings] = useState<SightingWidgetType[]>([]);
   const [selectedRef, setSelectedRef] = useState<number | null>(null);
   const [mostRecent, setMostRecent] = useState<SightingWidgetType | null>(null);
+  const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(
+    null
+  );
 
   const currentRef = useRef<number>(-1);
   const pollingTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -35,7 +41,7 @@ export function useSightingFeed(url: string) {
           currentRef.current = data.ref;
           lastValidTimestamp.current = now;
 
-          setSightings(prev => {
+          setSightings((prev) => {
             const updated = [data, ...prev].slice(0, 7);
             return updated;
           });
@@ -58,13 +64,15 @@ export function useSightingFeed(url: string) {
     };
   }, [url]);
 
-  const selected = sightings.find(s => s?.ref === selectedRef) ?? mostRecent;
+  // const selected = sightings.find(s => s?.ref === selectedRef) ?? mostRecent;
 
   return {
     sightings,
     selectedRef,
     setSelectedRef,
     mostRecent,
-    effectiveSelected: selected,
+    setSelectedSighting,
+    selectedSighting,
+    // effectiveSelected: selected,
   };
 }