Добавление модалки создание задачи, добавление formik либы (#62)

src/app/components/page/Page.tsx

@@ -1,7 +1,6 @@
-import React, {Fragment, memo} from 'react';
+import React, {Fragment, memo, useMemo} from 'react';
 import {Route, Switch} from 'react-router-dom';
 import {Container, createStyles, makeStyles, useScrollTrigger} from '@material-ui/core';
-
 import mainPageRouter from '_pages/main/routing';
 import chaosBoxPageRouter from '_pages/chaos-box/routing';
 import calendarPageRouter from '_pages/calendar/routing';
@@ -11,9 +10,13 @@ import settingsPageRouter from '_pages/settings/routing';
 import signInPageRouter from '_pages/sign-in/routing';
 import tagsPageRouter from '_pages/tags/routing';
 import NotFoundPage from '_pages/not-found/components/page';
+import {useQuery} from '_hooks/useQuery';
 import TopMenu from '../top-menu';
 import './Page.scss';
 import BothMenu from '../both-menu';
+import {queryParsers} from '../../utils';
+import {ModalType} from '../../enums';
+import CreateTaskModal from '../create-task-modal';
 
 const useStyles = makeStyles(() =>
     createStyles({
@@ -28,6 +31,8 @@ const useStyles = makeStyles(() =>
 const Page: React.FC = () => {
     const classes = useStyles();
     const trigger = useScrollTrigger();
+    const {modal} = useQuery(queryParsers);
+    const isOpenCreateTaskModal = useMemo(() => modal === ModalType.CreateTask, [modal]);
     return (
         <Fragment>
             <div className={classes.container}>
@@ -49,6 +54,7 @@ const Page: React.FC = () => {
                 </Container>
                 <BothMenu trigger={trigger} />
             </div>
+            <CreateTaskModal isOpen={isOpenCreateTaskModal} />
         </Fragment>
     );
 };