Update UI and then run api call (#10460)

web/src/pages/Events.tsx

@@ -128,6 +128,40 @@ export default function Events() {
 
   // review status
 
+  const markAllItemsAsReviewed = useCallback(
+    async (currentItems: ReviewSegment[]) => {
+      if (currentItems.length == 0) {
+        return;
+      }
+
+      const severity = currentItems[0].severity;
+      updateSegments(
+        (data: ReviewSegment[] | undefined) => {
+          if (!data) {
+            return data;
+          }
+
+          const newData = [...data];
+
+          newData.forEach((seg) => {
+            if (seg.severity == severity) {
+              seg.has_been_reviewed = true;
+            }
+          });
+
+          return newData;
+        },
+        { revalidate: false, populateCache: true },
+      );
+
+      await axios.post(`reviews/viewed`, {
+        ids: currentItems?.map((seg) => seg.id),
+      });
+      reloadData();
+    },
+    [reloadData, updateSegments],
+  );
+
   const markItemAsReviewed = useCallback(
     async (review: ReviewSegment) => {
       const resp = await axios.post(`reviews/viewed`, { ids: [review.id] });
@@ -299,6 +333,7 @@ export default function Events() {
         startTime={startTime}
         setSeverity={setSeverity}
         markItemAsReviewed={markItemAsReviewed}
+        markAllItemsAsReviewed={markAllItemsAsReviewed}
         onOpenReview={setSelectedReviewId}
         pullLatestData={reloadData}
         updateFilter={onUpdateFilter}

web/src/views/events/EventView.tsx

@@ -47,6 +47,7 @@ type EventViewProps = {
   startTime?: number;
   setSeverity: (severity: ReviewSeverity) => void;
   markItemAsReviewed: (review: ReviewSegment) => void;
+  markAllItemsAsReviewed: (currentItems: ReviewSegment[]) => void;
   onOpenReview: (reviewId: string) => void;
   pullLatestData: () => void;
   updateFilter: (filter: ReviewFilter) => void;
@@ -61,6 +62,7 @@ export default function EventView({
   startTime,
   setSeverity,
   markItemAsReviewed,
+  markAllItemsAsReviewed,
   onOpenReview,
   pullLatestData,
   updateFilter,
@@ -265,6 +267,7 @@ export default function EventView({
             filter={filter}
             timeRange={timeRange}
             markItemAsReviewed={markItemAsReviewed}
+            markAllItemsAsReviewed={markAllItemsAsReviewed}
             onSelectReview={onSelectReview}
             pullLatestData={pullLatestData}
           />
@@ -301,6 +304,7 @@ type DetectionReviewProps = {
   filter?: ReviewFilter;
   timeRange: { before: number; after: number };
   markItemAsReviewed: (review: ReviewSegment) => void;
+  markAllItemsAsReviewed: (currentItems: ReviewSegment[]) => void;
   onSelectReview: (id: string, ctrl: boolean) => void;
   pullLatestData: () => void;
 };
@@ -314,6 +318,7 @@ function DetectionReview({
   filter,
   timeRange,
   markItemAsReviewed,
+  markAllItemsAsReviewed,
   onSelectReview,
   pullLatestData,
 }: DetectionReviewProps) {
@@ -348,18 +353,6 @@ function DetectionReview({
 
   const [hasUpdate, setHasUpdate] = useState(false);
 
-  const markAllReviewed = useCallback(async () => {
-    if (!currentItems) {
-      return;
-    }
-
-    await axios.post(`reviews/viewed`, {
-      ids: currentItems?.map((seg) => seg.id),
-    });
-    setHasUpdate(false);
-    pullLatestData();
-  }, [currentItems, pullLatestData]);
-
   // timeline interaction
 
   const { alignStartDateToTimeline } = useEventUtils(
@@ -505,7 +498,10 @@ function DetectionReview({
               <Button
                 className="text-white"
                 variant="select"
-                onClick={markAllReviewed}
+                onClick={() => {
+                  setHasUpdate(false);
+                  markAllItemsAsReviewed(currentItems ?? []);
+                }}
               >
                 Mark these items as reviewed
               </Button>