mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 12:49:37 +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);
};
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"

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

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

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

@ -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) => {