add toggle function to mark as unreviewed when all selected are reviewed

web/src/components/filter/ReviewActionGroup.tsx

@@ -1,10 +1,11 @@
-import { FaCircleCheck } from "react-icons/fa6";
+import { FaCircleCheck, FaCircleXmark } from "react-icons/fa6";
 import { useCallback, useState } from "react";
 import axios from "axios";
 import { Button, buttonVariants } from "../ui/button";
 import { isDesktop } from "react-device-detect";
 import { FaCompactDisc } from "react-icons/fa";
 import { HiTrash } from "react-icons/hi";
+import { ReviewSegment } from "@/types/review";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -20,8 +21,8 @@ import { Trans, useTranslation } from "react-i18next";
 import { toast } from "sonner";
 
 type ReviewActionGroupProps = {
-  selectedReviews: string[];
-  setSelectedReviews: (ids: string[]) => void;
+  selectedReviews: ReviewSegment[];
+  setSelectedReviews: (reviews: ReviewSegment[]) => void;
   onExport: (id: string) => void;
   pullLatestData: () => void;
 };
@@ -36,15 +37,24 @@ export default function ReviewActionGroup({
     setSelectedReviews([]);
   }, [setSelectedReviews]);
 
-  const onMarkAsReviewed = useCallback(async () => {
-    await axios.post(`reviews/viewed`, { ids: selectedReviews });
+  const allReviewed = selectedReviews.every(
+    (review) => review.has_been_reviewed,
+  );
+
+  const onToggleReviewed = useCallback(async () => {
+    const ids = selectedReviews.map((review) => review.id);
+    await axios.post(`reviews/viewed`, {
+      ids,
+      reviewed: !allReviewed,
+    });
     setSelectedReviews([]);
     pullLatestData();
-  }, [selectedReviews, setSelectedReviews, pullLatestData]);
+  }, [selectedReviews, setSelectedReviews, pullLatestData, allReviewed]);
 
   const onDelete = useCallback(() => {
+    const ids = selectedReviews.map((review) => review.id);
     axios
-      .post(`reviews/delete`, { ids: selectedReviews })
+      .post(`reviews/delete`, { ids })
       .then((resp) => {
         if (resp.status === 200) {
           toast.success(t("recording.confirmDelete.toast.success"), {
@@ -140,7 +150,7 @@ export default function ReviewActionGroup({
               aria-label={t("recording.button.export")}
               size="sm"
               onClick={() => {
-                onExport(selectedReviews[0]);
+                onExport(selectedReviews[0].id);
                 onClearSelected();
               }}
             >
@@ -154,14 +164,24 @@ export default function ReviewActionGroup({
           )}
           <Button
             className="flex items-center gap-2 p-2"
-            aria-label={t("recording.button.markAsReviewed")}
+            aria-label={
+              allReviewed
+                ? t("recording.button.markAsUnreviewed")
+                : t("recording.button.markAsReviewed")
+            }
             size="sm"
-            onClick={onMarkAsReviewed}
+            onClick={onToggleReviewed}
           >
-            <FaCircleCheck className="text-secondary-foreground" />
+            {allReviewed ? (
+              <FaCircleXmark className="text-secondary-foreground" />
+            ) : (
+              <FaCircleCheck className="text-secondary-foreground" />
+            )}
             {isDesktop && (
               <div className="text-primary">
-                {t("recording.button.markAsReviewed")}
+                {allReviewed
+                  ? t("recording.button.markAsUnreviewed")
+                  : t("recording.button.markAsReviewed")}
               </div>
             )}
           </Button>