upd front

client/src/App.js

@@ -16,7 +16,6 @@ const App = ({ history }) => {
           <Route history={history} exact path='/category/:slug' component={Category} />
           <Route history={history} exact path='/trash' component={Trash} />
           <Route history={history} exact path='/' component={Todos} />
-          {/* <Route component={NotFound} /> */}
           <Route path='/404' component={NotFound} />
           <Redirect from='*' to='/404' />
         </Switch>

client/src/components/Cards/Cards.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Card, CardActions, CardContent, Typography, Grid, IconButton, makeStyles } from '@material-ui/core'
+
+import DeleteIcon from '@material-ui/icons/Delete'
+import AlarmIcon from '@material-ui/icons/Alarm';
+import EditIcon from '@material-ui/icons/Edit';
+
+const useStyles = makeStyles((theme) => ({
+  alarmIcon: {
+    marginRight: 10
+  },
+  cardActions: {
+    justifyContent: 'flex-end'
+  },
+  cardHeading: {
+    marginBottom: 10
+  },
+  cardCategoryHeading: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    fontSize: 14
+  },
+  cardAlarm: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  fab: {
+    position: 'fixed',
+    margin: 30,
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
+  },
+}))
+
+const Cards = ({ data }) => {
+  const classes = useStyles()
+  return data.map((e, i) => 
+    <Grid key={i} item xs={12} md={4} lg={3}>
+      <Card>
+        <CardContent>
+          <Typography className={classes.cardCategoryHeading} color="textSecondary" gutterBottom>
+            Категория 1
+            <span className={classes.cardAlarm}>
+              <AlarmIcon className={classes.alarmIcon} color='action' />
+              18:00
+            </span>
+          </Typography>
+          <Typography className={classes.cardHeading} variant="h5" component="h2">
+            Todo 1
+          </Typography>
+          <Typography variant="body2" component="p">
+            But I must explain to you how all this mistaken idea of denouncing pleasure and praising.
+          </Typography>
+        </CardContent>
+        <CardActions className={classes.cardActions}>
+          <IconButton aria-label="delete">
+            <EditIcon />
+          </IconButton>
+          <IconButton aria-label="delete" color='secondary'>
+            <DeleteIcon />
+          </IconButton>
+        </CardActions>
+      </Card>
+    </Grid>
+  )
+}
+
+export default Cards

client/src/components/Fab/Fab.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Fab, makeStyles } from '@material-ui/core'
+import AddIcon from '@material-ui/icons/Add'
+import EditIcon from '@material-ui/icons/Edit';
+
+const useStyles = makeStyles((theme) => ({
+  fab: {
+    position: 'fixed',
+    margin: 30,
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
+  },
+}))
+
+const renderIcon = (typeIcon) => {
+  switch(typeIcon) {
+    case 'add':
+      return <AddIcon />
+    case 'edit':
+      return <EditIcon />
+    default:
+      break;
+  }
+}
+
+const FabComponent = ({ typeIcon, color, secondary, size, ariaLabel }) => {
+  const classes = useStyles()
+  return (
+    <Fab className={classes.fab} color={color} size={size} secondary={secondary} aria-label={ariaLabel}>
+      {renderIcon(typeIcon)}
+    </Fab>
+  )
+}
+
+export default FabComponent

client/src/components/Header/Header.js

@@ -1,17 +1,12 @@
 import React from 'react';
-import AppBar from '@material-ui/core/AppBar';
+import Nav from '../Nav/Nav'
-import IconButton from '@material-ui/core/IconButton';
+import { AppBar, IconButton, Toolbar, Typography, makeStyles } from '@material-ui/core'
+
 import MenuIcon from '@material-ui/icons/Menu';
 import CategoryIcon from '@material-ui/icons/Category';
 import DeleteIcon from '@material-ui/icons/Delete';
 import ErrorIcon from '@material-ui/icons/Error';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography'
 import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
