upd front

client/package-lock.json

@@ -6261,6 +6261,19 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -8223,6 +8236,15 @@
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
     },
+    "mini-create-react-context": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz",
+      "integrity": "sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "tiny-warning": "^1.0.3"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -10722,6 +10744,52 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
       "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
     },
+    "react-router": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.4.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
     "react-scripts": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
@@ -11137,6 +11205,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
       "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
     },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -12574,6 +12647,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
     "tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -12958,6 +13036,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

client/package.json

@@ -10,6 +10,7 @@
     "react": "^16.13.1",
     "react-apollo": "^3.1.5",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1"
   },
   "scripts": {

client/src/App.js

@@ -1,12 +1,16 @@
 import React from 'react'
+//import { BrowserRouter, Route, Switch } from 'react-router-dom'
 import Layout from './components/Layout/Layout'
+import Todos from './containers/Todos/Todos'
 import CssBaseLine from '@material-ui/core/CssBaseline'
 
 export default function App() {
   return (
     <>
       <CssBaseLine />
-      <Layout />
+      <Layout>
+          <Todos />
+      </Layout>
     </>
   )
 }

client/src/components/Header/Header.js

@@ -1,23 +1,15 @@
 import React from 'react';
 import AppBar from '@material-ui/core/AppBar';
-import Drawer from '@material-ui/core/Drawer';
-import DrawerContent from '../DrawerContent/DrawerContent'
-import Hidden from '@material-ui/core/Hidden';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography'
-import { makeStyles, useTheme } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
+import Nav from '../Nav/Nav'
 
 const drawerWidth = 240;
 
 const useStyles = makeStyles((theme) => ({
-  drawer: {
-    [theme.breakpoints.up('sm')]: {
-      width: drawerWidth,
-      flexShrink: 0,
-    },
-  },
   appBar: {
     [theme.breakpoints.up('sm')]: {
       width: `calc(100% - ${drawerWidth}px)`,
@@ -30,26 +22,16 @@ const useStyles = makeStyles((theme) => ({
       display: 'none',
     },
   },
-  drawerPaper: {
-    width: drawerWidth,
-  },
-  content: {
-    flexGrow: 1,
-    padding: theme.spacing(3),
-  },
 }));
 
-const Header = ({ window }) => {
+const Header = () => {
   const classes = useStyles();
-  const theme = useTheme();
   const [mobileOpen, setMobileOpen] = React.useState(false);
 
   const handleDrawerToggle = () => {
     setMobileOpen(!mobileOpen);
   };
   
-  const container = window !== undefined ? () => window().document.body : undefined;
-
   return (
     <>
       <AppBar position="fixed" className={classes.appBar}>
@@ -68,36 +50,7 @@ const Header = ({ window }) => {
           </Typography>
         </Toolbar>
       </AppBar>
-      <nav className={classes.drawer} aria-label="mailbox folders">
+      <Nav mobileOpen={mobileOpen} handleDrawerToggle={handleDrawerToggle} />
-        <Hidden smUp implementation="css">
-          <Drawer
-            container={container}
-            variant="temporary"
-            anchor={theme.direction === 'rtl' ? 'right' : 'left'}
-            open={mobileOpen}
-            onClose={handleDrawerToggle}
-            classes={{
-              paper: classes.drawerPaper,
-            }}
-            ModalProps={{
-              keepMounted: true,
-            }}
-          >
-            <DrawerContent />
-          </Drawer>
-        </Hidden>
-        <Hidden xsDown implementation="css">
-          <Drawer
-            classes={{
-              paper: classes.drawerPaper,
-            }}
-            variant="permanent"
-            open
-          >
-            <DrawerContent />
-          </Drawer>
-        </Hidden>
-      </nav>
     </>
   )
 }

client/src/components/Layout/Layout.js

@@ -1,20 +1,28 @@
 import React from 'react';
-import Header from '../Header/Header'
+import Header from '../Header/Header';
-import Main from '../Main/Main'
 import { makeStyles } from '@material-ui/core/styles'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   layout: {
     display: 'flex'
-  }
+  },
+  toolbar: theme.mixins.toolbar,
+  content: {
+    flexGrow: 1,
+    padding: theme.spacing(3),
+  },
 }))
 
-const Layout = () => {
+const Layout = ({ children }) => {
   const classes = useStyles()
+
   return (
     <div className={classes.layout}>
       <Header />
-      <Main />
+      <main className={classes.content}>
+        <div className={classes.toolbar} />
+        {children} 
+      </main>
     </div>
   )
 }

client/src/components/Nav/Nav.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import Drawer from '@material-ui/core/Drawer';
+import NavContent from './NavContent/NavContent'
+import Hidden from '@material-ui/core/Hidden';
+import { makeStyles, useTheme } from '@material-ui/core/styles'
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme) => ({
+  drawer: {
+    [theme.breakpoints.up('sm')]: {
+      width: drawerWidth,
+      flexShrink: 0,
+    },
+  },
+  drawerPaper: {
+    width: drawerWidth,
+  },
+}));
+
+const Nav = ({ window, mobileOpen, handleDrawerToggle }) => {
+  const classes = useStyles();
+  const theme = useTheme();
+  
+  const container = window !== undefined ? () => window().document.body : undefined;
+
+  return (
+    <nav className={classes.drawer} aria-label="mailbox folders">
+      <Hidden smUp implementation="css">
+        <Drawer
+          container={container}
+          variant="temporary"
+          anchor={theme.direction === 'rtl' ? 'right' : 'left'}
+          open={mobileOpen}
+          onClose={handleDrawerToggle}
+          classes={{
+            paper: classes.drawerPaper,
+          }}
+          ModalProps={{
+            keepMounted: true,
+          }}
+        >
+          <NavContent />
+        </Drawer>
+      </Hidden>
+      <Hidden xsDown implementation="css">
+        <Drawer
+          classes={{
+            paper: classes.drawerPaper,
+          }}
+          variant="permanent"
+          open
+        >
+          <NavContent />
+        </Drawer>
+      </Hidden>
+    </nav>
+  )
+}
+
+export default Nav

client/src/components/Nav/NavContent/NavContent.js

@@ -8,14 +8,31 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
+import GitHubIcon from '@material-ui/icons/GitHub';
 import Collapse from '@material-ui/core/Collapse'
 import ExpandLess from '@material-ui/icons/ExpandLess'
 import ExpandMore from '@material-ui/icons/ExpandMore'
 import IconButton from '@material-ui/core/IconButton'
+import Link from '@material-ui/core/Link';
 import { makeStyles } from '@material-ui/core/styles'
+import { Typography } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
-  toolbar: theme.mixins.toolbar,
+  navHeading: {
+    padding: '10px 0px 10px 16px',
+    minHeight: 64,
+    display: 'flex',
+    alignItems: 'center',
+    color: 'rgba(255, 255, 255, 0.7)'
+  },
+  githubIcon: {
+    marginLeft: 10
+  },
+  author: {
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: 5
+  },
   nested: {
     paddingLeft: theme.spacing(4)
   },
@@ -28,16 +45,32 @@ const useStyles = makeStyles((theme) => ({
 const Drawer = () => {
   const classes = useStyles()
   const [selectedIndex, setSelectedIndex] = React.useState(0)
-  const [isListOpen, setIsListOpen] = React.useState(false)
+  const [isListOpen, setIsListOpen] = React.useState({
+    idCollapse: 0,
+    current: false,
+  })
 
   const listItemSelectedHandler = (e, index) => {
     setSelectedIndex(index)
-    if (index === 1) setIsListOpen(!isListOpen)
+    if (index === 1) setIsListOpen({
+      idCollapse: 1,
+      current: !isListOpen.current
+    })
   }
   
   return (
     <>
-    <div className={classes.toolbar} />
+    <div className={classes.navHeading}>
+      <Typography>
+        <Link style={{ color: 'rgba(255, 255, 255, 0.7)' }} href="#" variant='h1'>
+          Todo App
+        </Link>
+        <br />
+        <span className={classes.author} href="#">
+          Github: <Link href='https://github.com/sergeyyarkov/todo-app' target='_blank'><GitHubIcon className={classes.githubIcon} color='action' fontSize='small' /></Link>
+        </span>
+      </Typography>
+    </div>
     <Divider />
     <List>
       <ListItem onClick={(e) => listItemSelectedHandler(e, 0)} selected={selectedIndex === 0} button> 
@@ -51,21 +84,19 @@ const Drawer = () => {
           <CategoryIcon />
         </ListItemIcon>
         <ListItemText primary={'Категории'} />
-        {isListOpen ? <ExpandLess /> : <ExpandMore />}
+        {isListOpen.current ? <ExpandLess /> : <ExpandMore />}
       </ListItem>
-      <Collapse in={isListOpen} timeout="auto" unmountOnExit>
+      <Collapse in={isListOpen.current} timeout="auto" unmountOnExit>
         <List component="div" disablePadding>
-        <ListItem button className={classes.nested}>
+          {[1,2,3].map((e, i) => {
-          <ListItemText primary="Категория 1" />
+            return (
-        </ListItem>
+              <ListItem key={i} button className={classes.nested}>
-        <ListItem button className={classes.nested}>
+                <ListItemText primary={"Категория " + i} />
-          <ListItemText primary="Категория 2" />
-        </ListItem>
-        <ListItem button className={classes.nested}>
-          <ListItemText primary="Категория 3" />
               </ListItem>
+            )
+          })}
           <ListItem className={classes.addCategoryItem}>
-          <IconButton aria-label="delete">
+            <IconButton aria-label="add">
               <AddIcon />
             </IconButton>
           </ListItem>

client/src/containers/Todos/Todos.js

@@ -37,37 +37,22 @@ const useStyles = makeStyles((theme) => ({
     bottom: theme.spacing(2),
     right: theme.spacing(2),
   },
-  toolbar: theme.mixins.toolbar,
-  content: {
-    flexGrow: 1,
-    padding: theme.spacing(3),
-  },
-  bullet: {
-    display: 'inline-block',
-    margin: '0 2px',
-    transform: 'scale(0.8)',
-  },
-  pos: {
-    marginBottom: 12,
-  },
 }))
 
-const Main = () => {
+const Todos = () => {
   const classes = useStyles()
   return (
-    <main className={classes.content}>
+    <Grid container spacing={2}>
-      <div className={classes.toolbar} />
       <Fab className={classes.fab} color="secondary" size='large' aria-label="add">
         <AddIcon />
       </Fab> 
-      <Grid container spacing={2}>
         <Grid item xs={12}>
           <Typography>
             Создавайте, редактируйте или удаляйте свои повседневные задачи.
           </Typography> 
         </Grid>      
-          {[1,2,3,4,5,6].map((e) => 
+        {[1,2,3,4,5,6].map((e, i) => 
-            <Grid item xs={12} md={4} lg={3}>
+          <Grid key={i} item xs={12} md={4} lg={3}>
             <Card>
               <CardContent>
                 <Typography className={classes.cardCategoryHeading} color="textSecondary" gutterBottom>
@@ -96,8 +81,7 @@ const Main = () => {
           </Grid>
         )} 
     </Grid>
-      </main>
   )
 }
 
-export default Main
+export default Todos

client/src/theme.js

@@ -1,5 +1,5 @@
 import { createMuiTheme } from '@material-ui/core/styles';
-import { pink, red } from '@material-ui/core/colors';
+import { red } from '@material-ui/core/colors';
 
 const theme = createMuiTheme({
   palette: {
@@ -7,7 +7,7 @@ const theme = createMuiTheme({
     primary: {
       main: '#0d47a1'
     },
-    secondary: pink,
+    secondary: red,
     error: red
   },
   typography: {