From bc40f4534ece3fc427296f075a52749f221ccde1 Mon Sep 17 00:00:00 2001
From: Weitheng Haw <wei.thenghaw@disneystreaming.com>
Date: Tue, 28 Jan 2025 16:55:40 +0000
Subject: [PATCH] Minor fix

---
 web/src/pages/FaceLibrary.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index b95ed012d..c5f8fc9c3 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -80,7 +80,12 @@ export default function FaceLibrary() {
   const [upload, setUpload] = useState(false);
 
   const onUploadImage = useCallback(
-    (file: File) => {
+    (file: File | null) => {
+      if (!file) {
+        setUpload(false);
+        return;
+      }
+
       const formData = new FormData();
       formData.append("file", file);
       axios
@@ -138,7 +143,8 @@ export default function FaceLibrary() {
       if (resp.status === 200) {
         setNewFaceDialog(false);
         setNewFaceName("");
-        refreshFaces();
+        await refreshFaces();
+        setPageToggle(newFaceName);
         toast.success("Successfully created new face", { position: "top-center" });
       }
     } catch (error) {
@@ -150,7 +156,7 @@ export default function FaceLibrary() {
     } finally {
       setIsCreatingFace(false);
     }
-  }, [newFaceName, refreshFaces]);
+  }, [newFaceName, refreshFaces, setPageToggle]);
 
   const [renameDialog, setRenameDialog] = useState(false);
   const [isRenaming, setIsRenaming] = useState(false);
@@ -341,7 +347,6 @@ export default function FaceLibrary() {
         </ScrollArea>
         <div className="flex gap-2">
           <Button 
-            variant="outline"
             className="flex gap-2" 
             onClick={() => setNewFaceDialog(true)}
           >