refactor(site): finish content-utils thus simplifying the Site component

Author: skipjack

src/components/Site/Site.jsx

@@ -3,6 +3,9 @@ import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 import { hot as Hot } from 'react-hot-loader';
 
+// Import Utilities
+import { ExtractPages, ExtractSections } from '../../utilities/content-utils';
+
 // Import Components
 import NotificationBar from '../NotificationBar/NotificationBar';
 import Navigation from '../Navigation/Navigation';
@@ -31,8 +34,9 @@ class Site extends React.Component {
   render() {
     let { location } = this.props;
     let { mobileSidebarOpen } = this.state;
-    let sections = this._sections;
+    let sections = ExtractSections(Content);
     let section = sections.find(({ url }) => location.pathname.startsWith(url));
+    let pages = ExtractPages(Content);
 
     return (
       <div className="site">
@@ -70,7 +74,7 @@ class Site extends React.Component {
               render={ props => (
                 <Container className="site__content">
                   <Switch>
-                    { this._pages.map(page => (
+                    { pages.map(page => (
                       <Route
                         key={ page.url }
                         exact={ true }
@@ -123,20 +127,6 @@ class Site extends React.Component {
     });
   }
 
-  /**
-   * Flatten an array of `Content` items
-   *
-   * @param  {array} array - ...
-   * @return {array}       - ...
-   */
-  _flatten = array => {
-    return array.reduce((flat, item) => {
-      return flat.concat(
-        Array.isArray(item.children) ? this._flatten(item.children) : item
-      );
-    }, []);
-  }
-
   /**
    * Strip any non-applicable properties
    *
@@ -154,28 +144,6 @@ class Site extends React.Component {
       children: children ? this._strip(children) : []
     }));
   }
-
-  /**
-   * Get top-level sections
-   *
-   * @return {array} - ...
-   */
-  get _sections() {
-    return Content.children.filter(item => (
-      item.type === 'directory'
-    ));
-  }
-
-  /**
-   * Get all markdown pages
-   *
-   * @return {array} - ...
-   */
-  get _pages() {
-    return this._flatten(Content.children).filter(item => {
-      return item.extension === '.md';
-    });
-  }
 }
 
 export default Hot(module)(Site);

src/utilities/content-utils.js

@@ -1,8 +1,8 @@
 /**
  * Walk the given tree of content
  *
- * @param {object}   tree     - ...
- * @param {function} callback - ...
+ * @param {object}   tree     - Any node in the content tree
+ * @param {function} callback - Run on every descendant as well as the given `tree`
  */
 export const WalkContent = (tree, callback) => {
   callback(tree);
@@ -17,8 +17,8 @@ export const WalkContent = (tree, callback) => {
 /**
  * Deep flatten the given `tree`s child nodes
  *
- * @param  {object} tree - ...
- * @return {array}       - ...
+ * @param  {object} tree - Any node in the content tree
+ * @return {array}       - A flattened list of leaf node descendants
  */
 export const FlattenContent = tree => {
   if ( tree.children ) {
@@ -34,12 +34,36 @@ export const FlattenContent = tree => {
 /**
  * Find an item within the given `tree`
  *
- * @param  {object}   tree - ...
- * @param  {function} test - ...
- * @return {object}        - ...
+ * @param  {object}   tree - Any node in the content tree
+ * @param  {function} test - A callback to find any leaf node in the given `tree`
+ * @return {object}        - The first leaf node that passes the `test`
  */
 export const FindInContent = (tree, test) => {
   let list = FlattenContent(tree);
 
   return list.find(test);
 };
+
+/**
+ * Get top-level sections
+ *
+ * @param  {object} tree - Any node in the content tree
+ * @return {array}       - Immediate children of the given `tree` that are directories
+ */
+export const ExtractSections = tree => {
+  return tree.children.filter(item => (
+    item.type === 'directory'
+  ));
+};
+
+/**
+ * Get all markdown pages
+ *
+ * @param  {object} tree - Any node in the content tree
+ * @return {array}       - All markdown descendants of the given `tree`
+ */
+export const ExtractPages = tree => {
+  return FlattenContent(tree).filter(item => {
+    return item.extension === '.md';
+  });
+};