Добавление открытия / закрытия модалки создания задачи (#78)

* Добавить открытие\закрытие модалки создания задачи #63

написал каркас функции и рендеринга,
настроил открытие и закрытие модалки

.eslintrc.json

@@ -97,6 +97,7 @@
         "@typescript-eslint/explicit-module-boundary-types": "off",
         "@typescript-eslint/no-unused-vars": "warn",
         "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/ban-types": "off",
         "array-bracket-spacing": ["warn", "never"],
         "block-spacing": ["warn", "never"],
         "brace-style": ["warn", "1tbs", {"allowSingleLine": true}],

src/app/components/both-menu/BothMenu.tsx

@@ -10,19 +10,19 @@ import {NavLink} from 'react-router-dom';
 import {ROUTES} from '_consts/common';
 import ToggleMenu from '../toggle-menu';
 import {BOTH_MENU_LINKS} from '../../consts';
-import PopupList from '../popup-list/PopupList';
+import PopupList from '../popup-list';
 
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({
         iconRight: {
-            marginRight: theme.spacing(2),
+            marginRight: theme.spacing(2)
         },
         appBar: {
             top: 'auto',
-            bottom: 0,
+            bottom: 0
         },
         grow: {
-            flexGrow: 1,
+            flexGrow: 1
         },
         fabButton: {
             position: 'absolute',
@@ -30,9 +30,9 @@ const useStyles = makeStyles((theme: Theme) =>
             top: -30,
             left: 0,
             right: 0,
-            margin: '0 auto',
+            margin: '0 auto'
-        },
+        }
-    }),
+    })
 );
 
 type Props = {
@@ -44,58 +44,37 @@ const BothMenu: React.FC<Props> = ({trigger}) => {
 
     return (
         <Slide appear={false} direction="up" in={!trigger}>
-            <AppBar
+            <AppBar position="fixed" color="primary" className={classes.appBar}>
-                position="fixed"
-                color="primary"
-                className={classes.appBar}
-            >
                 <Toolbar>
-                    <IconButton
+                    <IconButton className={classes.iconRight} edge="start" color="inherit">
-                        className={classes.iconRight}
-                        edge="start"
-                        color="inherit"
-                    >
                         <NavLink to={ROUTES.CHAOS_BOX}>
                             <MoveToInboxIcon />
                         </NavLink>
                     </IconButton>
-                    <IconButton
+                    <IconButton edge="end" color="inherit">
-                        edge="end"
-                        color="inherit"
-                    >
                         <NavLink to={ROUTES.PROJECTS}>
                             <ListAltIcon />
                         </NavLink>
                     </IconButton>
                     <PopupList>
-                        <Fab
+                        <Fab color="secondary" className={classes.fabButton}>
-                            color="secondary"
-                            className={classes.fabButton}
-                        >
                             <AddIcon />
                         </Fab>
                     </PopupList>
                     <div className={classes.grow} />
-                    <IconButton
+                    <IconButton className={classes.iconRight} edge="start" color="inherit">
-                        className={classes.iconRight}
-                        edge="start"
-                        color="inherit"
-                    >
                         <NavLink to={ROUTES.CALENDAR}>
                             <CalendarTodayIcon />
                         </NavLink>
                     </IconButton>
                     <ToggleMenu items={BOTH_MENU_LINKS}>
-                        <IconButton
+                        <IconButton edge="end" color="inherit">
-                            edge="end"
-                            color="inherit"
-                        >
                             <MoreIcon />
                         </IconButton>
                     </ToggleMenu>
                 </Toolbar>
             </AppBar>
-        </Slide >
+        </Slide>
     );
 };
 

src/app/components/create-task-modal/CreateTaskModal.tsx

@@ -1,4 +1,5 @@
-import React, {FC, memo} from 'react';
+import React, {FC, memo, useCallback} from 'react';
+import {useHistory} from 'react-router-dom';
 import {format} from 'date-fns';
 import {useFormik} from 'formik';
 import Dialog from '@material-ui/core/Dialog';
@@ -7,6 +8,8 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import {Task} from '_types/common';
 import {VIEW_DATE_TIME} from '_consts/common';
+import {buildPath} from '_utils/buildPath';
+import {PageType} from '_enums/common';
 import {Button, TextField} from '@material-ui/core';
 import {LABELS} from '../../consts';
 
@@ -17,18 +20,23 @@ type Props = {
 const now = format(new Date(), VIEW_DATE_TIME);
 
 const CreateTaskModal: FC<Props> = ({isOpen}) => {
+    const history = useHistory();
     const form = useFormik<Partial<Task>>({
         initialValues: {
             title: '',
             body: '',
             start_at: now,
-            end_at: '',
+            end_at: ''
         },
         onSubmit: () => {
             // В аргументах приходят values. Ждем задачи со сторами для формы
-        },
+        }
     });
 
+    const handleClose = useCallback(() => {
+        history.push(buildPath({pageType: PageType.Main}));
+    }, [history]);
+
     return (
         <Dialog open={isOpen}>
             <form onSubmit={form.handleSubmit}>
@@ -61,7 +69,7 @@ const CreateTaskModal: FC<Props> = ({isOpen}) => {
                         onChange={form.handleChange}
                         margin="dense"
                         InputLabelProps={{
-                            shrink: true,
+                            shrink: true
                         }}
                         fullWidth
                     />
@@ -73,13 +81,13 @@ const CreateTaskModal: FC<Props> = ({isOpen}) => {
                         onChange={form.handleChange}
                         margin="dense"
                         InputLabelProps={{
-                            shrink: true,
+                            shrink: true
                         }}
                         fullWidth
                     />
                 </DialogContent>
                 <DialogActions>
-                    <Button color="primary" type="button">
+                    <Button onClick={handleClose} color="primary" type="button">
                         {LABELS.CANCEL}
                     </Button>
                     <Button color="primary" type="submit">

src/app/components/page/Page.tsx

@@ -23,9 +23,9 @@ const useStyles = makeStyles(() =>
         container: {
             height: '100hv',
             display: 'flex',
-            flexDirection: 'column',
+            flexDirection: 'column'
-        },
+        }
-    }),
+    })
 );
 
 const Page: React.FC = () => {

src/app/components/popup-list-item/PopupListItem.tsx

@@ -0,0 +1,26 @@
+import {ListItem, ListItemText} from '@material-ui/core';
+import React, {memo, useCallback} from 'react';
+import {useHistory} from 'react-router-dom';
+
+type PopupListItemProps = {
+    item: string;
+    url: string;
+    setOpen: (isOpen: boolean) => void;
+};
+
+const PopupListItem: React.FC<PopupListItemProps> = ({item, url, setOpen}) => {
+    const history = useHistory();
+
+    const handleClick = useCallback(() => {
+        setOpen(false);
+        history.push(url);
+    }, [history, setOpen, url]);
+
+    return (
+        <ListItem button onClick={handleClick}>
+            <ListItemText primary={item} />
+        </ListItem>
+    );
+};
+
+export default memo(PopupListItem);

src/app/components/popup-list-item/index.ts

@@ -0,0 +1 @@
+export {default} from './PopupListItem';

src/app/components/popup-list/PopupList.tsx

@@ -1,10 +1,9 @@
-import {Dialog, List, ListItem, ListItemText} from '@material-ui/core';
+import {Dialog, List} from '@material-ui/core';
 import React, {Fragment, memo, PropsWithChildren, useCallback} from 'react';
-import {v4} from 'uuid';
 import {MENU_ADDS} from '../../consts';
+import PopupListItem from '../popup-list-item';
 
-type Props = PropsWithChildren<{
+type Props = PropsWithChildren<{}>;
-}>;
 
 const PopupList: React.FC<Props> = ({children}) => {
     const [open, setOpen] = React.useState(false);
@@ -22,15 +21,11 @@ const PopupList: React.FC<Props> = ({children}) => {
             <Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={open}>
                 <List>
                     {MENU_ADDS.map(item => (
-                        <ListItem button onClick={handleClose} key={v4()}>
+                        <PopupListItem item={item.text} url={item.url} setOpen={setOpen} key={item.id} />
-                            <ListItemText primary={item} />
-                        </ListItem>
                     ))}
                 </List>
             </Dialog>
-            <div onClick={handleClickOpen}>
+            <div onClick={handleClickOpen}>{children}</div>
-                {children}
-            </div>
         </Fragment>
     );
 };

src/app/components/popup-list/index.ts

@@ -0,0 +1 @@
+export {default} from './PopupList';

src/app/consts.ts

@@ -1,4 +1,8 @@
+import {v4} from 'uuid';
 import {ROUTES} from '_consts/common';
+import {PageType} from '../core/enums/common';
+import {buildPath} from '../core/utils/buildPath';
+import {AddMenu, ModalType} from './enums';
 
 export const LABELS = {
     SEACRH: 'Поиск',
@@ -11,7 +15,7 @@ export const LABELS = {
     TITLE: 'Заголовок',
     DESCRIPTION: 'Описание',
     START_AT: 'Начало',
-    END_AT: 'Окончание',
+    END_AT: 'Окончание'
 } as const;
 
 export const BOTH_MENU_LINKS = [
@@ -29,4 +33,23 @@ export const BOTH_MENU_LINKS = [
     }
 ];
 
-export const MENU_ADDS = [LABELS.ADD_TASK, LABELS.ADD_FOLDER, LABELS.ADD_TAG];
+export const MENU_ADDS = [
+    {
+        id: v4(),
+        text: LABELS.ADD_TASK,
+        type: AddMenu.AddTask,
+        url: buildPath({pageType: PageType.Main, query: {modal: ModalType.CreateTask}})
+    },
+    {
+        id: v4(),
+        text: LABELS.ADD_FOLDER,
+        type: AddMenu.AddFolder,
+        url: buildPath({pageType: PageType.Main, query: {modal: ModalType.CreateFolder}})
+    },
+    {
+        id: v4(),
+        text: LABELS.ADD_TAG,
+        type: AddMenu.AddTag,
+        url: buildPath({pageType: PageType.Main, query: {modal: ModalType.CreateTag}})
+    }
+];

src/app/enums.ts

@@ -1,3 +1,11 @@
 export enum ModalType {
     CreateTask = 'createTask',
+    CreateFolder = 'createFolder',
+    CreateTag = 'createTag'
+}
+
+export enum AddMenu {
+    AddTask = 'addTask',
+    AddFolder = 'addFolder',
+    AddTag = 'addTag'
 }