feat: add chatbox component

src/components/common/Chatbox.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography } from '@material-ui/core';
+import { useTranslation } from 'react-i18next';
+import GraaspChatbox from '@graasp/chatbox';
+import { MUTATION_KEYS } from '@graasp/query-client';
+import { Map, List } from 'immutable';
+import { Loader } from '@graasp/ui';
+import { hooks, useMutation } from '../../config/queryClient';
+import { HEADER_HEIGHT } from '../../config/constants';
+
+const { useItemChat, useCurrentMember, useMembers } = hooks;
+
+const Chatbox = ({ item }) => {
+  const { t } = useTranslation();
+  const { data: chat, isLoading: isChatLoading } = useItemChat(item.get('id'));
+  const { data: members, isLoading: isMembersLoading } = useMembers([
+    ...new Set(chat?.get('messages').map(({ creator }) => creator)),
+  ]);
+  const { data: currentMember, isLoadingCurrentMember } = useCurrentMember();
+  const { mutate: sendMessage } = useMutation(
+    MUTATION_KEYS.POST_ITEM_CHAT_MESSAGE,
+  );
+
+  const renderChatbox = () => {
+    if (isChatLoading || isLoadingCurrentMember || isMembersLoading) {
+      return <Loader />;
+    }
+
+    return (
+      <GraaspChatbox
+        id="test"
+        members={members}
+        sendMessageBoxId="test"
+        currentMember={currentMember}
+        chatId={item.get('id')}
+        messages={List(chat?.get('messages'))}
+        height={window.innerHeight - HEADER_HEIGHT * 2}
+        sendMessageFunction={sendMessage}
+      />
+    );
+  };
+
+  return (
+    <>
+      <Typography variant="h5">{t('Comments')}</Typography>
+      {renderChatbox()}
+    </>
+  );
+};
+
+Chatbox.propTypes = {
+  item: PropTypes.instanceOf(Map).isRequired,
+};
+
+export default Chatbox;

src/components/main/MainScreen.js

@@ -6,11 +6,13 @@ import { useTranslation } from 'react-i18next';
 import Alert from '@material-ui/lab/Alert';
 import { useParams, withRouter } from 'react-router';
 import MainMenu from '../common/MainMenu';
+import Chatbox from '../common/Chatbox';
 import Item from '../common/Item';
 import { hooks } from '../../config/queryClient';
 import HeaderRightContent from './HeaderRightContent';
 import ItemHeader from '../common/ItemHeader';
 
+
 const MainScreen = () => {
   const { id, rootId } = useParams();
   const mainId = id || rootId;
@@ -46,6 +48,7 @@ const MainScreen = () => {
       headerRightContent={<HeaderRightContent id={mainId} />}
     >
       {content}
+      <Chatbox item={item} />
     </Main>
   );
 };

src/config/constants.js

@@ -46,3 +46,5 @@ export const buildGraaspComposeItemRoute = (id) =>
   `${GRAASP_COMPOSE_HOST}/items/${id}`;
 
 export const ITEM_CARD_MAX_LENGTH = 18;
+export const HEADER_HEIGHT = 64;
+