#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

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/page/Page';
+
+ReactDOM.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+    document.getElementById('root')
+);