Controlled Form and New Product Page

Author: maxwellgordon

src/components/App.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import ProductShowPage from './ProductShowPage';
 import ProductIndexPage from './ProductIndexPage';
+import NewProductPage from './NewProductPage';
 import HomePage from './HomePage';
 import NavBar from './NavBar';
 
@@ -10,9 +11,12 @@ const App = () => {
     <Router>
       <div className="App">
         <NavBar />
-        <Route path="/products/:id" component={ProductShowPage} />
-        <Route path="/products" exact component={ProductIndexPage} />
-        <Route path="/" exact component={HomePage} />
+        <Switch>
+          <Route path="/products/new" component={NewProductPage} />
+          <Route path="/products/:id" component={ProductShowPage} />
+          <Route path="/products" exact component={ProductIndexPage} />
+          <Route path="/" exact component={HomePage} />
+        </Switch>
       </div>
     </Router>
   );

src/components/NavBar.js

@@ -4,7 +4,8 @@ import { NavLink } from 'react-router-dom';
 function NavBar(props) {
   return (
     <div className="NavBar">
-      <NavLink to="/">Home</NavLink>|<NavLink to="/products">Products</NavLink>
+      <NavLink to="/">Home</NavLink>|<NavLink to="/products">Products</NavLink>|
+      <NavLink to="/products/new">New Product</NavLink>
     </div>
   );
 }

src/components/NewProductPage.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import ProductForm from './ProductForm';
+import { Session, Product } from '../requests';
+
+class NewProductPage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ...initialProduct,
+    };
+    this.updateField = this.updateField.bind(this);
+    this.createProduct = this.createProduct.bind(this);
+  }
+
+  updateField(param) {
+    // expecting params to look like the following:
+    // { title: "someValue" } or
+    // { decription: "someValue" } or
+    // { price: 12 }
+    this.setState(param);
+  }
+
+  createProduct(e) {
+    e.preventDefault();
+    const product = this.state;
+    Session.create({
+      email: 'js@winterfell.gov',
+      password: 'supersecret',
+    })
+      .then(() => {
+        return Product.create({
+          ...product,
+        });
+      })
+      .then(({ id }) => {
+        this.props.history.push(`/products/${id}`);
+      });
+  }
+
+  render() {
+    return (
+      <div className="NewProductPage">
+        <ProductForm
+          {...this.state}
+          onChange={this.updateField}
+          onSubmit={this.createProduct}
+        />
+      </div>
+    );
+  }
+}
+
+const initialProduct = {
+  title: '',
+  description: '',
+  price: '',
+};
+
+export default NewProductPage;

src/components/ProductForm.js

@@ -0,0 +1,44 @@
+import React from 'react';
+
+function ProductForm(props) {
+  return (
+    <div className="ProductForm">
+      <form onSubmit={props.onSubmit}>
+        <div>
+          <label htmlFor="title">Title</label>
+          <input
+            onChange={e => props.onChange({ title: e.currentTarget.value })}
+            type="text"
+            name="title"
+            value={props.title}
+          />
+        </div>
+        <div>
+          <label htmlFor="description">Description</label>
+          <input
+            onChange={e =>
+              props.onChange({ description: e.currentTarget.value })
+            }
+            type="text"
+            name="description"
+            value={props.description}
+          />
+        </div>
+        <div>
+          <label htmlFor="price">Price</label>
+          <input
+            onChange={e =>
+              props.onChange({ price: parseInt(e.currentTarget.value) })
+            }
+            type="number"
+            name="price"
+            value={props.price}
+          />
+        </div>
+        <input type="submit" />
+      </form>
+    </div>
+  );
+}
+
+export default ProductForm;

src/requests.js

@@ -11,4 +11,31 @@ export const Product = {
       credentials: 'include',
     }).then(res => res.json());
   },
+  create(params) {
+    return fetch(`${BASE_URL}/products`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(params),
+    }).then(res => res.json());
+  },
+};
+
+export const Session = {
+  create(params) {
+    return fetch(`${BASE_URL}/sessions`, {
+      method: 'POST',
+      credentials: 'include',
+      // to include the cookie when doing fetch, use
+      // the "credentials" option with "include" for cross-origin
+      // requests or with "same-origin" for same-origin
+      // requests.
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(params),
+    }).then(res => res.json());
+  },
 };