From 534251626b72109cb6b8c8e9ef0eeb383b8915a3 Mon Sep 17 00:00:00 2001 From: overflowerror Date: Sun, 15 Aug 2021 18:02:27 +0200 Subject: [PATCH] basic dashboard showing accounts --- frontend/src/App.css | 3 + frontend/src/auth/AuthProvider.tsx | 10 ++- frontend/src/components/MenuBar/index.tsx | 2 +- frontend/src/components/MessageBox/index.tsx | 27 +++++++ frontend/src/pages/Dashboard/index.tsx | 82 +++++++++++++++++++- 5 files changed, 117 insertions(+), 7 deletions(-) create mode 100644 frontend/src/components/MessageBox/index.tsx diff --git a/frontend/src/App.css b/frontend/src/App.css index e69de29..b0cd41d 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -0,0 +1,3 @@ +body { + background-color: lightgrey; +} \ No newline at end of file diff --git a/frontend/src/auth/AuthProvider.tsx b/frontend/src/auth/AuthProvider.tsx index f3fbc8f..1ef79ff 100644 --- a/frontend/src/auth/AuthProvider.tsx +++ b/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 + getClient: () => Client } const emptyAuthState = { @@ -17,7 +18,8 @@ const emptyAuthState = { login: async () => { throw "not implemented" - } + }, + getClient: () => getClient() } const AuthContext = React.createContext(emptyAuthState) @@ -65,9 +67,13 @@ const AuthProvider: FunctionComponent = ({children}) => { }) return user + }, + getClient: () => { + return client } }) + useEffect(() => { if (initialSessionToken) { authenticationEndpoint.getUser() diff --git a/frontend/src/components/MenuBar/index.tsx b/frontend/src/components/MenuBar/index.tsx index 905c06e..01c4906 100644 --- a/frontend/src/components/MenuBar/index.tsx +++ b/frontend/src/components/MenuBar/index.tsx @@ -29,7 +29,7 @@ const MenuBar: FunctionComponent = () => { - News + Threadule void +} + +export const ClosedMessageBox: MessageBoxProps = { + open: false, + success: false, + message: "", + onClose: () => {} +} + +export const MessageBox: FunctionComponent = ({open, success, message, onClose}) => { + return ( + + + {message} + + + ) +} \ No newline at end of file diff --git a/frontend/src/pages/Dashboard/index.tsx b/frontend/src/pages/Dashboard/index.tsx index 141082f..bf5d412 100644 --- a/frontend/src/pages/Dashboard/index.tsx +++ b/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 = () => { + const [loading, setLoading] = useState(true) + const [accounts, setAccounts] = useState([]) - return <> -

Dashboard

- + const [message, setMessage] = useState({ + ...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
+ { loading && + + } + { !loading && accounts.length == 0 && + + No accounts yet. + + } + + { + accounts.map((account) => { + return <> + + + + } + action={ + + + } + title={account.name} + subheader={account.screen_name} + /> + + + + }) + } + + + +
} export default Dashboard \ No newline at end of file