diff --git a/web/src/views/events/DesktopEventView.tsx b/web/src/views/events/DesktopEventView.tsx
index 67ac11714..ddf3c0aea 100644
--- a/web/src/views/events/DesktopEventView.tsx
+++ b/web/src/views/events/DesktopEventView.tsx
@@ -116,15 +116,15 @@ export default function DesktopEventView() {
[reviewPages]
);
- useEffect(() => {
- if (!reviewItems || !reviewItems.all) {
- return
+ const currentItems = useMemo(() => {
+ const current = reviewItems[severity];
+
+ if (!current || current.length == 0) {
+ return null;
}
- if (reviewItems.all.length > 0 && reviewItems[severity].length == 0) {
- setSize(size + 1)
- }
- }, [reviewItems, severity])
+ return current;
+ }, [reviewItems, severity]);
// review interaction
@@ -311,32 +311,36 @@ export default function DesktopEventView() {
ref={contentRef}
className="absolute left-0 top-12 bottom-0 right-28 flex flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
>
- {reviewItems[severity]?.map((value, segIdx) => {
- const lastRow = segIdx == reviewItems[severity].length - 1;
- const relevantPreview = Object.values(allPreviews || []).find(
- (preview) =>
- preview.camera == value.camera &&
- preview.start < value.start_time &&
- preview.end > value.end_time
- );
+ {currentItems ? (
+ currentItems.map((value, segIdx) => {
+ const lastRow = segIdx == reviewItems[severity].length - 1;
+ const relevantPreview = Object.values(allPreviews || []).find(
+ (preview) =>
+ preview.camera == value.camera &&
+ preview.start < value.start_time &&
+ preview.end > value.end_time
+ );
- return (
-
-
-
setReviewed(value.id)}
- />
+ return (
+
+
+
setReviewed(value.id)}
+ />
+
+ {lastRow && !isDone &&
}
- {lastRow && !isDone && }
-
- );
- })}
+ );
+ })
+ ) : (
+
+ )}
{after != 0 && (
diff --git a/web/src/views/events/MobileEventView.tsx b/web/src/views/events/MobileEventView.tsx
index 5cb4b1e52..c48d5f4b0 100644
--- a/web/src/views/events/MobileEventView.tsx
+++ b/web/src/views/events/MobileEventView.tsx
@@ -106,15 +106,15 @@ export default function MobileEventView() {
[reviewPages]
);
- useEffect(() => {
- if (!reviewItems || !reviewItems.all) {
- return
+ const currentItems = useMemo(() => {
+ const current = reviewItems[severity];
+
+ if (!current || current.length == 0) {
+ return null;
}
- if (reviewItems.all.length > 0 && reviewItems[severity].length == 0) {
- setSize(size + 1)
- }
- }, [reviewItems, severity, size])
+ return current;
+ }, [reviewItems, severity]);
// review interaction
@@ -288,33 +288,37 @@ export default function MobileEventView() {
ref={contentRef}
className="w-full h-full grid grid-cols-1 sm:grid-cols-2 mt-2 gap-2 overflow-y-auto"
>
- {reviewItems[severity]?.map((value, segIdx) => {
- const lastRow = segIdx == reviewItems[severity].length - 1;
- const relevantPreview = Object.values(allPreviews || []).find(
- (preview) =>
- preview.camera == value.camera &&
- preview.start < value.start_time &&
- preview.end > value.end_time
- );
+ {currentItems ? (
+ currentItems.map((value, segIdx) => {
+ const lastRow = segIdx == reviewItems[severity].length - 1;
+ const relevantPreview = Object.values(allPreviews || []).find(
+ (preview) =>
+ preview.camera == value.camera &&
+ preview.start < value.start_time &&
+ preview.end > value.end_time
+ );
- return (
-
-
-
setReviewed(value.id)}
- />
+ return (
+
+
+
setReviewed(value.id)}
+ />
+
+ {lastRow && !isDone &&
}
- {lastRow && !isDone && }
-
- );
- })}
+ );
+ })
+ ) : (
+
+ )}
>
);