improve conversation view
Change-Id: I63189d0b61d45e659ac7618a977282f7b4500753
diff --git a/client/src/pages/addContactPage.jsx b/client/src/pages/addContactPage.jsx
new file mode 100644
index 0000000..ee57b69
--- /dev/null
+++ b/client/src/pages/addContactPage.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { useHistory } from "react-router-dom";
+
+import { Box, Container, Fab, Card, CardContent, Typography } from '@material-ui/core';
+import GroupAddRounded from '@material-ui/icons/GroupAddRounded';
+import { makeStyles } from '@material-ui/core/styles';
+import authManager from '../AuthManager'
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ extendedIcon: {
+ marginRight: theme.spacing(1),
+ },
+}))
+
+export default function AddContactPage(props) {
+ const classes = useStyles()
+ const history = useHistory();
+ const accountId = props.accountId || props.match.params.accountId
+ const contactId = props.contactId || props.match.params.contactId
+
+ const handleClick = async e => {
+ const response = await authManager.fetch(`/api/accounts/${accountId}/conversations`, {
+ method: 'POST',
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({members:[contactId]})
+ }).then(res => res.json())
+
+ console.log(response)
+ if (response.conversationId) {
+ history.push(`/account/${accountId}/conversation/${response.conversationId}`)
+ }
+ }
+
+ return (
+ <Container className='message-list'>
+ <Card variant='outlined' style={{ borderRadius: 16, maxWidth: 560, margin: "16px auto" }}>
+ <CardContent>
+ <Typography variant='h6'>Jami key ID</Typography>
+ <Typography variant='body1'>{contactId}</Typography>
+ <Box style={{textAlign: 'center', marginTop: 16}}>
+ <Fab variant='extended' color='primary' onClick={handleClick}>
+ <GroupAddRounded className={classes.extendedIcon} />
+ Add contact
+ </Fab>
+ </Box>
+ </CardContent>
+ </Card>
+ </Container>)
+}