From 2f4b3ce2065ef62a359c41ba522a7d16453dc1bc Mon Sep 17 00:00:00 2001 From: Vladimir Metnev Date: Sun, 18 Feb 2018 16:05:39 +0200 Subject: [PATCH] fix(routing): move routes array to index.js fix(routing): move routes array to index.js --- src/common/routing/index.jsx | 94 ++++++++++++++++++++++++- src/common/routing/routes.js | 130 ----------------------------------- 2 files changed, 92 insertions(+), 132 deletions(-) delete mode 100644 src/common/routing/routes.js diff --git a/src/common/routing/index.jsx b/src/common/routing/index.jsx index 39dfa1f0..ea183fd0 100644 --- a/src/common/routing/index.jsx +++ b/src/common/routing/index.jsx @@ -1,2 +1,92 @@ -export history from './history' -export {getSidebarRoutes, getRouterRoutes, getRoutes} from './routes' +// @flow +import React from 'react' +import {createBrowserHistory, createMemoryHistory} from 'history' +import {asyncComponent} from 'react-async-component' +import {Loader, Dimmer, Header, Icon} from 'semantic-ui-react' +import _ from 'lodash' +import Dashboard from 'containers/Dashboard' +import Links from 'containers/Links' + +function asyncComponentCreator (url) { + return asyncComponent({ + resolve: () => { + if (process.env.BROWSER) { + return require(`containers/${url}/index.jsx`).default + } + // flow-disable-next-line: The parameter passed to import() must be a literal string + return import(/* webpackChunkName:"[index].[request]" */ `containers/${url}/index.jsx`) + }, + LoadingComponent () { + return ( + + + Loading page... + + + ) + }, + ErrorComponent () { + return ( + +
+ + Refresh + Got error while loading page. +
+ + ) + }, + autoResolveES2015Default: true, + env: process.env.BROWSER ? 'browser' : 'node', + serverMode: 'resolve' + }) +} + +function routingFnCreator (useFor) { + const [AsyncNotFound] = ['NotFound'].map(asyncComponentCreator) + // Dashboard and Links included in build + // NotFound(404) is lazy + const routes: any[] = [ + { + path: '/', + exact: true, + component: Dashboard, + name: 'Dashboard' + }, + { + path: '/links', + exact: true, + component: Links, + name: 'Links' + }, + { + component: AsyncNotFound, + name: '404' + } + ] + + const fns = { + // Returns routing for React-Router + routing () { + return routes + .map(a => + _.pick(a, ['path', 'strict', 'exact', 'component']) + ) + }, + // Returns `name` + `path`. used in Header + meta () { + return routes + .map(a => _.pick(a, ['path', 'name'])) + } + } + + return fns[useFor] +} + +const createRequiredHistory = process.env.BROWSER + ? createBrowserHistory + : createMemoryHistory + +export const getMetaRoutes = routingFnCreator('meta') +export const getRouterRoutes = routingFnCreator('routing') +export const history = createRequiredHistory() diff --git a/src/common/routing/routes.js b/src/common/routing/routes.js deleted file mode 100644 index 96649401..00000000 --- a/src/common/routing/routes.js +++ /dev/null @@ -1,130 +0,0 @@ -// @flow -import React from 'react' -import {Route, Redirect} from 'react-router-dom' -import RouteAuth from 'components/addons/RouteAuth' -import {asyncComponent} from 'react-async-component' -import {Loader, Dimmer, Header, Icon} from 'semantic-ui-react' -import _ from 'lodash' -import type {RouteItem} from 'types' - -function asyncComponentCreator (url) { - return asyncComponent({ - // flow-disable-next-line: The parameter passed to import() must be a literal string - resolve: () => import(/* webpackChunkName:"[index].[request]" */ `containers/${url}/index.jsx`), - LoadingComponent () { - return ( - - - Loading page... - - - ) - }, - ErrorComponent () { - return ( - -
- - Refresh - Got error while loading page. -
- - ) - }, - autoResolveES2015Default: true, - env: process.env.BROWSER ? 'browser' : 'node', - serverMode: 'resolve' - }) -} - -function routingFnCreator (useFor: 'sidebar' | 'routing' | 'all' = 'all') { - const [AsyncDashoard, AsyncLinks, AsyncLogin, AsyncNotFound] = [ - 'Dashboard', - 'Links', - 'Login', - 'NotFound' - ].map(a => { - return asyncComponentCreator(a) - }) - - const routes: Array = [ - { - path: '/', - exact: true, - icon: 'newspaper', - name: 'Dashboard', - sidebarVisible: true, - tag: RouteAuth, - component: AsyncDashoard - }, - { - path: '/links', - name: 'Links', - exact: true, - icon: 'bookmark', - sidebarVisible: true, - tag: RouteAuth, - component: AsyncLinks - }, - { - external: true, - path: 'https://github.com/Metnew/react-semantic.ui-starter', - icon: 'github', - name: 'Github', - sidebarVisible: true - }, - { - path: '/auth', - name: 'Auth', - exact: true, - tag: Route, - component: AsyncLogin - }, - // Find the way to add/remove routes conditionally - { - name: '404', - tag: RouteAuth, - component: AsyncNotFound - }, - { - tag: Redirect, - to: '/auth' - } - ] - - const fns = { - // Returns routing for sidebar menu - sidebar (x: Array = routes) { - return x - .filter(a => a.sidebarVisible) - .map(a => - _.pick(a, ['path', 'name', 'icon', 'external', 'strict', 'exact']) - ) - }, - // Returns routing for React-Router - routing (x: Array = routes) { - return x - .filter(a => !!a.tag) - .map(a => - _.pick(a, [ - 'path', - 'name', - 'strict', - 'exact', - 'component', - 'tag', - 'to' - ]) - ) - }, - all () { - return routes - } - } - - return fns[useFor] -} - -export const getRoutes = routingFnCreator() -export const getSidebarRoutes = routingFnCreator('sidebar') -export const getRouterRoutes = routingFnCreator('routing')