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
parent b9b569f3fe
commit 69f217f758
21 changed files with 934 additions and 204 deletions
@@ -0,0 +1,66 @@
+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>
+  );
+};