From a690c54d7f77b7fd7522c2d108e4ff29e2df9ffc Mon Sep 17 00:00:00 2001
From: James <james@keen-studio.com>
Date: Sat, 16 Feb 2019 18:52:01 -0500
Subject: [PATCH] updates Status styling and placement

---
 demo/Page/components/Edit/index.js            | 21 ++++---
 src/components.js                             |  2 +-
 src/components/forms/Form/index.js            | 37 +++++------
 src/components/modules/APIUrl/index.scss      |  1 -
 src/components/modules/Status/index.js        | 63 +++++++++----------
 src/components/modules/Status/index.scss      |  6 +-
 src/components/modules/StickyAction/index.js  | 19 ------
 src/components/modules/StickyHeader/index.js  | 24 +++++++
 .../{StickyAction => StickyHeader}/index.scss | 13 ++--
 .../views/collections/Edit/index.js           |  4 +-
 src/reducers/common.js                        | 27 +++++---
 11 files changed, 117 insertions(+), 100 deletions(-)
 delete mode 100644 src/components/modules/StickyAction/index.js
 create mode 100644 src/components/modules/StickyHeader/index.js
 rename src/components/modules/{StickyAction => StickyHeader}/index.scss (77%)

diff --git a/demo/Page/components/Edit/index.js b/demo/Page/components/Edit/index.js
index 327f20a447..73b2e84e7a 100644
--- a/demo/Page/components/Edit/index.js
+++ b/demo/Page/components/Edit/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {
   withEditData,
   EditView,
-  StickyAction,
+  StickyHeader,
   APIUrl,
   Button,
   Form,
@@ -16,7 +16,7 @@ import {
 const Edit = props => {
 
   const { id } = props.match.params;
-  const { data, collection, config, locale } = props;
+  const { data, collection, config } = props;
 
   const sampleRepeaterValue = [
     {
@@ -29,14 +29,15 @@ const Edit = props => {
   return (
     <EditView data={data} collection={collection} isEditing={id ? true : false}>
       <Form method={id ? 'put' : 'post'} action={`${config.serverUrl}/${collection.slug}${id ? `/${id}` : ''}`}>
-        <StickyAction content={
-          <APIUrl />
-        } action={
-          <React.Fragment>
-            <Button type="secondary">Preview</Button>
-            <FormSubmit>Save</FormSubmit>
-          </React.Fragment>
-        } />
+        <StickyHeader showStatus={true}
+          content={
+            <APIUrl />
+          } action={
+            <React.Fragment>
+              <Button type="secondary">Preview</Button>
+              <FormSubmit>Save</FormSubmit>
+            </React.Fragment>
+          } />
 
         <Input name="title"
           label="Page Title"
diff --git a/src/components.js b/src/components.js
index 69b00801f1..c1cf8d30eb 100644
--- 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';
diff --git a/src/components/forms/Form/index.js b/src/components/forms/Form/index.js
index 241c1c8e77..d8c0c624e7 100644
--- a/src/components/forms/Form/index.js
+++ b/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));
diff --git a/src/components/modules/APIUrl/index.scss b/src/components/modules/APIUrl/index.scss
index 6db994fad3..1691f80032 100644
--- 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;
diff --git a/src/components/modules/Status/index.js b/src/components/modules/Status/index.js
index 96d0cc9369..73dbc09537 100644
--- 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);
diff --git a/src/components/modules/Status/index.scss b/src/components/modules/Status/index.scss
index c0e0d5ebb3..92f712fc78 100644
--- 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;
diff --git a/src/components/modules/StickyAction/index.js b/src/components/modules/StickyAction/index.js
deleted file mode 100644
index a86fcaa789..0000000000
--- a/src/components/modules/StickyAction/index.js
+++ /dev/null
@@ -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;
diff --git a/src/components/modules/StickyHeader/index.js b/src/components/modules/StickyHeader/index.js
new file mode 100644
index 0000000000..d4420f558b
--- /dev/null
+++ 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;
diff --git a/src/components/modules/StickyAction/index.scss b/src/components/modules/StickyHeader/index.scss
similarity index 77%
rename from src/components/modules/StickyAction/index.scss
rename to src/components/modules/StickyHeader/index.scss
index 77175aed5c..4651133028 100644
--- a/src/components/modules/StickyAction/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);
diff --git a/src/components/views/collections/Edit/index.js b/src/components/views/collections/Edit/index.js
index 9880ecaf5a..f1bb04cadb 100644
--- 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({
diff --git a/src/reducers/common.js b/src/reducers/common.js
index 0dbb1a8cff..ae8322a2fe 100644
--- 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: {}
+  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:
     //
   }