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

.eslintrc.json

@@ -47,7 +47,7 @@
         "import/extensions": 0,
         "react/prop-types": 0,
         "no-underscore-dangle": 0,
-        "import/imports-first": ["error", "absolute-first"],
+        "import/imports-first": ["warn", "absolute-first"],
         "import/prefer-default-export": 0,
         "import/no-unresolved": 0,
         "import/newline-after-import": "error",

package-lock.json

@@ -7942,6 +7942,27 @@
                 "mime-types": "^2.1.12"
             }
         },
+        "formik": {
+            "version": "2.2.6",
+            "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.6.tgz",
+            "integrity": "sha512-Kxk2zQRafy56zhLmrzcbryUpMBvT0tal5IvcifK5+4YNGelKsnrODFJ0sZQRMQboblWNym4lAW3bt+tf2vApSA==",
+            "requires": {
+                "deepmerge": "^2.1.1",
+                "hoist-non-react-statics": "^3.3.0",
+                "lodash": "^4.17.14",
+                "lodash-es": "^4.17.14",
+                "react-fast-compare": "^2.0.1",
+                "tiny-warning": "^1.0.2",
+                "tslib": "^1.10.0"
+            },
+            "dependencies": {
+                "deepmerge": {
+                    "version": "2.2.1",
+                    "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+                    "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+                }
+            }
+        },
         "forwarded": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -11476,6 +11497,11 @@
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
             "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
         },
+        "lodash-es": {
+            "version": "4.17.20",
+            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.20.tgz",
+            "integrity": "sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA=="
+        },
         "lodash._reinterpolate": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -16046,6 +16072,11 @@
             "integrity": "sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==",
             "dev": true
         },
+        "react-fast-compare": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+            "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+        },
         "react-is": {
             "version": "17.0.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",

package.json

@@ -12,6 +12,7 @@
         "axios": "^0.21.0",
         "convert-layout": "^0.8.2",
         "date-fns": "^2.16.1",
+        "formik": "^2.2.6",
         "fp-ts": "^2.8.5",
         "history": "^5.0.0",
         "lodash": "^4.17.20",

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(),
+};

src/core/consts/common.ts

@@ -21,3 +21,5 @@ export const PAGE_TITLE = {
     [PageType.Settings]: 'Settings',
     [PageType.SigIn]: 'SigIn',
 };
+
+export const VIEW_DATE_TIME = 'yyyy-MM-dd\'T\'HH:mm';