fix overwriting existing data

This commit is contained in:
Nicolas Mowen 2024-02-22 14:11:55 -07:00
parent d8b08ff5d5
commit 34115d0a60
2 changed files with 31 additions and 29 deletions

View File

@ -4,7 +4,7 @@ import DesktopEventView from "@/views/events/DesktopEventView";
import DesktopRecordingView from "@/views/events/DesktopRecordingView"; import DesktopRecordingView from "@/views/events/DesktopRecordingView";
import MobileEventView from "@/views/events/MobileEventView"; import MobileEventView from "@/views/events/MobileEventView";
import axios from "axios"; import axios from "axios";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useMemo } from "react";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import useSWR from "swr"; import useSWR from "swr";
import useSWRInfinite from "swr/infinite"; import useSWRInfinite from "swr/infinite";
@ -17,13 +17,9 @@ export default function Events() {
// review paging // review paging
const [after, setAfter] = useState(getHoursAgo(24)); const timeRange = useMemo(() => {
useEffect(() => { return { before: Date.now() / 1000, after: getHoursAgo(24) };
const intervalId: NodeJS.Timeout = setInterval(() => { }, []);
setAfter(getHoursAgo(24));
}, 300000);
return () => clearInterval(intervalId);
}, [300000]);
const reviewSegmentFetcher = useCallback((key: any) => { const reviewSegmentFetcher = useCallback((key: any) => {
const [path, params] = Array.isArray(key) ? key : [key, undefined]; const [path, params] = Array.isArray(key) ? key : [key, undefined];
@ -36,19 +32,24 @@ export default function Events() {
if (index > 0) { if (index > 0) {
const lastDate = prevData[prevData.length - 1].start_time; const lastDate = prevData[prevData.length - 1].start_time;
const pagedParams = reviewSearchParams const pagedParams = reviewSearchParams
? { before: lastDate, after: after, limit: API_LIMIT } ? { before: lastDate, after: timeRange.after, limit: API_LIMIT }
: { : {
...reviewSearchParams, ...reviewSearchParams,
before: lastDate, before: lastDate,
after: after, after: timeRange.after,
limit: API_LIMIT, limit: API_LIMIT,
}; };
return ["review", pagedParams]; return ["review", pagedParams];
} }
const params = reviewSearchParams const params = reviewSearchParams
? { limit: API_LIMIT, after: after } ? { limit: API_LIMIT, before: timeRange.before, after: timeRange.after }
: { ...reviewSearchParams, limit: API_LIMIT, after: after }; : {
...reviewSearchParams,
limit: API_LIMIT,
before: timeRange.before,
after: timeRange.after,
};
return ["review", params]; return ["review", params];
}, },
[reviewSearchParams] [reviewSearchParams]
@ -60,7 +61,10 @@ export default function Events() {
size, size,
setSize, setSize,
isValidating, isValidating,
} = useSWRInfinite<ReviewSegment[]>(getKey, reviewSegmentFetcher); } = useSWRInfinite<ReviewSegment[]>(getKey, reviewSegmentFetcher, {
revalidateOnFocus: false,
persistSize: true,
});
const isDone = useMemo( const isDone = useMemo(
() => (reviewPages?.at(-1)?.length ?? 0) < API_LIMIT, () => (reviewPages?.at(-1)?.length ?? 0) < API_LIMIT,
@ -186,7 +190,7 @@ export default function Events() {
<DesktopEventView <DesktopEventView
reviewPages={reviewPages} reviewPages={reviewPages}
relevantPreviews={allPreviews} relevantPreviews={allPreviews}
timeRange={[Date.now() / 1000, after]} timeRange={timeRange}
reachedEnd={isDone} reachedEnd={isDone}
isValidating={isValidating} isValidating={isValidating}
loadNextPage={() => setSize(size + 1)} loadNextPage={() => setSize(size + 1)}

View File

@ -20,7 +20,7 @@ import useSWR from "swr";
type DesktopEventViewProps = { type DesktopEventViewProps = {
reviewPages?: ReviewSegment[][]; reviewPages?: ReviewSegment[][];
relevantPreviews?: Preview[]; relevantPreviews?: Preview[];
timeRange: [number, number]; timeRange: { before: number; after: number };
reachedEnd: boolean; reachedEnd: boolean;
isValidating: boolean; isValidating: boolean;
loadNextPage: () => void; loadNextPage: () => void;
@ -262,20 +262,18 @@ export default function DesktopEventView({
)} )}
</div> </div>
<div className="absolute top-12 right-0 bottom-0"> <div className="absolute top-12 right-0 bottom-0">
{timeRange[1] != 0 && ( <EventReviewTimeline
<EventReviewTimeline segmentDuration={60}
segmentDuration={60} timestampSpread={15}
timestampSpread={15} timelineStart={timeRange.before}
timelineStart={timeRange[0]} timelineEnd={timeRange.after}
timelineEnd={timeRange[1]} showMinimap
showMinimap minimapStartTime={minimapBounds.start}
minimapStartTime={minimapBounds.start} minimapEndTime={minimapBounds.end}
minimapEndTime={minimapBounds.end} events={reviewItems.all}
events={reviewItems.all} severityType={severity}
severityType={severity} contentRef={contentRef}
contentRef={contentRef} />
/>
)}
</div> </div>
</div> </div>
); );