Merge branch 'style-localizer'

2019-02-16 18:52:19 -05:00
parent 3a2c403b09 a690c54d7f
commit ba3e60f317
24 changed files with 238 additions and 216 deletions
--- a/src/components.js
+++ b/src/components.js
@@ -37,7 +37,7 @@ export { default as Section } from './components/layout/Section';

 // Modules
 export { default as Status } from './components/modules/Status';
-export { default as StickyAction } from './components/modules/StickyAction';
+export { default as StickyHeader } from './components/modules/StickyHeader';
 export { default as HeadingButton } from './components/modules/HeadingButton';
 export { default as Filter } from './components/modules/Filter';
 export { default as APIUrl } from './components/modules/APIUrl';
--- a/src/components/data/edit.js
+++ b/src/components/data/edit.js
@@ -19,14 +19,14 @@ const withEditData = PassedComponent => {
    }

    fetchData = () => {
-      const slug = this.props.match.params.slug;
+      const { id } = this.props.match.params;

      const params = {
        locale: this.props.locale
      };

-      if (slug) {
-        api.requests.get(`${this.props.config.serverUrl}/${this.props.collection.slug}/${slug}`, params).then(
+      if (id) {
+        api.requests.get(`${this.props.config.serverUrl}/${this.props.collection.slug}/${id}`, params).then(
          res => this.setState({ data: res }),
          err => {
            console.warn(err);
--- a/src/components/forms/Form/index.js
+++ b/src/components/forms/Form/index.js
@@ -1,12 +1,21 @@
 import React, { Component, createContext } from 'react';
 import { withRouter } from 'react-router-dom';
-import { Status } from 'payload/components';
+import { connect } from 'react-redux';
+import { HiddenInput } from 'payload/components';
 import api from 'payload/api';

 import './index.scss';

 export const FormContext = createContext({});

+const mapState = state => ({
+  searchParams: state.common.searchParams
+})
+
+const mapDispatch = dispatch => ({
+  addStatus: status => dispatch({ type: 'ADD_STATUS', payload: status })
+})
+
 class Form extends Component {
  constructor(props) {
    super(props);
@@ -79,24 +88,20 @@ class Form extends Component {
          if (this.props.redirect) {
            this.props.history.push(this.props.redirect, data);
          } else {
-            this.setState({
-              status: {
-                message: res.message,
-                type: 'success'
-              },
-              processing: false
-            });
+            this.setState({ processing: false });
+            this.props.addStatus({
+              message: res.message,
+              type: 'success'
+            })
          }
        },
        error => {
          console.log(error);
-          this.setState({
-            status: {
-              message: error.message,
-              type: 'error'
-            },
-            processing: false
-          });
+          this.setState({ processing: false });
+          this.props.addStatus({
+            message: error.message,
+            type: 'error'
+          })
        }
      );
    }
@@ -114,17 +119,15 @@ class Form extends Component {
        method={this.props.method}
        action={this.props.action}
        className={this.props.className}>
-        {this.state.status && !this.state.redirect &&
-          <Status open={true}
-            type={this.state.status.type}
-            message={this.state.status.message} />
-        }
        <FormContext.Provider value={{
          setValue: this.setValue.bind(this),
          fields: this.state.fields,
          processing: this.state.processing,
          submitted: this.state.submitted
        }}>
+          <HiddenInput
+            name="locale"
+            valueOverride={this.props.searchParams.locale} />
          {this.props.children}
        </FormContext.Provider>
      </form>
@@ -132,4 +135,4 @@ class Form extends Component {
  }
 }

-export default withRouter(Form);
+export default withRouter(connect(mapState, mapDispatch)(Form));
--- a/src/components/layout/Sidebar/index.js
+++ b/src/components/layout/Sidebar/index.js
@@ -21,8 +21,8 @@ const Sidebar = props => {
      </Link>
      <span className="uppercase-label">Collections</span>
      <nav>
-        {props.collections && props.collections.map((item, i) => {
-          const href = `/collections/${item.slug}`;
+        {props.collections && Object.keys(props.collections).map((key, i) => {
+          const href = `/collections/${props.collections[key].slug}`;
          const classes = props.location.pathname.indexOf(href) > -1
            ? 'active'
            : undefined;
@@ -30,7 +30,7 @@ const Sidebar = props => {
          return (
            <Link className={classes} key={i} to={href}>
              <Arrow />
-              {props.collections[i].plural}
+              {props.collections[key].plural}
            </Link>
          );
        })}
--- a/src/components/modules/APIUrl/index.js
+++ b/src/components/modules/APIUrl/index.js
@@ -1,17 +1,31 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';

 import './index.scss';

+const mapState = state => ({
+  locale: state.common.locale,
+  config: state.common.config
+})
+
 const APIUrl = props => {

-  const apiUrl = `${props.serverUrl}/${props.collectionSlug}/${props.slug ? `${props.slug}` : ''}`;
+  const { collectionSlug, id } = props.match.params;
+
+  const apiUrl = `${props.config.serverUrl}/${collectionSlug}/${id}`;

  return (
    <div className="api-url">
      <span className="uppercase-label">API URL</span>
-      <div className="url"><a href={apiUrl} rel="noopener noreferrer" target="_blank">{apiUrl}</a></div>
+      {id &&
+        <div className="url"><a href={apiUrl} rel="noopener noreferrer" target="_blank">{apiUrl}</a></div>
+      }
+      {!id &&
+        <div>&mdash;</div>
+      }
    </div>
  );
 };

-export default APIUrl;
+export default withRouter(connect(mapState)(APIUrl));
--- a/src/components/modules/APIUrl/index.scss
+++ b/src/components/modules/APIUrl/index.scss
@@ -1,6 +1,5 @@
@import '~payload/scss/styles';

-
 .api-url {
  .url {
    overflow: hidden;
--- a/src/components/modules/Localizer/index.js
+++ b/src/components/modules/Localizer/index.js
@@ -42,14 +42,14 @@ class Localizer extends Component {

            const newParams = {
              ...this.props.searchParams,
-              locale: locale
+              locale
            };

            const search = qs.stringify(newParams);

            return (
              <li key={i}>
-                <Link to={{ search }}>
+                <Link to={{ search }} onClick={this.toggleActive}>
                  {locale}
                </Link>
              </li>
--- a/src/components/modules/Localizer/index.scss
+++ b/src/components/modules/Localizer/index.scss
@@ -21,6 +21,14 @@
      height: rem(.25);
      margin-right: rem(.375);
    }
+
+    &:hover {
+      color: $primary;
+
+      svg {
+        @include color-svg($primary);
+      }
+    }
  }

  ul {
--- a/src/components/modules/Status/index.js
+++ b/src/components/modules/Status/index.js
@@ -1,41 +1,40 @@
-import React, { Component } from 'react';
+import React from 'react';
+import { connect } from 'react-redux';
 import { Close } from 'payload/components';

 import './index.scss';

-class Status extends Component {
-  constructor(props) {
-    super(props);
+const mapState = state => ({
+  status: state.common.status
+})

-    this.state = {
-      open: this.props.open
-    }
+const mapDispatch = dispatch => ({
+  addStatus: status => dispatch({ type: 'ADD_STATUS', payload: status }),
+  removeStatus: i => dispatch({ type: 'REMOVE_STATUS', payload: i })
+})
+
+const Status = props => {
+  if (props.status.length > 0) {
+    return (
+      <ul className="status">
+        {props.status.map((status, i) => {
+          return (
+            <li className={status.type} key={i}>
+              {status.message}
+              <button className="close" onClick={e => {
+                e.preventDefault();
+                props.removeStatus(i)
+              }}>
+                <Close />
+              </button>
+            </li>
+          )
+        })}
+      </ul>
+    )
  }

-  componentDidUpdate(prevProps) {
-    if (prevProps.open !== this.props.open) {
-      this.setState({
-        open: this.props.open
-      })
-    }
-  }
-
-  render() {
-    if (this.state.open) {
-      return (
-        <div className={`status ${this.props.type}`}>
-          <div className="status-wrap">
-            {this.props.message}
-            <button className="close" onClick={() => this.setState({ open: false })}>
-              <Close />
-            </button>
-          </div>
-        </div>
-      )
-    }
-
-    return null;
-  }
+  return null;
 }

-export default Status;
+export default connect(mapState, mapDispatch)(Status);
--- a/src/components/modules/Status/index.scss
+++ b/src/components/modules/Status/index.scss
@@ -2,15 +2,17 @@

 .status {
  @include gutter;
+  list-style: none;
+  padding: 0;
+  margin: 0;

-  .status-wrap {
+  li {
    @extend %uppercase-label;
    background: $primary;
    color: $black;
    font-weight: bold;
    border-radius: $radius-sm;
    padding: rem(.5);
-    margin-top: rem(.5);
    margin-bottom: rem(.5);
    display: flex;
    justify-content: space-between;
@@ -32,6 +34,9 @@
  }

  &.error {
-    background: $error;
+
+    .status-wrap {
+      background: $error;
+    }
  }
 }
--- a/src/components/modules/StickyAction/index.js
+++ b/src/components/modules/StickyAction/index.js
@@ -1,19 +0,0 @@
-import React from 'react';
-import { Sticky } from 'payload/components';
-
-import './index.scss';
-
-const StickyAction = props => {
-  return (
-    <Sticky className="action">
-      <div className="content">
-        {props.content}
-      </div>
-      <div className="controls">
-        {props.action}
-      </div>
-    </Sticky>
-  )
-}
-
-export default StickyAction;
--- a/src/components/modules/StickyHeader/index.js
+++ b/src/components/modules/StickyHeader/index.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Sticky, Status } from 'payload/components';
+
+import './index.scss';
+
+const StickyHeader = props => {
+  return (
+    <Sticky className="sticky-header">
+      {props.showStatus &&
+        <Status />
+      }
+      <div className="sticky-header-wrap">
+        <div className="content">
+          {props.content}
+        </div>
+        <div className="controls">
+          {props.action}
+        </div>
+      </div>
+    </Sticky>
+  )
+}
+
+export default StickyHeader;
--- a/src/components/modules/StickyHeader/index.scss
+++ b/src/components/modules/StickyHeader/index.scss
@@ -1,12 +1,15 @@
@import '~payload/scss/styles';

-.sticky.action {
+.sticky-header {
  @include gutter;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;

-  > .content {
+  .sticky-header-wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .content {
    flex-grow: 1;
    min-width: 0;
    padding-right: rem(1);
--- a/src/components/routes/Collections.js
+++ b/src/components/routes/Collections.js
@@ -9,28 +9,30 @@ const mapState = state => ({

 const CollectionRoutes = props => {

-  return props.collections.map((collection, i) => {
-    if (collection) {
+  return (
+    <Switch>
+      <Route path={'/collections/:collectionSlug/create'} exact
+        render={routeProps => {
+          const { collectionSlug } = routeProps.match.params;
+          const Edit = props.views[collectionSlug].Edit;
+          return <Edit {...routeProps} collection={props.collections[collectionSlug]} config={props.config} />;
+        }} />

-      const Edit = props.views[collection.slug].Edit;
-      const Archive = props.views[collection.slug].Archive;
+      <Route path={'/collections/:collectionSlug/:id'} exact
+        render={routeProps => {
+          const { collectionSlug } = routeProps.match.params;
+          const Edit = props.views[routeProps.match.params.collectionSlug].Edit;
+          return <Edit {...routeProps} collection={props.collections[collectionSlug]} config={props.config} />;
+        }} />

-      return (
-        <Switch key={i}>
-          <Route path={`/collections/${collection.slug}/create`} exact
-            render={routeProps => <Edit {...routeProps} collection={collection} config={props.config} />} />
-
-          <Route path={`/collections/${collection.slug}/:slug`}
-            render={routeProps => <Edit {...routeProps} collection={collection} config={props.config} />} />
-
-          <Route path={`/collections/${collection.slug}`} exact
-            render={routeProps => <Archive {...routeProps} collection={collection} config={props.config} />} />
-        </Switch>
-      );
-    }
-
-    return null;
-  });
+      <Route path={'/collections/:collectionSlug'} exact
+        render={routeProps => {
+          const { collectionSlug } = routeProps.match.params;
+          const Archive = props.views[routeProps.match.params.collectionSlug].Archive;
+          return <Archive {...routeProps} collection={props.collections[collectionSlug]} config={props.config} />;
+        }} />
+    </Switch>
+  );
 };

 export default withRouter(connect(mapState)(CollectionRoutes));
--- a/src/components/utilities/SetLocale/index.js
+++ b/src/components/utilities/SetLocale/index.js
@@ -24,7 +24,7 @@ class SetLocale extends Component {
    const { searchParams, config, setLocale } = this.props;

    if (searchParams) {
-      if (searchParams.locales && config.localization.locales.indexOf(searchParams.locales) > -1) {
+      if (searchParams.locale && config.localization.locales.indexOf(searchParams.locale) > -1) {
        setLocale(searchParams.locale);
      } else if (!this.state.init) {
        setLocale(config.localization.defaultLocale);
--- a/src/components/utilities/SetSearchParams/index.js
+++ b/src/components/utilities/SetSearchParams/index.js
@@ -15,7 +15,7 @@ class SetSearchParams extends Component {
      { ignoreQueryPrefix: true }
    );

-    this.props.setParams(params);
+    this.props.setParams(params ? params : {});
  }

  componentDidMount() {
--- a/src/components/views/collections/Edit/index.js
+++ b/src/components/views/collections/Edit/index.js
@@ -12,8 +12,8 @@ const EditView = props => {

  if (props.isEditing) {
    nav.push({
-      url: `/collections/${props.collection.slug}/${props.data.slug}`,
-      label: props.data ? props.data[props.collection.entrySlug] : ''
+      url: `/collections/${props.collection.slug}/${props.data._id}`,
+      label: props.data ? props.data[props.collection.useAsTitle] : ''
    })
  } else {
    nav.push({
@@ -27,8 +27,8 @@ const EditView = props => {
      <header>
        {props.isEditing &&
          <h1>
-            Edit {props.data &&
-              props.data[props.collection.entrySlug]
+            Edit {Object.keys(props.data).length > 0 &&
+              (props.data[props.collection.useAsTitle] ? props.data[props.collection.useAsTitle] : '[Untitled]')
            }
          </h1>
        }
--- a/src/middleware/locale.js
+++ b/src/middleware/locale.js
@@ -6,27 +6,28 @@ import languageParser from 'accept-language-parser';
 * @param localization
 * @returns {Function}
 */
+
 export default function locale(localization) {
  return function (req, res, next) {
    let setLocale;
    if (req.query.locale) {
-      setLocale = localization.languages.find(search => search === req.query.locale);
+      setLocale = localization.locales.find(search => search === req.query.locale);
      if (setLocale) {
        req.locale = setLocale;
      }
      if (req.query.locale === '*' || req.query.locale === 'all')
        return next();
    }
-    if (req.body.locale){
-      setLocale = localization.languages.find(search => search === req.body.locale);
+    if (req.body.locale) {
+      setLocale = localization.locales.find(search => search === req.body.locale);
      if (setLocale) {
        req.locale = setLocale;
      }
    }
    if (!req.locale && req.headers['accept-language'])
-      req.locale = languageParser.pick(localization.languages, req.headers['accept-language']);
+      req.locale = languageParser.pick(localization.locales, req.headers['accept-language']);
    if (!req.locale)
-      req.locale = localization.defaultLanguage;
+      req.locale = localization.defaultLocale;

    next();
  }
--- a/src/reducers/common.js
+++ b/src/reducers/common.js
@@ -1,5 +1,4 @@
 const defaultState = {
-  menuStatus: false,
  scrollPos: 0,
  windowWidth: 1400,
  windowHeight: 900,
@@ -10,16 +9,12 @@ const defaultState = {
  locale: null,
  config: null,
  collections: null,
-  searchParams: null
+  searchParams: {},
+  status: []
 };

 export default (state = defaultState, action) => {
  switch (action.type) {
-    case 'TOGGLE_MENU':
-      return {
-        ...state,
-        menuStatus: !state.menuStatus
-      };

    case 'UPDATE_SCROLL':

@@ -78,6 +73,24 @@ export default (state = defaultState, action) => {
        searchParams: action.payload
      }

+    case 'ADD_STATUS':
+      return {
+        ...state,
+        status: [
+          action.payload,
+          ...state.status
+        ]
+      };
+
+    case 'REMOVE_STATUS': {
+      const newStatus = [...state.status];
+      newStatus.splice(action.payload, 1);
+      return {
+        ...state,
+        status: newStatus
+      };
+    }
+
    default:
    //
  }