#8. Добавление алиасов, разделение на чанки, разделение на страницы, организация фвйловой структуры (#9)

This commit is contained in:
Nikolay
2020-12-26 14:38:38 +03:00
committed by GitHub
parent faea0fb77a
commit 31ad97954b
58 changed files with 21397 additions and 17637 deletions

View File

@ -68,7 +68,6 @@
}
],
"no-trailing-spaces": "warn",
"no-unused-vars": "warn",
"default-case": "warn",
"default-param-last": "warn",
"no-alert": "warn",
@ -89,6 +88,7 @@
"@typescript-eslint/no-use-before-define": "off",
"@typescript-eslint/no-namespace": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
"@typescript-eslint/no-unused-vars": ["error"],
"array-bracket-spacing": ["warn", "never"],
"block-spacing": ["warn", "never"],
"brace-style": ["warn", "1tbs", {"allowSingleLine": true}],
@ -127,11 +127,14 @@
"object-property-newline": ["warn", {"allowAllPropertiesOnSameLine": true}],
"key-spacing": ["warn", {"beforeColon": false, "afterColon": true}],
"space-before-blocks": "warn",
"space-before-function-paren": ["warn", {
"space-before-function-paren": [
"warn",
{
"anonymous": "always",
"named": "never",
"asyncArrow": "always"
}],
}
],
"space-in-parens": ["warn", "never"],
"space-infix-ops": "warn",
"arrow-parens": ["warn", "as-needed"],

