modal upd

client/src/components/Modals/Todo/CreateTodoModal.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Fab from '../../../components/Fab/Fab'
+import Fab from '../../Fab/Fab'
 import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField, Select, MenuItem, InputLabel, FormControl, makeStyles } from '@material-ui/core'
 
 const useStyles = makeStyles(() => ({

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

@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme) => ({
   author: {
     display: 'flex',
     alignItems: 'center',
-    marginTop: 5
+    marginTop: 10
   },
   nested: {
     paddingLeft: theme.spacing(4)
@@ -43,15 +43,15 @@ const useStyles = makeStyles((theme) => ({
 
 const NavContent = ({ history }) => {
   const classes = useStyles()
-  const [isListOpen, setIsListOpen] = React.useState({
+  const [collapseInfo, setCollapseInfo] = React.useState({
     idCollapse: 0,
-    current: false,
+    isCollapseOpen: false,
   })
 
   const listItemSelectedHandler = (e, index) => {
-    if (index === 1) setIsListOpen({
+    setCollapseInfo({
-      idCollapse: 1,
+      idCollapse: index,
-      current: !isListOpen.current
+      isCollapseOpen: !collapseInfo.isCollapseOpen
     })
   }
 
@@ -83,9 +83,9 @@ const NavContent = ({ history }) => {
           <CategoryIcon />
         </ListItemIcon>
         <ListItemText primary={'Категории'} />
-        {isListOpen.current ? <ExpandLess /> : <ExpandMore />}
+        {collapseInfo.isCollapseOpen ? <ExpandLess /> : <ExpandMore />}
       </ListItem>
-      <Collapse in={isListOpen.current} timeout="auto" unmountOnExit>
+      <Collapse in={collapseInfo.isCollapseOpen} timeout="auto" unmountOnExit>
         <List component="div" disablePadding>
           <Categories data={[1,2,3]} history={history} classes={classes} />
           <ListItem className={classes.addCategoryItem}>

client/src/components/Todos/Todos.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import UpdateTodoModal from '../Modals/Todo/UpdateTodoModal'
 import { Card, CardActions, CardContent, Typography, Grid, IconButton, makeStyles } from '@material-ui/core'
 
 import DeleteIcon from '@material-ui/icons/Delete'
@@ -32,37 +33,42 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
-const Cards = ({ data }) => {
+const Todos = ({ data }) => {
   const classes = useStyles()
-  return data.map((e, i) => 
+  return (
-    <Grid key={i} item xs={12} md={4} lg={3}>
+    <>
-      <Card>
+      {/* <UpdateTodoModal /> */}
-        <CardContent>
+      {data.map((e, i) => 
-          <Typography className={classes.cardCategoryHeading} color="textSecondary" gutterBottom>
+        <Grid key={i} item xs={12} md={4} lg={3}>
-            Категория 1
+          <Card>
-            <span className={classes.cardAlarm}>
+            <CardContent>
-              <AlarmIcon className={classes.alarmIcon} color='action' />
+              <Typography className={classes.cardCategoryHeading} color="textSecondary" gutterBottom>
-              18:00
+                Категория 1
-            </span>
+                <span className={classes.cardAlarm}>
-          </Typography>
+                  <AlarmIcon className={classes.alarmIcon} color='action' />
-          <Typography className={classes.cardHeading} variant="h5" component="h2">
+                  18:00
-            Todo 1
+                </span>
-          </Typography>
+              </Typography>
-          <Typography variant="body2" component="p">
+              <Typography className={classes.cardHeading} variant="h5" component="h2">
-            But I must explain to you how all this mistaken idea of denouncing pleasure and praising.
+                Todo 1
-          </Typography>
+              </Typography>
-        </CardContent>
+              <Typography variant="body2" component="p">
-        <CardActions className={classes.cardActions}>
+                But I must explain to you how all this mistaken idea of denouncing pleasure and praising.
-          <IconButton aria-label="delete">
+              </Typography>
-            <EditIcon />
+            </CardContent>
-          </IconButton>
+            <CardActions className={classes.cardActions}>
-          <IconButton aria-label="delete" color='secondary'>
+              <IconButton aria-label="update">
-            <DeleteIcon />
+                <EditIcon />
-          </IconButton>
+              </IconButton>
-        </CardActions>
+              <IconButton aria-label="delete" color='secondary'>
-      </Card>
+                <DeleteIcon />
-    </Grid>
+              </IconButton>
+            </CardActions>
+          </Card>
+        </Grid>
+      )}
+    </>
   )
 }
 
-export default Cards
+export default Todos

client/src/containers/TodosContainer/TodosContainer.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import Todos from '../../components/Todos/Todos'
-import TodosModal from '../../components/Todos/TodoModal/TodosModal'
+import CreateTodoModal from '../../components/Modals/Todo/CreateTodoModal'
 import { Typography, Grid } from '@material-ui/core'
 
 const TodosContainer = () => {
   return (
     <>
-      <TodosModal />
+      <CreateTodoModal />
       <Grid container spacing={2}>
           <Grid item xs={12}>
             <Typography>