-
- );
-}
-
+import React, { useState, useEffect } from "react";
+import AddOrderTable from "../Components/AddOrderTable";
+import OrderForm from "../Components/OrderForm";
+import "../Styles/Navbar.css";
+import { addAuthHeader } from "../Components/helpers";
+
+function AddOrders() {
+ const [orders, setOrders] = useState([]);
+
+ useEffect(() => {
+ fetchOrders()
+ .then((res) => (res.status === 200 ? res.json() : undefined))
+ .then((json) => {
+ if (json) {
+ setOrders(json);
+ } else {
+ setOrders(null);
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }, []);
+
+ function removeOneOrder(order_id) {
+ const updated = orders.filter((order) => order["_id"] !== order_id);
+ deleteOrder(order_id)
+ .then((res) => res.status)
+ .then((status) => {
+ if (status === 204) {
+ setOrders(updated);
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }
+
+ function updateOrder(order) {
+ if (typeof order.quantity === "number") {
+ order.quantity = order.quantity.toString();
+ }
+
+ postOrderUnit(order)
+ .then((res) => {
+ if (res.status === 201) {
+ return res.json();
+ } else {
+ return;
+ }
+ })
+ .then((res) => {
+ // res = JSON.stringify(res).split(",");
+ // const item_count = Number(
+ // res[res.length - 3].slice(res[res.length - 3].indexOf('"item_count":') + 13)
+ // );
+ // let temp_list = res;
+ // for (let i = 1; i < 3 * item_count; i++) {
+ // let combo = temp_list[0] + ", " + temp_list[1];
+ // temp_list = temp_list.slice(2);
+ // temp_list.unshift(combo);
+ // }
+ // res = temp_list;
+ // let temp = res[0].slice(1);
+ // let temp2 = res[1];
+ // res[0] = "{" + res[2];
+ // res[1] = temp;
+ // res[2] = temp2;
+ // res = res.slice(1).reduce((accumulator, cur_val) => accumulator + ", " + cur_val, res[0]);
+
+ setOrders([...orders, res]);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }
+
+ function fetchOrders() {
+ return fetch("http://localhost:8000/order-units", {
+ headers: addAuthHeader()
+ });
+ }
+
+ function postOrderUnit(order) {
+ return fetch("http://localhost:8000/order-units", {
+ method: "POST",
+ headers: addAuthHeader({
+ "Content-Type": "application/json"
+ }),
+ body: JSON.stringify(order)
+ });
+ }
+
+ function deleteOrder(id) {
+ const uri = `http://localhost:8000/order-units/${id}`;
+ return fetch(uri, {
+ method: "DELETE",
+ headers: addAuthHeader({
+ "Content-Type": "application/json"
+ })
+ });
+ }
+
+ function runPost(order_str) {
+ return fetch("http://localhost:8000/orders", {
+ method: "POST",
+ headers: addAuthHeader({
+ "Content-Type": "application/json"
+ }),
+ body: order_str
+ });
+ }
+
+ function postOrder() {
+ let order_str = "{\"items\":" + JSON.stringify(orders) + ", \"item_count\":" + orders.length + "}";
+ runPost(order_str);
+ for (let i = 0; i < orders.length; i++) {
+ deleteOrder(orders[i]["_id"]);
+ }
+ setOrders([]);
+ }
+
+ return (
+ Add orders:
-
+
+ );
+}
+
export default AddOrders;
\ No newline at end of file
diff --git a/packages/react-frontend/src/Views/EditProfile.jsx b/packages/react-frontend/src/Views/EditProfile.jsx
new file mode 100644
index 0000000..62fe201
--- /dev/null
+++ b/packages/react-frontend/src/Views/EditProfile.jsx
@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from "react";
+import ProfileEdit from "../Components/ProfileEdit";
+import "../Styles/Profile.css";
+import Cookies from "js-cookie";
+import { addAuthHeader } from "../Components/helpers";
+import { useNavigate } from "react-router-dom";
+
+function EditProfile() {
+ const navigate = useNavigate();
+ function changeProfile(profile){
+ fetch("http://localhost:8000/users/profile", {
+ method: "POST",
+ headers: addAuthHeader({
+ "Content-Type": "application/json"
+ }),
+ body: JSON.stringify(profile)
+ })
+ .then((response) => {
+ if (!response.ok) {
+ // Handle the case where the server returns an error
+ throw new Error("User Not Found (Invalid Token)");
+ }
+ navigate("/profile");
+ });
+ }
+ return (
+ Add orders:
+
+
+ );
+}
+
+export default EditProfile;
diff --git a/packages/react-frontend/src/Views/Inventory.jsx b/packages/react-frontend/src/Views/Inventory.jsx
index 86faa12..4b84ec1 100644
--- a/packages/react-frontend/src/Views/Inventory.jsx
+++ b/packages/react-frontend/src/Views/Inventory.jsx
@@ -1,119 +1,110 @@
-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 (
- Edit Profile:
+
-
-
-
- )
-}
-
-export default Inventory
+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 (
+ Inventory:
-
+
+
+
+ );
+}
+
+export default Inventory;
diff --git a/packages/react-frontend/src/Views/LoginPage.jsx b/packages/react-frontend/src/Views/LoginPage.jsx
index cff1e5d..0783779 100644
--- a/packages/react-frontend/src/Views/LoginPage.jsx
+++ b/packages/react-frontend/src/Views/LoginPage.jsx
@@ -1,47 +1,48 @@
-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 (
- Inventory:
+
-
- );
-}
-
-export default Login;
+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 (
+ Login Page:
-
+
+ );
+}
+
+export default Login;
diff --git a/packages/react-frontend/src/Views/ManageOrders.jsx b/packages/react-frontend/src/Views/ManageOrders.jsx
index 5d4fa21..a869d4e 100644
--- a/packages/react-frontend/src/Views/ManageOrders.jsx
+++ b/packages/react-frontend/src/Views/ManageOrders.jsx
@@ -1,106 +1,116 @@
-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) => {
- if (res.status === 201) {
- return res.json();
- } else {
- return;
- }
- })
- .then((res) => {
- setProducts([...products, res]);
- })
- .catch((error) => {
- console.log(error);
- });
- }
-
- function fetchProducts() {
- return fetch("http://localhost:8000/products", {
- headers: addAuthHeader()
- });
- }
-
- function postProduct(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 (
- Login Page:
+
-
-
-
- );
-}
-
-export default Inventory;
+import React, { useState, useEffect } from "react";
+import OrderTable from "../Components/OrderTable";
+import SearchBar from "../Components/SearchBar";
+import "../Styles/Navbar.css";
+import { addAuthHeader } from "../Components/helpers";
+
+function ManageOrders() {
+ const [orders, setOrders] = useState([]);
+
+ useEffect(() => {
+ fetchOrders()
+ .then((res) => (res.status === 200 ? res.json() : undefined))
+ .then((json) => {
+
+ if (json) {
+ setOrders(json);
+ } else {
+ setOrders(null);
+ }
+ //console.log(orders);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }, []);
+
+ function removeOneOrder(order_id) {
+ //console.log(orders[0]["_id"]);
+ const updated = orders.filter((order) => {
+ return order["_id"] !== order_id;
+ });
+ deleteOrder(order_id)
+ .then((res) => res.status)
+ .then((status) => {
+ if (status === 204) {
+ setOrders(updated);
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ };
+
+ function fetchOrders() {
+ return fetch("http://localhost:8000/orders", {
+ headers: addAuthHeader()
+ });
+ }
+
+ function fetchSearch(search) {
+ search = "search=" + search;
+ const uri = `http://localhost:8000/orders/?${search}`;
+ console.log(uri);
+ return fetch(uri, {
+ headers: addAuthHeader()
+ });
+ }
+
+ function deleteOrder(id) {
+ const uri = `http://localhost:8000/orders/${id}`;
+ return fetch(uri, {
+ method: "DELETE",
+ headers: addAuthHeader({
+ "Content-Type": "application/json"
+ })
+ });
+ }
+
+ function searchOrder(str) {
+ /*let temp_orders = orders;
+ let match_items = [];
+ temp_orders = temp_orders.filter((o) =>
+ {
+ let items = o["items"];
+ console.log(items);
+ items = items.filter((i) =>
+ {
+ console.log(i);
+ console.log(i["product"].includes(str));
+ return(i["product"].includes(str));
+ });
+ console.log(items);
+ console.log(o);
+ if (items.length != 0){
+ return true;
+ }
+ });
+ console.log(temp_orders);*/
+
+ console.log(str);
+ fetchSearch(str)
+ .then((res) => (res.status === 200 ? res.json() : undefined))
+ .then((json) => {
+
+ if (json) {
+ setOrders(json);
+ } else {
+ setOrders(null);
+ }
+ //console.log(orders);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }
+
+ return (
+ Manage orders:
-
+
+ );
+}
+
+export default ManageOrders;
\ No newline at end of file
diff --git a/packages/react-frontend/src/Views/OrderStatistics.jsx b/packages/react-frontend/src/Views/OrderStatistics.jsx
index dbfdea1..6c6f74e 100644
--- a/packages/react-frontend/src/Views/OrderStatistics.jsx
+++ b/packages/react-frontend/src/Views/OrderStatistics.jsx
@@ -1,106 +1,101 @@
-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) => {
- if (res.status === 201) {
- return res.json();
- } else {
- return;
- }
- })
- .then((res) => {
- setProducts([...products, res]);
- })
- .catch((error) => {
- console.log(error);
- });
- }
-
- function fetchProducts() {
- return fetch("http://localhost:8000/products", {
- headers: addAuthHeader()
- });
- }
-
- function postProduct(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 (
- Manage orders:
+
-
-
-
- );
-}
-
-export default Inventory;
+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) => {
+ if (res.status === 201) {
+ return res.json();
+ } else {
+ return;
+ }
+ })
+ .then((res) => {
+ setProducts([...products, res]);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }
+
+ function fetchProducts() {
+ return fetch("http://localhost:8000/products", {
+ headers: addAuthHeader()
+ });
+ }
+
+ function postProduct(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 (
+ Order stats:
-
+
+
+
+ );
+}
+
+export default Inventory;
diff --git a/packages/react-frontend/src/Views/ProductPage.jsx b/packages/react-frontend/src/Views/ProductPage.jsx
new file mode 100644
index 0000000..2565fc6
--- /dev/null
+++ b/packages/react-frontend/src/Views/ProductPage.jsx
@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { addAuthHeader } from "../Components/helpers";
+import "../Styles/Navbar.css";
+
+function ProductPage() {
+ const { id } = useParams();
+ const [product, setProduct] = useState(null);
+ const [formValues, setFormValues] = useState({
+ product: '',
+ quantity: '',
+ price: '',
+ });
+
+ useEffect(() => {
+ fetchProduct(id)
+ .then((res) => {
+ if (res) {
+ setProduct(res);
+ setFormValues({
+ product: res.product,
+ quantity: res.quantity,
+ price: res.price,
+ });
+ } else {
+ setProduct(null);
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }, [id]);
+
+ function fetchProduct(id) {
+ console.log(`Fetching product with id: ${id}`);
+ return fetch(`http://localhost:8000/products/${id}`, {
+ headers: addAuthHeader()
+ })
+ .then((res) => {
+ console.log("Response status:", res.status);
+ if (res.status === 200) {
+ return res.json();
+ } else {
+ throw new Error("Failed to fetch product");
+ }
+ })
+ .catch((error) => {
+ console.error("Error fetching product:", error);
+ });
+ }
+
+ function updateProduct(event) {
+ event.preventDefault(); // Prevent the default form submission behavior
+
+ const updatedProduct = {
+ product: formValues.product,
+ quantity: formValues.quantity,
+ price: formValues.price,
+ };
+
+ patchProduct(updatedProduct)
+ .then((res) => {
+ if (res.status === 200) {
+ return res.json();
+ } else {
+ throw new Error("Failed to update product");
+ }
+ })
+ .then((res) => {
+ setProduct(res);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }
+
+ function patchProduct(product) {
+ console.log("patching: ", product);
+ return fetch(`http://localhost:8000/products/${id}`, {
+ method: "PATCH",
+ headers: addAuthHeader({
+ "Content-Type": "application/json"
+ }),
+ body: JSON.stringify(product)
+ });
+ }
+
+ function handleInputChange(event) {
+ const { name, value } = event.target;
+ setFormValues({
+ ...formValues,
+ [name]: value,
+ });
+ }
+
+ if (!product) {
+ return (
+ Order stats:
+
+
+ 
+
+ Loading...
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+export default ProductPage;
\ No newline at end of file
diff --git a/packages/react-frontend/src/Views/Profile.jsx b/packages/react-frontend/src/Views/Profile.jsx
index 3ab8d82..91db39b 100644
--- a/packages/react-frontend/src/Views/Profile.jsx
+++ b/packages/react-frontend/src/Views/Profile.jsx
@@ -1,114 +1,132 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
-import '../Styles/Profile.css';
-import {addAuthHeader} from '../Components/helpers'
-
-
-function Profile({ user_id }) {
- const [profilePicture, setProfilePicture] = useState('');
- const [user, setUser] = useState({bio : '', skills : ['', '']});
-
-
- useEffect(() => {
- async function getUser() {
- const user_details = await axios.get(`http://localhost:8000/users/${user_id.id}`, {
- headers: addAuthHeader()
- });
- const user = user_details.data;
- setUser(user);
-
-
- const imageUrl = `http://localhost:8000/profile-picture/${user.profilePicture}`;
-
- setProfilePicture(imageUrl);
- }
- async function fetchProfilePicture() {
- try {
- const imageUrl = `http://localhost:8000/profile-picture/${user.profilePicture}`;
- setProfilePicture(imageUrl);
- } catch (error) {
- console.error('Failed to load user profile picture', error);
- }
- }
- if (user.profilePicture) {
- fetchProfilePicture();
- }
- if (user_id) {
- getUser();
- }
- else {
- console.log("user id undefined");
- }
- }, [user.profilePicture]);
-
-
- const handleFileChange = async (e) => {
- const file = e.target.files[0];
- if (file) {
- const formData = new FormData();
- formData.append('email', user.email);
- formData.append('name', user.name);
- formData.append('profilePicture', file);
-
- try {
- // Send the file to the server for processing and storage in MongoDB
- const response = await axios.post('http://localhost:8000/profile-picture', formData, {
- headers: addAuthHeader({
- 'Content-Type': 'multipart/form-data'
- })
- });
-
- console.log(response);
- const imageUrl = `http://localhost:8000/profile-picture/${response.data}`;
-
- setProfilePicture(imageUrl);
-
-
- console.log('Profile picture uploaded successfully');
- } catch (err) {
- console.error('Error uploading profile picture:', err);
- }
- }
- };
-
-
- return (
-
+
+
+ Your Product: {product.product}
+Edit Product
+ +
-
- );
-}
-
-export default Profile;
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import "../Styles/Profile.css";
+import { addAuthHeader } from "../Components/helpers";
+import { useNavigate } from "react-router-dom";
+import Cookies from 'js-cookie';
+
+
+function Profile() {
+ const navigate = useNavigate();
+ const [profilePicture, setProfilePicture] = useState("");
+ const [user, setUser] = useState({ bio: "", skills: ["", ""] });
+
+ useEffect(() => {
+ async function getUser() {
+ const user_details = await axios.get(`http://localhost:8000/users`, {
+ headers: addAuthHeader()
+ });
+ const user = user_details.data;
+ setUser(user);
+
+ const imageUrl = `http://localhost:8000/profile-picture/${user.profilePicture}`;
+
+ setProfilePicture(imageUrl);
+ }
+ async function fetchProfilePicture() {
+ try {
+ const imageUrl = `http://localhost:8000/profile-picture/${user.profilePicture}`;
+ setProfilePicture(imageUrl);
+ } catch (error) {
+ console.error("Failed to load user profile picture", error);
+ }
+ }
+ if (user.profilePicture) {
+ fetchProfilePicture();
+ }
+ getUser().catch((error) => {
+ console.log(error);
+ });
+ }, [user.profilePicture]);
+
+ const handleFileChange = async (e) => {
+ const file = e.target.files[0];
+ if (file) {
+ const formData = new FormData();
+ formData.append("email", user.email);
+ formData.append("name", user.name);
+ formData.append("profilePicture", file);
+
+ try {
+ // Send the file to the server for processing and storage in MongoDB
+ const response = await axios.post("http://localhost:8000/profile-picture", formData, {
+ headers: addAuthHeader({
+ "Content-Type": "multipart/form-data"
+ })
+ });
+
+ console.log(response);
+ const imageUrl = `http://localhost:8000/profile-picture/${response.data}`;
+
+ setProfilePicture(imageUrl);
+
+ console.log("Profile picture uploaded successfully");
+ } catch (err) {
+ console.error("Error uploading profile picture:", err);
+ }
+ }
+ };
+
+ function deleteProfile() {
+ fetch("http://localhost:8000/users", {
+ method: "DELETE",
+ headers: addAuthHeader({
+ "Content-Type": "application/json"
+ })
+ }).then((res) => {
+ if (res.status === 204)
+ {
+ Cookies.remove('safeHavenToken');
+ }
+ });
+ }
+ function editProfile() {
+ navigate("/profile/edit");
+ }
+
+ return (
+
-
-
-
-
-
-
-
- {user.name}
-{user.location}
-{user.email}
-
-
- Bio
-{user.bio}
-
-
- Skills
--
- {user.skills.map((skill, index) => (
-
- {skill} - ))} -
+
+ );
+}
+
+export default Profile;
\ No newline at end of file
diff --git a/packages/react-frontend/src/Views/SignUpPage.jsx b/packages/react-frontend/src/Views/SignUpPage.jsx
index 0ae6f76..991eef5 100644
--- a/packages/react-frontend/src/Views/SignUpPage.jsx
+++ b/packages/react-frontend/src/Views/SignUpPage.jsx
@@ -1,45 +1,46 @@
-import React, { useState, useEffect } from "react";
-import Auth from "../Components/Auth";
-import "../Styles/Navbar.css";
-import Cookies from "js-cookie"
-import { useNavigate } from 'react-router-dom';
-
-
-function Signup() {
- const navigate = useNavigate();
- function createUser(user) {
- console.log(user)
- fetch("http://localhost:8000/users", {
- 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 => {
- // Here, 'token' contains the JWT token sent from the server
- console.log(token);
- Cookies.remove('safeHavenToken');
- 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
- });
- navigate('/inventory');
- });
- }
- return (
-
+
+
+
+
+
+
+ {user.name}
+{user.location}
+{user.email}
+
+
+ Bio
+{user.bio}
+
+
+ Skills
+-
+ {user.skills.map((skill, index) => (
+
- {skill} + ))} +
+
+
+
+
+
+
+
-
- );
-}
-
-export default Signup;
+import React, { useState, useEffect } from "react";
+import Auth from "../Components/Auth";
+import "../Styles/Navbar.css";
+import Cookies from "js-cookie";
+import { useNavigate } from "react-router-dom";
+
+function Signup() {
+ const navigate = useNavigate();
+ function createUser(user) {
+ console.log(user);
+ fetch("http://localhost:8000/users", {
+ 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) => {
+ // Here, 'token' contains the JWT token sent from the server
+ console.log(token);
+ Cookies.remove("safeHavenToken");
+ 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
+ });
+ navigate("/inventory");
+ });
+ }
+ return (
+ Signup Page:
-
+
+ );
+}
+
+export default Signup;
diff --git a/packages/react-frontend/src/main.jsx b/packages/react-frontend/src/main.jsx
index 6937c56..f32fc32 100644
--- a/packages/react-frontend/src/main.jsx
+++ b/packages/react-frontend/src/main.jsx
@@ -4,7 +4,6 @@ import ReactDOMClient from "react-dom/client";
import MyApp from "./MyApp";
import "./Styles/main.css";
-
// Create the container
const container = document.getElementById("root");
@@ -12,4 +11,4 @@ const container = document.getElementById("root");
const root = ReactDOMClient.createRoot(container);
// Initial render: Render an element to the Root
-root.render(