- Implemented ModalComponent for reusable modal functionality. - Created SightingItemModal to manage modal state and display sighting details. - Developed SightingModalContent to render sighting information including video feed and metadata.
33 lines
889 B
TypeScript
33 lines
889 B
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import { cambase } from "../../../app/config";
|
|
import { useEffect, useRef } from "react";
|
|
|
|
const fetchVideoFeed = async (refId: number) => {
|
|
const response = await fetch(`${cambase}/mergedHistory/sightingSummary?mostRecentRef=${refId}`);
|
|
if (!response.ok) {
|
|
throw new Error("Network response was not ok");
|
|
}
|
|
return response.json();
|
|
};
|
|
|
|
export const useVideoFeed = () => {
|
|
const currentRefId = useRef<number>(-1);
|
|
|
|
const videoFeedQuery = useQuery({
|
|
queryKey: ["videoFeed"],
|
|
queryFn: () => fetchVideoFeed(currentRefId.current),
|
|
refetchInterval: 400,
|
|
refetchOnWindowFocus: false,
|
|
retry: false,
|
|
staleTime: 0,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (videoFeedQuery.data?.ref !== -1) {
|
|
currentRefId.current = videoFeedQuery?.data?.ref;
|
|
}
|
|
}, [videoFeedQuery.data]);
|
|
|
|
return { videoFeedQuery };
|
|
};
|