- simplified router, bumped up version

Author: bevenio

README.md

@@ -90,7 +90,7 @@ src
 │
 └───router
 │   │   router.tsx
-│   └───routes
+│   └───routes.tsx
 │   └───utility
 │
 └───store

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docker-react",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "",
   "author": "Benjamin Brachmann",
   "license": "MIT",

src/components/basic/route-layout/index.tsx

@@ -4,7 +4,7 @@ import { useEffect, createRef } from 'react'
 import './route-layout.scss'
 
 interface Props {
-  children: React.ReactChildren
+  children: React.ReactNode
 }
 
 const RouteLayout: React.FC<Props> = function ({ children }) {

src/router/router.spec.jsx

@@ -26,7 +26,6 @@ describe('router component', () => {
 
   test('the router uses the theme from redux and applies it to the html tag', () => {
     const store = mockStore(mockInitialState)
-
     render(
       <Provider store={store}>
         <AppRouter />

src/router/router.tsx

@@ -17,23 +17,21 @@ import { LoadingPage } from '@/components/pages/loading'
 import { ErrorPage } from '@/components/pages/error'
 
 /* Routes */
-import { LoginRoute } from '@/router/routes/login.route'
-import { SettingsRoute } from '@/router/routes/settings.route'
-import { MainRoute } from '@/router/routes/main.route'
+import { routes } from '@/router/routes'
 
 function AppRoutes() {
   const location = useLocation()
 
   return (
     <>
-      <NavigationBar routes={[LoginRoute, SettingsRoute, MainRoute]} />
+      <NavigationBar routes={routes} />
       <TransitionGroup>
         <CSSTransition key={location.key} classNames="app-route-change" timeout={1000}>
           <Suspense fallback={<LoadingPage />}>
             <Switch location={location}>
-              <Route path={LoginRoute.route} render={LoginRoute.render} />
-              <Route path={SettingsRoute.route} render={SettingsRoute.render} />
-              <Route path={MainRoute.route} render={MainRoute.render} />
+              {routes.map(({ route, render }) => (
+                <Route key={`route-${route}`} path={route} render={render} />
+              ))}
               <Route component={ErrorPage} />
             </Switch>
           </Suspense>

src/router/routes.tsx

@@ -0,0 +1,26 @@
+import { lazily } from 'react-lazily'
+import { createRoutes } from '@/router/utility/router-utility.module'
+
+// order of routes is important, since router will render first match
+const routes = createRoutes([
+  {
+    route: '/login',
+    redirection: '/',
+    dependencies: { 'auth.jwt': (jwt) => jwt === null },
+    component: lazily(() => import('@/components/pages/login')).LoginPage,
+  },
+  {
+    route: '/settings',
+    redirection: '/login',
+    dependencies: { 'auth.jwt': (jwt) => jwt !== null },
+    component: lazily(() => import('@/components/pages/settings')).SettingsPage,
+  },
+  {
+    route: '/',
+    redirection: '/login',
+    dependencies: { 'auth.jwt': (jwt) => jwt !== null },
+    component: lazily(() => import('@/components/pages/main')).MainPage,
+  },
+])
+
+export { routes }

src/router/routes/login.route.tsx

@@ -4,10 +4,11 @@ import { Redirect, BrowserRouter as PathRouter, HashRouter } from 'react-router-
 import { store } from '@/store/store'
 import { ErrorPage } from '@/components/pages/error'
 import { RouteLayout } from '@/components/basic/route-layout'
+import React from 'react'
 
 type RouteType = 'hash' | 'path'
 
-interface RouteParameters {
+export interface RouteDescription {
   component: React.FC
   route: string
   redirection: string
@@ -23,46 +24,48 @@ const getRouters = () => ({
   Path: PathRouter,
 })
 
-const createRoute = ({ component, route, redirection, dependencies }: RouteParameters) => {
-  const mustRedirect = () =>
-    !(dependencies
-      ? Object.keys(dependencies).reduce((previous, current) => {
+const createRoute = (route: RouteDescription) => {
+  // Checks if all dependencies are fulfilled to render a route
+  const mustRedirect = (mustRedirectRoute: RouteDescription) =>
+    !(mustRedirectRoute.dependencies
+      ? Object.keys(mustRedirectRoute.dependencies).reduce((previous, current) => {
           if (previous === false) {
             return false
           }
           const dependencyValue = get(store.getState(), current)
-          const dependencyComparison = dependencies[current]
-
-          // Dependency can be checked by its value or by validator function
+          const dependencyComparison = mustRedirectRoute.dependencies[current]
           return typeof dependencyComparison === 'function' ? !!dependencyComparison(dependencyValue) : dependencyValue === dependencyComparison
         }, true)
       : true)
 
-  // Decide what component to return
-  const renderFunction = () => {
-    const Component = component
-    const redirect = mustRedirect()
-    if (redirect && !!redirection) {
-      return <Redirect to={redirection} />
-    }
-    if (redirect && !redirection) {
-      return <ErrorPage />
+  // Renders route or its replacement/proxy
+  const createRender = (renderRoute: RouteDescription): React.FC =>
+    function render() {
+      const Component: React.FC = renderRoute.component
+      const redirect = mustRedirect(renderRoute)
+      if (redirect && !!renderRoute.redirection) {
+        return <Redirect to={renderRoute.redirection} />
+      }
+      if (redirect && !renderRoute.redirection) {
+        return <ErrorPage />
+      }
+      return (
+        <RouteLayout>
+          <Component />
+        </RouteLayout>
+      )
     }
-    return (
-      <RouteLayout>
-        <Component />
-      </RouteLayout>
-    )
-  }
 
   // A function that returns if a route can be displayed
-  const canRenderFunction = () => !mustRedirect()
+  const createCanRender = (canRenderRoute: RouteDescription) => () => !mustRedirect(canRenderRoute)
 
   return {
-    route,
-    render: renderFunction,
-    canRender: canRenderFunction,
+    route: route.route,
+    render: createRender(route),
+    canRender: createCanRender(route),
   }
 }
 
-export { getRouteType, getRouters, createRoute }
+const createRoutes = (routes: RouteDescription[]) => routes.map((route) => createRoute(route))
+
+export { getRouteType, getRouters, createRoutes }