From 1be82598bb00d68c6b97e7ce0c54b9867ade8a0c Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 11 Sep 2024 07:27:48 -0600
Subject: [PATCH] Cleanup plus submission dialog

---
 .../overlay/detail/SearchDetailDialog.tsx     |  4 +-
 .../overlay/dialog/FrigatePlusDialog.tsx      | 53 +++++++++++++------
 2 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index 27b776a72..754712933 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -151,7 +151,9 @@ export default function SearchDetailDialog({
             upload={search as unknown as Event}
             dialog={false}
             onClose={() => {}}
-            onEventUploaded={() => {}}
+            onEventUploaded={() => {
+              search.plus_id = "new_upload";
+            }}
           />
         )}
         {page == "video" && <VideoTab search={search} />}
diff --git a/web/src/components/overlay/dialog/FrigatePlusDialog.tsx b/web/src/components/overlay/dialog/FrigatePlusDialog.tsx
index bacb9d5e9..e96b53d63 100644
--- a/web/src/components/overlay/dialog/FrigatePlusDialog.tsx
+++ b/web/src/components/overlay/dialog/FrigatePlusDialog.tsx
@@ -1,4 +1,5 @@
 import { baseUrl } from "@/api/baseUrl";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -11,10 +12,12 @@ import {
 import { Event } from "@/types/event";
 import { FrigateConfig } from "@/types/frigateConfig";
 import axios from "axios";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import useSWR from "swr";
 
+type SubmissionState = "reviewing" | "uploading" | "submitted";
+
 type FrigatePlusDialogProps = {
   upload?: Event;
   dialog?: boolean;
@@ -51,6 +54,10 @@ export function FrigatePlusDialog({
 
   // upload
 
+  const [state, setState] = useState<SubmissionState>(
+    upload?.plus_id ? "submitted" : "reviewing",
+  );
+
   const onSubmitToPlus = useCallback(
     async (falsePositive: boolean) => {
       if (!upload) {
@@ -63,6 +70,7 @@ export function FrigatePlusDialog({
             include_annotation: 1,
           });
 
+      setState("submitted");
       onEventUploaded();
       onClose();
     },
@@ -97,21 +105,34 @@ export function FrigatePlusDialog({
           />
         )}
       </TransformComponent>
-      {upload?.plus_id == undefined && (
-        <DialogFooter>
-          {dialog && <Button onClick={onClose}>Cancel</Button>}
-          <Button className="bg-success" onClick={() => onSubmitToPlus(false)}>
-            This is a {upload?.label}
-          </Button>
-          <Button
-            className="text-white"
-            variant="destructive"
-            onClick={() => onSubmitToPlus(true)}
-          >
-            This is not a {upload?.label}
-          </Button>
-        </DialogFooter>
-      )}
+
+      <DialogFooter>
+        {state == "reviewing" && (
+          <>
+            {dialog && <Button onClick={onClose}>Cancel</Button>}
+            <Button
+              className="bg-success"
+              onClick={() => {
+                setState("uploading");
+                onSubmitToPlus(false);
+              }}
+            >
+              This is a {upload?.label}
+            </Button>
+            <Button
+              className="text-white"
+              variant="destructive"
+              onClick={() => {
+                setState("uploading");
+                onSubmitToPlus(true);
+              }}
+            >
+              This is not a {upload?.label}
+            </Button>
+          </>
+        )}
+        {state == "uploading" && <ActivityIndicator />}
+      </DialogFooter>
     </TransformWrapper>
   );