diff --git a/ui/src/components/Bouts/FeedItem.tsx b/ui/src/components/Bouts/FeedItem.tsx index 949f2b45..be1cef46 100644 --- a/ui/src/components/Bouts/FeedItem.tsx +++ b/ui/src/components/Bouts/FeedItem.tsx @@ -25,6 +25,8 @@ import { import { useListenerCount } from "@/hooks/useFeedPresence"; import { formatTimestamp } from "@/utils/time"; +const categories: Array = ["WHALE", "VESSEL", "OTHER"]; + export default function FeedItem({ feed, onStatUpdate, @@ -32,11 +34,6 @@ export default function FeedItem({ feed: Pick; onStatUpdate?: (feedId: string, stat: string, value: number) => void; }) { - const categories: Array = useMemo( - () => ["WHALE", "VESSEL", "OTHER"], - [], - ); - const [showTable, setShowTable] = useState(false); const [selectedCategory, setSelectedCategory] = useState(); const theme = useTheme(); @@ -64,14 +61,21 @@ export default function FeedItem({ ? recentDetections.filter((det) => det.category === selectedCategory) : recentDetections; + const fifteenMinutesAgo = useMemo( + () => new Date(now.valueOf() - 15 * 60 * 1000), + [now], + ); + const fiveMinutesAgo = useMemo( + () => new Date(now.valueOf() - 5 * 60 * 1000), + [now], + ); + const detsCount = recentDetections.length; const detsCount15MinAgo = recentDetections.filter( - ({ timestamp }) => - new Date(timestamp) > new Date(now.valueOf() - 15 * 60 * 1000), + ({ timestamp }) => new Date(timestamp) > fifteenMinutesAgo, ).length; const detsCount5MinAgo = recentDetections.filter( - ({ timestamp }) => - new Date(timestamp) > new Date(now.valueOf() - 5 * 60 * 1000), + ({ timestamp }) => new Date(timestamp) > fiveMinutesAgo, ).length; const detectionChartData = useMemo( @@ -104,14 +108,7 @@ export default function FeedItem({ ); }); } - }, [ - feed.id, - recentDetections, - detsCount, - onStatUpdate, - listenerCount, - categories, - ]); + }, [feed.id, recentDetections, detsCount, onStatUpdate, listenerCount]); return (