New Product Errors

Author: maxwellgordon

src/components/FormErrors/FormErrors.css

@@ -0,0 +1,7 @@
+.FormErrors {
+  color: red;
+  padding-left: 1.2em;
+  /* top | right | bottom | left */
+  margin: 0 0 5px 0;
+  font-size: 0.8em;
+}

src/components/FormErrors/FormErrors.js

@@ -0,0 +1,21 @@
+import './FormErrors.css';
+import React from 'react';
+const FormErrors = props => {
+  const { errors = [], forField } = props;
+  let filteredErrors = errors;
+  if (forField) {
+    filteredErrors = errors.filter(
+      err => err.field.toLowerCase() === forField.toLowerCase(),
+    );
+  }
+  return (
+    <ul className="FormErrors">
+      {filteredErrors.map((error, i) => (
+        <li key={i}>
+          {error.field} {error.message}
+        </li>
+      ))}
+    </ul>
+  );
+};
+export default FormErrors;

src/components/NewProductPage.js

@@ -7,6 +7,7 @@ class NewProductPage extends Component {
     super(props);
     this.state = {
       ...initialProduct,
+      errors: [],
     };
     this.updateField = this.updateField.bind(this);
     this.createProduct = this.createProduct.bind(this);
@@ -22,7 +23,7 @@ class NewProductPage extends Component {
 
   createProduct(e) {
     e.preventDefault();
-    const product = this.state;
+    const { errors, ...product } = this.state;
     Session.create({
       email: 'js@winterfell.gov',
       password: 'supersecret',
@@ -32,8 +33,12 @@ class NewProductPage extends Component {
           ...product,
         });
       })
-      .then(({ id }) => {
-        this.props.history.push(`/products/${id}`);
+      .then(({ id, errors }) => {
+        if (errors) {
+          this.setState({ errors });
+        } else {
+          this.props.history.push(`/products/${id}`);
+        }
       });
   }
 

src/components/ProductForm.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import FormErrors from './FormErrors/FormErrors';
 
 function ProductForm(props) {
   return (
@@ -7,33 +8,44 @@ function ProductForm(props) {
         <div>
           <label htmlFor="title">Title</label>
           <input
-            onChange={e => props.onChange({ title: e.currentTarget.value })}
+            onChange={e =>
+              props.onChange({
+                title: e.currentTarget.value,
+              })
+            }
             type="text"
             name="title"
             value={props.title}
           />
+          <FormErrors forField="title" errors={props.errors} />
         </div>
         <div>
           <label htmlFor="description">Description</label>
           <input
             onChange={e =>
-              props.onChange({ description: e.currentTarget.value })
+              props.onChange({
+                description: e.currentTarget.value,
+              })
             }
             type="text"
             name="description"
             value={props.description}
           />
+          <FormErrors forField="description" errors={props.errors} />
         </div>
         <div>
           <label htmlFor="price">Price</label>
           <input
             onChange={e =>
-              props.onChange({ price: parseInt(e.currentTarget.value) })
+              props.onChange({
+                price: parseInt(e.currentTarget.value),
+              })
             }
             type="number"
             name="price"
             value={props.price}
           />
+          <FormErrors forField="price" errors={props.errors} />
         </div>
         <input type="submit" />
       </form>