updates lots of client side resource URLs, implements webpack-dev-middleware halfway

src/client/api.js

@@ -0,0 +1,30 @@
+import Cookies from 'universal-cookie';
+import superagentPromise from 'superagent-promise';
+import _superagent from 'superagent';
+import qs from 'qs';
+
+const cookies = new Cookies();
+const superagent = superagentPromise(_superagent, global.Promise);
+const responseBody = res => res.body;
+
+const setJwt = () => {
+  const jwt = cookies.get('token');
+  return jwt ? { 'Authorization': `JWT ${jwt}` } : {}
+};
+
+const requests = {
+  get: (url, params) => {
+    const query = qs.stringify(params, { addQueryPrefix: true });
+    return superagent.get(`${url}${query}`).set(setJwt()).then(responseBody);
+  },
+
+  post: (url, body) =>
+    superagent.post(`${url}`, body).set(setJwt()).then(responseBody),
+
+  put: (url, body) =>
+    superagent.put(`${url}`, body).set(setJwt()).then(responseBody)
+};
+
+export default {
+  requests
+};

src/client/components/field-types/Email/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fieldType } from 'payload/components';
+import fieldType from '../fieldType';
 
 import './index.scss';
 

src/client/components/field-types/HiddenInput/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fieldType } from 'payload/components';
+import fieldType from '../fieldType';
 
 const HiddenInput = props => <input type="hidden" value={props.value || ''}
   onChange={props.onChange} id={props.id ? props.id : props.name} name={props.name} />;

src/client/components/field-types/Password/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fieldType } from 'payload/components';
+import fieldType from '../fieldType';
 
 import './index.scss';
 

src/client/components/field-types/fieldType/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { FormContext, Tooltip } from 'payload/components';
+import { FormContext } from '../../forms/Form'
 
 import './index.scss';
 

src/client/components/forms/Form/index.js

