From 2aebc7ce7b26304712e7adbd83df67680f29b5f5 Mon Sep 17 00:00:00 2001
From: Piotr Witold Rynio <41823689+PiotrWR@users.noreply.github.com>
Date: Sat, 24 Apr 2021 08:11:22 +0200
Subject: [PATCH] Frontend app page without target styles (#23)

* Add css

* Add sidebar

* Format

* Add AppBar

* Add AppMain

* delete non-used import

* delete non-used code lines
---
 .../src/components/atoms/constants/sizes.tsx  |  3 +-
 .../src/components/atoms/hooks/AppContext.tsx | 11 +++
 .../components/organisms/AppBar/AppBar.tsx    | 70 +++++++++++++++++++
 .../components/organisms/AppMain/AppMain.tsx  | 41 +++++++++++
 .../organisms/AppSidebar/AppSidebar.tsx       | 61 ++++++++++++++++
 .../pages/Integramic/Integramic.tsx           | 69 +++++++++++-------
 6 files changed, 228 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/components/atoms/hooks/AppContext.tsx
 create mode 100644 frontend/src/components/organisms/AppBar/AppBar.tsx
 create mode 100644 frontend/src/components/organisms/AppMain/AppMain.tsx
 create mode 100644 frontend/src/components/organisms/AppSidebar/AppSidebar.tsx

diff --git a/frontend/src/components/atoms/constants/sizes.tsx b/frontend/src/components/atoms/constants/sizes.tsx
index 1edb59a4..4daaaf8c 100644
--- a/frontend/src/components/atoms/constants/sizes.tsx
+++ b/frontend/src/components/atoms/constants/sizes.tsx
@@ -1 +1,2 @@
-export  const MIN_CARD_COMPONENT_WIDTH : string = "300px";
\ No newline at end of file
+export  const MIN_CARD_COMPONENT_WIDTH : string = "300px";
+export  const DRAWER_WIDTH = 240;
\ No newline at end of file
diff --git a/frontend/src/components/atoms/hooks/AppContext.tsx b/frontend/src/components/atoms/hooks/AppContext.tsx
new file mode 100644
index 00000000..76857dfd
--- /dev/null
+++ b/frontend/src/components/atoms/hooks/AppContext.tsx
@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+export const defaultObject = {
+  isOpenDrawer: false,
+  handleDrawerOpen: () => {
+  },
+  handleDrawerClose: () => {
+  },
+};
+
+export const AppContext = createContext(defaultObject);
\ No newline at end of file
diff --git a/frontend/src/components/organisms/AppBar/AppBar.tsx b/frontend/src/components/organisms/AppBar/AppBar.tsx
new file mode 100644
index 00000000..9d905dee
--- /dev/null
+++ b/frontend/src/components/organisms/AppBar/AppBar.tsx
@@ -0,0 +1,70 @@
+import { Badge, makeStyles, Typography } from '@material-ui/core';
+import clsx from 'clsx';
+import IconButton from '@material-ui/core/IconButton';
+import React, { useContext } from 'react';
+import { AppContext } from '../../atoms/hooks/AppContext';
+import { DRAWER_WIDTH } from '../../atoms/constants/sizes';
+import Toolbar from '@material-ui/core/Toolbar';
+import MenuIcon from '@material-ui/icons/Menu';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import { AppBar as AppBarFromSigma } from '@material-ui/core';
+
+export function AppBar() {
+  const classes = useStyles();
+  const { handleDrawerOpen } = useContext(AppContext);
+  const { isOpenDrawer } = useContext(AppContext);
+
+  return (
+    <AppBarFromSigma position='absolute' className={clsx(classes.appBar, isOpenDrawer && classes.appBarShift)}>
+      <Toolbar className={classes.toolbar}>
+        <IconButton
+          edge='start'
+          color='inherit'
+          aria-label='open drawer'
+          onClick={handleDrawerOpen}
+          className={clsx(classes.menuButton, isOpenDrawer && classes.menuButtonHidden)}
+        >
+          <MenuIcon />
+        </IconButton>
+        <Typography component='h1' variant='h6' color='inherit' noWrap className={classes.title}>
+          Dashboard
+        </Typography>
+        <IconButton color='inherit'>
+          <Badge badgeContent={4} color='secondary'>
+            <NotificationsIcon />
+          </Badge>
+        </IconButton>
+      </Toolbar>
+    </AppBarFromSigma>
+  );
+}
+
+const useStyles = makeStyles((theme) => ({
+  toolbar: {
+    paddingRight: 24, // keep right padding when drawer closed
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  appBarShift: {
+    marginLeft: DRAWER_WIDTH,
+    width: `calc(100% - ${DRAWER_WIDTH}px)`,
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  menuButton: {
+    marginRight: 36,
+  },
+  menuButtonHidden: {
+    display: 'none',
+  },
+  title: {
+    flexGrow: 1,
+  },
+}));
diff --git a/frontend/src/components/organisms/AppMain/AppMain.tsx b/frontend/src/components/organisms/AppMain/AppMain.tsx
new file mode 100644
index 00000000..a123ce93
--- /dev/null
+++ b/frontend/src/components/organisms/AppMain/AppMain.tsx
@@ -0,0 +1,41 @@
+import { makeStyles, Typography } from '@material-ui/core';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { PATH_FOR_MAIN_VIEW } from '../../atoms/constants/routerPaths';
+import ClickButton from '../../atoms/Button/ClickButton';
+
+const onClick = () => {
+};
+
+export function AppMain() {
+  const classes = useStyles();
+
+  return (
+    <main className={classes.content}>
+      <Router>
+
+        <Switch>
+
+          <Route path={PATH_FOR_MAIN_VIEW} exact>
+
+            <Typography variant='h2'>Responsive h3</Typography>
+
+            <ClickButton text={'ZADAJ PYTANIE'} onClick={() => onClick()} />
+
+          </Route>
+
+        </Switch>
+
+      </Router>
+
+    </main>
+  );
+}
+
+const useStyles = makeStyles((theme) => ({
+  content: {
+    overflow: 'auto',
+    position: 'relative',
+    flexGrow: 1,
+    height: '100vh',
+  },
+}));
\ No newline at end of file
diff --git a/frontend/src/components/organisms/AppSidebar/AppSidebar.tsx b/frontend/src/components/organisms/AppSidebar/AppSidebar.tsx
new file mode 100644
index 00000000..eb525e2d
--- /dev/null
+++ b/frontend/src/components/organisms/AppSidebar/AppSidebar.tsx
@@ -0,0 +1,61 @@
+import { Divider, Drawer, makeStyles } from '@material-ui/core';
+import clsx from 'clsx';
+import IconButton from '@material-ui/core/IconButton';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import React, { useContext } from 'react';
+import { AppContext } from '../../atoms/hooks/AppContext';
+import { DRAWER_WIDTH } from '../../atoms/constants/sizes';
+
+export function AppSidebar() {
+  const classes = useStyles();
+  const { handleDrawerClose } = useContext(AppContext);
+  const { isOpenDrawer } = useContext(AppContext);
+
+  return (
+    <Drawer
+      variant='permanent'
+      classes={{
+        paper: clsx(classes.drawerPaper, !isOpenDrawer && classes.drawerPaperClose),
+      }}
+      open={isOpenDrawer}
+    >
+      <div className={classes.toolbarIcon}>
+        <IconButton onClick={handleDrawerClose}>
+          <ChevronLeftIcon />
+        </IconButton>
+      </div>
+      <Divider />
+      <Divider />
+    </Drawer>
+  );
+}
+
+const useStyles = makeStyles((theme) => ({
+  toolbarIcon: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: '0 8px',
+    ...theme.mixins.toolbar,
+  },
+  drawerPaper: {
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    width: DRAWER_WIDTH,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  drawerPaperClose: {
+    overflowX: 'hidden',
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    width: theme.spacing(7),
+    [theme.breakpoints.up('sm')]: {
+      width: theme.spacing(9),
+    },
+  },
+}));
\ No newline at end of file
diff --git a/frontend/src/components/pages/Integramic/Integramic.tsx b/frontend/src/components/pages/Integramic/Integramic.tsx
index d9643703..3b3eca94 100644
--- a/frontend/src/components/pages/Integramic/Integramic.tsx
+++ b/frontend/src/components/pages/Integramic/Integramic.tsx
@@ -1,39 +1,56 @@
-import React, {useState} from 'react';
-import {MuiThemeProvider, Typography} from '@material-ui/core';
-import {THEME} from '../../atoms/constants/ThemeMUI';
-import ClickButton from '../../atoms/Button/ClickButton';
-import UserAvatarAndName from '../../molecules/UserAvatarAndName/UserAvatarAndName';
-import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
-import {PATH_FOR_MAIN_VIEW} from '../../atoms/constants/routerPaths';
-import {LoginPage} from "../LoginPage/LoginPage";
-import Logo from "../../atoms/Logo/Logo";
-
-const onClick = () => {
-};
+import React, { useState } from 'react';
+import {
+  CssBaseline,
+  makeStyles,
+  MuiThemeProvider,
+} from '@material-ui/core';
+import { THEME } from '../../atoms/constants/ThemeMUI';
+import { AppSidebar } from '../../organisms/AppSidebar/AppSidebar';
+import { AppContext } from '../../atoms/hooks/AppContext';
+import { AppBar } from '../../organisms/AppBar/AppBar';
+import { AppMain } from '../../organisms/AppMain/AppMain';
+import { LoginPage } from '../LoginPage/LoginPage';
+
 
 export function Integramic() {
+  const classes = useStyles();
+  const [isOpenDrawer, setIsOpenDrawer] = useState(true);
+
+  const handleDrawerOpen = () => {
+    setIsOpenDrawer(true);
+  };
+  const handleDrawerClose = () => {
+    setIsOpenDrawer(false);
+  };
+
   const [state, setState] = useState<AuthState>({authenticatedUser: undefined, isLoading: false});
   if (state.authenticatedUser === undefined) {
     return <LoginPage onAuthenticated={user => setState({authenticatedUser: user, isLoading: false})} />
   }
+
   return (
-      <MuiThemeProvider theme={THEME}>
-        <Router>
-          <Switch>
-            <Route path={PATH_FOR_MAIN_VIEW} exact>
-              <Typography variant="h2">Responsive h3</Typography>
-
-              <ClickButton text={'ZADAJ PYTANIE'} onClick={() => onClick()} />
-
-              <UserAvatarAndName />
-              <Logo />
-            </Route>
-          </Switch>
-        </Router>
-      </MuiThemeProvider>
+    <MuiThemeProvider theme={THEME}>
+      <div className={classes.root}>
+        <AppContext.Provider value={{ isOpenDrawer, handleDrawerOpen, handleDrawerClose }}>
+          <CssBaseline />
+
+          <AppBar />
+
+          <AppSidebar />
+          <AppMain />
+
+        </AppContext.Provider>
+      </div>
+    </MuiThemeProvider>
   );
 }
 
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+  },
+}));
+
 export type AuthState = {
   readonly authenticatedUser: { email: string } | undefined;
   readonly isLoading: boolean