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

src/app/components/page/Page.tsx

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

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

@@ -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[];

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

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

src/app/index.tsx

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

src/common/consts.ts

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

src/core/__test__/utils.test.ts

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

src/core/consts/common.ts

@@ -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',
+};

src/core/hooks/useQuery.ts

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

src/pages/auth-response/components/page/Page.tsx

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

src/pages/auth-response/routing.tsx

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

src/pages/auth-response/types.ts

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

src/pages/calendar/components/page/Page.tsx

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

src/pages/calendar/components/page/index.ts

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

src/pages/calendar/routing.tsx

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

src/pages/chaos-box/components/page/Page.tsx

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

src/pages/chaos-box/components/page/index.ts

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

src/pages/chaos-box/routing.tsx

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

src/pages/information/components/page/Page.tsx

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

src/pages/information/components/page/index.ts

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

src/pages/information/routing.tsx

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

src/pages/main/components/component-stream/ComponentStream.tsx

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

src/pages/main/components/page/Page.tsx

@@ -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) => {

src/pages/main/routing.tsx

@@ -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 (

src/pages/projects/components/page/Page.tsx

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

src/pages/projects/components/page/index.ts

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

src/pages/projects/routing.tsx

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

src/pages/queues/components/page/Page.tsx

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

src/pages/queues/components/queue-table/QueueTable.tsx

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

src/pages/settings/components/page/Page.tsx

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

src/pages/settings/components/page/index.ts

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

src/pages/settings/routing.tsx

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

src/pages/sign-in/components/page/Page.tsx

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

src/pages/sign-in/components/page/index.ts

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

src/pages/sign-in/routing.tsx

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

src/pages/tags/components/page/Page.tsx

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

src/pages/tags/components/page/index.ts

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

src/pages/tags/routing.tsx

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

src/pages/tasks/components/page/Page.tsx

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