From 72988d7d342bf07c0a16252763f5ddfb00635024 Mon Sep 17 00:00:00 2001 From: Nikolay <46225163+vigdorov@users.noreply.github.com> Date: Sat, 9 Jan 2021 21:41:26 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB=D0=BA=D0=B8?= =?UTF-8?q?=20=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=B7?= =?UTF-8?q?=D0=B0=D0=B4=D0=B0=D1=87=D0=B8,=20=D0=B4=D0=BE=D0=B1=D0=B0?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20formik=20=D0=BB=D0=B8?= =?UTF-8?q?=D0=B1=D1=8B=20(#62)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.json | 2 +- package-lock.json | 31 ++++++ package.json | 1 + .../create-task-modal/CreateTaskModal.tsx | 94 +++++++++++++++++++ src/app/components/create-task-modal/index.ts | 1 + src/app/components/page/Page.tsx | 10 +- src/app/components/top-menu/TopMenu.tsx | 3 +- src/app/consts.ts | 7 ++ src/app/enums.ts | 3 + src/app/types.ts | 5 + src/app/utils.ts | 7 ++ src/core/consts/common.ts | 2 + 12 files changed, 162 insertions(+), 4 deletions(-) create mode 100644 src/app/components/create-task-modal/CreateTaskModal.tsx create mode 100644 src/app/components/create-task-modal/index.ts create mode 100644 src/app/enums.ts create mode 100644 src/app/types.ts create mode 100644 src/app/utils.ts diff --git a/.eslintrc.json b/.eslintrc.json index 1244799..c38f6d5 100644 --- a/.eslintrc.json +++ b/.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", diff --git a/package-lock.json b/package-lock.json index 8e2bd9c..2b565f6 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 629f8d0..6ee1d3d 100644 --- a/package.json +++ b/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", diff --git a/src/app/components/create-task-modal/CreateTaskModal.tsx b/src/app/components/create-task-modal/CreateTaskModal.tsx new file mode 100644 index 0000000..d9b7bbc --- /dev/null +++ b/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 = ({isOpen}) => { + const form = useFormik>({ + initialValues: { + title: '', + body: '', + start_at: now, + end_at: '', + }, + onSubmit: () => { + // В аргументах приходят values. Ждем задачи со сторами для формы + }, + }); + + return ( + +
+ {LABELS.CREATE_TASK} + + + + + + + + + + +
+ + ); +}; + +export default memo(CreateTaskModal); diff --git a/src/app/components/create-task-modal/index.ts b/src/app/components/create-task-modal/index.ts new file mode 100644 index 0000000..8cd6f42 --- /dev/null +++ b/src/app/components/create-task-modal/index.ts @@ -0,0 +1 @@ +export {default} from './CreateTaskModal'; diff --git a/src/app/components/page/Page.tsx b/src/app/components/page/Page.tsx index 9ba5dfd..aeabb2d 100644 --- a/src/app/components/page/Page.tsx +++ b/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 (
@@ -49,6 +54,7 @@ const Page: React.FC = () => {
+ ); }; diff --git a/src/app/components/top-menu/TopMenu.tsx b/src/app/components/top-menu/TopMenu.tsx index 1baae7b..c9810a2 100644 --- a/src/app/components/top-menu/TopMenu.tsx +++ b/src/app/components/top-menu/TopMenu.tsx @@ -104,8 +104,9 @@ const TopMenu: React.FC = ({trigger}) => { - + ) } diff --git a/src/app/consts.ts b/src/app/consts.ts index 5d763fb..fffc959 100644 --- a/src/app/consts.ts +++ b/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 = [ diff --git a/src/app/enums.ts b/src/app/enums.ts new file mode 100644 index 0000000..591d084 --- /dev/null +++ b/src/app/enums.ts @@ -0,0 +1,3 @@ +export enum ModalType { + CreateTask = 'createTask', +} diff --git a/src/app/types.ts b/src/app/types.ts new file mode 100644 index 0000000..7d1f828 --- /dev/null +++ b/src/app/types.ts @@ -0,0 +1,5 @@ +import {ModalType} from './enums'; + +export type QueryParams = { + modal?: ModalType; +}; diff --git a/src/app/utils.ts b/src/app/utils.ts new file mode 100644 index 0000000..0a0f527 --- /dev/null +++ b/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 = { + modal: stringParser(), +}; diff --git a/src/core/consts/common.ts b/src/core/consts/common.ts index 58d9cce..84db1e2 100644 --- a/src/core/consts/common.ts +++ b/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';