mirror of
https://github.com/sigmasternchen/threadule
synced 2025-03-15 08:09:01 +00:00
added thread list + some restructuring
This commit is contained in:
parent
a4b45119cd
commit
20e832e9e1
3 changed files with 91 additions and 31 deletions
38
frontend/src/components/AccountCard/index.tsx
Normal file
38
frontend/src/components/AccountCard/index.tsx
Normal 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
37
frontend/src/components/ThreadList/index.tsx
Normal 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
|
|
@ -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} />
|
||||
|
|
Loading…
Reference in a new issue