Skip to content

Commit

Permalink
feat: add chatbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@pyphilia
pyphilia committed Aug 12, 2021
1 parent 35ee3dc commit e9f219d
Show file tree
Hide file tree
Showing 3 changed files with 230 additions and 108 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"private": true,
"license": "AGPL-3.0-only",
"dependencies": {
"@graasp/chatbox": "git://github.com/graasp/graasp-chatbox.git#3/data",
"@graasp/query-client": "git://github.com/graasp/graasp-query-client.git#main",
"@graasp/ui": "git://github.com/graasp/graasp-ui.git#41/rollup",
"@material-ui/core": "4.11.2",
Expand Down Expand Up @@ -106,7 +107,7 @@
"npm-run-all": "4.1.5",
"nyc": "15.1.0",
"prettier": "2.2.1",
"pretty-quick": "3.1.0",
"pretty-quick": "3.1.1",
"standard-version": "9.1.0",
"typescript": "4.1.3",
"wait-on": "5.3.0"
Expand Down
164 changes: 113 additions & 51 deletions src/components/item/ItemPanel.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,22 @@
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
import React from 'react';
import PropTypes from 'prop-types';
import Chatbox from '@graasp/chatbox';
import { MUTATION_KEYS } from '@graasp/query-client';
import Drawer from '@material-ui/core/Drawer';
import { Map } from 'immutable';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { useTranslation } from 'react-i18next';
import Box from '@material-ui/core/Box';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import CloseIcon from '@material-ui/icons/Close';
import TableRow from '@material-ui/core/TableRow';
import { IconButton, Toolbar, Typography } from '@material-ui/core';
import { Toolbar, Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { RIGHT_MENU_WIDTH } from '../../config/constants';
import { ITEM_KEYS, ITEM_TYPES } from '../../enums';
Expand All @@ -20,28 +27,51 @@ import {
ITEM_PANEL_TABLE_ID,
} from '../../config/selectors';
import { getFileExtra, getS3FileExtra } from '../../utils/itemExtra';
import { hooks } from '../../config/queryClient';
import { hooks, useMutation, ws } from '../../config/queryClient';

const { useMember } = hooks;
const { useMember, useItemChat } = hooks;

function TabPanel(props) {
const { children, value, index, ...other } = props;

return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
// eslint-disable-next-line react/jsx-props-no-spreading
{...other}
>
{value === index && (
<Box>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}

function a11yProps(index) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
const useStyles = makeStyles((theme) => ({
drawer: {
width: RIGHT_MENU_WIDTH,
flexShrink: 0,
},
drawerPaper: {
width: RIGHT_MENU_WIDTH,
},
table: {
padding: theme.spacing(2),
},
extra: {
wordBreak: 'break-all',
},
closeButton: {
position: 'absolute',
right: theme.spacing(1),
top: theme.spacing(1),
width: 50,
},
name: {
wordBreak: 'break-word',
},
Expand All @@ -51,6 +81,7 @@ const ItemPanel = ({ item, open }) => {
const { t } = useTranslation();

const classes = useStyles();
const [value, setValue] = React.useState(0);

const { data: creator } = useMember(item.get('creator'));

Expand All @@ -65,6 +96,16 @@ const ItemPanel = ({ item, open }) => {
} else {
type = item.get(ITEM_KEYS.TYPE);
}
const { data: chat, isLoading: isChatLoading } = useItemChat(item.get('id'));
ws.hooks.useItemChatUpdates(item.get('id'));

const { mutate: sendMessage } = useMutation(
MUTATION_KEYS.POST_ITEM_CHAT_MESSAGE,
);

const handleChange = (event, newValue) => {
setValue(newValue);
};

return (
<Drawer
Expand All @@ -78,52 +119,73 @@ const ItemPanel = ({ item, open }) => {
open={open}
>
<Toolbar />
<IconButton className={classes.closeButton}>
<CloseIcon />
</IconButton>
<Typography id={ITEM_PANEL_NAME_ID} variant="h5" className={classes.name}>
{item.get('name')}
</Typography>
<TableContainer>
<Table
id={ITEM_PANEL_TABLE_ID}
size="small"
aria-label="item panel table"
<Tabs
value={value}
onChange={handleChange}
aria-label="simple tabs example"
>
<Tab label="Data" {...a11yProps(0)} />
<Tab label="Chat" {...a11yProps(1)} />
</Tabs>
<TabPanel value={value} index={0}>
<Typography
id={ITEM_PANEL_NAME_ID}
variant="h5"
className={classes.name}
>
<TableBody>
<TableRow>
<TableCell component="th" scope="row">
{t('Type')}
</TableCell>
<TableCell align="right">{type}</TableCell>
</TableRow>
{size && (
{item.get('name')}
</Typography>
<TableContainer className={classes.table}>
<Table
id={ITEM_PANEL_TABLE_ID}
size="small"
aria-label="item panel table"
>
<TableBody>
<TableRow>
<TableCell component="th" scope="row">
{t('Size')}
{t('Type')}
</TableCell>
<TableCell align="right">{type}</TableCell>
</TableRow>
{size && (
<TableRow>
<TableCell component="th" scope="row">
{t('Size')}
</TableCell>
<TableCell align="right">{size}</TableCell>
</TableRow>
)}
<TableRow>
<TableCell align="left">{t('Creator')}</TableCell>
<TableCell align="right">{creator?.get('name')}</TableCell>
</TableRow>
<TableRow>
<TableCell align="left">{t('Created At')}</TableCell>
<TableCell align="right">
{formatDate(item.get('createdAt'))}
</TableCell>
</TableRow>
<TableRow>
<TableCell align="left">{t('Updated At')}</TableCell>
<TableCell align="right">
{formatDate(item.get('updatedAt'))}
</TableCell>
<TableCell align="right">{size}</TableCell>
</TableRow>
)}
<TableRow>
<TableCell align="left">{t('Creator')}</TableCell>
<TableCell align="right">{creator?.get('name')}</TableCell>
</TableRow>
<TableRow>
<TableCell align="left">{t('Created At')}</TableCell>
<TableCell align="right">
{formatDate(item.get('createdAt'))}
</TableCell>
</TableRow>
<TableRow>
<TableCell align="left">{t('Updated At')}</TableCell>
<TableCell align="right">
{formatDate(item.get('updatedAt'))}
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</TableBody>
</Table>
</TableContainer>
</TabPanel>
<TabPanel value={value} index={1}>
{!isChatLoading && (
<Chatbox
chatId={item.get('id')}
messages={chat?.get('messages')}
height={window.innerHeight - 250}
sendMessageFunction={sendMessage}
/>
)}
</TabPanel>
</Drawer>
);
};
Expand Down
Loading

0 comments on commit e9f219d

Please sign in to comment.