owncast/web/components/modals/ChatModal/ChatModal.tsx
Gabe Kangas 69f217f758
Refactor mobile chat into modal (#3038)
* feat(mobile): refactor mobile chat into modal

- Make page always scrollable
- Move mobile chat into a standalone modal

* fix(test): split out mobile browser test specs

* fix(mobile): force chat button to render on top of footer

* fix: some small updates from review

* fix: hide/show hide chat menu option based on width

* fix: chat button icon getting cut off

* chore(tests): add browser tests for mobile chat modal

* chore(tests): add story for ChatModal component

* fix(test): quiet shellcheck

* fix: remove unused import

* fix(tests): silence storybook linting warning

* fix(ui): reposition chat modal button icon with transform
2023-05-22 18:56:44 -07:00

66 lines
1.8 KiB
TypeScript

import { Modal } from 'antd';
import { FC } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import styles from './ChatModal.module.scss';
import { ComponentError } from '../../ui/ComponentError/ComponentError';
import { ChatContainer } from '../../chat/ChatContainer/ChatContainer';
import { ChatMessage } from '../../../interfaces/chat-message.model';
import { CurrentUser } from '../../../interfaces/current-user';
import { UserDropdown } from '../../common/UserDropdown/UserDropdown';
export type ChatModalProps = {
messages: ChatMessage[];
currentUser: CurrentUser;
handleClose: () => void;
};
export const ChatModal: FC<ChatModalProps> = ({ messages, currentUser, handleClose }) => {
if (!currentUser) {
return null;
}
const { id, displayName, isModerator } = currentUser;
const modalBodyStyle = {
padding: '0px',
height: '55vh',
};
return (
<ErrorBoundary
// eslint-disable-next-line react/no-unstable-nested-components
fallbackRender={({ error, resetErrorBoundary }) => (
<ComponentError
componentName="ChatModal"
message={error.message}
retryFunction={resetErrorBoundary}
/>
)}
>
<Modal
open
centered
maskClosable={false}
footer={null}
title={<UserDropdown id="chat-modal-user-menu" showToggleChatOption={false} />}
maskStyle={{
zIndex: 700,
}}
className={styles.root}
bodyStyle={modalBodyStyle}
wrapClassName={styles.modalWrapper}
onCancel={handleClose}
>
<ChatContainer
messages={messages}
usernameToHighlight={displayName}
chatUserId={id}
isModerator={isModerator}
chatAvailable
focusInput={false}
/>
</Modal>
</ErrorBoundary>
);
};