sigmasternchen/threadule
1
0
Fork 0
mirror of https://github.com/sigmasternchen/threadule synced 2025-03-15 08:09:01 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added thread list + some restructuring

Browse source
This commit is contained in:
overflowerror 2021-08-15 21:21:46 +02:00
parent a4b45119cd
commit 20e832e9e1
3 changed files with 91 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
frontend/src/components/AccountCard/index.tsx Normal file
View file

@ -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

37
frontend/src/components/ThreadList/index.tsx Normal file
View file

@ -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

47
frontend/src/pages/Dashboard/index.tsx
View file

@ -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} />