feat: begin of user settings

frontend/src/App.tsx

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

frontend/src/components/MenuBar/index.tsx

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

frontend/src/components/SettingsCard/index.tsx

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

frontend/src/pages/Dashboard/Dashboard.module.css

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

frontend/src/pages/Dashboard/index.tsx

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

frontend/src/pages/Settings/UserSettings.module.css

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

frontend/src/pages/Settings/UserSettings/index.tsx

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

frontend/src/pages/Settings/index.tsx

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