+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 | 1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x + | import React, { useState } from "react";
+
+function Auth(props) {
+ const [userAuth, setLogin] = useState({
+ username: "",
+ password: ""
+ });
+
+ function handleChange(event) {
+ const { name, value } = event.target;
+ if (name === "password") {
+ setLogin({ username: userAuth["username"], password: value });
+ } else setLogin({ username: value, password: userAuth["password"] });
+ }
+
+ function submitForm() {
+ props.handleSubmit(userAuth);
+ setLogin({ username: "", password: "" });
+ }
+
+ return (
+ <form>
+ <label htmlFor="username">username</label>
+ <input
+ type="text"
+ name="username"
+ id="username"
+ value={userAuth.username}
+ onChange={handleChange}
+ />
+ <label htmlFor="password">password</label>
+ <input
+ type="text"
+ name="password"
+ id="password"
+ value={userAuth.password}
+ onChange={handleChange}
+ />
+ <input type="button" value="Submit" onClick={submitForm} />
+ </form>
+ );
+}
+
+export default Auth;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 | 1x +1x +14x +14x +14x +14x +14x +14x +14x +11x +11x +1x +1x +11x +8x +8x +11x +2x +2x +11x +14x +14x +1x +1x +1x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +1x +1x + | import React, { useState } from "react";
+
+function Form(props) {
+ const [order, setOrder] = useState({
+ product: "",
+ quantity: ""
+ });
+
+ function handleChange(event) {
+ const { name, value } = event.target;
+ if (name === "quantity") {
+ setOrder({ product: order["product"], quantity: value });
+ }
+ if (name === "product") {
+ setOrder({ product: value, quantity: order["quantity"], price: order["price"] });
+ }
+ if (name === "price") {
+ setOrder({ product: order["product"], quantity: order["quantity"], price: value });
+ }
+ }
+
+ function submitForm() {
+ props.handleSubmit(order);
+ setOrder({ product: "", quantity: "", price: "" });
+ }
+
+ return (
+ <form>
+ <label htmlFor="product">product</label>
+ <input
+ type="text"
+ name="product"
+ id="product"
+ value={order.product}
+ onChange={handleChange}
+ />
+ <label htmlFor="quantity">quantity</label>
+ <input
+ type="text"
+ name="quantity"
+ id="quantity"
+ value={order.quantity}
+ onChange={handleChange}
+ />
+ <label htmlFor="price">price</label>
+ <input type="text" name="price" id="price" value={order.price} onChange={handleChange} />
+ <input type="button" value={props.text} onClick={submitForm} />
+ </form>
+ );
+}
+
+export default Form;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 | 1x +1x + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + +1x +1x + | import React from "react"; + +function TableHeader() { + return ( + <thead> + <tr> + <th>ID</th> + <th>Product</th> + <th>Quantity</th> + <th>Price</th> + <th>Remove</th> + <th>Edit</th> + </tr> + </thead> + ); +} + +function TableBody(props) { + if (props.productData === null) { + return <caption>Data Unavailable</caption>; + } else { + const rows = props.productData.map((row, index) => { + if (row != undefined) { + return ( + <tr key={index}> + <td>{row._id.toString()}</td> + <td>{row.product}</td> + <td>{row.quantity}</td> + <td>{row.price}</td> + <td> + <button onClick={() => props.removeProduct(index)}>Delete</button> + </td> + <td> + <a href={`http://localhost:5173/product/${row._id}`}> + <button>Edit</button> + </a> + </td> + </tr> + ); + } + }); + return <tbody>{rows}</tbody>; + } +} + +function Table(props) { + return ( + <table> + <TableHeader /> + <TableBody productData={props.productData} removeProduct={props.removeProduct} /> + </table> + ); +} + +export default Table; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 | 1x +1x + + + + + + + + + + + +1x + | import Cookies from "js-cookie"; + +function addAuthHeader(otherHeaders = {}) { + const token = Cookies.get("safeHavenToken"); + if (token === undefined) { + return otherHeaders; + } else { + return { + ...otherHeaders, + Authorization: `Bearer ${token}` + }; + } +} +export { addAuthHeader }; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Form.jsx | +
+
+ |
+ 100% | +52/52 | +100% | +6/6 | +100% | +3/3 | +100% | +52/52 | +
| Table.jsx | +
+
+ |
+ 10.9% | +6/55 | +100% | +0/0 | +0% | +0/3 | +10.9% | +6/55 | +
| helpers.js | +
+
+ |
+ 21.42% | +3/14 | +100% | +0/0 | +0% | +0/1 | +21.42% | +3/14 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 | 1x +1x +15x +15x +15x +15x +15x +15x +15x +11x +11x +1x +1x +11x +8x +8x +11x +2x +2x +11x +15x +15x +1x +1x +1x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +1x +1x + | import React, { useState } from "react";
+
+function Form(props) {
+ const [order, setOrder] = useState({
+ product: "",
+ quantity: ""
+ });
+
+ function handleChange(event) {
+ const { name, value } = event.target;
+ if (name === "quantity") {
+ setOrder({ product: order["product"], quantity: value });
+ }
+ if (name === "product") {
+ setOrder({ product: value, quantity: order["quantity"], price: order["price"] });
+ }
+ if (name === "price") {
+ setOrder({ product: order["product"], quantity: order["quantity"], price: value });
+ }
+ }
+
+ function submitForm() {
+ props.handleSubmit(order);
+ setOrder({ product: "", quantity: "", price: "" });
+ }
+
+ return (
+ <form>
+ <label htmlFor="product">product</label>
+ <input
+ type="text"
+ name="product"
+ id="product"
+ value={order.product}
+ onChange={handleChange}
+ />
+ <label htmlFor="quantity">quantity</label>
+ <input
+ type="text"
+ name="quantity"
+ id="quantity"
+ value={order.quantity}
+ onChange={handleChange}
+ />
+ <label htmlFor="price">price</label>
+ <input type="text" name="price" id="price" value={order.price} onChange={handleChange} />
+ <input type="button" value={props.text} onClick={submitForm} />
+ </form>
+ );
+}
+
+export default Form;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 | 1x +1x +1x +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x + | import React, { useState, useEffect } from "react";
+import Table from "../Components/Table";
+import Form from "../Components/Form";
+import "../Styles/Navbar.css";
+import { addAuthHeader } from "../Components/helpers";
+
+function Inventory() {
+ const [products, setProducts] = useState([]);
+
+ useEffect(() => {
+ fetchProducts()
+ .then((res) => (res.status === 200 ? res.json() : undefined))
+ .then((json) => {
+ if (json) {
+ setProducts(json);
+ } else {
+ setProducts(null);
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }, []);
+
+ function removeOneProduct(index) {
+ let product_id = -1;
+ const updated = products.filter((product, i) => {
+ if (i === index) {
+ product_id = product["_id"];
+ }
+ return i !== index;
+ });
+ deleteProduct(product_id)
+ .then((res) => res.status)
+ .then((status) => {
+ if (status === 204) {
+ setProducts(updated);
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }
+
+ function updateList(product) {
+ if (typeof product.quantity === "number") {
+ product.quantity = product.quantity.toString();
+ }
+
+ postProduct(product)
+ .then((res) => {
+ console.log(res.body);
+ if (res.status === 201) {
+ return res.json();
+ } else {
+ return;
+ }
+ })
+ .then((res) => {
+ console.log(res);
+ const productIndex = products.findIndex((product) => product.product === res.product);
+ if (productIndex !== -1) {
+ setProducts(products.map((product, index) => (index === productIndex ? res : product)));
+ } else {
+ setProducts([...products, res]);
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }
+
+ function fetchProducts() {
+ const promise = fetch("http://localhost:8000/products", {
+ headers: addAuthHeader()
+ });
+ return promise;
+ }
+
+ function postProduct(product) {
+ console.log("posting:", product);
+ return fetch("http://localhost:8000/products", {
+ method: "POST",
+ headers: addAuthHeader({
+ "Content-Type": "application/json"
+ }),
+ body: JSON.stringify(product)
+ });
+ }
+
+ function deleteProduct(id) {
+ const uri = `http://localhost:8000/products/${id}`;
+ return fetch(uri, {
+ method: "DELETE",
+ headers: addAuthHeader({
+ "Content-Type": "application/json"
+ })
+ });
+ }
+
+ return (
+ <div className="ProductList">
+ <h1>Inventory:</h1>
+ <Table productData={products} removeProduct={removeOneProduct} />
+ <Form handleSubmit={updateList} text="Add to Inventory"/>
+ </div>
+ );
+}
+
+export default Inventory;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 | 1x +1x +1x +1x +1x +1x +1x +5x +5x +5x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +5x +5x +5x +5x +5x +5x +5x +1x +1x + | import React, { useState, useEffect } from "react";
+//import Table from "../Components/Table";
+import Auth from "../Components/Auth";
+import "../Styles/Navbar.css";
+import Cookies from "js-cookie";
+import { useNavigate } from "react-router-dom";
+
+function Login() {
+ const navigate = useNavigate();
+ function authenticateUser(user) {
+ console.log(user);
+ fetch("http://localhost:8000/login", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json"
+ },
+ body: JSON.stringify(user)
+ })
+ .then((response) => {
+ if (!response.ok) {
+ // Handle the case where the server returns an error
+ throw new Error("Invalid username/password");
+ }
+ return response.text();
+ })
+ .then((token) => {
+ Cookies.remove("safeHavenToken");
+ // Here, 'token' contains the JWT token sent from the server
+ Cookies.set("safeHavenToken", token, {
+ expires: 24 / 24, // 1 hour in days
+ path: "/", // cookie path
+ secure: false, // set to true if using HTTPS
+ sameSite: "strict" // or 'lax' depending on your requirements
+ });
+ console.log(token);
+ console.log(Cookies.get("safeHavenToken"));
+ navigate("/inventory");
+ });
+ }
+ return (
+ <div className="ProductList">
+ <h1>Login Page:</h1>
+ <Auth handleSubmit={authenticateUser} />
+ </div>
+ );
+}
+
+export default Login;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Inventory.jsx | +
+
+ |
+ 7.27% | +8/110 | +100% | +0/0 | +0% | +0/1 | +7.27% | +8/110 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Form.jsx | +
+
+ |
+ 100% | +52/52 | +100% | +6/6 | +100% | +3/3 | +100% | +52/52 | +