extracts Status component, structures responses so they contain messages

src/components.js

@@ -21,6 +21,7 @@ export { default as FormSubmit } from './components/forms/Submit';
 export { default as PayloadIcon } from './components/graphics/PayloadIcon';
 export { default as PayloadLogo } from './components/graphics/PayloadLogo';
 export { default as Arrow } from './components/graphics/Arrow';
+export { default as Close } from './components/graphics/Close';
 
 // Layout
 export { default as DefaultTemplate } from './components/layout/DefaultTemplate';
@@ -30,6 +31,7 @@ export { default as ContentBlock } from './components/layout/ContentBlock';
 export { default as Table } from './components/layout/Table';
 
 // Modules
+export { default as Status } from './components/modules/Status';
 export { default as StickyAction } from './components/modules/StickyAction';
 export { default as HeadingButton } from './components/modules/HeadingButton';
 export { default as Filter } from './components/modules/Filter';

src/components/forms/Form/index.js

@@ -1,5 +1,5 @@
 import React, { Component, createContext } from 'react';
-import { Input } from 'payload/components';
+import { Input, Status } from 'payload/components';
 import api from 'payload/api';
 
 import './index.scss';
@@ -16,12 +16,9 @@ class Form extends Component {
       submitted: false,
       processing: false
     };
-
-    this.submit = this.submit.bind(this);
-    this.setValue = this.setValue.bind(this);
   }
 
-  setValue(field) {
+  setValue = field => {
     this.setState(prevState => ({
       ...prevState,
       fields: {
@@ -34,7 +31,7 @@ class Form extends Component {
     }));
   }
 
-  submit(e) {
+  submit = e => {
     this.setState({
       submitted: true
     });
@@ -73,13 +70,14 @@ class Form extends Component {
       // Make the API call from the action
       api.requests[this.props.method.toLowerCase()](this.props.action, data).then(
         res => {
+          console.log(res);
           // Provide form data to the redirected page
           if (this.props.redirect) {
             this.props.history.push(this.props.redirect, data);
           } else {
             this.setState({
               status: {
-                message: res.msg,
+                message: res.message,
                 type: 'success'
               },
               processing: false
@@ -105,20 +103,6 @@ class Form extends Component {
 
   render() {
 
-    let Status = () => {
-      return null;
-    };
-
-    if (this.state.status && !this.state.redirect) {
-      Status = () => {
-        return (
-          <div className={`status open ${this.state.status.type}`}>
-            {this.state.status.message}
-          </div>
-        );
-      };
-    }
-
     return (
       <form
       noValidate
@@ -126,7 +110,11 @@ class Form extends Component {
       method={this.props.method}
       action={this.props.action}
       className={this.props.className}>
-        <Status />
+        {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,

src/components/forms/Form/index.scss

@@ -7,32 +7,4 @@ form {
   > * {
     width: 100%;
   }
-
-	.status {
-		@extend %uppercase-label;
-		height: auto;
-		max-height: 0;
-		opacity: 0;
-		margin-bottom: 0;
-		transition: max-height 300ms ease-out,
-			opacity 300ms ease,
-			margin-bottom 300ms ease,
-			padding 300ms ease;
-		background: $primary;
-		color: $black;
-		font-weight: bold;
-		padding: 0;
-		border-radius: $radius-sm;
-
-		&.open {
-			padding: rem(.5);
-			max-height: 400px;
-			opacity: 1;
-			margin-bottom: rem(.5);
-		}
-
-		&.error {
-			background: $error;
-		}
-	}
 }

src/components/graphics/Arrow/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default props => {
+const Arrow = props => {
   return (
     <svg className="icon arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 199.35">
       <line className="stroke" stroke={props.color} x1="12.5" y1="99.8" x2="192.8" y2="99.8"/>
@@ -8,3 +8,5 @@ export default props => {
     </svg>
   );
 };
+
+export default Arrow;

src/components/graphics/Close/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Close = props => {
+  return (
+    <svg className="icon close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+      <line className="stroke" stroke={props.color} x1="0" y1="0" x2="48" y2="48"/>
+      <line className="stroke" stroke={props.color} x1="0" y1="48" x2="48" y2="0"/>
+    </svg>
+  );
+};
+
+export default Close;

src/components/modules/Status/index.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import { Close } from 'payload/components';
+
+import './index.scss';
+
+class Status extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      open: this.props.open
+    }
+  }
+
+  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}`}>
+          {this.props.message}
+          <button className="close" onClick={() => this.setState({ open: false} )}>
+            <Close />
+          </button>
+        </div>
+      )
+    }
+
+    return null;
+  }
+}
+
+export default Status;

src/components/modules/Status/index.scss

@@ -0,0 +1,33 @@
+@import '~payload/scss/styles';
+
+.status {
+  @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;
+
+  button {
+    @extend %btn-reset;
+    cursor: pointer;
+
+    svg {
+      @include color-svg($black);
+      width: rem(.35);
+      height: rem(.35);
+    }
+
+    &:hover {
+      opacity: .5;
+    }
+  }
+
+  &.error {
+    background: $error;
+  }
+}

src/components/views/collections/Edit/index.js

@@ -29,7 +29,7 @@ const EditView = props => {
       <header>
         {isEditing &&
           <h1>
-            Edit {props.collection.singular} {props.data &&
+            Edit {props.data &&
               props.data[props.collection.uid]
             }
           </h1>

src/scss/resets.scss

@@ -0,0 +1,6 @@
+%btn-reset {
+  border: 0;
+  background: none;
+  box-shadow: none;
+  border-radius: 0;
+}

src/scss/styles.scss

@@ -4,3 +4,4 @@
 @import 'grid';
 @import 'queries';
 @import 'form';
+@import 'resets';