Merge branch 'dev' of https://gitlab.mynisum.com/ascend/inventory-promotion-react into dev

Merged with dev

Dockerfile

+FROM node:14.16-alpine3.13 as build
+WORKDIR /app
+ENV PATH /app/node_modules/.bin:$PATH
+COPY . .
+RUN yarn
+RUN yarn build
+
+FROM nginx:stable-alpine
+COPY --from=build /app/build /usr/share/nginx/html
+COPY --from=build /app/nginx/nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

nginx/nginx.conf

+server {
+listen 80;
+location / {
+root /usr/share/nginx/html;
+index index.html index.htm;
+try_files $uri $uri/ /index.html =404;
+}
+}

src/component/ProductForm.jsx

-import React from 'react'
+import React, { useState } from "react";
+import { useHistory, useLocation } from "react-router";
+
+const emptyForm = {
+  sku: "",
+  upc: "",
+  productName: "",
+  brand: "",
+  category: "",
+  price: 0.0,
+  availableStock: 0,
+  productDescription: "",
+  productImageUrl: "",
+  productImage: ""
+};
+
+ProductForm.defaultProps = {
+  product: { ...emptyForm },
+};
+
+export default function ProductForm(props) {
+  const { product } = props;
+  const [form, setForm] = useState(product);
+  const [errors, setErrors] = useState([]);
+  const history = useHistory();
+
+  const validate = () => {
+    setErrors([]);
+    const errs = [];
+
+    if (form.sku.length < 3) {
+      errs.push("SKU must be at least 3 characters");
+    }
+    if (form.upc.length < 3) {
+      errs.push("UPC must be at least 3 characters");
+    }
+    if (form.productName.length === 0) {
+      errs.push("Please enter a product name");
+    }
+    if (form.brand.length === 0) {
+      errs.push("Please enter a brand");
+    }
+    if (form.category.length === 0) {
+      errs.push("Please specify a category");
+    }
+    if (Number(form.price) <= 0) {
+      errs.push("Price must be greater than 0");
+    }
+    if (Number(form.availableStock) <= 0) {
+      errs.push("Stock must be greater than 0");
+    }
+
+    setErrors([...errs]);
+  };
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    validate();
+
+    if (errors.length === 0) {
+      // console.log(form);
+      fetch("http://localhost:8080/api/products", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(form),
+      })
+        .then((res) => {
+          if (res.ok) {
+            res.json().then((data) => console.log(data));
+            history.push("/products");
+          } else {
+            setErrors([
+              "The provided SKU was found on an existing object, please try another",
+            ]);
+          }
+        })
+        .catch((err) => {
+          setErrors([err.message]);
+        });
+    }
+  };
 
-export default function ProductForm({ product }) {
   return (
-    <div>
-      PRODUCT FORM
+    <div className="container mt-3">
+      {errors.length ? (
+        <ul className="list-group">
+          {errors.map((error, i) => (
+            <li key={i} className="list-group-item list-group-item-danger">
+              {error}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      <form onSubmit={onSubmit}>
+        <div className="row mt-3">
+          <div className="col">
+            <label htmlFor="productSku" className="form-label">
+              SKU
+            </label>
+            <input
+              required
+              name="sku"
+              type="text"
+              className="form-control"
+              id="productSku"
+              value={form.sku}
+              onChange={(e) => setForm({ ...form, sku: e.target.value })}
+            />
+          </div>
+          <div className="col">
+            <label htmlFor="productUpc" className="form-label">
+              UPC
+            </label>
+            <input
+              required
+              name="upc"
+              type="text"
+              className="form-control"
+              id="productUpc"
+              value={form.upc}
+              onChange={(e) => setForm({ ...form, upc: e.target.value })}
+            />
+          </div>
+        </div>
+        <div className="row mt-3">
+          <div className="col-6">
+            <div>
+              <label htmlFor="productName" className="form-label">
+                Name
+              </label>
+              <input
+                required
+                name="productName"
+                type="text"
+                className="form-control"
+                id="productName"
+                value={form.productName}
+                onChange={(e) => setForm({ ...form, productName: e.target.value })}
+              />
+            </div>
+            <div>
+              <label htmlFor="brand" className="form-label">
+                Brand
+              </label>
+              <input
+                required
+                name="brand"
+                type="text"
+                className="form-control"
+                id="brand"
+                value={form.brand}
+                onChange={(e) => setForm({ ...form, brand: e.target.value })}
+              />
+            </div>
+            <div>
+              <label htmlFor="category" className="form-label">
+                Category
+              </label>
+              <input
+                required
+                name="category"
+                type="text"
+                className="form-control"
+                id="category"
+                value={form.category}
+                onChange={(e) => setForm({ ...form, category: e.target.value })}
+              />
+            </div>
+          </div>
+          <div className="col-6">
+            <label htmlFor="productDescription" className="form-label">
+              Description
+            </label>
+            <textarea
+              name="productDescription"
+              id="productDescription"
+              cols="40"
+              rows="7"
+              className="form-control"
+              value={form.productDescription}
+              onChange={(e) => setForm({ ...form, productDescription: e.target.value })}
+            ></textarea>
+          </div>
+        </div>
+        <div className="row mt-3">
+          <div>
+            <label htmlFor="price" className="form-label">
+              Price
+            </label>
+            <input
+              required
+              name="price"
+              type="number"
+              className="form-control"
+              id="price"
+              value={form.price}
+              onChange={(e) => setForm({ ...form, price: e.target.value })}
+            />
+          </div>
+          <div>
+            <label htmlFor="stock" className="form-label">
+              Stock
+            </label>
+            <input
+              required
+              name="stock"
+              type="number"
+              className="form-control"
+              id="stock"
+              value={form.availableStock}
+              onChange={(e) => setForm({ ...form, availableStock: e.target.value })}
+            />
+          </div>
+        </div>
+        <div className="row mt-3">
+          <label htmlFor="productImage" className="form-label">
+            Product Image
+          </label>
+          <input
+            id="productImageUrl"
+            name="productImageUrl"
+            className="form-control form-control-lg"
+            type="url"
+            placeholder="Enter image URL here or upload image below..."
+            value={form.productImageUrl}
+            onChange={(e) => setForm({ ...form, productImageUrl: e.target.value, productImage:""})}
+          ></input>
+          <input
+            id="productImage"
+            name="productImage"
+            className="form-control form-control-lg"
+            type="file"
+            value={form.productImage}
+            onChange={(e) => setForm({ ...form, productImage: e.target.value, productImageUrl:"" })}
+          ></input>
+        </div>
+
+        <div className="row mt-3">
+          <div className="col-12">
+            <button type="submit" className="btn btn-primary mt-3">
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
     </div>
-  )
+  );
 }