added dynamic import function

client/app.js

@@ -1,10 +1,11 @@
+import dynamicImport from 'utils/dynamicImport.js';
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
-import HomePage from 'pages/HomePage'; // or use the provided local homepage
 import AboutPage from 'pages/AboutPage';
 import LoginPage from 'pages/LoginPage';
 import ShowPage from 'pages/ShowPage';
 import FourOhFourPage from 'containers/FourOhFourPage';
+const HomePage = dynamicImport('pages/HomePage'); // or use the provided local homepage
 
 const App = () => {
   return (

client/utils/dynamicImport.js

@@ -0,0 +1,30 @@
+const { componentsConfig } = require('../config/siteConfig.js');
+
+function getDeepestChildValue (parent, childrenKeys) {
+  let childKey = childrenKeys.shift(); // .shift() retrieves the first element of array and removes it from array
+  let child = parent[childKey];
+  if (childrenKeys.length >= 1) {
+    return getDeepestChildValue(child, childrenKeys);
+  }
+  return child;
+}
+
+export const dynamicImport = (filePath) => {
+  // validate inputs
+  if (!filePath) {
+    throw new Error('no file path provided to dynamicImport()');
+  }
+  if (filePath.typeof !== 'string') {
+    throw new Error('file path provided to dynamicImport() must be a string');
+  }
+  // split out the file folders  // filter out any empty or white-space-only strings
+  const folders = filePath.split('/').filter(folderName => folderName.replace(/\s/g, '').length);
+  // check for the component corresponding to file path in the site config object
+  // i.e. componentsConfig[folders[0]][folders[2][...][folders[n]]
+  const customComponent = getDeepestChildValue(componentsConfig, folders);
+  if (customComponent) {
+    return customComponent;  // return custom component
+  } else {
+    return require(filePath);  // return default component
+  }
+};

config/siteConfig.js

@@ -10,7 +10,11 @@ function SiteConfig () {
   this.auth = {
     sessionKey: 'default',
   };
-  this.components = {};
+  this.customComponents = {
+    components: {},
+    containers: {},
+    pages     : {},
+  };
   this.details = {
     description: 'Open-source, decentralized image and video sharing.',
     host       : 'default',
@@ -31,13 +35,13 @@ function SiteConfig () {
     if (!config) {
       return console.log('No site config received.');
     }
-    const { analytics, assetDefaults, auth, components, details, publishing } = config;
+    const { analytics, assetDefaults, auth, customComponents, details, publishing } = config;
     this.analytics = analytics;
     this.assetDefaults = assetDefaults;
     this.auth = auth;
-    this.components = components;
     this.details = details;
     this.publishing = publishing;
+    this.customComponents = customComponents;
   };
 };