category modals

client/src/components/Categories/Categories.js

@@ -3,11 +3,11 @@ import { Link } from 'react-router-dom'
 import { ListItem, ListItemText } from '@material-ui/core'
 
 const Categories = ({ data, history, classes }) => {
-  return data.map((e, i) => {
+  return data.map((category, i) => {
     return (
-      <Link className={classes.link} key={i} to={`/category/${i}`}>
-          <ListItem selected={history.location.pathname === `/category/${i}`} button className={classes.nested}>
-            <ListItemText primary={"Категория " + i} />
+      <Link className={classes.link} key={i} to={`/category/${category._id.$oid}`}>
+          <ListItem selected={history.location.pathname === `/category/${category._id.$oid}`} button className={classes.nested}>
+            <ListItemText primary={category.title} />
           </ListItem>
       </Link>
     )

client/src/components/Modals/Category/CreateCategoryModal.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import useStyles from '../styles'
+import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField } from '@material-ui/core'
+
+import CategoryIcon from '@material-ui/icons/Category';
+
+const CreateCategoryModal = ({ isModalOpen, handleCloseModal }) => {
+  const classes = useStyles()
+  const [fieldsData, setFieldsData] = React.useState({
+    title: '',
+  })
+
+  const handleFormSubmit = e => {
+    e.preventDefault()
+    const elements = e.target.elements
+    const data = {
+      title: elements.title.value,
+    }
+    handleCloseModal()
+    setFieldsData({
+      title: '',
+    })
+    console.log('Request on create category:', data)
+  }
+
+  const handleFieldChange = e => {
+    const target = e.target 
+    setFieldsData({
+      title: target.name === 'title' ? target.value : fieldsData.title,
+    })
+  }
+
+  return (
+    <div>
+      <Dialog fullWidth={true} open={isModalOpen} onClose={handleCloseModal} color='default'>
+        <DialogTitle> 
+          <CategoryIcon className={classes.headingIcon} /> Добавить новую категорию
+        </DialogTitle>
+        <DialogContent>
+          <form onSubmit={handleFormSubmit} noValidate autoComplete="off" className={classes.form}>
+            <TextField 
+              name='title'
+              label="Название категории"
+              margin="normal"
+              placeholder='Название вашей категории'
+              variant="outlined"
+              className={classes.textField}
+              value={fieldsData.title}
+              onChange={handleFieldChange}
+              InputLabelProps={{
+                shrink: true,
+              }}
+            />
+            <DialogActions>
+              <Button type='submit' color="default">
+                Добавить
+              </Button>
+              <Button onClick={handleCloseModal} color="secondary">
+                Закрыть
+              </Button>
+            </DialogActions>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
+export default CreateCategoryModal

client/src/components/Modals/Category/UpdateCategoryModal.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import useStyles from '../styles'
+import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField } from '@material-ui/core'
+import EditIcon from '@material-ui/icons/Edit'
+
+
+const UpdateCategoryModal = ({ isModalOpen, handleCloseModal, selectedCategory, setSelectedCategory }) => {
+  const classes = useStyles()
+  const handleFormSubmit = e => {
+    e.preventDefault()
+    const elements = e.target.elements
+    const data = {
+      id: elements.title.value,
+    }
+    handleCloseModal()
+    console.log('Request on update category:', data)
+  }
+
+  console.log(selectedCategory)
+
+  const handleFieldChange = e => {
+    const target = e.target
+    // setSelectedCategory({
+    //   id: target.name === 'title' ? target.value : selectedTodo.title,
+    // })
+  }
+
+  return (
+    <div>
+      <Dialog fullWidth={true} open={isModalOpen} onClose={handleCloseModal} color='default'>
+        <DialogTitle className={classes.heading}> 
+          <EditIcon className={classes.headingIcon} />
+          Изменить категорию
+        </DialogTitle>
+        <DialogContent>
+          <form onSubmit={handleFormSubmit} noValidate autoComplete="off" className={classes.form}>
+            <TextField 
+              name='title'
+              label="Название вашей категории"
+              margin="normal"
+              placeholder='Название вашей категории'
+              variant="outlined"
+              className={classes.textField}
+              value={selectedCategory.id}
+              onChange={handleFieldChange}
+              InputLabelProps={{
+                shrink: true,
+              }}
+            />
+            <DialogActions>
+              <Button type='submit' color="default">
+                Обновить
+              </Button>
+              <Button onClick={handleCloseModal} color="secondary">
+                Закрыть
+              </Button>
+            </DialogActions>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
+export default UpdateCategoryModal

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import useStyles from './styles'
+import useStyles from '../styles'
 import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField, Select, MenuItem, InputLabel, FormControl } from '@material-ui/core'
 import AddIcon from '@material-ui/icons/Add'
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import useStyles from './styles'
+import useStyles from '../styles'
 import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField, Select, MenuItem, InputLabel, FormControl } from '@material-ui/core'
 import EditIcon from '@material-ui/icons/Edit'
 

client/src/components/Nav/Nav.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import NavContent from './NavContent/NavContent'
+import CreateCategoryModal from '../Modals/Category/CreateCategoryModal'
 import { Drawer, Hidden, makeStyles, useTheme } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
@@ -17,40 +18,46 @@ const useStyles = makeStyles((theme) => ({
 const Nav = ({ window, mobileOpen, handleDrawerToggle, history }) => {
   const classes = useStyles();
   const theme = useTheme();
-  
   const container = window !== undefined ? () => window().document.body : undefined;
 
+  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const handleCloseModal = () => setIsModalOpen(false)
+  const handleOpenModal = () => setIsModalOpen(true)
+
   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 history={history} />
-        </Drawer>
-      </Hidden>
-      <Hidden xsDown implementation="css">
-        <Drawer
-          classes={{
-            paper: classes.drawerPaper,
-          }}
-          variant="permanent"
-          open
-        >
-          <NavContent history={history} />
-        </Drawer>
-      </Hidden>
-    </nav>
+    <>
+      <CreateCategoryModal isModalOpen={isModalOpen} handleCloseModal={handleCloseModal} />
+      <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 handleOpenModal={handleOpenModal} history={history} />
+          </Drawer>
+        </Hidden>
+        <Hidden xsDown implementation="css">
+          <Drawer
+            classes={{
+              paper: classes.drawerPaper,
+            }}
+            variant="permanent"
+            open
+          >
+            <NavContent handleOpenModal={handleOpenModal} history={history} />
+          </Drawer>
+        </Hidden>
+      </nav>
+    </>
   )
 }
 

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

@@ -12,6 +12,8 @@ import GitHubIcon from '@material-ui/icons/GitHub';
 import ExpandLess from '@material-ui/icons/ExpandLess'
 import ExpandMore from '@material-ui/icons/ExpandMore'
 
+import categories from '../../../db/categories.json'
+
 const useStyles = makeStyles((theme) => ({
   navHeading: {
     padding: '10px 0px 10px 16px',
@@ -41,7 +43,7 @@ const useStyles = makeStyles((theme) => ({
   }
 }))
 
-const NavContent = ({ history }) => {
+const NavContent = ({ history, handleOpenModal }) => {
   const classes = useStyles()
   const [collapseInfo, setCollapseInfo] = React.useState({
     idCollapse: 0,
@@ -57,55 +59,55 @@ const NavContent = ({ history }) => {
 
   return (
     <>
-    <div className={classes.navHeading}>
-      <Typography>
-        <MuiLink style={{ color: 'rgba(255, 255, 255, 0.7)' }} href="#" variant='h1'>
-          Todo App
-        </MuiLink>
-        <br />
-        <span className={classes.author} href="#">
-          Github: <MuiLink href='https://github.com/sergeyyarkov/todo-app' target='_blank'><GitHubIcon className={classes.githubIcon} color='action' fontSize='small' /></MuiLink>
-        </span>
-      </Typography>
-    </div>
-    <Divider />
-    <List>
-      <Link className={classes.link} to='/'>
-        <ListItem selected={history.location.pathname === '/'} button> 
-          <ListItemIcon>
-            <FormatListBulletedIcon />
-          </ListItemIcon>
-          <ListItemText primary={'Список дел'} />
-        </ListItem>
-      </Link>
-      <ListItem onClick={(e) => listItemSelectedHandler(e, 1)} button> 
-        <ListItemIcon>
-          <CategoryIcon />
-        </ListItemIcon>
-        <ListItemText primary={'Категории'} />
-        {collapseInfo.isCollapseOpen ? <ExpandLess /> : <ExpandMore />}
-      </ListItem>
-      <Collapse in={collapseInfo.isCollapseOpen} timeout="auto" unmountOnExit>
-        <List component="div" disablePadding>
-          <Categories data={[1,2,3]} history={history} classes={classes} />
-          <ListItem className={classes.addCategoryItem}>
-            <IconButton aria-label="add">
-              <AddIcon />
-            </IconButton>
-          </ListItem>
-        </List>
-      </Collapse>
+      <div className={classes.navHeading}>
+        <Typography>
+          <MuiLink style={{ color: 'rgba(255, 255, 255, 0.7)' }} href="#" variant='h1'>
+            Todo App
+          </MuiLink>
+          <br />
+          <span className={classes.author} href="#">
+            Github: <MuiLink href='https://github.com/sergeyyarkov/todo-app' target='_blank'><GitHubIcon className={classes.githubIcon} color='action' fontSize='small' /></MuiLink>
+          </span>
+        </Typography>
+      </div>
       <Divider />
-      <Link className={classes.link} to='/trash'>
-        <ListItem selected={history.location.pathname === '/trash'} button> 
+      <List>
+        <Link className={classes.link} to='/'>
+          <ListItem selected={history.location.pathname === '/'} button> 
+            <ListItemIcon>
+              <FormatListBulletedIcon />
+            </ListItemIcon>
+            <ListItemText primary={'Список дел'} />
+          </ListItem>
+        </Link>
+        <ListItem onClick={(e) => listItemSelectedHandler(e, 1)} button> 
           <ListItemIcon>
-            <DeleteIcon />
+            <CategoryIcon />
           </ListItemIcon>
-          <ListItemText primary={'Корзина'} />
+          <ListItemText primary={'Категории'} />
+          {collapseInfo.isCollapseOpen ? <ExpandLess /> : <ExpandMore />}
         </ListItem>
-      </Link>
-    </List>
-  </>
+        <Collapse in={collapseInfo.isCollapseOpen} timeout="auto" unmountOnExit>
+          <List component="div" disablePadding>
+            <Categories data={categories} history={history} classes={classes} />
+            <ListItem className={classes.addCategoryItem}>
+              <IconButton onClick={() => handleOpenModal()} aria-label="add">
+                <AddIcon />
+              </IconButton>
+            </ListItem>
+          </List>
+        </Collapse>
+        <Divider />
+        <Link className={classes.link} to='/trash'>
+          <ListItem selected={history.location.pathname === '/trash'} button> 
+            <ListItemIcon>
+              <DeleteIcon />
+            </ListItemIcon>
+            <ListItemText primary={'Корзина'} />
+          </ListItem>
+        </Link>
+      </List>
+    </>
   )
 }
 

client/src/containers/CategoryContainer/CategoryContainer.js

@@ -1,25 +1,46 @@
 import React from 'react';
 import Todos from '../../components/Todos/Todos'
+import UpdateCategoryModal from '../../components/Modals/Category/UpdateCategoryModal'
 import Fab from '../../components/Fab/Fab'
 import { Grid, Typography } from '@material-ui/core'
 
 import todos from '../../db/todos.json'
 
-// import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 
 const Category = () => {
-  // const { slug } = useParams()
+  const { slug } = useParams()
+  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [selectedCategory, setSelectedCategory] = React.useState({
+    id: ''
+  })
+ 
+  const handleOpenModal = () => {
+    setSelectedCategory({
+      id: slug
+    })
+    setIsModalOpen(true)
+  }
+  const handleCloseModal = () => {
+    setSelectedCategory({
+      id: ''
+    })
+    setIsModalOpen(false)
+  }
   return (
-    <Grid container spacing={2}>
-      <Fab size='large' ariaLabel='add' typeIcon='edit'/>
-      <Grid item xs={12}>
-        <Typography>
-          Сортируйте свои повседневные дела используя категории.
-        </Typography> 
+    <>
+      <UpdateCategoryModal isModalOpen={isModalOpen} handleCloseModal={handleCloseModal} selectedCategory={selectedCategory} setSelectedCategory={setSelectedCategory} />
+      <Fab size='large' ariaLabel='add' typeIcon='edit' handleOpenModal={handleOpenModal} />
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <Typography>
+            Сортируйте свои повседневные дела используя категории.
+          </Typography> 
+        </Grid>
+        {/* Здесь берем значение slug из query и передаем полученные данные в prop data !!!!  */}
+        <Todos data={todos} />
       </Grid>
-       {/* Здесь берем значение slug из query и передаем полученные данные в prop data !!!!  */}
-      <Todos data={todos} />
-    </Grid>
+    </>
   )
 }