From e6264fb4cfe3d8e5c28b7c9628599a5e64e7ea62 Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Tue, 21 Jan 2020 13:00:41 -0500
Subject: [PATCH] revises the way that custom components are handled and
 imported

---
 demo/client/components.js                      |  9 +++++++++
 demo/collections/Page/components/List/index.js | 14 ++++++++++++--
 demo/payload.config.js                         |  1 +
 src/client/components/Routes.js                |  4 ++--
 src/client/config/getWebpackDevConfig.js       |  3 ++-
 src/client/scss/vars.scss                      |  2 +-
 6 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 demo/client/components.js

diff --git a/demo/client/components.js b/demo/client/components.js
new file mode 100644
index 0000000000..39aa96cf65
--- /dev/null
+++ b/demo/client/components.js
@@ -0,0 +1,9 @@
+import PageList from '../collections/Page/components/List';
+
+const components = {
+  pages: {
+    List: PageList,
+  },
+};
+
+export default components;
diff --git a/demo/collections/Page/components/List/index.js b/demo/collections/Page/components/List/index.js
index c1503be54e..e43b753a38 100644
--- a/demo/collections/Page/components/List/index.js
+++ b/demo/collections/Page/components/List/index.js
@@ -1,14 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import DefaultTemplate from 'payload/client/components/layout/DefaultTemplate';
+
+import './index.scss';
 
 const PageListView = (props) => {
   const { collection } = props;
 
   return (
-    <>
+    <DefaultTemplate
+      className="collection-list"
+      stepNav={[
+        {
+          label: collection.labels.plural,
+        },
+      ]}
+    >
       <h1>{collection.labels.plural}</h1>
       <p>This is a custom Pages list view</p>
-    </>
+    </DefaultTemplate>
   );
 };
 
diff --git a/demo/payload.config.js b/demo/payload.config.js
index bd73176b10..99fd960b3f 100644
--- a/demo/payload.config.js
+++ b/demo/payload.config.js
@@ -25,6 +25,7 @@ module.exports = {
   paths: {
     scssOverrides: path.resolve(__dirname, 'client/scss/overrides.scss'),
     config: path.resolve(__dirname, 'payload.config.js'),
+    components: path.resolve(__dirname, 'client/components.js'),
   },
   mongoURL: 'mongodb://localhost/payload',
   localization: {
diff --git a/src/client/components/Routes.js b/src/client/components/Routes.js
index ea968fb416..a5c9568d37 100644
--- a/src/client/components/Routes.js
+++ b/src/client/components/Routes.js
@@ -3,6 +3,7 @@ import {
   Route, Switch, withRouter, Redirect,
 } from 'react-router-dom';
 import config from 'payload-config';
+import customComponents from 'payload-custom-components';
 import { useUser } from './data/User';
 import Dashboard from './views/Dashboard';
 import Login from './views/Login';
@@ -68,14 +69,13 @@ const Routes = () => {
                           component={Dashboard}
                         />
                         {config.collections.map((collection) => {
-                          const components = collection.components ? collection.components : {};
                           return (
                             <Route
                               key={collection.slug}
                               path={`${match.url}/collections/${collection.slug}`}
                               exact
                               render={(routeProps) => {
-                                const ListComponent = components.List ? components.List : List;
+                                const ListComponent = (customComponents[collection.slug] && customComponents[collection.slug].List) ? customComponents[collection.slug].List : List;
                                 return (
                                   <ListComponent
                                     {...routeProps}
diff --git a/src/client/config/getWebpackDevConfig.js b/src/client/config/getWebpackDevConfig.js
index 73fe05d160..80c304a4e7 100644
--- a/src/client/config/getWebpackDevConfig.js
+++ b/src/client/config/getWebpackDevConfig.js
@@ -114,7 +114,8 @@ module.exports = (config) => {
     resolve: {
       alias: {
         payload: path.resolve(__dirname, '../../'),
-        scssOverrides: config.paths.scssOverrides,
+        'payload-scss-overrides': config.paths.scssOverrides,
+        'payload-custom-components': config.paths.components,
         'payload-config': config.paths.config,
       },
     },
diff --git a/src/client/scss/vars.scss b/src/client/scss/vars.scss
index 5fee1a7964..54310f64c3 100644
--- a/src/client/scss/vars.scss
+++ b/src/client/scss/vars.scss
@@ -92,4 +92,4 @@ $stroke-width : 1px;
 // IMPORT OVERRIDES
 //////////////////////////////
 
-@import '~scssOverrides';
+@import '~payload-scss-overrides';