From 6fa576a04a1ddad63f5e39e0db512fc5ce073be4 Mon Sep 17 00:00:00 2001
From: Mohib Khan <mohibk.in@gmail.com>
Date: Tue, 13 Jun 2023 11:24:12 +0530
Subject: [PATCH] feat: close modal after name change (#3084)

* feat: close modal after name change

* refactor: shortened modal name

* fix: added a no-op for NameChangeModal storybook
---
 web/components/common/UserDropdown/UserDropdown.tsx       | 8 ++++++--
 .../modals/NameChangeModal/NameChangeModal.stories.tsx    | 2 +-
 web/components/modals/NameChangeModal/NameChangeModal.tsx | 7 ++++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/web/components/common/UserDropdown/UserDropdown.tsx b/web/components/common/UserDropdown/UserDropdown.tsx
index bf409cc27..a439194fa 100644
--- a/web/components/common/UserDropdown/UserDropdown.tsx
+++ b/web/components/common/UserDropdown/UserDropdown.tsx
@@ -86,6 +86,10 @@ export const UserDropdown: FC<UserDropdownProps> = ({
     setShowNameChangeModal(true);
   };
 
+  const closeChangeNameModal = () => {
+    setShowNameChangeModal(false);
+  };
+
   // Register keyboard shortcut for the space bar to toggle playback
   useHotkeys(
     'c',
@@ -153,9 +157,9 @@ export const UserDropdown: FC<UserDropdownProps> = ({
         <Modal
           title="Change Chat Display Name"
           open={showNameChangeModal}
-          handleCancel={() => setShowNameChangeModal(false)}
+          handleCancel={closeChangeNameModal}
         >
-          <NameChangeModal />
+          <NameChangeModal closeModal={closeChangeNameModal} />
         </Modal>
         <Modal
           title="Authenticate"
diff --git a/web/components/modals/NameChangeModal/NameChangeModal.stories.tsx b/web/components/modals/NameChangeModal/NameChangeModal.stories.tsx
index ef5c6fdc0..ce9175f2b 100644
--- a/web/components/modals/NameChangeModal/NameChangeModal.stories.tsx
+++ b/web/components/modals/NameChangeModal/NameChangeModal.stories.tsx
@@ -27,7 +27,7 @@ const Example = () => {
 
   return (
     <div>
-      <NameChangeModal />
+      <NameChangeModal closeModal={() => {}} />
     </div>
   );
 };
diff --git a/web/components/modals/NameChangeModal/NameChangeModal.tsx b/web/components/modals/NameChangeModal/NameChangeModal.tsx
index b5bc4fbcf..4865a20d6 100644
--- a/web/components/modals/NameChangeModal/NameChangeModal.tsx
+++ b/web/components/modals/NameChangeModal/NameChangeModal.tsx
@@ -22,7 +22,11 @@ const UserColor: FC<UserColorProps> = ({ color }) => {
   return <div style={style} />;
 };
 
-export const NameChangeModal: FC = () => {
+type NameChangeModalProps = {
+  closeModal: () => void;
+};
+
+export const NameChangeModal: FC<NameChangeModalProps> = ({ closeModal }) => {
   const currentUser = useRecoilValue(currentUserAtom);
   const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom);
   const [newName, setNewName] = useState<string>(currentUser?.displayName);
@@ -44,6 +48,7 @@ export const NameChangeModal: FC = () => {
       newName,
     };
     websocketService.send(nameChange);
+    closeModal();
   };
 
   const handleColorChange = (color: string) => {