From 8c3dbfd0d89da057eb8fc15d0592398ce1e5247e Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Sat, 13 Jun 2020 14:19:17 +0300 Subject: [PATCH] fixed modals --- client/src/App.js | 2 +- .../Modals/Category/UpdateCategoryModal.js | 14 ++++---- .../components/Modals/Todo/UpdateTodoModal.js | 2 ++ .../components/Nav/NavContent/NavContent.js | 2 +- client/src/components/Todos/Todos.js | 1 + .../CategoryContainer/CategoryContainer.js | 32 ++++++++----------- .../TodosContainer/TodosContainer.js | 4 +-- 7 files changed, 28 insertions(+), 29 deletions(-) diff --git a/client/src/App.js b/client/src/App.js index c5da74d..90cfb83 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -13,7 +13,7 @@ const App = ({ history }) => { - + diff --git a/client/src/components/Modals/Category/UpdateCategoryModal.js b/client/src/components/Modals/Category/UpdateCategoryModal.js index 4f8a6bf..a54bd96 100644 --- a/client/src/components/Modals/Category/UpdateCategoryModal.js +++ b/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({ - // id: target.name === 'title' ? target.value : selectedTodo.title, - // }) + setSelectedCategory({ + 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, diff --git a/client/src/components/Modals/Todo/UpdateTodoModal.js b/client/src/components/Modals/Todo/UpdateTodoModal.js index 7107fff..ff2182e 100644 --- a/client/src/components/Modals/Todo/UpdateTodoModal.js +++ b/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, diff --git a/client/src/components/Nav/NavContent/NavContent.js b/client/src/components/Nav/NavContent/NavContent.js index 5f0e72e..2341ec1 100644 --- a/client/src/components/Nav/NavContent/NavContent.js +++ b/client/src/components/Nav/NavContent/NavContent.js @@ -91,7 +91,7 @@ const NavContent = ({ history, handleOpenModal }) => { - handleOpenModal()} aria-label="add"> + diff --git a/client/src/components/Todos/Todos.js b/client/src/components/Todos/Todos.js index f0c1404..f1680fb 100644 --- a/client/src/components/Todos/Todos.js +++ b/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, diff --git a/client/src/containers/CategoryContainer/CategoryContainer.js b/client/src/containers/CategoryContainer/CategoryContainer.js index cf7934f..7eeb262 100644 --- a/client/src/containers/CategoryContainer/CategoryContainer.js +++ b/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({ - id: '' - }) - - const handleOpenModal = () => { - setSelectedCategory({ - id: slug - }) - setIsModalOpen(true) - } - const handleCloseModal = () => { - setSelectedCategory({ - id: '' - }) - setIsModalOpen(false) - } + const [selectedCategory, setSelectedCategory] = React.useState({ id: '', title: '' }) + + React.useEffect(() => { + setSelectedCategory({ id, title: findCategoryById(id).title }) + }, [id]); + + const handleOpenModal = () => setIsModalOpen(true) + const handleCloseModal = () => setIsModalOpen(false) + return ( <> @@ -35,7 +31,7 @@ const Category = () => { Сортируйте свои повседневные дела используя категории. - + {/* Здесь берем значение slug из query и передаем полученные данные в prop data !!!! */} diff --git a/client/src/containers/TodosContainer/TodosContainer.js b/client/src/containers/TodosContainer/TodosContainer.js index b987434..9e52d3f 100644 --- a/client/src/containers/TodosContainer/TodosContainer.js +++ b/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 = () => { Создавайте, редактируйте или удаляйте ваши повседневные дела. - + )