modal todo

client/src/App.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Route, Switch, Redirect, withRouter } from "react-router-dom"
 import Layout from './components/Layout/Layout'
-import Todos from './containers/Todos/Todos'
+import TodosContainer from './containers/TodosContainer/TodosContainer'
-import Category from './containers/Category/Category'
+import CategoryContainer from './containers/CategoryContainer/CategoryContainer'
-import Trash from './containers/Trash/Trash'
+import TrashContainer from './containers/TrashContainer/TrashContainer'
-import NotFound from './containers/NotFound/NotFound'
+import NotFoundContainer from './containers/NotFoundContainer/NotFoundContainer'
 import CssBaseLine from '@material-ui/core/CssBaseline'
 
 const App = ({ history }) => {
@@ -13,10 +13,10 @@ const App = ({ history }) => {
       <CssBaseLine />
       <Layout history={history}>
         <Switch>
-          <Route history={history} exact path='/category/:slug' component={Category} />
+          <Route history={history} exact path='/category/:slug' component={CategoryContainer} />
-          <Route history={history} exact path='/trash' component={Trash} />
+          <Route history={history} exact path='/trash' component={TrashContainer} />
-          <Route history={history} exact path='/' component={Todos} />
+          <Route history={history} exact path='/' component={TodosContainer} />
-          <Route path='/404' component={NotFound} />
+          <Route path='/404' component={NotFoundContainer} />
           <Redirect from='*' to='/404' />
         </Switch>
       </Layout>

client/src/components/Fab/Fab.js

@@ -23,10 +23,10 @@ const renderIcon = (typeIcon) => {
   }
 }
 
-const FabComponent = ({ typeIcon, color, secondary, size, ariaLabel }) => {
+const FabComponent = ({ typeIcon, color, secondary, size, ariaLabel, handleOpenModal }) => {
   const classes = useStyles()
   return (
-    <Fab className={classes.fab} color={color} size={size} secondary={secondary} aria-label={ariaLabel}>
+    <Fab className={classes.fab} onClick={handleOpenModal} color={color} size={size} secondary={secondary} aria-label={ariaLabel}>
       {renderIcon(typeIcon)}
     </Fab>
   )

client/src/components/Todos/TodoModal/TodosModal.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import Fab from '../../../components/Fab/Fab'
+import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField, Select, MenuItem, InputLabel, FormControl, makeStyles } from '@material-ui/core'
+
+const useStyles = makeStyles(() => ({
+  dialog: {
+    width: 500
+  },
+  form: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  textField: {
+    margin: '10px 0px'
+  },
+  selectField: {
+    margin: '10px 0px'
+  }
+}))
+
+const TodosModal = () => {
+  const classes = useStyles()
+  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [selectedCategory, setSelectedCategory] = React.useState('');
+
+  const handleSelectChange = e => {
+    setSelectedCategory(e.target.value);
+  };
+
+  const handleFormSubmit = e => {
+    e.preventDefault()
+    const elements = e.target.elements
+    const data = {
+      title: elements.title.value,
+      description: elements.description.value,
+      category: elements.category.value,
+      deadline: elements.deadline.value
+    }
+    handleCloseModal()
+    console.log(data)
+  }
+
+  const handleOpenModal = () => {
+    setIsModalOpen(true)
+  }
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false)
+  }
+
+  return (
+    <div>
+      <Fab typeIcon='add' color="secondary" size='large' ariaLabel="add" handleOpenModal={handleOpenModal} />
+      <Dialog fullWidth={true} open={isModalOpen} onClose={handleCloseModal} color='default'>
+        <DialogTitle> 
+          Добавить новую запись
+        </DialogTitle>
+        <DialogContent>
+          <form onSubmit={handleFormSubmit} noValidate autoComplete="off" className={classes.form}>
+            <TextField 
+              name='title'
+              label="Название вашей записи"
+              margin="normal"
+              placeholder='Название вашей записи'
+              variant="outlined"
+              className={classes.textField}
+              InputLabelProps={{
+                shrink: true,
+              }}
+            />
+            <TextField 
+              name='description'
+              label="Описание"
+              margin="normal"
+              placeholder='Описание'
+              variant="outlined"
+              className={classes.textField}
+              InputLabelProps={{
+                shrink: true,
+              }}
+            />
+            <FormControl variant="outlined" className={classes.selectField}>
+              <InputLabel id="category-outlined-label">Категория</InputLabel>
+              <Select
+                labelId="category-outlined-label"
+                id="demo-simple-select-outlined"
+                name='category'
+                value={selectedCategory}
+                onChange={handleSelectChange}
+                label="Категория"
+              >
+                <MenuItem value=""><em>None</em></MenuItem>
+                <MenuItem value='Категория 1'>Категория 1</MenuItem>
+                <MenuItem value='Категория 2'>Категория 2</MenuItem>
+                <MenuItem value='Категория 3'>Категория 3</MenuItem>
+              </Select>
+            </FormControl>
+            <TextField
+              name='deadline'
+              label="Дедлайн"
+              variant="outlined"
+              type="datetime-local"
+              className={classes.textField}
+              InputLabelProps={{
+                shrink: true,
+              }}
+            />
+            <DialogActions>
+              <Button type='submit' color="default">
+                Добавить
+              </Button>
+              <Button onClick={handleCloseModal} color="secondary">
+                Закрыть
+              </Button>
+            </DialogActions>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
+export default TodosModal

client/src/containers/CategoryContainer/CategoryContainer.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Cards from '../../components/Cards/Cards'
+import Todos from '../../components/Todos/Todos'
 import Fab from '../../components/Fab/Fab'
 import { Grid, Typography } from '@material-ui/core'
 
@@ -12,10 +12,10 @@ const Category = () => {
       <Fab size='large' ariaLabel='add' typeIcon='edit'/>
       <Grid item xs={12}>
         <Typography>
-          Сортируйте свои повседневные задачи используя категории.
+          Сортируйте свои повседневные дела используя категории.
         </Typography> 
       </Grid> 
-      <Cards data={[1,2,3]} />
+      <Todos data={[1,2,3]} />
     </Grid>
   )
 }

client/src/containers/NotFoundContainer/NotFoundContainer.js

@@ -6,7 +6,7 @@ const Trash = () => {
     <Grid container spacing={2}>
       <Grid item xs={12}>
         <Typography>
-        <span role='img' aria-label="cross mark">❌</span> Ошибка! Такого маршрута не существует.
+        <span role='img' aria-label="cross mark">❌</span> Ошибка! Такой страницы не существует.
         </Typography> 
       </Grid> 
     </Grid>

client/src/containers/Todos/Todos.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import Cards from '../../components/Cards/Cards'
-import Fab from '../../components/Fab/Fab'
-import { Typography, Grid } from '@material-ui/core'
-
-const Todos = () => {
-  return (
-    <Grid container spacing={2}>
-      <Fab typeIcon='add' color="secondary" size='large' ariaLabel="add" />
-        <Grid item xs={12}>
-          <Typography>
-            Создавайте, редактируйте или удаляйте ваши повседневные дела.
-          </Typography> 
-        </Grid>     
-        <Cards data={[1,2,3,4,5,6]} />
-    </Grid>
-  )
-}
-
-export default Todos

client/src/containers/TodosContainer/TodosContainer.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Todos from '../../components/Todos/Todos'
+import TodosModal from '../../components/Todos/TodoModal/TodosModal'
+import { Typography, Grid } from '@material-ui/core'
+
+const TodosContainer = () => {
+  return (
+    <>
+      <TodosModal />
+      <Grid container spacing={2}>
+          <Grid item xs={12}>
+            <Typography>
+              Создавайте, редактируйте или удаляйте ваши повседневные дела.
+            </Typography> 
+          </Grid>     
+          <Todos data={[1,2,3,4,5,6]} />
+      </Grid>
+    </>
+  )
+}
+
+export default TodosContainer

client/src/containers/TrashContainer/TrashContainer.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Cards from '../../components/Cards/Cards'
+import Todos from '../../components/Todos/Todos'
 import { Grid, Typography } from '@material-ui/core'
 
 const Trash = () => {
@@ -10,7 +10,7 @@ const Trash = () => {
           Здесь находятся ваши недавно удаленные записи, вы можете их легко восстановить.
         </Typography> 
       </Grid> 
-      <Cards data={[1,2]} />
+      <Todos data={[1,2]} />
     </Grid>
   )
 }

client/src/theme.js

@@ -5,7 +5,7 @@ const theme = createMuiTheme({
   palette: {
     type: 'dark',
     primary: {
-      main: '#0d47a1'
+      main: '#0091ea'
     },
     secondary: red,
     error: red