feat: begin of user settings

This commit is contained in:
overflowerror 2021-08-22 19:02:37 +02:00
parent 254a9440a8
commit f5c08ef4e5
8 changed files with 86 additions and 9 deletions

View file

@ -6,6 +6,7 @@ import PrivateRoute from "./auth/PrivateRoute";
import Login from "./pages/Login";
import Dashboard from "./pages/Dashboard";
import MenuBar from "./components/MenuBar";
import Settings from "./pages/Settings";
function App() {
return (
@ -15,10 +16,14 @@ function App() {
<Route path="/login">
<Login/>
</Route>
<PrivateRoute path="/">
<MenuBar />
<PrivateRoute exact path="/">
<MenuBar pageName="Dashboard" />
<Dashboard />
</PrivateRoute>
<PrivateRoute path="/settings">
<MenuBar pageName="Settings" />
<Settings />
</PrivateRoute>
<Route path="/*">
<Redirect to={"/login"} />
</Route>

View file

@ -3,13 +3,15 @@ import MenuIcon from '@material-ui/icons/Menu';
import {FunctionComponent, useState} from "react";
import {useAuth} from "../../auth/AuthProvider";
import {AccountCircle} from "@material-ui/icons";
import {Link, useHistory} from "react-router-dom";
type MenuBarProps = {
pageName: string
}
const MenuBar: FunctionComponent<MenuBarProps> = () => {
const MenuBar: FunctionComponent<MenuBarProps> = ({pageName}) => {
const { user, logout } = useAuth()
const history = useHistory()
const [anchorEl, setAnchorEl] = useState<HTMLElement|null>(null)
const open = Boolean(anchorEl);
@ -29,7 +31,12 @@ const MenuBar: FunctionComponent<MenuBarProps> = () => {
<MenuIcon />
</IconButton>
<Typography variant="h6" style={{flexGrow: 1}}>
Threadule
<Link to={"/"} style={{
color: "inherit",
textDecoration: "inherit"
}}>
Threadule - {pageName}
</Link>
</Typography>
<IconButton
aria-label="account of current user"
@ -55,6 +62,7 @@ const MenuBar: FunctionComponent<MenuBarProps> = () => {
open={open}
onClose={handleClose}
>
<MenuItem onClick={() => history.push("/settings")}>Settings</MenuItem>
<MenuItem onClick={logout}>Logout</MenuItem>
</Menu>
</Toolbar>

View file

@ -0,0 +1,23 @@
import {FunctionComponent} from "react";
import {Card, CardContent, CardHeader, Grid} from "@material-ui/core";
export type SettingsCardProps = {
name: string
}
const SettingsCard: FunctionComponent<SettingsCardProps> = ({name, children}) => {
return (
<Grid item xs={6}>
<Card>
<CardHeader
title={name}
/>
<CardContent>
{children}
</CardContent>
</Card>
</Grid>
)
}
export default SettingsCard

View file

@ -1,3 +1,8 @@
.container {
margin-top: 40px;
box-sizing: border-box;
}
.addButton {
position: fixed !important;
bottom: 50px;

View file

@ -55,10 +55,7 @@ const Dashboard: FunctionComponent<DashboardProps> = () => {
return (
<>
<Grid container style={{
marginTop: "40px",
boxSizing: "border-box",
}}>
<Grid container className={styles.container}>
{loading &&
<CircularProgress/>
}

View file

@ -0,0 +1,4 @@
.container {
margin-top: 40px !important;
box-sizing: border-box;
}

View file

@ -0,0 +1,14 @@
import {FunctionComponent} from "react";
export type UserSettingsProps = {
}
const UserSettings: FunctionComponent<UserSettingsProps> = () => {
return (
<>
</>
)
}
export default UserSettings

View file

@ -0,0 +1,21 @@
import {FunctionComponent} from "react";
import SettingsCard from "../../components/SettingsCard";
import UserSettings from "./UserSettings";
import {Grid} from "@material-ui/core";
import styles from "./UserSettings.module.css"
export type SettingsProps = {}
const Settings: FunctionComponent<SettingsProps> = () => {
return (
<>
<Grid container className={styles.container} spacing={4}>
<SettingsCard name={"User"}>
<UserSettings/>
</SettingsCard>
</Grid>
</>
)
}
export default Settings