updates Status styling and placement

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';

src/components/forms/Form/index.js

@@ -1,7 +1,7 @@
 import React, { Component, createContext } from 'react';
 import { withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { Status, HiddenInput } from 'payload/components';
+import { HiddenInput } from 'payload/components';
 import api from 'payload/api';
 
 import './index.scss';
@@ -12,6 +12,10 @@ 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);
@@ -84,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'
+          })
         }
       );
     }
@@ -119,11 +119,6 @@ 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,
@@ -140,4 +135,4 @@ class Form extends Component {
   }
 }
 
-export default withRouter(connect(mapState)(Form));
+export default withRouter(connect(mapState, mapDispatch)(Form));

src/components/modules/APIUrl/index.scss

@@ -1,6 +1,5 @@
 @import '~payload/scss/styles';
 
-
 .api-url {
   .url {
     overflow: hidden;

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);

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;

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;

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;

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);

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({

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: {}
+  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:
     //
   }