28 lines
1.1 KiB
TypeScript
28 lines
1.1 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import { useVideoFeed } from "./useVideoFeed";
|
|
import type { SightingType } from "../../../utils/types";
|
|
|
|
export const useSightingList = () => {
|
|
const [sightingList, setSightingList] = useState<SightingType[]>([]);
|
|
const { videoFeedQuery } = useVideoFeed();
|
|
const latestSighting = videoFeedQuery?.data;
|
|
const lastProcessedRef = useRef<number>(-1);
|
|
const isLoading = videoFeedQuery?.isPending;
|
|
|
|
useEffect(() => {
|
|
if (!latestSighting || latestSighting.ref === undefined || latestSighting.ref === -1) return;
|
|
|
|
if (latestSighting.ref !== lastProcessedRef.current) {
|
|
lastProcessedRef.current = latestSighting.ref;
|
|
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|
setSightingList((prevList) => {
|
|
if (prevList[0]?.ref === latestSighting.ref) return prevList;
|
|
const dedupPrev = prevList.filter((s) => s.ref !== latestSighting.ref);
|
|
return [latestSighting, ...dedupPrev].slice(0, 10);
|
|
});
|
|
}
|
|
}, [latestSighting, latestSighting?.ref]);
|
|
return { sightingList, isLoading };
|
|
};
|