@@ -1,8 +1,8 @@
 import React, { Component, createContext } from 'react';
 import { withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { HiddenInput } from 'payload/components';
-import api from 'payload/api';
+import HiddenInput from '../../field-types/HiddenInput';
+import api from '../../../api';
 
 import './index.scss';
 

src/client/components/forms/Submit/index.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { FormContext, Button } from 'payload/components';
+import { FormContext } from '../Form';
+import Button from '../../controls/Button';
 
 import './index.scss';
 

src/client/components/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { render } from 'react-dom';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { Provider } from 'react-redux';
@@ -14,12 +14,14 @@ const Index = () => {
   return (
     <Provider store={store}>
       <Router>
-        <MeasureScroll />
-        <MeasureWindow />
-        <LoadConfig />
-        <SetLocale />
-        <SetSearchParams />
-        <Routes />
+        <Fragment>
+          <MeasureScroll />
+          <MeasureWindow />
+          <LoadConfig />
+          <SetLocale />
+          <SetSearchParams />
+          <Routes />
+        </Fragment>
       </Router>
     </Provider>
   );

src/client/components/modules/StepNav/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { Arrow } from 'payload/components';
+import Arrow from '../../graphics/Arrow';
 
 import './index.scss';
 

src/client/components/routes/index.js

@@ -13,7 +13,7 @@ const cookies = new Cookies();
 const Routes = props => {
   return (
     <Switch>
-      <Route path="/login" render={routeProps => <Login {...routeProps} />} />
+      <Route path={'/admin/login'} render={routeProps => <Login {...routeProps} />} />
       <Route path="/forgot" component={() => { return <h1>Forgot Password</h1>; }} />
       <Route path="/" render={routeProps => {
         if (cookies.get('token')) {
@@ -26,7 +26,7 @@ const Routes = props => {
             </DefaultTemplate>
           );
         }
-        return <Redirect to="/login" />
+        return <Redirect to="/admin/login" />
       }} />
     </Switch>
   );

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

@@ -23,7 +23,7 @@ class SetLocale extends Component {
   setLocale = () => {
     const { searchParams, config, setLocale } = this.props;
 
-    if (searchParams) {
+    if (searchParams && config) {
       if (searchParams.locale && config.localization.locales.indexOf(searchParams.locale) > -1) {
         setLocale(searchParams.locale);
       } else if (!this.state.init) {

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

@@ -1,5 +1,10 @@
 import React from 'react';
-import { ContentBlock, Form, Email, Password, FormSubmit, SetStepNav } from 'payload/components';
+import ContentBlock from '../../layout/ContentBlock';
+import Form from '../../forms/Form';
+import Email from '../../field-types/Email';
+import Password from '../../field-types/Password';
+import FormSubmit from '../../forms/Submit';
+import SetStepNav from '../../utilities/SetStepNav';
 
 import './index.scss';
 
@@ -7,11 +12,11 @@ const CreateUser = () => {
 
   return (
     <ContentBlock className="create-user" align="left" width="narrow">
-      <SetStepNav nav={ [
+      <SetStepNav nav={[
         {
           label: 'Create User'
         }
-      ] } />
+      ]} />
       <h1>Create New User</h1>
       <Form
         method="POST"

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { SetStepNav } from 'payload/components';
+import SetStepNav from '../../utilities/SetStepNav';
 
 import './index.scss';
 
 const Dashboard = () => {
   return (
     <article className="dashboard">
-      <SetStepNav nav={ [] } />
+      <SetStepNav nav={[]} />
       <h1>Dashboard</h1>
       <Link to="/login">Login</Link>
       <br />

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

@@ -2,7 +2,11 @@ import React from 'react';
 import Cookies from 'universal-cookie';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { ContentBlock, Form, Email, Password, FormSubmit } from 'payload/components';
+import ContentBlock from '../../layout/ContentBlock';
+import Form from '../../forms/Form';
+import Email from '../../field-types/Email';
+import Password from '../../field-types/Password';
+import FormSubmit from '../../forms/Submit';
 
 import './index.scss';
 
@@ -24,7 +28,6 @@ const Login = props => {
   return (
     <ContentBlock className="login" width="narrow" style={{ minHeight }}>
       <div className="wrap">
-        <Logo />
         <Form
           handleAjaxResponse={handleAjaxResponse}
           method="POST"

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SetStepNav } from 'payload/components';
+import SetStepNav from '../../utilities/SetStepNav';
 
 const MediaLibrary = props => {
 

src/index.js

@@ -48,27 +48,6 @@ class Payload {
       }
     });
 
-    const webpackDevConfig = getWebpackDevConfig(options.config);
-
-    const compiler = webpack(webpackDevConfig);
-
-    options.app.use(webpackDevMiddleware(compiler, {
-      publicPath: webpackDevConfig.output.publicPath,
-    }));
-
-    options.app.get(options.config.routes.admin, (req, res, next) => {
-      compiler.outputFileSystem.readFile(path.join(__dirname, 'index.html'), (err, result) => {
-        if (err) {
-          return next(err)
-        }
-        res.set('content-type', 'text/html')
-        res.send(result)
-        res.end()
-      })
-    })
-
-    options.app.use(webpackHotMiddleware(compiler));
-
     options.app.use(fileUpload({}));
     const staticUrl = options.config.staticUrl ? options.config.staticUrl : `/${options.config.staticDir}`;
     options.app.use(staticUrl, express.static(options.config.staticDir));
@@ -225,6 +204,16 @@ class Payload {
       .get(fetch)
       .post(upsert)
       .put(upsert);
+
+    const webpackDevConfig = getWebpackDevConfig(options.config);
+
+    const compiler = webpack(webpackDevConfig);
+
+    options.app.use(webpackDevMiddleware(compiler, {
+      publicPath: options.config.routes.admin,
+    }));
+
+    options.app.use(webpackHotMiddleware(compiler));
   }
 }