mirror of
https://github.com/sigmasternchen/threadule
synced 2025-03-15 08:09:01 +00:00
basic dashboard showing accounts
This commit is contained in:
parent
e32a0b8b17
commit
534251626b
5 changed files with 117 additions and 7 deletions
|
@ -0,0 +1,3 @@
|
|||
body {
|
||||
background-color: lightgrey;
|
||||
}
|
|
@ -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()
|
||||
|
|
|
@ -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"
|
||||
|
|
27
frontend/src/components/MessageBox/index.tsx
Normal file
27
frontend/src/components/MessageBox/index.tsx
Normal 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>
|
||||
)
|
||||
}
|
|
@ -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
|
Loading…
Reference in a new issue