Create products in it's own page

* Closes: #23

src/Head.js

@@ -43,6 +43,9 @@ function Head(props) {
         <LinkContainer to="/products">
           <NavDropdown.Item>Productos</NavDropdown.Item>
         </LinkContainer>
+        <LinkContainer to="/product/add">
+          <NavDropdown.Item>Alta codigos</NavDropdown.Item>
+        </LinkContainer>
         <LinkContainer to="/inventary">
           <NavDropdown.Item>Inventario</NavDropdown.Item>
         </LinkContainer>

src/Panel.js

@@ -4,7 +4,8 @@ import { Container, Row } from "react-bootstrap";
 import MemberAdder from "./member/MemberAdder";
 import MemberEditer from "./member/MemberEditer";
 import MemberList from "./member/MemberList";
-import ProductList from "./ProductList";
+import ProductList from "./product/ProductList";
+import CreateProduct from "./product/CreateProduct";
 import CreateInventary from "./inventary/CreateInventary";
 import InventaryList from "./inventary/InventaryList";
 import ShowInventary from "./inventary/ShowInventary";
@@ -53,6 +54,9 @@ function LogedPanel(props) {
             <Route path="/products">
               <ProductList />
             </Route>
+            <Route path="/product/add">
+              <CreateProduct />
+            </Route>
             <Route path="/inventary/add">
               <CreateInventary />
             </Route>

src/ProductAdder.js

-import React, { useState } from "react";
-import { Form, Button } from "react-bootstrap";
-import PriceEditor from "./PriceEditor";
-
-function ProductAdder(props) {
-  const [code, setCode] = useState("");
-  const [name, setName] = useState("");
-  const [price, setPrice] = useState(0);
-  const [stock, setStock] = useState(0);
-
-  const add = (e) => {
-    e.preventDefault();
-    props.addProduct({
-      code: parseInt(code),
-      price: price,
-      stock: parseInt(stock),
-      name,
-    });
-    setCode("");
-    setName("");
-    setPrice(0);
-    setStock("");
-  };
-
-  const disabled = isNaN(price) || isNaN(parseInt(code)) || !name;
-
-  return (
-    <Form onSubmit={add}>
-      <Form.Group>
-        <Form.Label>Codigo:</Form.Label>
-        <Form.Control
-          type="number"
-          placeholder="codigo"
-          value={code}
-          onChange={(e) => setCode(e.target.value)}
-        />
-      </Form.Group>
-      <Form.Group>
-        <Form.Label>Nombre:</Form.Label>
-        <Form.Control
-          placeholder="nombre"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-        />
-      </Form.Group>
-      <Form.Group>
-        <Form.Label>Precio:</Form.Label>
-        <PriceEditor value={price} onChange={setPrice} />
-      </Form.Group>
-      <Form.Group>
-        <Form.Label>Cantidad:</Form.Label>
-        <Form.Control
-          type="number"
-          placeholder="cantidad"
-          value={stock}
-          onChange={(e) => setStock(e.target.value)}
-        />
-      </Form.Group>
-      <Button disabled={disabled} type="submit">
-        Añadir
-      </Button>
-    </Form>
-  );
-}
-
-export default ProductAdder;

src/inventary/CreateInventary.js

 import React, { useState } from "react";
 import { Redirect } from "react-router-dom";
 import { Form, Row, Col, Button } from "react-bootstrap";
-import ProductPicker from "../ProductPicker";
+import ProductPicker from "../product/ProductPicker";
 import Fetcher from "../Fetcher";
 import Sender from "../Sender";
 

src/order/OrderEditor.js

 import React, { useState } from "react";
 import { Form, Row, Col } from "react-bootstrap";
-import ProductPicker from "../ProductPicker";
+import ProductPicker from "../product/ProductPicker";
 import Fetcher from "../Fetcher";
 import { date2string, time2string, daysAfterNow } from "../util";
 

src/product/CreateProduct.js

+import React, { useState } from "react";
+import { Redirect } from "react-router-dom";
+import { Col, Form, Button } from "react-bootstrap";
+import Sender from "../Sender";
+import PriceEditor from "../PriceEditor";
+
+function CreateProduct() {
+  const [code, setCode] = useState("");
+  const [name, setName] = useState("");
+  const [price, setPrice] = useState(0);
+  const [stock, setStock] = useState(0);
+  const [redirect, setRedirect] = useState(null);
+
+  if (redirect != null) {
+    return <Redirect to={"/product/" + redirect.code} />;
+  }
+
+  const body = () => {
+    return {
+      code: parseInt(code),
+      price: price,
+      stock: parseInt(stock),
+      name,
+    };
+  };
+
+  const disabled = isNaN(price) || isNaN(parseInt(code)) || !name;
+
+  return (
+    <div>
+      <h2>Crear un nuevo código de producto</h2>
+      <Sender url="/api/product" body={body} onSuccess={setRedirect}>
+        <Form.Row>
+          <Form.Group as={Col}>
+            <Form.Label>Codigo:</Form.Label>
+            <Form.Control
+              type="number"
+              placeholder="codigo"
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+            />
+          </Form.Group>
+          <Form.Group as={Col} xs={12} sm={10}>
+            <Form.Label>Producto:</Form.Label>
+            <Form.Control
+              placeholder="nombre"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </Form.Group>
+        </Form.Row>
+        <Form.Row>
+          <Form.Group as={Col}>
+            <Form.Label>Precio:</Form.Label>
+            <PriceEditor value={price} onChange={setPrice} />
+          </Form.Group>
+          <Form.Group as={Col}>
+            <Form.Label>Cantidad:</Form.Label>
+            <Form.Control
+              type="number"
+              placeholder="cantidad"
+              value={stock}
+              onChange={(e) => setStock(e.target.value)}
+            />
+          </Form.Group>
+        </Form.Row>
+        <Button variant="primary" disabled={disabled} type="submit">
+          Añadir
+        </Button>
+      </Sender>
+    </div>
+  );
+}
+
+export default CreateProduct;

src/ProductList.js → src/product/ProductList.js

 import React from "react";
 import { Table, Button, Alert, Modal } from "react-bootstrap";
-import Fetcher from "./Fetcher";
-import EditableCell from "./EditableCell";
-import ProductAdder from "./ProductAdder";
-import AuthContext from "./AuthContext";
-import { url } from "./util";
+import Fetcher from "../Fetcher";
+import EditableCell from "../EditableCell";
+import AuthContext from "../AuthContext";
+import { url } from "../util";
 
 class ProductList extends React.Component {
   static contextType = AuthContext;
@@ -75,25 +74,6 @@ class ProductList extends React.Component {
     });
   }
 
-  addProduct(product) {
-    let products = this.state.products;
-    products.push(product);
-    this.setState({ products });
-
-    const body = JSON.stringify(product);
-    fetch(url("/api/product"), {
-      headers: { "x-authentication": this.context.token },
-      method: "POST",
-      body,
-    }).then((response) => {
-      if (!response.ok) {
-        this.setState({
-          error: response.status.toString() + " " + response.statusText,
-        });
-      }
-    });
-  }
-
   modalClose() {
     this.setState({ delete: { name: null } });
   }
@@ -165,12 +145,6 @@ class ProductList extends React.Component {
           </thead>
           <tbody>{entries}</tbody>
         </Table>
-        {isAdmin && (
-          <div>
-            <p>Añadir producto:</p>
-            <ProductAdder addProduct={(p) => this.addProduct(p)} />
-          </div>
-        )}
 
         <Modal show={this.state.delete.name != null} onHide={this.modalClose}>
           <Modal.Header closeButton>

src/ProductPicker.js → src/product/ProductPicker.js

 import React from "react";
 import { Form, Row, Col, Button } from "react-bootstrap";
 import { Typeahead } from "react-bootstrap-typeahead";
-import Fetcher from "./Fetcher";
-import { printMoney } from "./util";
-import PriceEditor from "./PriceEditor";
+import Fetcher from "../Fetcher";
+import { printMoney } from "../util";
+import PriceEditor from "../PriceEditor";
 
 class ProductPicker extends React.Component {
   constructor(props) {

src/purchase/Purchase.js

 import React, { useState } from "react";
 import { Redirect } from "react-router-dom";
 import { Row, Col, Button, Alert } from "react-bootstrap";
-import ProductPicker from "../ProductPicker";
+import ProductPicker from "../product/ProductPicker";
 import MemberPicker from "../member/MemberPicker";
 import Sender from "../Sender";
 import { printMoney } from "../util";