feat(getPages): added getPages

docs/configuration.md

@@ -1 +1,11 @@
-Refer to the utility documentation in question for configuration step.
+The react-router `<Route />` components expect a few props described [here](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md).
+
+It is more appropriate to store route configuration as an array than an object but it is more appropriate to target path in an object.
+
+Your **route configuration** `routes.js` must be of type `Array` and can include `childRoutes` of type `Array`.
+
+It will return an object construct of `{ [route.name]: route }`.
+
+You can use [getPages](#get-pages) utility to have the `routeList` configuration as an object that can be traversed.
+
+

docs/js/getPages.md

@@ -0,0 +1,69 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+## getPages
+
+Looping through an array and find an entry require filtering. Find recursively a (`childRoutes`) won't look nice in your code.
+
+it turn your array of `routes` into a `pages` object that can be used to access any `path`.
+
+### Parameters
+
+-   `routeConfig` **[Array][1]** a list of route configuration
+-   `default` **[object][2]** pages - an object pages to expand (optional, default `{}`)
+
+### Examples
+
+```javascript
+`childRoutes` are flattened in parent `[parent][route.name]` and are kept in `[parent].childRoutes` for faster accessibility.
+
+// This is how you would access a specific page in your routes configuration array:
+
+const routes = [
+  {
+    name: 'dashboard',
+    redirect: true,
+    from: '/dashboard',
+    to: '/',
+    description: 'Dashboard',
+    childRoutes: [
+      {
+        name: 'users',
+        path: '/users',
+        description: 'List users',
+      },
+    ],
+  }
+];
+const page = routes.filter((route) => route.name === 'dashboard')[0]
+
+// This is how you do with `getPages`:
+
+const { getPages } = require('@yeutech-lab/react-router-dom-utils');
+const routes = [
+  {
+    name: 'dashboard',
+    redirect: true,
+    from: '/dashboard',
+    to: '/',
+    description: 'Dashboard',
+    childRoutes: [
+      {
+        name: 'users',
+        path: '/users',
+        description: 'List users',
+      },
+    ],
+  }
+];
+const pages = getPages(routes);
+<ul>
+  <li>{pages.dashboard.description}: {pages.dashboard.from}</li>
+  <li>{pages.dashboard.users.description}: {pages.dashboard.users.path}</li>
+</ul>
+```
+
+Returns **[object][2]** pages - a pages object
+
+[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+
+[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

docs/js/makeRoutes.md

@@ -0,0 +1,20 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+## makeRoutes
+
+This utility will check for routes configurations
+
+### Parameters
+
+-   `routesConfig` **[Array][1]** list of route configuration
+
+### Examples
+
+```javascript
+const routeList = makeRoutes([{ name: 'home', path: '/home', component: HomePage }])
+// return [<Route name="home" path="/home" component={HomePage} />]
+```
+
+Returns **[Array][1]** routeList - list of <Route /> and <Redirect />
+
+[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array

package.json

@@ -187,13 +187,13 @@
     "@rollup-umd/documentation": "^1.3.5",
     "@semantic-release/changelog": "^3.0.2",
     "@semantic-release/git": "^7.0.7",
-    "@semantic-release/github": "^5.2.8",
+    "@semantic-release/github": "^5.2.9",
     "@semantic-release/npm": "^5.1.3",
-    "@yeutech-lab/documentation": "^1.0.11",
+    "@yeutech-lab/documentation": "^1.0.12",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
-    "babel-loader": "^8.0.4",
+    "babel-loader": "^8.0.5",
     "babel-merge": "^2.0.1",
     "babel-plugin-add-module-exports": "^1.0.0",
     "babel-plugin-array-includes": "^2.0.3",
@@ -204,11 +204,11 @@
     "cz-conventional-changelog": "^2.1.0",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.7.1",
-    "eslint": "^5.11.1",
+    "eslint": "^5.12.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-react": "^7.12.1",
+    "eslint-plugin-react": "^7.12.3",
     "exports-loader": "^0.7.0",
     "istanbul-api": "^2.0.6",
     "istanbul-reports": "^2.0.1",
@@ -222,22 +222,22 @@
     "react-router-dom": "^4.3.1",
     "react-styleguidist": "^8.0.6",
     "react-test-renderer": "^16.7.0",
-    "rollup": "^1.0.0",
-    "rollup-plugin-babel": "^4.2.0",
+    "rollup": "^1.1.0",
+    "rollup-plugin-babel": "^4.3.0",
     "rollup-plugin-cleanup": "^3.1.0",
     "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-inject": "^2.2.0",
     "rollup-plugin-json": "^3.1.0",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-replace": "^2.1.0",
-    "rollup-plugin-terser": "^4.0.1",
+    "rollup-plugin-terser": "^4.0.2",
     "rollup-plugin-visualizer": "^0.9.2",
     "rollup-watch": "^4.3.1",
-    "semantic-release": "^15.13.2",
+    "semantic-release": "^15.13.3",
     "sinon": "^7.2.2",
     "toctoc": "^0.3.2",
-    "webpack": "^4.28.3"
+    "webpack": "^4.28.4"
   },
   "dependencies": {
     "@babel/runtime": "^7.2.0",

src/Routes.js

@@ -1,47 +1,17 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Route, Redirect } from 'react-router-dom';
+import makeRoutes from './makeRoutes';
 
 /**
- * @private
- * @description Will store the list of routes of the app
- * @type {Array}
- */
-const list = [];
-
-/**
- * @private
- * @description This utility will check for routes configurations
- * @param routes
- * @returns {Array}
- */
-const makeRoutes = (routes) => {
-  routes.forEach((route) => {
-    if (list.filter((l) => l.key === route.name).length === 0) {
-      if (route.from) {
-        list.push(<Redirect key={route.name} {...route} />);
-      } else {
-        list.push(<Route key={route.name} {...route} />);
-      }
-      if (route.childRoutes) {
-        makeRoutes(route.childRoutes);
-      }
-    }
-  });
-  return list;
-};
-
-/**
- * @public
  * @description Routes component
- * @param {Array} routes
+ * @param {object} props -  props with props.routes a routes configuration array
  * @returns {Routes}
  * @constructor
  */
 const Routes = ({ routes }) => <Fragment>{makeRoutes(routes)}</Fragment>;
 
 Routes.propTypes = {
-  /** An array of route configuration object */
+  /** An array of routes configuration */
   routes: PropTypes.array.isRequired,
 };
 

src/Routes.md

@@ -1,5 +1,4 @@
-
-It expect an [`Array`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array) of `route` configuration. 
+It expect an [`Array`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array) of `route` configuration.
 
 See [`<Route />`](https://reacttraining.com/react-router/web/api/Route) documentation for more info.
 
@@ -62,10 +61,10 @@ const routes = [
 **Example**
 
 ```js
-const { 
-  Switch, 
-  BrowserRouter: Router, 
-  Link, 
+const {
+  Switch,
+  BrowserRouter: Router,
+  Link,
 } = require('react-router-dom');
 
 const routes = [
@@ -132,7 +131,7 @@ const routes = [
     path: '/404.html',
     component: () => <h1>404 Page not found</h1>,
   },
-]; 
+];
 
 const reference = {
   name: 'react-router-dom',

src/getPages.js

@@ -0,0 +1,74 @@
+/**
+ * @public
+ * @name getPages
+ * @description
+ *
+ * Looping through an array and find an entry require filtering. Find recursively a (`childRoutes`) won't look nice in your code.
+ *
+ * it turn your array of `routes` into a `pages` object that can be used to access any `path`.
+ *
+ * @param {Array} routeConfig - a list of route configuration
+ * @param {object} [default={}] pages - an object pages to expand
+ * @return {object} pages - a pages object
+ * @example
+ * `childRoutes` are flattened in parent `[parent][route.name]` and are kept in `[parent].childRoutes` for faster accessibility.
+ *
+ * // This is how you would access a specific page in your routes configuration array:
+ *
+ * const routes = [
+ *   {
+ *     name: 'dashboard',
+ *     redirect: true,
+ *     from: '/dashboard',
+ *     to: '/',
+ *     description: 'Dashboard',
+ *     childRoutes: [
+ *       {
+ *         name: 'users',
+ *         path: '/users',
+ *         description: 'List users',
+ *       },
+ *     ],
+ *   }
+ * ];
+ * const page = routes.filter((route) => route.name === 'dashboard')[0]
+ *
+ * // This is how you do with `getPages`:
+ *
+ * const { getPages } = require('@yeutech-lab/react-router-dom-utils');
+ * const routes = [
+ *   {
+ *     name: 'dashboard',
+ *     redirect: true,
+ *     from: '/dashboard',
+ *     to: '/',
+ *     description: 'Dashboard',
+ *     childRoutes: [
+ *       {
+ *         name: 'users',
+ *         path: '/users',
+ *         description: 'List users',
+ *       },
+ *     ],
+ *   }
+ * ];
+ * const pages = getPages(routes);
+ * <ul>
+ *   <li>{pages.dashboard.description}: {pages.dashboard.from}</li>
+ *   <li>{pages.dashboard.users.description}: {pages.dashboard.users.path}</li>
+ * </ul>
+ *
+ *
+ */
+export default function getPages(routeConfig, pages = {}) {
+  const copy = [...routeConfig];
+  function addRoutes(routes, parent) {
+    const innerCopy = [...routes];
+    innerCopy.forEach((route) => {
+      parent[route.name] = route; // eslint-disable-line no-param-reassign
+      route.childRoutes && addRoutes(route.childRoutes, route); // eslint-disable-line no-unused-expressions
+    });
+  }
+  addRoutes(copy, pages);
+  return pages;
+}

src/index.js

@@ -1 +1,3 @@
 export { default as Routes } from './Routes';
+export { default as makeRoutes } from './makeRoutes';
+export { default as getPages } from './getPages';

src/makeRoutes.js

@@ -0,0 +1,31 @@
+import { Redirect, Route } from 'react-router-dom';
+import React from 'react';
+
+/**
+ * @public
+ * @description This utility will check for routes configurations
+ * @param {Array} routesConfig - list of route configuration
+ * @returns {Array} routeList - list of <Route /> and <Redirect />
+ * @example
+ * const routeList = makeRoutes([{ name: 'home', path: '/home', component: HomePage }])
+ * // return [<Route name="home" path="/home" component={HomePage} />]
+ */
+export default function makeRoutes(routesConfig) {
+  const routeList = [];
+  function recursive(routes) {
+    routes.forEach((route) => {
+      if (routeList.filter((l) => l.key === route.name).length === 0) {
+        if (route.from) {
+          routeList.push(<Redirect key={route.name} {...route} />);
+        } else {
+          routeList.push(<Route key={route.name} {...route} />);
+        }
+        if (route.childRoutes) {
+          recursive(route.childRoutes);
+        }
+      }
+    });
+  }
+  recursive(routesConfig);
+  return routeList;
+}