bubble/todo-app
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/todo-app.git synced 2026-10-11 10:29:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

fixed modals

Browse Source
This commit is contained in:
Sergey Yarkov 2020-06-13 14:19:17 +03:00
parent 5357e3c0ca
commit 8c3dbfd0d8
7 changed files with 28 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/App.js
View File

@ -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} />

14
client/src/components/Modals/Category/UpdateCategoryModal.js
View File

@ -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,

2
client/src/components/Modals/Todo/UpdateTodoModal.js
View File

@ -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,

2
client/src/components/Nav/NavContent/NavContent.js
View File

@ -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>

1
client/src/components/Todos/Todos.js
View File

@ -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,

32
client/src/containers/CategoryContainer/CategoryContainer.js
View File

@ -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 (
<>
<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} />

4
client/src/containers/TodosContainer/TodosContainer.js
View File

@ -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>
</>
)