upd front

2026-10-11 10:29:14 +03:00 · 2020-06-11 11:16:50 +03:00 · 2020-06-11 11:16:50 +03:00 · 126010ac80
commit 126010ac80
parent d732394d54
9 changed files with 237 additions and 112 deletions
--- a/client/package-lock.json
+++ b/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",
--- a/client/package.json
+++ b/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": {
--- a/client/src/App.js
+++ b/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>
    </>
  )
 }
--- a/client/src/components/Header/Header.js
+++ b/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">
-        <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>
+      <Nav mobileOpen={mobileOpen} handleDrawerToggle={handleDrawerToggle} />
    </>
  )
 }
--- a/client/src/components/Layout/Layout.js
+++ b/client/src/components/Layout/Layout.js
@ -1,20 +1,28 @@
 import React from 'react';
-import Header from '../Header/Header'
-import Main from '../Main/Main'
+import Header from '../Header/Header';
 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>
  )
 }
--- a/client/src/components/Nav/Nav.js
+++ b/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
--- a/client/src/components/DrawerContent/DrawerContent.js
+++ b/client/src/components/DrawerContent/DrawerContent.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,26 +84,24 @@ const Drawer = () => {
          <CategoryIcon />
        </ListItemIcon>
        <ListItemText primary={'Категории'} />
-        {isListOpen ? <ExpandLess /> : <ExpandMore />}
+        {isListOpen.current ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
-      <Collapse in={isListOpen} timeout="auto" unmountOnExit>
-      <List component="div" disablePadding>
-        <ListItem button className={classes.nested}>
-          <ListItemText primary="Категория 1" />
-        </ListItem>
-        <ListItem button className={classes.nested}>
-          <ListItemText primary="Категория 2" />
-        </ListItem>
-        <ListItem button className={classes.nested}>
-          <ListItemText primary="Категория 3" />
-        </ListItem>
-        <ListItem className={classes.addCategoryItem}>
-          <IconButton aria-label="delete">
-            <AddIcon />
-          </IconButton>
-        </ListItem>
-      </List>
-    </Collapse>
+      <Collapse in={isListOpen.current} timeout="auto" unmountOnExit>
+        <List component="div" disablePadding>
+          {[1,2,3].map((e, i) => {
+            return (
+              <ListItem key={i} button className={classes.nested}>
+                <ListItemText primary={"Категория " + i} />
+              </ListItem>
+            )
+          })}
+          <ListItem className={classes.addCategoryItem}>
+            <IconButton aria-label="add">
+              <AddIcon />
+            </IconButton>
+          </ListItem>
+        </List>
+      </Collapse>
      <Divider />
      <ListItem onClick={(e) => listItemSelectedHandler(e, 2)} selected={selectedIndex === 2} button> 
        <ListItemIcon>
--- a/client/src/containers/Todos/Todos.js
+++ b/client/src/containers/Todos/Todos.js
@ -37,38 +37,23 @@ 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}>
-      <div className={classes.toolbar} />
+    <Grid container spacing={2}>
      <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) => 
-            <Grid item xs={12} md={4} lg={3}>
-              <Card>
+        <Grid item xs={12}>
+          <Typography>
+            Создавайте, редактируйте или удаляйте свои повседневные задачи.
+          </Typography> 
+        </Grid>      
+        {[1,2,3,4,5,6].map((e, i) => 
+          <Grid key={i} item xs={12} md={4} lg={3}>
+            <Card>
              <CardContent>
                <Typography className={classes.cardCategoryHeading} color="textSecondary" gutterBottom>
                  Категория 1
@ -94,10 +79,9 @@ const Main = () => {
              </CardActions>
            </Card>
          </Grid>
-          )} 
-      </Grid>
-      </main>
+        )} 
+    </Grid>
  )
 }

-export default Main
+export default Todos
--- a/client/src/theme.js
+++ b/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: {