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

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

@@ -0,0 +1,94 @@
+import React, {FC, memo} from 'react';
+import {format} from 'date-fns';
+import {useFormik} from 'formik';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+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 {Button, TextField} from '@material-ui/core';
+import {LABELS} from '../../consts';
+
+type Props = {
+    isOpen: boolean;
+};
+
+const now = format(new Date(), VIEW_DATE_TIME);
+
+const CreateTaskModal: FC<Props> = ({isOpen}) => {
+    const form = useFormik<Partial<Task>>({
+        initialValues: {
+            title: '',
+            body: '',
+            start_at: now,
+            end_at: '',
+        },
+        onSubmit: () => {
+            // В аргументах приходят values. Ждем задачи со сторами для формы
+        },
+    });
+
+    return (
+        <Dialog open={isOpen}>
+            <form onSubmit={form.handleSubmit}>
+                <DialogTitle id="form-dialog-title">{LABELS.CREATE_TASK}</DialogTitle>
+                <DialogContent>
+                    <TextField
+                        autoFocus
+                        value={form.values.title}
+                        id="title"
+                        onChange={form.handleChange}
+                        margin="dense"
+                        label={LABELS.TITLE}
+                        fullWidth
+                    />
+                    <TextField
+                        value={form.values.body}
+                        id="body"
+                        onChange={form.handleChange}
+                        margin="dense"
+                        label={LABELS.DESCRIPTION}
+                        rowsMax={4}
+                        multiline
+                        fullWidth
+                    />
+                    <TextField
+                        id="start_at"
+                        value={form.values.start_at}
+                        label={LABELS.START_AT}
+                        type="datetime-local"
+                        onChange={form.handleChange}
+                        margin="dense"
+                        InputLabelProps={{
+                            shrink: true,
+                        }}
+                        fullWidth
+                    />
+                    <TextField
+                        id="end_at"
+                        value={form.values.end_at}
+                        label={LABELS.END_AT}
+                        type="datetime-local"
+                        onChange={form.handleChange}
+                        margin="dense"
+                        InputLabelProps={{
+                            shrink: true,
+                        }}
+                        fullWidth
+                    />
+                </DialogContent>
+                <DialogActions>
+                    <Button color="primary" type="button">
+                        {LABELS.CANCEL}
+                    </Button>
+                    <Button color="primary" type="submit">
+                        {LABELS.CREATE}
+                    </Button>
+                </DialogActions>
+            </form>
+        </Dialog>
+    );
+};
+
+export default memo(CreateTaskModal);

src/app/components/create-task-modal/index.ts

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

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>
     );
 };

src/app/components/top-menu/TopMenu.tsx

@@ -104,8 +104,9 @@ const TopMenu: React.FC<Props> = ({trigger}) => {
                                     <IconButton
                                         edge="start"
                                         color="inherit"
+                                        onClick={handleToggleSearch}
                                     >
-                                        <SearchIcon onClick={handleToggleSearch} />
+                                        <SearchIcon />
                                     </IconButton>
                                 )
                             }

src/app/consts.ts

@@ -5,6 +5,13 @@ export const LABELS = {
     ADD_TASK: 'Добавить задачу',
     ADD_FOLDER: 'Добавить папку',
     ADD_TAG: 'Добавить тег',
+    CREATE_TASK: 'Создание задачи',
+    CREATE: 'Создать',
+    CANCEL: 'Отмена',
+    TITLE: 'Заголовок',
+    DESCRIPTION: 'Описание',
+    START_AT: 'Начало',
+    END_AT: 'Окончание',
 } as const;
 
 export const BOTH_MENU_LINKS = [

src/app/enums.ts

@@ -0,0 +1,3 @@
+export enum ModalType {
+    CreateTask = 'createTask',
+}

src/app/types.ts

@@ -0,0 +1,5 @@
+import {ModalType} from './enums';
+
+export type QueryParams = {
+    modal?: ModalType;
+};

src/app/utils.ts

@@ -0,0 +1,7 @@
+import {QueryParsers} from '_utils/getQueryFromUrl';
+import {stringParser} from '_utils/queryParsers';
+import {QueryParams} from './types';
+
+export const queryParsers: QueryParsers<QueryParams> = {
+    modal: stringParser(),
+};