feat: add close button in item panels

graasp · Oct 21, 2021 · a9babd1 · a9babd1
1 parent dd92c2b
commit a9babd1
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 36 deletions.
diff --git a/src/components/common/Chatbox.js b/src/components/common/Chatbox.js
@@ -1,7 +1,5 @@
 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';
@@ -13,7 +11,6 @@ import { CHATBOX_INPUT_BOX_ID, CHATBOX_ID } from '../../config/selectors';
 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)),
@@ -23,30 +20,21 @@ const Chatbox = ({ item }) => {
     MUTATION_KEYS.POST_ITEM_CHAT_MESSAGE,
   );
 
-  const renderChatbox = () => {
-    if (isChatLoading || isLoadingCurrentMember || isMembersLoading) {
-      return <Loader />;
-    }
-
-    return (
-      <GraaspChatbox
-        id={CHATBOX_ID}
-        members={members}
-        sendMessageBoxId={CHATBOX_INPUT_BOX_ID}
-        currentMember={currentMember}
-        chatId={item.get('id')}
-        messages={List(chat?.get('messages'))}
-        height={window.innerHeight - HEADER_HEIGHT * 2}
-        sendMessageFunction={sendMessage}
-      />
-    );
-  };
+  if (isChatLoading || isLoadingCurrentMember || isMembersLoading) {
+    return <Loader />;
+  }
 
   return (
-    <>
-      <Typography variant="h5">{t('Comments')}</Typography>
-      {renderChatbox()}
-    </>
+    <GraaspChatbox
+      id={CHATBOX_ID}
+      members={members}
+      sendMessageBoxId={CHATBOX_INPUT_BOX_ID}
+      currentMember={currentMember}
+      chatId={item.get('id')}
+      messages={List(chat?.get('messages'))}
+      height={window.innerHeight - HEADER_HEIGHT * 2}
+      sendMessageFunction={sendMessage}
+    />
   );
 };
 

diff --git a/src/components/item/ItemMain.js b/src/components/item/ItemMain.js
@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import { Map } from 'immutable';
+import { useTranslation } from 'react-i18next';
 import { makeStyles } from '@material-ui/core/styles';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -10,6 +11,7 @@ import { ITEM_MAIN_CLASS } from '../../config/selectors';
 import { LayoutContext } from '../context/LayoutContext';
 import Chatbox from '../common/Chatbox';
 import ItemMetadataContent from './ItemMetadataContent';
+import ItemPanelHeader from './ItemPanelHeader';
 
 const useStyles = makeStyles((theme) => ({
   hide: {
@@ -49,6 +51,7 @@ const useStyles = makeStyles((theme) => ({
 
 const ItemMain = ({ id, children, item }) => {
   const classes = useStyles();
+  const { t } = useTranslation();
   const {
     isItemMetadataMenuOpen,
     setIsItemMetadataMenuOpen,
@@ -69,10 +72,22 @@ const ItemMain = ({ id, children, item }) => {
     <div id={id} className={ITEM_MAIN_CLASS}>
       {isChatboxMenuOpen && (
         <ItemPanel open={isChatboxMenuOpen}>
+          <ItemPanelHeader
+            title={t('Comments')}
+            onClick={() => {
+              setIsChatboxMenuOpen(false);
+            }}
+          />
           <Chatbox item={item} />
         </ItemPanel>
       )}
       <ItemPanel open={isItemMetadataMenuOpen}>
+        <ItemPanelHeader
+          title={t('Information')}
+          onClick={() => {
+            setIsItemMetadataMenuOpen(false);
+          }}
+        />
         <ItemMetadataContent item={item} />
       </ItemPanel>
 

diff --git a/src/components/item/ItemMetadataContent.js b/src/components/item/ItemMetadataContent.js
@@ -58,10 +58,10 @@ const ItemMetadataContent = ({ item }) => {
 
   return (
     <>
-      <Typography variant="h5" id={ITEM_PANEL_NAME_ID}>
-        {item.get(ITEM_KEYS.NAME)}
-      </Typography>
       <TableContainer className={classes.table}>
+        <Typography variant="h5" id={ITEM_PANEL_NAME_ID}>
+          {item.get(ITEM_KEYS.NAME)}
+        </Typography>
         <Table
           id={ITEM_PANEL_TABLE_ID}
           size="small"

diff --git a/src/components/item/ItemPanel.js b/src/components/item/ItemPanel.js
@@ -15,14 +15,12 @@ const useStyles = makeStyles((theme) => ({
     width: RIGHT_MENU_WIDTH,
     padding: theme.spacing(1),
   },
-  table: {
-    padding: theme.spacing(2),
-  },
-  extra: {
-    wordBreak: 'break-all',
-  },
-  name: {
-    wordBreak: 'break-word',
+  drawerHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    // necessary for content to be below app bar
+    ...theme.mixins.toolbar,
+    justifyContent: 'flex-end',
   },
 }));
 

diff --git a/src/components/item/ItemPanelHeader.js b/src/components/item/ItemPanelHeader.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import Divider from '@material-ui/core/Divider';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+
+const useStyles = makeStyles(() => ({
+  drawerHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
+}));
+
+function ItemPanelHeader({ title, onClick }) {
+  const classes = useStyles();
+
+  return (
+    <>
+      <div className={classes.drawerHeader}>
+        <Typography variant="h6">{title}</Typography>
+        <IconButton onClick={onClick}>
+          <ChevronRightIcon />
+        </IconButton>
+      </div>
+      <Divider />
+    </>
+  );
+}
+ItemPanelHeader.propTypes = {
+  title: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default ItemPanelHeader;