enables loading config within webpack

src/client/components/index.js

@@ -4,7 +4,6 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import Routes from './routes';
 import store from '../store';
-import LoadConfig from './utilities/LoadConfig';
 import MeasureWindow from './utilities/MeasureWindow';
 import MeasureScroll from './utilities/MeasureScroll';
 import SetLocale from './utilities/SetLocale';
@@ -19,7 +18,6 @@ const Index = () => {
         <Fragment>
           <MeasureScroll />
           <MeasureWindow />
-          <LoadConfig />
           <SetLocale />
           <SetSearchParams />
           <Routes />

src/client/components/layout/Sidebar/index.js

@@ -1,24 +1,24 @@
 import React from 'react';
-import { withRouter } from 'react-router-dom';
+import { withRouter, NavLink, Link } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { NavLink, Link } from 'react-router-dom';
+import config from 'payload-config';
+
 import Arrow from '../../graphics/Arrow';
 import Icon from '../../graphics/Icon';
 
 import './index.scss';
 
 const mapState = state => ({
-  config: state.common.config
+  config: state.common.config,
 });
 
-const Sidebar = props => {
-
+const Sidebar = (props) => {
   const {
     collections,
     routes: {
       admin,
-    }
-  } = props.config;
+    },
+  } = config;
 
   return (
     <aside className="sidebar">
@@ -34,7 +34,11 @@ const Sidebar = props => {
             : undefined;
 
           return (
-            <Link className={classes} key={i} to={href}>
+            <Link
+              className={classes}
+              key={i}
+              to={href}
+            >
               <Arrow />
               {collections[key].labels.plural}
             </Link>
@@ -43,21 +47,30 @@ const Sidebar = props => {
       </nav>
       <span className="uppercase-label">Globals</span>
       <nav>
-        <NavLink activeClassName="active" to="/media-library">
+        <NavLink
+          activeClassName="active"
+          to="/media-library"
+        >
           <Arrow />
           Media Library
         </NavLink>
-        <NavLink activeClassName="active" to="/components">
+        <NavLink
+          activeClassName="active"
+          to="/components"
+        >
           <Arrow />
           Components
         </NavLink>
-        <NavLink activeClassName="active" to="/settings">
+        <NavLink
+          activeClassName="active"
+          to="/settings"
+        >
           <Arrow />
           Settings
         </NavLink>
       </nav>
     </aside>
   );
-}
+};
 
 export default withRouter(connect(mapState)(Sidebar));

src/client/components/utilities/LoadConfig/index.js

@@ -1,21 +0,0 @@
-import { Component } from 'react';
-import { connect } from 'react-redux';
-import api from '../../../api';
-
-const mapDispatch = dispatch => ({
-  loadConfig: payload => dispatch({ type: 'LOAD_CONFIG', payload })
-})
-
-class LoadConfig extends Component {
-  componentDidMount() {
-    api.requests.get('/config').then((config) => {
-      this.props.loadConfig(config)
-    })
-  }
-
-  render() {
-    return null;
-  }
-}
-
-export default connect(null, mapDispatch)(LoadConfig);

src/client/components/views/Login/index.js

@@ -11,30 +11,43 @@ import FormSubmit from '../../forms/Submit';
 import './index.scss';
 
 const mapStateToProps = state => ({
-  windowHeight: state.common.windowHeight
+  windowHeight: state.common.windowHeight,
 });
 
 const cookies = new Cookies();
 
-const handleAjaxResponse = res => {
+const handleAjaxResponse = (res) => {
   cookies.set('token', res.token, { path: '/' });
 };
 
-const Login = props => {
-
+const Login = (props) => {
   const Logo = props.logo;
   const minHeight = props.windowHeight;
 
   return (
-    <ContentBlock className="login" width="narrow" style={{ minHeight }}>
+    <ContentBlock
+      className="login"
+      width="narrow"
+      style={{ minHeight }}
+    >
       <div className="wrap">
         <Form
           handleAjaxResponse={handleAjaxResponse}
           method="POST"
           action="http://localhost:3000/login"
-          redirect="/">
-          <Email label="Email Address" name="email" required />
-          <Password error="password" label="Password" name="password" required />
+          redirect="/"
+        >
+          <Email
+            label="Email Address"
+            name="email"
+            required
+          />
+          <Password
+            error="password"
+            label="Password"
+            name="password"
+            required
+          />
           <FormSubmit>Login</FormSubmit>
         </Form>
         <Link to="/">To Dashboard</Link>

src/client/config/getWebpackDevConfig.js

@@ -115,7 +115,7 @@ module.exports = (config) => {
       alias: {
         payload: path.resolve(__dirname, '../../'),
         scssOverrides: config.paths.scssOverrides,
-        config: config.paths.config,
+        'payload-config': config.paths.config,
       },
     },
   };