From bd97a49640a0d689b8455e58f3bfe4aaaea6d7f5 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 11 Oct 2024 15:46:56 +0530
Subject: [PATCH] Use

---
 .../photos/components/gallery/PeopleHeader.tsx    | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/web/packages/new/photos/components/gallery/PeopleHeader.tsx b/web/packages/new/photos/components/gallery/PeopleHeader.tsx
index 2b59b96967..9ea4f592c5 100644
--- a/web/packages/new/photos/components/gallery/PeopleHeader.tsx
+++ b/web/packages/new/photos/components/gallery/PeopleHeader.tsx
@@ -1,3 +1,4 @@
+import { useModalVisibility } from "@/base/components/utils/modal";
 import { pt } from "@/base/i18n";
 import {
     addCGroup,
@@ -94,11 +95,10 @@ const CGroupPersonOptions: React.FC<CGroupPersonOptionsProps> = ({
 }) => {
     const { showMiniDialog } = useAppContext();
 
-    const [openAddNameInput, setOpenAddNameInput] = useState(false);
+    const { show: showNameInput, props: nameInputVisibilityProps } =
+        useModalVisibility();
 
-    const handleRenamePerson = () => setOpenAddNameInput(true);
-
-    const renamePersonUsingName = useWrapAsyncOperation((name: string) =>
+    const handleRename = useWrapAsyncOperation((name: string) =>
         renameCGroup(cgroup, name),
     );
 
@@ -130,7 +130,7 @@ const CGroupPersonOptions: React.FC<CGroupPersonOptionsProps> = ({
                 <OverflowMenuOption
                     startIcon={<EditIcon />}
                     centerAlign
-                    onClick={handleRenamePerson}
+                    onClick={showNameInput}
                 >
                     {t("rename")}
                 </OverflowMenuOption>
@@ -144,8 +144,7 @@ const CGroupPersonOptions: React.FC<CGroupPersonOptionsProps> = ({
             </OverflowMenu>
 
             <SingleInputDialog
-                open={openAddNameInput}
-                onClose={() => setOpenAddNameInput(false)}
+                {...nameInputVisibilityProps}
                 title={pt("Rename person") /* TODO-Cluster pt()'s */}
                 label={pt("Name")}
                 placeholder={t("enter_name")}
@@ -153,7 +152,7 @@ const CGroupPersonOptions: React.FC<CGroupPersonOptionsProps> = ({
                 autoFocus
                 initialValue={cgroup.data.name ?? ""}
                 submitButtonTitle={t("rename")}
-                onSubmit={renamePersonUsingName}
+                onSubmit={handleRename}
             />
         </>
     );