fixed modals

client/src/App.js

@@ -13,7 +13,7 @@ const App = ({ history }) => {
       <CssBaseLine />
       <Layout history={history}>
         <Switch>
-          <Route history={history} exact path='/category/:slug' component={CategoryContainer} />
+          <Route history={history} exact path='/category/:id' component={CategoryContainer} />
           <Route history={history} exact path='/trash' component={TrashContainer} />
           <Route history={history} exact path='/' component={TodosContainer} />
           <Route path='/404' component={NotFoundContainer} />

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

@@ -10,19 +10,19 @@ const UpdateCategoryModal = ({ isModalOpen, handleCloseModal, selectedCategory,
     e.preventDefault()
     const elements = e.target.elements
     const data = {
-      id: elements.title.value,
+      id: selectedCategory.id,
+      title: elements.title.value
     }
     handleCloseModal()
     console.log('Request on update category:', data)
   }
 
-  console.log(selectedCategory)
-
   const handleFieldChange = e => {
     const target = e.target
-    // setSelectedCategory({
+    setSelectedCategory({
-    //   id: target.name === 'title' ? target.value : selectedTodo.title,
+      id: selectedCategory.id,
-    // })
+      title: target.name === 'title' ? target.value : selectedCategory.title
+    })
   }
 
   return (
@@ -41,7 +41,7 @@ const UpdateCategoryModal = ({ isModalOpen, handleCloseModal, selectedCategory,
               placeholder='Название вашей категории'
               variant="outlined"
               className={classes.textField}
-              value={selectedCategory.id}
+              value={selectedCategory.title}
               onChange={handleFieldChange}
               InputLabelProps={{
                 shrink: true,

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

@@ -11,6 +11,7 @@ const UpdateTodoModal = ({ isModalOpen, handleCloseModal, selectedTodo, setSelec
     e.preventDefault()
     const elements = e.target.elements
     const data = {
+      id: selectedTodo.id,
       title: elements.title.value,
       description: elements.description.value,
       categoryId: elements.category.value,
@@ -23,6 +24,7 @@ const UpdateTodoModal = ({ isModalOpen, handleCloseModal, selectedTodo, setSelec
   const handleFieldChange = e => {
     const target = e.target
     setSelectedTodo({
+      id: selectedTodo.id,
       title: target.name === 'title' ? target.value : selectedTodo.title,
       description: target.name === 'description' ? target.value : selectedTodo.description,
       category: target.name === 'category' ? target.value : selectedTodo.category,

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

@@ -91,7 +91,7 @@ const NavContent = ({ history, handleOpenModal }) => {
           <List component="div" disablePadding>
             <Categories data={categories} history={history} classes={classes} />
             <ListItem className={classes.addCategoryItem}>
-              <IconButton onClick={() => handleOpenModal()} aria-label="add">
+              <IconButton onClick={handleOpenModal} aria-label="add">
                 <AddIcon />
               </IconButton>
             </ListItem>

client/src/components/Todos/Todos.js

@@ -48,6 +48,7 @@ const Todos = ({ data, fromTrashContainer }) => {
   const [isModalOpen, setIsModalOpen] = React.useState(false)
   const handleOpenModal = todo => {
     setSelectedTodo({
+      id: todo._id.$oid,
       title: todo.title,
       description: todo.description,
       category: todo.categoryId,

client/src/containers/CategoryContainer/CategoryContainer.js

@@ -5,28 +5,24 @@ import Fab from '../../components/Fab/Fab'
 import { Grid, Typography } from '@material-ui/core'
 
 import todos from '../../db/todos.json'
+import categories from '../../db/categories.json'
 
 import { useParams } from 'react-router-dom'
 
 const Category = () => {
-  const { slug } = useParams()
+  const findCategoryById = id => categories.find(category => category._id.$oid === id)
+
+  const { id } = useParams()
   const [isModalOpen, setIsModalOpen] = React.useState(false)
-  const [selectedCategory, setSelectedCategory] = React.useState({
+  const [selectedCategory, setSelectedCategory] = React.useState({ id: '', title: '' })
-    id: ''
+
-  })
+  React.useEffect(() => {
- 
+    setSelectedCategory({ id, title: findCategoryById(id).title })
-  const handleOpenModal = () => {
+  }, [id]);
-    setSelectedCategory({
+  
-      id: slug
+  const handleOpenModal = () => setIsModalOpen(true)
-    })
+  const handleCloseModal = () => setIsModalOpen(false)
-    setIsModalOpen(true)
+  
-  }
-  const handleCloseModal = () => {
-    setSelectedCategory({
-      id: ''
-    })
-    setIsModalOpen(false)
-  }
   return (
     <>
       <UpdateCategoryModal isModalOpen={isModalOpen} handleCloseModal={handleCloseModal} selectedCategory={selectedCategory} setSelectedCategory={setSelectedCategory} />
@@ -35,7 +31,7 @@ const Category = () => {
         <Grid item xs={12}>
           <Typography>
             Сортируйте свои повседневные дела используя категории.
-          </Typography> 
+          </Typography>
         </Grid>
         {/* Здесь берем значение slug из query и передаем полученные данные в prop data !!!!  */}
         <Todos data={todos} />

client/src/containers/TodosContainer/TodosContainer.js

@@ -4,7 +4,7 @@ import Todos from '../../components/Todos/Todos'
 import CreateTodoModal from '../../components/Modals/Todo/CreateTodoModal'
 import { Typography, Grid } from '@material-ui/core'
 
-import todosData from '../../db/todos.json'
+import todos from '../../db/todos.json'
 
 const TodosContainer = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false)
@@ -20,7 +20,7 @@ const TodosContainer = () => {
               Создавайте, редактируйте или удаляйте ваши повседневные дела.
             </Typography> 
           </Grid>     
-          <Todos data={todosData} />
+          <Todos data={todos} />
       </Grid>
     </>
   )