basic dashboard showing accounts

frontend/src/App.css

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

frontend/src/auth/AuthProvider.tsx

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

frontend/src/components/MenuBar/index.tsx

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

frontend/src/components/MessageBox/index.tsx

@@ -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>
+    )
+}

frontend/src/pages/Dashboard/index.tsx

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