mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-25 14:20:54 +03:00
Code Issues Projects Releases Packages Wiki Activity

feat: close modal after name change (#3084)

Browse source 
* feat: close modal after name change

* refactor: shortened modal name

* fix: added a no-op for NameChangeModal storybook
This commit is contained in:
Mohib Khan 2023-06-13 11:24:12 +05:30 committed by GitHub
parent f616f02be3
commit 6fa576a04a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/components/common/UserDropdown/UserDropdown.tsx
View file

@ -86,6 +86,10 @@ export const UserDropdown: FC<UserDropdownProps> = ({
setShowNameChangeModal(true); setShowNameChangeModal(true);
}; };
const closeChangeNameModal = () => {
setShowNameChangeModal(false);
};
// Register keyboard shortcut for the space bar to toggle playback // Register keyboard shortcut for the space bar to toggle playback
useHotkeys( useHotkeys(
'c', 'c',
@ -153,9 +157,9 @@ export const UserDropdown: FC<UserDropdownProps> = ({
<Modal <Modal
title="Change Chat Display Name" title="Change Chat Display Name"
open={showNameChangeModal} open={showNameChangeModal}
handleCancel={() => setShowNameChangeModal(false)} handleCancel={closeChangeNameModal}
> >
<NameChangeModal /> <NameChangeModal closeModal={closeChangeNameModal} />
</Modal> </Modal>
<Modal <Modal
title="Authenticate" title="Authenticate"

2
web/components/modals/NameChangeModal/NameChangeModal.stories.tsx
View file

@ -27,7 +27,7 @@ const Example = () => {
return ( return (
<div> <div>
<NameChangeModal /> <NameChangeModal closeModal={() => {}} />
</div> </div>
); );
}; };

7
web/components/modals/NameChangeModal/NameChangeModal.tsx
View file

@ -22,7 +22,11 @@ const UserColor: FC<UserColorProps> = ({ color }) => {
return <div style={style} />; return <div style={style} />;
}; };
export const NameChangeModal: FC = () => { type NameChangeModalProps = {
closeModal: () => void;
};
export const NameChangeModal: FC<NameChangeModalProps> = ({ closeModal }) => {
const currentUser = useRecoilValue(currentUserAtom); const currentUser = useRecoilValue(currentUserAtom);
const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom); const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom);
const [newName, setNewName] = useState<string>(currentUser?.displayName); const [newName, setNewName] = useState<string>(currentUser?.displayName);
@ -44,6 +48,7 @@ export const NameChangeModal: FC = () => {
newName, newName,
}; };
websocketService.send(nameChange); websocketService.send(nameChange);
closeModal();
}; };
const handleColorChange = (color: string) => { const handleColorChange = (color: string) => {