basic dashboard showing accounts

This commit is contained in:
overflowerror 2021-08-15 18:02:27 +02:00
parent e32a0b8b17
commit 534251626b
5 changed files with 117 additions and 7 deletions

View file

@ -0,0 +1,3 @@
body {
background-color: lightgrey;
}

View file

@ -6,9 +6,10 @@ import {Backdrop, CircularProgress} from "@material-ui/core";
type AuthState = {
loggedIn: boolean
user: User|null
user: User | null
login: (username: string, password: string) => Promise<User>
getClient: () => Client
}
const emptyAuthState = {
@ -17,7 +18,8 @@ const emptyAuthState = {
login: async () => {
throw "not implemented"
}
},
getClient: () => getClient()
}
const AuthContext = React.createContext<AuthState>(emptyAuthState)
@ -65,9 +67,13 @@ const AuthProvider: FunctionComponent<AuthProviderProps> = ({children}) => {
})
return user
},
getClient: () => {
return client
}
})
useEffect(() => {
if (initialSessionToken) {
authenticationEndpoint.getUser()

View file

@ -29,7 +29,7 @@ const MenuBar: FunctionComponent<MenuBarProps> = () => {
<MenuIcon />
</IconButton>
<Typography variant="h6" style={{flexGrow: 1}}>
News
Threadule
</Typography>
<IconButton
aria-label="account of current user"

View file

@ -0,0 +1,27 @@
import {Snackbar} from "@material-ui/core";
import {FunctionComponent} from "react";
import {Alert} from "@material-ui/lab";
export type MessageBoxProps = {
open: boolean
success: boolean
message: string
onClose: () => void
}
export const ClosedMessageBox: MessageBoxProps = {
open: false,
success: false,
message: "",
onClose: () => {}
}
export const MessageBox: FunctionComponent<MessageBoxProps> = ({open, success, message, onClose}) => {
return (
<Snackbar open={open} autoHideDuration={5000} onClose={onClose}>
<Alert onClose={onClose} severity={success ? "success": "error"}>
{message}
</Alert>
</Snackbar>
)
}

View file

@ -1,14 +1,88 @@
import {FunctionComponent} from "react";
import {FunctionComponent, useEffect, useState} from "react";
import {Avatar, Card, CardHeader, CircularProgress, Grid, IconButton, 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";
type DashboardProps = {
}
const Dashboard: FunctionComponent<DashboardProps> = () => {
const [loading, setLoading] = useState<boolean>(true)
const [accounts, setAccounts] = useState<Account[]>([])
return <>
<h1>Dashboard</h1>
</>
const [message, setMessage] = useState<MessageBoxProps>({
...ClosedMessageBox,
onClose: () => {
setMessage({
...message,
open: false
})
}
})
const {getClient} = useAuth()
const accountEndpoint = new AccountEndpoint(getClient())
useEffect(() => {
accountEndpoint.getAll()
.then(accounts => {
setAccounts(accounts)
setLoading(false)
})
.catch(reason => {
console.error(reason)
setLoading(false)
setMessage({
...message,
open: true,
success: false,
message: "Couldn't fetch accounts."
})
})
}, [])
return <div style={{
marginTop: "40px"
}}>
{ loading &&
<CircularProgress />
}
{ !loading && accounts.length == 0 &&
<Typography variant={"h3"} style={{
color: "grey",
}}>
No accounts yet.
</Typography>
}
<Grid container xs={12} spacing={4}>
{
accounts.map((account) => {
return <>
<Grid item xs={4}>
<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>
</Grid>
</>
})
}
</Grid>
<MessageBox {...message} />
</div>
}
export default Dashboard