mirror of
https://github.com/sigmasternchen/threadule
synced 2025-03-14 23:59:00 +00:00
feat: begin of user settings
This commit is contained in:
parent
254a9440a8
commit
f5c08ef4e5
8 changed files with 86 additions and 9 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
23
frontend/src/components/SettingsCard/index.tsx
Normal file
23
frontend/src/components/SettingsCard/index.tsx
Normal 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
|
|
@ -1,3 +1,8 @@
|
|||
.container {
|
||||
margin-top: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.addButton {
|
||||
position: fixed !important;
|
||||
bottom: 50px;
|
||||
|
|
|
@ -55,10 +55,7 @@ const Dashboard: FunctionComponent<DashboardProps> = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Grid container style={{
|
||||
marginTop: "40px",
|
||||
boxSizing: "border-box",
|
||||
}}>
|
||||
<Grid container className={styles.container}>
|
||||
{loading &&
|
||||
<CircularProgress/>
|
||||
}
|
||||
|
|
4
frontend/src/pages/Settings/UserSettings.module.css
Normal file
4
frontend/src/pages/Settings/UserSettings.module.css
Normal file
|
@ -0,0 +1,4 @@
|
|||
.container {
|
||||
margin-top: 40px !important;
|
||||
box-sizing: border-box;
|
||||
}
|
14
frontend/src/pages/Settings/UserSettings/index.tsx
Normal file
14
frontend/src/pages/Settings/UserSettings/index.tsx
Normal file
|
@ -0,0 +1,14 @@
|
|||
import {FunctionComponent} from "react";
|
||||
|
||||
export type UserSettingsProps = {
|
||||
|
||||
}
|
||||
|
||||
const UserSettings: FunctionComponent<UserSettingsProps> = () => {
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default UserSettings
|
21
frontend/src/pages/Settings/index.tsx
Normal file
21
frontend/src/pages/Settings/index.tsx
Normal 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
|
Loading…
Reference in a new issue