diff --git a/client/src/components/Categories/Categories.js b/client/src/components/Categories/Categories.js index e4bad98..9cf6739 100644 --- a/client/src/components/Categories/Categories.js +++ b/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 ( - - - + + + ) diff --git a/client/src/components/Modals/Category/CreateCategoryModal.js b/client/src/components/Modals/Category/CreateCategoryModal.js index e69de29..458db3f 100644 --- a/client/src/components/Modals/Category/CreateCategoryModal.js +++ b/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 ( +
+ + + Добавить новую категорию + + +
+ + + + + + +
+ +
+ ) +} + +export default CreateCategoryModal \ No newline at end of file diff --git a/client/src/components/Modals/Category/UpdateCategoryModal.js b/client/src/components/Modals/Category/UpdateCategoryModal.js index e69de29..4f8a6bf 100644 --- a/client/src/components/Modals/Category/UpdateCategoryModal.js +++ b/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 ( +
+ + + + Изменить категорию + + +
+ + + + + + +
+ +
+ ) +} + +export default UpdateCategoryModal \ No newline at end of file diff --git a/client/src/components/Modals/Todo/CreateTodoModal.js b/client/src/components/Modals/Todo/CreateTodoModal.js index 472b2c5..812dd8c 100644 --- a/client/src/components/Modals/Todo/CreateTodoModal.js +++ b/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' diff --git a/client/src/components/Modals/Todo/UpdateTodoModal.js b/client/src/components/Modals/Todo/UpdateTodoModal.js index 48b3bfb..7107fff 100644 --- a/client/src/components/Modals/Todo/UpdateTodoModal.js +++ b/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' diff --git a/client/src/components/Modals/Todo/styles.js b/client/src/components/Modals/styles.js similarity index 100% rename from client/src/components/Modals/Todo/styles.js rename to client/src/components/Modals/styles.js diff --git a/client/src/components/Nav/Nav.js b/client/src/components/Nav/Nav.js index 000ed2a..87b04d8 100644 --- a/client/src/components/Nav/Nav.js +++ b/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 ( - + <> + + + ) } diff --git a/client/src/components/Nav/NavContent/NavContent.js b/client/src/components/Nav/NavContent/NavContent.js index ee23089..5f0e72e 100644 --- a/client/src/components/Nav/NavContent/NavContent.js +++ b/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 ( <> -
- - - Todo App - -
- - Github: - - -
- - - - - - - - - - - listItemSelectedHandler(e, 1)} button> - - - - - {collapseInfo.isCollapseOpen ? : } - - - - - - - - - - - +
+ + + Todo App + +
+ + Github: + + +
- - + + + + + + + + + + listItemSelectedHandler(e, 1)} button> - + - + + {collapseInfo.isCollapseOpen ? : } - - - + + + + + handleOpenModal()} aria-label="add"> + + + + + + + + + + + + + + + + ) } diff --git a/client/src/containers/CategoryContainer/CategoryContainer.js b/client/src/containers/CategoryContainer/CategoryContainer.js index 0245f51..cf7934f 100644 --- a/client/src/containers/CategoryContainer/CategoryContainer.js +++ b/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 ( - - - - - Сортируйте свои повседневные дела используя категории. - + <> + + + + + + Сортируйте свои повседневные дела используя категории. + + + {/* Здесь берем значение slug из query и передаем полученные данные в prop data !!!! */} + - {/* Здесь берем значение slug из query и передаем полученные данные в prop data !!!! */} - - + ) }