add account overview, cleanup
Change-Id: I176af7a7688f38cb30eb7d65fa3e00e55f10da6f
diff --git a/client/src/components/ConversationsOverviewCard.js b/client/src/components/ConversationsOverviewCard.js
new file mode 100644
index 0000000..01b2d7b
--- /dev/null
+++ b/client/src/components/ConversationsOverviewCard.js
@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Card, CardActionArea, CardContent, CircularProgress, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { useHistory, useParams } from 'react-router';
+import authManager from '../AuthManager'
+import Conversation from '../../../model/Conversation';
+
+const useStyles = makeStyles({
+ title: {
+ fontSize: 14,
+ }, pos: {
+ fontSize: 14,
+ }
+});
+
+export default function ConversationsOverviewCard(props) {
+ const classes = useStyles()
+ const history = useHistory()
+ const accountId = props.accountId || useParams().accountId
+ const [state, setState] = useState({ loaded: false })
+
+ useEffect(() => {
+ const controller = new AbortController()
+ authManager.fetch(`/api/accounts/${accountId}/conversations`, { signal: controller.signal })
+ .then(res => res.json())
+ .then(result => {
+ console.log(result)
+ setState({ loaded: true, conversations: Object.values(result).map(c => Conversation.from(accountId, c)) })
+ })
+ return () => controller.abort()
+ }, [])
+
+ return (
+ <Card onClick={() => history.push(`/account/${accountId}`)} >
+ <CardActionArea>
+ <CardContent>
+ <Typography className={classes.title} color="textSecondary" gutterBottom>
+ Conversations
+ </Typography>
+ <Typography gutterBottom variant="h5" component="h2">
+ {state.loaded ? state.conversations.length : <CircularProgress size={24} />}
+ </Typography>
+ </CardContent>
+ </CardActionArea>
+ </Card>
+ )
+}