fix: apply PR changes

graasp · Oct 13, 2022 · 4f5d3ab · 4f5d3ab
1 parent 3a16dbc
commit 4f5d3ab
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 49 deletions.
diff --git a/cypress/integration/message-actions.cy.tsx b/cypress/integration/message-actions.cy.tsx
@@ -1,6 +1,4 @@
 /// <reference types="../cypress"/>
-import { List } from 'immutable';
-
 import React from 'react';
 
 import { convertJs } from '@graasp/sdk';
@@ -29,8 +27,8 @@ describe('Message actions', () => {
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(convertJs(Object.values(MEMBERS)))}
-        messages={List(convertJs(CHAT_MESSAGES))}
+        members={convertJs(Object.values(MEMBERS))}
+        messages={convertJs(CHAT_MESSAGES)}
         useAvatarHook={fakeHook}
       />,
     );
@@ -57,8 +55,8 @@ describe('Delete action', () => {
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(convertJs(Object.values(MEMBERS)))}
-        messages={List(convertJs(CHAT_MESSAGES))}
+        members={convertJs(Object.values(MEMBERS))}
+        messages={convertJs(CHAT_MESSAGES)}
         deleteMessageFunction={deleteMessageSpy}
         useAvatarHook={fakeHook}
       />,
@@ -83,8 +81,8 @@ describe('Edit action', () => {
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(convertJs(Object.values(MEMBERS)))}
-        messages={List(convertJs(CHAT_MESSAGES))}
+        members={convertJs(Object.values(MEMBERS))}
+        messages={convertJs(CHAT_MESSAGES)}
         editMessageFunction={editMessageSpy}
         sendMessageFunction={sendMessageSpy}
         useAvatarHook={fakeHook}

diff --git a/cypress/integration/render-ui.cy.tsx b/cypress/integration/render-ui.cy.tsx
@@ -1,5 +1,4 @@
 /// <reference types="../cypress"/>
-import { List } from 'immutable';
 import { v4 } from 'uuid';
 
 import React from 'react';
@@ -29,8 +28,8 @@ describe('Render Avatar', () => {
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(convertJs(Object.values(MEMBERS)))}
-        messages={List(convertJs(CHAT_MESSAGES))}
+        members={convertJs(Object.values(MEMBERS))}
+        messages={convertJs(CHAT_MESSAGES)}
         useAvatarHook={fakeHook}
       />,
     );
@@ -42,8 +41,8 @@ describe('Render Avatar', () => {
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(convertJs(Object.values(MEMBERS)))}
-        messages={List(convertJs(CHAT_MESSAGES))}
+        members={convertJs(Object.values(MEMBERS))}
+        messages={convertJs(CHAT_MESSAGES)}
         useAvatarHook={fakeHook}
       />,
     );
@@ -58,8 +57,8 @@ describe('Autofocus input field', () => {
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(convertJs(Object.values(MEMBERS)))}
-        messages={List(convertJs(CHAT_MESSAGES))}
+        members={convertJs(Object.values(MEMBERS))}
+        messages={convertJs(CHAT_MESSAGES)}
         useAvatarHook={fakeHook}
       />,
     ).then(() =>
@@ -77,27 +76,25 @@ describe('Messages container', () => {
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(convertJs(Object.values(MEMBERS)))}
-        messages={List(
-          convertJs([
-            {
-              ...CHAT_MESSAGES[0],
-              id: firstId,
-            },
-            getMockMessage({ member: MEMBERS.ANNA }),
-            getMockMessage({ member: MEMBERS.BOB }),
-            getMockMessage({ member: MEMBERS.ANNA }),
-            getMockMessage({ member: MEMBERS.ANNA }),
-            getMockMessage({ member: MEMBERS.BOB }),
-            getMockMessage({ member: MEMBERS.BOB }),
-            getMockMessage({ member: MEMBERS.ANNA }),
-            getMockMessage({ member: MEMBERS.ANNA }),
-            {
-              ...CHAT_MESSAGES[0],
-              id: lastId,
-            },
-          ]),
-        )}
+        members={convertJs(Object.values(MEMBERS))}
+        messages={convertJs([
+          {
+            ...CHAT_MESSAGES[0],
+            id: firstId,
+          },
+          getMockMessage({ member: MEMBERS.ANNA }),
+          getMockMessage({ member: MEMBERS.BOB }),
+          getMockMessage({ member: MEMBERS.ANNA }),
+          getMockMessage({ member: MEMBERS.ANNA }),
+          getMockMessage({ member: MEMBERS.BOB }),
+          getMockMessage({ member: MEMBERS.BOB }),
+          getMockMessage({ member: MEMBERS.ANNA }),
+          getMockMessage({ member: MEMBERS.ANNA }),
+          {
+            ...CHAT_MESSAGES[0],
+            id: lastId,
+          },
+        ])}
         useAvatarHook={fakeHook}
       />,
     ).then(() => {

diff --git a/src/components/Chatbox/Chatbox.tsx b/src/components/Chatbox/Chatbox.tsx
@@ -12,6 +12,7 @@ import {
 } from '@graasp/query-client/dist/src/types';
 import buildI18n, { langs, namespaces } from '@graasp/translations';
 
+import { CONTAINER_HEIGHT_SAFETY_MARGIN } from '../../constants';
 import { CurrentMemberContextProvider } from '../../context/CurrentMemberContext';
 import { EditingContextProvider } from '../../context/EditingContext';
 import { HooksContextProvider } from '../../context/HooksContext';
@@ -24,7 +25,8 @@ import Messages from './Messages';
 
 const ChatboxContainer = styled('div')({
   // set height of full container
-  height: 'calc(100vh - 16px)',
+  // the margin is used to make it "slightly" smaller than the ful height to not have very small scrollbars
+  height: `calc(100vh - ${CONTAINER_HEIGHT_SAFETY_MARGIN}px)`,
   minHeight: '0px',
   display: 'flex',
   flexDirection: 'column',

diff --git a/src/components/Chatbox/EditBanner.tsx b/src/components/Chatbox/EditBanner.tsx
@@ -35,11 +35,6 @@ const EditContainer = styled(Box)({
 const OldTextLabel = styled(Typography)(({ theme }) => ({
   color: theme.palette.primary.main,
 }));
-const OldTextPreview = styled(Typography)({
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});
 
 const EditIcon = styled(SvgIcon)(({ theme }) => ({
   margin: theme.spacing(1),
@@ -67,9 +62,9 @@ const EditBanner: FC<Props> = ({ onClose, editedText }) => {
           <OldTextLabel variant="subtitle2">
             {t(CHATBOX.EDITING_MESSAGE_LABEL)}
           </OldTextLabel>
-          <OldTextPreview data-cy={editBannerOldTextCypress}>
+          <Typography noWrap data-cy={editBannerOldTextCypress}>
             {normalizeMentions(editedText)}
-          </OldTextPreview>
+          </Typography>
         </EditContainer>
         <IconButton data-cy={editBannerCloseButtonCypress} onClick={onClose}>
           <Close

diff --git a/src/components/Chatbox/Input.tsx b/src/components/Chatbox/Input.tsx
@@ -24,6 +24,7 @@ import {
 import {
   ALL_MEMBERS_DISPLAY,
   ALL_MEMBERS_ID,
+  GRAASP_MENTION_COLOR,
   HARD_MAX_MESSAGE_LENGTH,
 } from '../../constants';
 import { useCurrentMemberContext } from '../../context/CurrentMemberContext';
@@ -38,7 +39,7 @@ const HelperText = styled(Typography)(({ theme }) => ({
 }));
 
 const mentionStyle = {
-  backgroundColor: '#b9b9ed',
+  backgroundColor: GRAASP_MENTION_COLOR,
 };
 
 type Props = {

diff --git a/src/components/Chatbox/Message.tsx b/src/components/Chatbox/Message.tsx
@@ -13,7 +13,6 @@ import { ChatMessageRecord } from '@graasp/query-client/dist/src/types';
 import { CHATBOX } from '@graasp/translations';
 import { Avatar } from '@graasp/ui';
 
-// import { Variant } from '@graasp/ui/dist/types';
 import { messageIdCyWrapper } from '../../config/selectors';
 import {
   DEFAULT_USER_NAME,

diff --git a/src/components/Chatbox/Messages.tsx b/src/components/Chatbox/Messages.tsx
@@ -11,7 +11,7 @@ import {
 } from '@graasp/query-client/dist/src/types';
 
 import { messagesContainerCypress } from '../../config/selectors';
-import { DEFAULT_DATE_FORMAT, SAFETY_MARGIN } from '../../constants';
+import { DEFAULT_DATE_FORMAT, SCROLL_SAFETY_MARGIN } from '../../constants';
 import { useEditingContext } from '../../context/EditingContext';
 import { useMessagesContext } from '../../context/MessagesContext';
 import type { ImmutableMember } from '../../types';
@@ -66,7 +66,7 @@ const Messages: FC<Props> = ({
       // temporarily hide the scroll bars when scrolling the container
       ref.current.style.overflowY = 'hidden';
       // scroll down the height of the container + some margin to make sure we are at the bottom
-      ref.current.scrollTop = ref.current.scrollHeight + SAFETY_MARGIN;
+      ref.current.scrollTop = ref.current.scrollHeight + SCROLL_SAFETY_MARGIN;
       // re-activate scroll
       ref.current.style.overflowY = 'auto';
     }

diff --git a/src/constants.ts b/src/constants.ts
@@ -3,7 +3,8 @@ export const INPUT_HEIGHT = 120;
 export const EDIT_BANNER_HEIGHT = 58;
 export const MAX_ROWS_INPUT = 4;
 export const BIG_NUMBER = 9999;
-export const SAFETY_MARGIN = 64;
+export const SCROLL_SAFETY_MARGIN = 64;
+export const CONTAINER_HEIGHT_SAFETY_MARGIN = 16;
 export const DEFAULT_USER_NAME = 'Anonymous';
 export const MAX_USERNAME_LENGTH = 30;
 export const HARD_MAX_MESSAGE_LENGTH = 400;
@@ -28,6 +29,8 @@ export const EXPORT_CSV_HEADERS = [
   { label: 'message_content', key: 'body' },
 ];
 
+export const GRAASP_MENTION_COLOR = '#b9b9ed';
+
 export const SIDE_PANE_WIDTH = 290;
 export const SIDE_PANE_HEIGHT = 800;