-import { makeStyles } from '@material-ui/core/styles'
-import Nav from '../Nav/Nav'
-
-const drawerWidth = 240;
 
 const useStyles = makeStyles((theme) => ({
   pageHeading: {
@@ -23,8 +18,8 @@ const useStyles = makeStyles((theme) => ({
   },
   appBar: {
     [theme.breakpoints.up('sm')]: {
-      width: `calc(100% - ${drawerWidth}px)`,
+      width: `calc(100% - 240px)`,
-      marginLeft: drawerWidth,
+      marginLeft: 240,
     },
   },
   menuButton: {

client/src/components/Nav/Nav.js

@@ -1,20 +1,16 @@
 import React from 'react'
-import Drawer from '@material-ui/core/Drawer';
 import NavContent from './NavContent/NavContent'
-import Hidden from '@material-ui/core/Hidden';
+import { Drawer, Hidden, makeStyles, useTheme } from '@material-ui/core';
-import { makeStyles, useTheme } from '@material-ui/core/styles'
-
-const drawerWidth = 240;
 
 const useStyles = makeStyles((theme) => ({
   drawer: {
     [theme.breakpoints.up('sm')]: {
-      width: drawerWidth,
+      width: 240,
       flexShrink: 0,
     },
   },
   drawerPaper: {
-    width: drawerWidth,
+    width: 240,
   },
 }));
 

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

@@ -1,22 +1,15 @@
 import React from 'react';
-import Divider from '@material-ui/core/Divider';
+import { Link } from 'react-router-dom'
+import MuiLink from '@material-ui/core/Link';
+import { Divider, List, ListItemIcon, ListItemText, Collapse, ListItem, IconButton, Typography, makeStyles } from '@material-ui/core'
+
 import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
 import CategoryIcon from '@material-ui/icons/Category';
 import AddIcon from '@material-ui/icons/Add';
 import DeleteIcon from '@material-ui/icons/Delete';
-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 MuiLink from '@material-ui/core/Link';
-import { Link } from 'react-router-dom'
-import { makeStyles } from '@material-ui/core/styles'
-import { Typography } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
   navHeading: {

client/src/containers/Category/Category.js

@@ -1,31 +1,21 @@
 import React from 'react';
-import { Grid, Typography, Fab } from '@material-ui/core'
+import Cards from '../../components/Cards/Cards'
-import { makeStyles } from '@material-ui/core/styles'
+import Fab from '../../components/Fab/Fab'
-import EditIcon from '@material-ui/icons/Edit';
+import { Grid, Typography } from '@material-ui/core'
-// import { useParams } from 'react-router-dom'
 
-const useStyles = makeStyles((theme) => ({
+// import { useParams } from 'react-router-dom'
-  fab: {
-    position: 'fixed',
-    margin: 30,
-    bottom: theme.spacing(2),
-    right: theme.spacing(2),
-  },
-}))
 
 const Category = () => {
   // const { slug } = useParams()
-  const classes = useStyles()
   return (
     <Grid container spacing={2}>
-      <Fab className={classes.fab} size='large' aria-label="add">
+      <Fab size='large' ariaLabel='add' typeIcon='edit'/>
-        <EditIcon />
-      </Fab>
       <Grid item xs={12}>
         <Typography>
-          {`Сортируйте свои повседневные задачи используя категории.`}
+          Сортируйте свои повседневные задачи используя категории
         </Typography> 
       </Grid> 
+      <Cards data={[1,2,3]} />
     </Grid>
   )
 }

client/src/containers/Todos/Todos.js

@@ -1,85 +1,18 @@
 import React from 'react';
-import Card from '@material-ui/core/Card';
+import Cards from '../../components/Cards/Cards'
-import CardActions from '@material-ui/core/CardActions';
+import Fab from '../../components/Fab/Fab'
-import CardContent from '@material-ui/core/CardContent';
+import { Typography, Grid } from '@material-ui/core'
-import Typography from '@material-ui/core/Typography'
-import Grid from '@material-ui/core/Grid'
-import Fab from '@material-ui/core/Fab';
-import AddIcon from '@material-ui/icons/Add';
-import DeleteIcon from '@material-ui/icons/Delete'
-import IconButton from '@material-ui/core/IconButton'
-import AlarmIcon from '@material-ui/icons/Alarm';
-import EditIcon from '@material-ui/icons/Edit';
-import { makeStyles } from '@material-ui/core/styles'
-
-const useStyles = makeStyles((theme) => ({
-  alarmIcon: {
-    marginRight: 10
-  },
-  cardActions: {
-    justifyContent: 'flex-end'
-  },
-  cardHeading: {
-    marginBottom: 10
-  },
-  cardCategoryHeading: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    fontSize: 14
-  },
-  cardAlarm: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  fab: {
-    position: 'fixed',
-    margin: 30,
-    bottom: theme.spacing(2),
-    right: theme.spacing(2),
-  },
-}))
 
 const Todos = () => {
-  const classes = useStyles()
   return (
     <Grid container spacing={2}>
-      <Fab className={classes.fab} color="secondary" size='large' aria-label="add">
+      <Fab typeIcon='add' color="secondary" size='large' ariaLabel="add" />
-        <AddIcon />
-      </Fab> 
         <Grid item xs={12}>
           <Typography>
             Создавайте, редактируйте или удаляйте ваши повседневные дела.
           </Typography> 
-        </Grid>      
+        </Grid>     
-        {[1,2,3,4,5,6].map((e, i) => 
+        <Cards data={[1,2,3,4,5,6]} />
-          <Grid key={i} item xs={12} md={4} lg={3}>
-            <Card>
-              <CardContent>
-                <Typography className={classes.cardCategoryHeading} color="textSecondary" gutterBottom>
-                  Категория 1
-                  <span className={classes.cardAlarm}>
-                    <AlarmIcon className={classes.alarmIcon} color='action' />
-                    18:00
-                  </span>
-                </Typography>
-                <Typography className={classes.cardHeading} variant="h5" component="h2">
-                  Todo 1
-                </Typography>
-                <Typography variant="body2" component="p">
-                  But I must explain to you how all this mistaken idea of denouncing pleasure and praising.
-                </Typography>
-              </CardContent>
-              <CardActions className={classes.cardActions}>
-                <IconButton aria-label="delete">
-                  <EditIcon />
-                </IconButton>
-                <IconButton aria-label="delete" color='secondary'>
-                  <DeleteIcon />
-                </IconButton>
-              </CardActions>
-            </Card>
-          </Grid>
-        )} 
     </Grid>
   )
 }

client/src/containers/Trash/Trash.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Cards from '../../components/Cards/Cards'
 import { Grid, Typography } from '@material-ui/core'
 
 const Trash = () => {
@@ -9,6 +10,7 @@ const Trash = () => {
           Здесь находятся ваши недавно удаленные записи, вы можете их легко восстановить.
         </Typography> 
       </Grid> 
+      <Cards data={[1,2]} />
     </Grid>
   )
 }