vigdorov/free-your-brain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nikolay
2021-01-09 21:41:26 +03:00
committed by GitHub
parent 7a114c1752
commit 72988d7d34
12 changed files with 162 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.json
View File

@ -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",

31
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

94
src/app/components/create-task-modal/CreateTaskModal.tsx Normal file
View File

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

1
src/app/components/create-task-modal/index.ts Normal file
View File

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

10
src/app/components/page/Page.tsx
View File

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

3
src/app/components/top-menu/TopMenu.tsx
View File

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

7
src/app/consts.ts
View File

@ -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 = [

3
src/app/enums.ts Normal file
View File

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

5
src/app/types.ts Normal file
View File

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

7
src/app/utils.ts Normal file
View File

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

2
src/core/consts/common.ts
View File

@ -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';