Add products

src/ProductAdder.js

+import React, { useState } from "react";
+import { Form, InputGroup, Col, Row, Button } from "react-bootstrap";
+
+function ProductAdder(props) {
+  const [code, setCode] = useState();
+  const [name, setName] = useState();
+  const [eur, setEur] = useState();
+  const [cents, setCents] = useState();
+  const [stock, setStock] = useState();
+
+  const add = (e) => {
+    e.preventDefault();
+    props.addProduct({
+      code: parseInt(code),
+      price: parseInt(eur) * 100 + parseInt(cents),
+      stock: parseInt(stock),
+      name,
+    });
+    setCode("");
+    setName("");
+    setEur("");
+    setCents("");
+    setStock("");
+  };
+
+  return (
+    <Form onSubmit={add}>
+      <Form.Group as={Row}>
+        <Col>
+          <Form.Control
+            type="number"
+            placeholder="codigo"
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+          />
+        </Col>
+        <Col>
+          <Form.Control
+            placeholder="nombre"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+        </Col>
+        <Col sm={3}>
+          <InputGroup>
+            <Form.Control
+              placeholder="euros"
+              value={eur}
+              onChange={(e) => setEur(e.target.value)}
+            />
+            <InputGroup.Append>
+              <InputGroup.Text>.</InputGroup.Text>
+            </InputGroup.Append>
+            <Form.Control
+              placeholder="centimos"
+              value={cents}
+              onChange={(e) => setCents(e.target.value)}
+              min="0"
+              max="99"
+            />
+            <InputGroup.Append>
+              <InputGroup.Text>€</InputGroup.Text>
+            </InputGroup.Append>
+          </InputGroup>
+        </Col>
+        <Col>
+          <Form.Control
+            type="number"
+            placeholder="cantidad"
+            value={stock}
+            onChange={(e) => setStock(e.target.value)}
+          />
+        </Col>
+        <Col sm={1}>
+          <Button type="submit">+</Button>
+        </Col>
+      </Form.Group>
+    </Form>
+  );
+}
+
+export default ProductAdder;

src/ProductList.js

@@ -2,6 +2,7 @@ import React from "react";
 import { Table, Button, Alert } from "react-bootstrap";
 import Fetcher from "./Fetcher";
 import EditableCell from "./EditableCell";
+import ProductAdder from "./ProductAdder";
 import AuthContext from "./AuthContext";
 import { printMoney } from "./util";
 
@@ -67,6 +68,25 @@ class ProductList extends React.Component {
     });
   }
 
+  addProduct(product) {
+    let products = this.state.products;
+    products.push(product);
+    this.setState({ products });
+
+    const body = JSON.stringify(product);
+    fetch("/api/product", {
+      headers: { "x-authentication": this.context.token },
+      method: "POST",
+      body,
+    }).then((response) => {
+      if (!response.ok) {
+        this.setState({
+          error: response.status.toString() + " " + response.statusText,
+        });
+      }
+    });
+  }
+
   render() {
     let alert = null;
     if (this.state.error !== null) {
@@ -133,6 +153,12 @@ class ProductList extends React.Component {
           </thead>
           <tbody>{entries}</tbody>
         </Table>
+        {isAdmin && (
+          <div>
+            <p>Añadir producto:</p>
+            <ProductAdder addProduct={(p) => this.addProduct(p)} />
+          </div>
+        )}
       </Fetcher>
     );
   }