From 20e832e9e1736be689b352d46fa44d356c3274a7 Mon Sep 17 00:00:00 2001
From: overflowerror <mail@overflowerror.com>
Date: Sun, 15 Aug 2021 21:21:46 +0200
Subject: [PATCH] added thread list + some restructuring
---
frontend/src/components/AccountCard/index.tsx | 38 +++++++++++++++
frontend/src/components/ThreadList/index.tsx | 37 +++++++++++++++
frontend/src/pages/Dashboard/index.tsx | 47 +++++++------------
3 files changed, 91 insertions(+), 31 deletions(-)
create mode 100644 frontend/src/components/AccountCard/index.tsx
create mode 100644 frontend/src/components/ThreadList/index.tsx
diff --git a/frontend/src/components/AccountCard/index.tsx b/frontend/src/components/AccountCard/index.tsx
new file mode 100644
index 0000000..a518f20
--- /dev/null
+++ b/frontend/src/components/AccountCard/index.tsx
@@ -0,0 +1,38 @@
+import {FunctionComponent} from "react";
+import {Avatar, Card, CardActions, CardContent, CardHeader, IconButton} from "@material-ui/core";
+import Account from "../../api/entities/Account";
+import ThreadList from "../ThreadList";
+
+import AddIcon from '@material-ui/icons/Add';
+
+export type AccountCardProps = {
+ account: Account
+}
+
+const AccountCard: FunctionComponent<AccountCardProps> = ({account}) => {
+ return (
+ <Card>
+ <CardHeader
+ avatar={
+ <Avatar alt={account.screen_name} src={account.avatar_url}/>
+ }
+ action={
+ <IconButton aria-label="settings">
+ </IconButton>
+ }
+ title={account.name}
+ subheader={account.screen_name}
+ />
+ <CardContent>
+ <ThreadList threads={account.threads} />
+ </CardContent>
+ <CardActions disableSpacing>
+ <IconButton aria-label="add">
+ <AddIcon/>
+ </IconButton>
+ </CardActions>
+ </Card>
+ )
+}
+
+export default AccountCard
\ No newline at end of file
diff --git a/frontend/src/components/ThreadList/index.tsx b/frontend/src/components/ThreadList/index.tsx
new file mode 100644
index 0000000..381cdd5
--- /dev/null
+++ b/frontend/src/components/ThreadList/index.tsx
@@ -0,0 +1,37 @@
+import {FunctionComponent} from "react";
+import {Avatar, List, ListItem, ListItemAvatar, ListItemText, Typography} from "@material-ui/core";
+import Thread from "../../api/entities/Thread";
+
+
+export type ThreadListProps = {
+ threads: Thread[]
+}
+
+const ThreadList: FunctionComponent<ThreadListProps> = ({threads}) => {
+ if (threads.length == 0) {
+ return (
+ <Typography style={{
+ color: "lightgrey"
+ }}>
+ No threads scheduled yet.
+ </Typography>
+ )
+ } else {
+ return (
+ <List>
+ {threads.map(thread => (
+ <ListItem key={thread.id}>
+ <ListItemAvatar>
+ <Avatar>
+ {thread.id}
+ </Avatar>
+ </ListItemAvatar>
+ <ListItemText primary="Thread" secondary={thread.scheduled_for}/>
+ </ListItem>
+ ))}
+ </List>
+ )
+ }
+}
+
+export default ThreadList
\ No newline at end of file
diff --git a/frontend/src/pages/Dashboard/index.tsx b/frontend/src/pages/Dashboard/index.tsx
index d6e0fbd..5489ce2 100644
--- a/frontend/src/pages/Dashboard/index.tsx
+++ b/frontend/src/pages/Dashboard/index.tsx
@@ -1,13 +1,12 @@
import {FunctionComponent, useEffect, useState} from "react";
-import {Avatar, Card, CardHeader, CircularProgress, Grid, IconButton, Typography} from "@material-ui/core";
+import {CircularProgress, Grid, Typography} from "@material-ui/core";
import Account from "../../api/entities/Account";
import {useAuth} from "../../auth/AuthProvider";
import AccountEndpoint from "../../api/endpoints/AccountEndpoint";
import {ClosedMessageBox, MessageBox, MessageBoxProps} from "../../components/MessageBox";
+import AccountCard from "../../components/AccountCard";
-type DashboardProps = {
-
-}
+type DashboardProps = {}
const Dashboard: FunctionComponent<DashboardProps> = () => {
const [loading, setLoading] = useState<boolean>(true)
@@ -49,38 +48,24 @@ const Dashboard: FunctionComponent<DashboardProps> = () => {
marginTop: "40px",
boxSizing: "border-box",
}}>
- { loading &&
- <CircularProgress />
+ {loading &&
+ <CircularProgress/>
}
- { !loading && accounts.length == 0 &&
- <Typography variant={"h3"} style={{
- color: "grey",
- }}>
- No accounts yet.
- </Typography>
+ {!loading && accounts.length == 0 &&
+ <Typography variant={"h3"} style={{
+ color: "grey",
+ }}>
+ No accounts yet.
+ </Typography>
}
<Grid item container spacing={4}>
- {
- accounts.map((account) => {
- return (
+ {
+ accounts.map((account) => (
<Grid item xs={4} key={account.id}>
- <Card>
- <CardHeader
- avatar={
- <Avatar alt={account.screen_name} src={account.avatar_url} />
- }
- action={
- <IconButton aria-label="settings">
- </IconButton>
- }
- title={account.name}
- subheader={account.screen_name}
- />
- </Card>
+ <AccountCard account={account}/>
</Grid>
- )
- })
- }
+ ))
+ }
</Grid>
<MessageBox {...message} />