17006
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,5 +1,5 @@
{
"name": "tracker",
"name": "free-your-brain",
"version": "0.1.0",
"private": true,
"dependencies": {
@ -9,17 +9,13 @@
"@most/adapter": "^1.0.0",
"@most/core": "^1.6.1",
"@most/scheduler": "^1.3.0",
"@most/types": "^1.1.0",
"@types/uuid": "^8.3.0",
"axios": "^0.21.0",
"date-fns": "^2.16.1",
"file-loader": "^6.2.0",
"fp-ts": "^2.8.5",
"lodash": "^4.17.20",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"ts-loader": "^8.0.7",
"typescript": "^4.0.3"
},
@ -38,12 +34,14 @@
"@babel/core": "^7.12.3",
"@babel/preset-env": "^7.12.1",
"@babel/preset-typescript": "^7.12.1",
"@most/types": "^1.1.0",
"@types/jest": "^26.0.15",
"@types/lodash": "^4.14.165",
"@types/node": "^12.19.1",
"@types/react": "^16.9.53",
"@types/react-dom": "^16.9.8",
"@types/react-router-dom": "^5.1.6",
"@types/uuid": "^8.3.0",
"@typescript-eslint/eslint-plugin": "^4.6.0",
"@typescript-eslint/parser": "^4.6.0",
"babel-jest": "^26.6.1",
@ -51,13 +49,16 @@
"css-loader": "^5.0.0",
"eslint": "^7.12.1",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"gh-pages": "^3.1.0",
"html-webpack-plugin": "^4.5.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.0.0-beta.1",
"mini-css-extract-plugin": "^1.2.1",
"prettier": "^2.1.2",
"react-scripts": "^4.0.1",
"sass": "^1.28.0",
"sass-loader": "^10.0.4",
"webpack": "^5.3.2",

View File

@ -9,7 +9,7 @@
name="description"
content="Web site created by cool programmers"
/>
<title>Tracker App</title>
<title>FYB - v.0.1.0</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

View File

@ -1,11 +1,14 @@
import React, {memo} from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
import mainPageRouter from '../../../pages/main/routing';
import queuesPageRouter from '../../../pages/queues/routing';
import tasksPageRouter from '../../../pages/tasks/routing';
import authResponsePageRouter from '../../../pages/auth-response/routing';
import NotFoundPage from '../../../pages/not-found/components/page/Page';
import mainPageRouter from '_pages/main/routing';
import chaosBoxPageRouter from '_pages/chaos-box/routing';
import calendarPageRouter from '_pages/calendar/routing';
import informationPageRouter from '_pages/information/routing';
import projectsPageRouter from '_pages/projects/routing';
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/Page';
import TopMenu from '../top-menu/TopMenu';
import './Page.scss';
@ -15,9 +18,13 @@ const Page: React.FC = () => {
<TopMenu />
<Switch>
{mainPageRouter}
{queuesPageRouter}
{tasksPageRouter}
{authResponsePageRouter}
{chaosBoxPageRouter}
{calendarPageRouter}
{informationPageRouter}
{projectsPageRouter}
{settingsPageRouter}
{signInPageRouter}
{tagsPageRouter}
<Route>
<NotFoundPage />
</Route>

View File

@ -1,10 +1,8 @@
import {List, ListItem as MaterialListItem, ListItemIcon, ListItemText} from '@material-ui/core';
import React, {memo} from 'react';
import {Link} from 'react-router-dom';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import {ListItem} from '../../../common/types';
import {ListItem} from '_types/common';
type Props = {
list: ListItem[];

View File

@ -1,16 +1,8 @@
import React, {memo} from 'react';
import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import {Divider, Drawer} from '@material-ui/core';
import {useToggle} from '../../../common/hooks/useToggle';
import {MENU} from '../../../common/consts';
import MenuList from './MenuList';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@ -28,30 +20,15 @@ const useStyles = makeStyles((theme: Theme) =>
const TopMenu: React.FC = () => {
const classes = useStyles();
const [isToggle, handleToggle] = useToggle();
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu" onClick={handleToggle}>
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
Tracker App
Free your brain
</Typography>
</Toolbar>
</AppBar>
<Drawer anchor="top" open={isToggle} onClose={handleToggle}>
<div
role="presentation"
onClick={handleToggle}
onKeyDown={handleToggle}
>
<MenuList list={MENU.COMMON} />
<Divider />
<MenuList list={MENU.PERSONAL} />
</div>
</Drawer>
</div>
);
};

View File

@ -1,7 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app/components/page/Page';
import App from './components/page/Page';
ReactDOM.render(
<React.StrictMode>

View File

@ -1,32 +0,0 @@
import {ListItem} from './types';
export const ROUTES = {
MAIN: '/',
QUEUES: '/queues',
TASKS: '/tasks',
SETTINGS: '/settings',
AUTH_RESPONSE: '/auth-response',
};
export const MENU: Record<string, ListItem[]> = {
COMMON: [
{
title: 'Главная',
url: ROUTES.MAIN,
},
{
title: 'Очереди',
url: ROUTES.QUEUES,
},
{
title: 'Задачи',
url: ROUTES.TASKS,
},
],
PERSONAL: [
{
title: 'Настройки',
url: ROUTES.SETTINGS,
},
]
};

View File

@ -1,4 +1,4 @@
import {numberToString} from '../utils';
import {numberToString} from '_utils/common';
describe('test numberToString', () => {
it('success convert', () => {

10
src/core/consts/common.ts Normal file
View File

@ -0,0 +1,10 @@
export const ROUTES = {
MAIN: '/',
CHAOS_BOX: '/chaos-box',
PROJECTS: '/projects',
INFORMATION: '/information',
TAGS: '/tags',
CALENDAR: '/calendar',
SETTINGS: '/settings',
SIGN_IN: '/sign-in',
};

View File

@ -1,8 +1,8 @@
import {head} from 'lodash';
import {parse, ParsedUrlQuery} from 'querystring';
import {head} from 'lodash';
import {useMemo} from 'react';
import {useLocation} from 'react-router-dom';
import {toNumber} from '../../utils/parsers';
import {toNumber} from '../utils/parsers';
type QueryParser<T> = (value?: string | string[]) => T;
export type QueryParsers<T> = Partial<{[K in keyof T]: QueryParser<T[K]>}>;

View File

@ -1,29 +0,0 @@
import React, {memo} from 'react';
import {numberParser, QueryParsers, stringParser, useQuery} from '../../../../common/hooks/useQuery';
// eslint-disable-next-line
const enum PersonType {
One = 'one',
Two = 'two'
}
type Person = {
name: string;
age?: number;
type: PersonType;
};
const parsers: QueryParsers<Person> = {
name: stringParser(''),
age: numberParser(),
type: stringParser(PersonType.One),
};
const AuthResponsePage: React.FC = () => {
const query = useQuery(parsers);
return (
<div>Auth Page {query.name}</div>
);
};
export default memo(AuthResponsePage);

View File

@ -1,13 +0,0 @@
import React from 'react';
import {Route} from 'react-router-dom';
import {ROUTES} from '../../common/consts';
import Page from './components/page/Page';
export default (
<Route
component={Page}
path={ROUTES.AUTH_RESPONSE}
exact
/>
);

View File

@ -1,98 +0,0 @@
export type QueryRequest = {
/**
* При запросе токена следует указать значение «token»
*/
response_type: string;
/**
* Идентификатор приложения. Доступен в свойствах приложения
*/
client_id: string;
/**
* Уникальный идентификатор устройства, для которого запрашивается токен. Чтобы обеспечить
* уникальность, достаточно один раз сгенерировать UUID и использовать его при каждом запросе
* нового токена с данного устройства.
*
* Идентификатор должен быть не короче 6 символов и не длиннее 50. Допускается использовать
* только печатаемые ASCII-символы (с кодами от 32 до 126).
*/
device_id?: string;
/**
* Имя устройства, которое следует показывать пользователям. Не длиннее 100 символов.
*/
device_name?: string;
/**
* URL, на который нужно перенаправить пользователя после того, как он разрешил или отказал приложению
* в доступе. По умолчанию используется первый Callback URI, указанный в настройках приложения.
* В значении параметра допустимо указывать только те адреса, которые перечислены в настройках
* приложения. Если совпадение неточное, параметр игнорируется.
*/
redirect_uri?: string;
/**
* Явное указание аккаунта, для которого запрашивается токен. В значении параметра можно передавать логин
* аккаунта на Яндексе, а также адрес Яндекс.Почты или Яндекс.Почты для домена.
*/
login_hint?: string;
/**
* Список необходимых приложению в данный момент прав доступа, разделенных пробелом. Права должны
* запрашиваться из перечня, определенного при регистрации приложения. Если параметры scope
* и optional_scope не переданы, то токен будет выдан с правами, указанными при регистрации приложения.
*/
scope?: string;
/**
* Если параметры scope и optional_scope не переданы, то токен будет выдан с правами,
* указанными при регистрации приложения.
*/
optional_scope?: string;
/**
* Признак того, что у пользователя обязательно нужно запросить разрешение на доступ
* к аккаунту (даже если пользователь уже разрешил доступ данному приложению).
* Получив этот параметр, Яндекс.OAuth предложит пользователю разрешить доступ приложению
* и выбрать нужный аккаунт Яндекса.
*/
force_confirm?: 'yes' | true | 1;
/**
* Строка состояния, которую Яндекс.OAuth возвращает без изменения.
* Максимальная допустимая длина строки — 1024 символа.
*/
state?: string;
/**
* Признак облегченной верстки (без стандартной навигации Яндекса) для страницы разрешения доступа.
* Облегченную верстку стоит запрашивать, например, если страницу разрешения нужно отобразить
* в маленьком всплывающем окне.
*/
display?: 'popup';
};
export type QueryResponse = {
/**
* OAuth-токен с запрошенными правами или с правами, указанными при регистрации приложения.
*/
access_token: string;
/**
* Время жизни токена в секундах.
*/
expires_in: string;
/**
* Тип выданного токена. Всегда принимает значение «bearer».
*/
token_type: 'bearer';
/**
* Значение параметра state из исходного запроса, если этот параметр был передан.
*/
state?: string;
};
export type QueryResponseError = {
/**
* Код ошибки
*/
error: 'access_denied' | 'unauthorized_client';
/**
* Описание ошибки
*/
error_description: string;
/**
* Значение параметра state из исходного запроса, если этот параметр был передан.
*/
state?: string;
};

View File

@ -0,0 +1,9 @@
import React, {memo} from 'react';
const Page: React.FC = () => {
return (
<div>calendar</div>
);
};
export default memo(Page);

View File

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

View File

@ -1,9 +1,8 @@
import React from 'react';
import {Route} from 'react-router-dom';
import {ROUTES} from '../../common/consts';
import {ROUTES} from '_consts/common';
import Page from './components/page/Page';
export default (
<Route component={Page} path={ROUTES.TASKS} exact />
<Route component={Page} path={ROUTES.CALENDAR} exact />
);

View File

@ -0,0 +1,9 @@
import React, {memo} from 'react';
const Page: React.FC = () => {
return (
<div>chaos-box</div>
);
};
export default memo(Page);

View File

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

View File

@ -1,9 +1,8 @@
import React from 'react';
import {Route} from 'react-router-dom';
import {ROUTES} from '../../common/consts';
import {ROUTES} from '_consts/common';
import Page from './components/page/Page';
export default (
<Route component={Page} path={ROUTES.QUEUES} exact />
<Route component={Page} path={ROUTES.CHAOS_BOX} exact />
);

View File

@ -0,0 +1,9 @@
import React, {memo} from 'react';
const Page: React.FC = () => {
return (
<div>information</div>
);
};
export default memo(Page);

View File

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

View File

@ -0,0 +1,8 @@
import React from 'react';
import {Route} from 'react-router-dom';
import {ROUTES} from '_consts/common';
import Page from './components/page/Page';
export default (
<Route component={Page} path={ROUTES.INFORMATION} exact />
);

View File

@ -1,8 +1,8 @@
import React, {FC, memo} from 'react';
import {chain, fromPromise, map} from '@most/core';
import {pipe} from 'fp-ts/lib/pipeable';
import {useStream} from '../../../../utils/useStream';
import {list$} from '../../../../services/service1';
import {useStream} from '_utils/useStream';
import {list$} from '_services/service1';
const promise1: (id: number) => Promise<string> = (id: number) => new Promise(res => {
setTimeout(() => res(`${id} 123123`), 6000);

View File

@ -1,8 +1,8 @@
import React, {memo} from 'react';
import {AuthService} from '../../../../services/AuthService';
import {useStream} from '../../../../utils/useStream';
import {AuthService} from '_services/AuthService';
import {useStream} from '_utils/useStream';
import {createService} from '_utils/createService';
import ComponentStream from '../component-stream/ComponentStream';
import {createService} from '../../../../utils/createService';
const service = createService(1, {
changeWithStr: (state: number, val: string) => {

View File

@ -1,7 +1,6 @@
import React from 'react';
import {Route} from 'react-router-dom';
import {ROUTES} from '../../common/consts';
import {ROUTES} from '_consts/common';
import Page from './components/page/Page';
export default (

View File

@ -0,0 +1,9 @@
import React, {memo} from 'react';
const Page: React.FC = () => {
return (
<div>projects</div>
);
};
export default memo(Page);

View File

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

View File

@ -0,0 +1,8 @@
import React from 'react';
import {Route} from 'react-router-dom';
import {ROUTES} from '_consts/common';
import Page from './components/page/Page';
export default (
<Route component={Page} path={ROUTES.PROJECTS} exact />
);

View File

@ -1,13 +0,0 @@
import React, {memo} from 'react';
import QueueTable from '../queue-table/QueueTable';
const QueuesPage: React.FC = () => {
return (
<div>
<div>Queues Page (d)</div>
<QueueTable />
</div>
);
};
export default memo(QueuesPage);

View File

@ -1,37 +0,0 @@
import {Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from '@material-ui/core';
import React, {memo} from 'react';
const rows = [
'Очередь №1',
'Тестовая очередь',
'Старая очередь',
'Не новая очередь',
'Прошлая очередь',
];
const QueueTable: React.FC = () => {
return (
<TableContainer component={Paper}>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell component="th"></TableCell>
<TableCell component="th">Название очереди</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, index) => (
<TableRow key={row}>
<TableCell scope="row">
{index + 1}
</TableCell>
<TableCell>{row}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
};
export default memo(QueueTable);

View File

@ -0,0 +1,9 @@
import React, {memo} from 'react';
const Page: React.FC = () => {
return (
<div>settings</div>
);
};
export default memo(Page);

View File

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

View File

@ -0,0 +1,8 @@
import React from 'react';
import {Route} from 'react-router-dom';
import {ROUTES} from '_consts/common';
import Page from './components/page/Page';
export default (
<Route component={Page} path={ROUTES.SETTINGS} exact />
);

View File

@ -0,0 +1,9 @@
import React, {memo} from 'react';
const Page: React.FC = () => {
return (
<div>sign-in</div>
);
};
export default memo(Page);

View File

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

View File

@ -0,0 +1,8 @@
import React from 'react';
import {Route} from 'react-router-dom';
import {ROUTES} from '_consts/common';
import Page from './components/page/Page';
export default (
<Route component={Page} path={ROUTES.SIGN_IN} exact />
);

View File

@ -0,0 +1,9 @@
import React, {memo} from 'react';
const Page: React.FC = () => {
return (
<div>tags</div>
);
};
export default memo(Page);

View File

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

View File

@ -0,0 +1,8 @@
import React from 'react';
import {Route} from 'react-router-dom';
import {ROUTES} from '_consts/common';
import Page from './components/page/Page';
export default (
<Route component={Page} path={ROUTES.TAGS} exact />
);

View File

@ -1,9 +0,0 @@
import React, {memo} from 'react';
const TasksPage: React.FC = () => {
return (
<div>Tasks Page</div>
);
};
export default memo(TasksPage);

View File

@ -1,5 +1,6 @@
{
"compilerOptions": {
"baseUrl": ".",
"outDir": "./dist/",
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
@ -17,7 +18,19 @@
"resolveJsonModule": true,
"isolatedModules": false,
"noEmit": false,
"jsx": "react"
"jsx": "react",
"paths": {
"_api/*": ["./src/core/api/*"],
"_blocks/*": ["./src/core/blocks/*"],
"_consts/*": ["./src/core/consts/*"],
"_hooks/*": ["./src/core/hooks/*"],
"_hoks/*": ["./src/core/hoks/*"],
"_services/*": ["./src/core/services/*"],
"_types/*": ["./src/core/types/*"],
"_utils/*": ["./src/core/utils/*"],
"_enums/*": ["./src/core/enums/*"],
"_pages/*": ["./src/pages/*"],
}
},
"include": [
"src/**/*.ts",

View File

@ -1,13 +1,22 @@
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
module.exports = {
entry: './src/index.tsx',
entry: {
app: {
import: './src/app/index.tsx',
dependOn: [
'rct',
],
},
'rct': ['react', 'react-dom', 'react-router-dom'],
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'index.js',
filename: '[fullhash].[name].js',
},
devServer: {
contentBase: './build',
@ -16,6 +25,32 @@ module.exports = {
open: true,
port: 3189,
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
alias: {
_types: path.resolve(__dirname, 'src/core/types/'),
_api: path.resolve(__dirname, 'src/core/api/'),
_blocks: path.resolve(__dirname, 'src/core/blocks/'),
_consts: path.resolve(__dirname, 'src/core/consts/'),
_hooks: path.resolve(__dirname, 'src/core/hooks/'),
_hoks: path.resolve(__dirname, 'src/core/hoks/'),
_services: path.resolve(__dirname, 'src/core/services/'),
_utils: path.resolve(__dirname, 'src/core/utils/'),
_enums: path.resolve(__dirname, 'src/core/enums/'),
_pages: path.resolve(__dirname, 'src/pages/'),
}
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
enforce: true,
},
},
},
},
module: {
rules: [
{
@ -49,9 +84,6 @@ module.exports = {
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
@ -59,7 +91,7 @@ module.exports = {
favicon: './public/favicon.ico'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
filename: '[fullhash].[name].css',
}),
new CleanWebpackPlugin(),
],