Merchant order page (#67)

* Added merchant order page, and updated theme * just need to stash changes * can show order information * Removed usused code * removed prices * removed prices * debug * debugging * loads data * before pulling * able to see the prices and quantity * fix merge conflict * remove unused var * bug --------- Co-authored-by: Philip Kaufholz <[email protected]> Co-authored-by: hachiyuki8 <[email protected]>
CMU-17-356 · Mar 22, 2023 · 106d92f · 106d92f
1 parent ad3f5d7
commit 106d92f
Show file tree

Hide file tree

Showing 16 changed files with 1,392 additions and 39 deletions.
diff --git a/backend/src/controllers/orders.ts b/backend/src/controllers/orders.ts
@@ -7,10 +7,10 @@ class OrdersController {
   public getOrders = async (req: Request, res: Response) => {
     if (req.query.status == null) {
       await Order.find({})
-        .then(orders => {
+        .then((orders: any) => {
           return res.status(200).json(orders)
         })
-        .catch(err => {
+        .catch((err: string) => {
           console.log("getOrders: " + err)
           return res.status(500).json(err)
         });
@@ -20,10 +20,10 @@ class OrdersController {
         return res.status(404).json("Invalid order status")
       }
       await Order.find({ status: status })
-        .then(orders => {
+        .then((orders: any) => {
           return res.status(200).json(orders)
         })
-        .catch(err => {
+        .catch((err: string) => {
           console.log("getOrders: " + err)
           return res.status(500).json(err)
         });
@@ -32,13 +32,13 @@ class OrdersController {
 
   public getOrderById = async (req: Request, res: Response) => {
     await Order.findById(req.params.id)
-      .then(order => {
+      .then((order: any) => {
         if (order) {
           return res.status(200).json(order)
         }
         return res.status(404).json(`Order ${req.params.id} not found`)
       })
-      .catch(err => {
+      .catch((err: string) => {
         console.log("getOrderById: " + err)
         return res.status(500).json(err)
       });
@@ -68,7 +68,7 @@ class OrdersController {
 
   public assignDroneToOrder = async (req: Request, res: Response) => {
     await Order.findById(req.params.id)
-      .then(async (order) => {
+      .then(async (order: any) => {
         if (order) {
           const drone_id = await MerchantsController.getFirstAvailableDrone()
           if (drone_id) {
@@ -78,7 +78,7 @@ class OrdersController {
         }
         return res.status(404).json(`Order ${req.params.id} not found`)
       })
-      .catch(err => {
+      .catch((err: string) => {
         console.log("assignDroneToOrder: " + err)
         return res.status(500).json(err)
       });

diff --git a/backend/src/controllers/products.ts b/backend/src/controllers/products.ts
@@ -4,24 +4,24 @@ import { Request, Response } from 'express'
 class ProductsController {
   public getProducts = async (req: Request, res: Response) => {
     await Product.find({})
-      .then(products => {
+      .then((products: any) => {
         return res.status(200).json(products)
       })
-      .catch(err => {
+      .catch((err: string) => {
         console.log("getProducts: " + err)
         return res.status(500).json(err)
       });
   }
 
   public getProductByTitle = async (req: Request, res: Response) => {
     await Product.findOne({title: req.params.title})
-      .then(product => {
+      .then((product: any) => {
         if (product) {
           return res.status(200).json(product)
         }
         return res.status(404).json(`Product ${req.params.title} not found`)
       })
-      .catch(err => {
+      .catch((err: string) => {
         console.log("getProductByTitle: " + err)
         return res.status(500).json(err)
       });

diff --git a/backend/src/index.ts b/backend/src/index.ts
@@ -49,6 +49,7 @@ app.use(cors(options));
 app.use(express.json())
 app.use('/api', router)
 
+
 const server = app.listen(port, () => {
   console.log(`⚡️[server]: Server is running at http://localhost:${port}`);
 });

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -10,6 +10,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/cors": "^2.8.13",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.12",
     "@types/react": "^18.0.28",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -4,6 +4,7 @@ import OrderPage from './pages/OrderPage';
 import SignUpPage from './pages/SignUpPage';
 import CheckoutPage from './pages/CheckoutPage';
 import Layout from './components/Layout';
+import MerchantOrderPage from './pages/MerchantOrderPage';
 import CustomerPageLoader from './pages/CustomerPageLoader';
 
 type AppProps = {}
@@ -19,6 +20,7 @@ function App (props : AppProps) {
                     <Route path="order" element={<OrderPage />} />
                     <Route path="signup" element={<SignUpPage />} />
                     <Route path="checkout" element={<CheckoutPage />} />
+                    <Route path="merchant/:id" element={<MerchantOrderPage />} />
                 </Route>
             </Routes>
         </BrowserRouter>

diff --git a/frontend/src/api/getOrders.tsx b/frontend/src/api/getOrders.tsx
@@ -1,33 +1,49 @@
 import axios from "axios";
-import CustomerOrder from "../components/CustomerOrder";
+import Product from "../components/Order";
 
 interface OrderResponse {
-    username: string,
-    items: [{
-      title: string;
-      quantity: number;
-    }],
-    totals: number,
-    address: string,
-    transaction_id: string,
-    status: string,
+   username : String,
+   items: [{
+       title: String,
+       quantity: Number,
+   }],
+   transaction_id: String
+   totals : Number,
+   address : String    // Delivery address
+   status: String      // unpaid -> paid -> sent -> delivered
+    _id: string;
   }
 
 
-function convertToOrder(json: OrderResponse): CustomerOrder {
+  function convertToOrder(json: OrderResponse): Product {
     return {
-      name: json.username,
-      id: json.transaction_id,
-      items: json.items,
-      address: json.address,
-      price: json.totals,
+        username : json.username,
+        items: json.items,
+        transaction_id: json.transaction_id,
+        totals : json.totals,
+        address : json.address,    // Delivery address
+        status: json.status,  
+
+      id: json._id
     };
   }
 
 async function getOrders() {
-    const products = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/api/orders`)
-    const data_array = products.data.map(convertToOrder);
+    // https://dronuts-backend.fly.dev/api/orders
+    const orders = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/api/orders`)
+    const data_array = orders.data.map(convertToOrder);
+    console.log("jedwp")
+    console.log(data_array)
     return data_array
 }
 
-export default getOrders
+async function getSpecificOrders(id: string) {
+  // https://dronuts-backend.fly.dev/api/orders
+  const orders = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/api/orders/${id}`)
+  console.log("orders", orders)
+  //@ts-ignore
+  const data_array = convertToOrder(orders.data);
+  return data_array
+}
+
+export {getOrders, getSpecificOrders}
diff --git a/frontend/src/api/getSpecificProduct.tsx b/frontend/src/api/getSpecificProduct.tsx
@@ -0,0 +1,31 @@
+import axios from "axios";
+import Product from "../components/Product";
+
+interface ProductResponse {
+    image: string;
+    title: string;
+    display_name: string;
+    price: number;
+    _id: string;
+  }
+
+
+  function convertToProduct(json: any): Product {
+    return {
+      name: json.display_name,
+      title : json.title,
+      image: json.image,
+      price: json.price,
+      id: json._id
+    };
+  }
+
+async function getSpecificProducts(name:string) {
+    const products = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/api/products/`+name)
+    console.log(products.data)
+    return products.data
+    // returns {image: '', _id: '63fe706e9886852807f775c9', title: 'plain', display_name: 'Plain donut', price: 0.99}
+}
+
+
+export default getSpecificProducts
diff --git a/frontend/src/components/CustomerOrder.tsx b/frontend/src/components/CustomerOrder.tsx
@@ -1,12 +1,12 @@
 interface CustomerOrder {
-    name: string,
+    username: string,
     id: string,
     items: [{
         title: string;
         quantity: number;
       }],
     address: string,
-    price: number,
+    totals: number,
   }
 
 export default CustomerOrder
diff --git a/frontend/src/components/Order.tsx b/frontend/src/components/Order.tsx
@@ -0,0 +1,16 @@
+
+interface Order {
+    username : String,
+   items: [{
+       title: String,
+       quantity: Number,
+   }],
+   transaction_id: String
+   totals : Number,
+   address : String    // Delivery address
+   status: String      // unpaid -> paid -> sent -> delivered
+   id: string;
+
+}
+
+export default Order
diff --git a/frontend/src/components/Orders.tsx b/frontend/src/components/Orders.tsx
@@ -6,8 +6,9 @@ import TableCell from '@mui/material/TableCell';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
-import getOrders from "../api/getOrders";
+import { getOrders } from "../api/getOrders";
 import CustomerOrder from "./CustomerOrder";
+import { Link } from 'react-router-dom';
 
 interface TitleProps {
 	children?: React.ReactNode;
@@ -25,12 +26,14 @@ export default function Orders() {
   const [orders, setOrders] = useState([])
   useEffect(() => {
       const fetchData = async function () {
+        //@ts-ignore
           const fetchedOrders = await getOrders()
           setOrders(fetchedOrders)
           console.log(JSON.stringify(fetchedOrders))
       }
       fetchData()
   }, [setOrders])
+  console.log(orders)
   return (
     <React.Fragment>
       <Title>Current Orders</Title>
@@ -45,9 +48,9 @@ export default function Orders() {
         <TableBody>
           {orders.map((row : CustomerOrder) => (
             <TableRow key={row.id}>
-              <TableCell>{row.name}</TableCell>
+              <TableCell><Link to= {`/merchant/${row.id}`} > {row.username}</Link></TableCell>
               <TableCell>{row.items.map(item => item.title + " x" + item.quantity + ", ")}</TableCell>
-              <TableCell align="right">{`$${row.price}`}</TableCell>
+              <TableCell align="right">{`$${row.totals}`}</TableCell>
             </TableRow>
           ))}
         </TableBody>

diff --git a/frontend/src/components/ueOrderArray.tsx b/frontend/src/components/ueOrderArray.tsx
@@ -0,0 +1,40 @@
+import useLocalStorageState, { LocalStorageState } from 'use-local-storage-state'
+import Order from './Order';
+
+const useOrderArray = (key: string, initialArray? : Order[]) => {
+
+  const [orders, setOrders] = initialArray ? useLocalStorageState(key, {defaultValue: initialArray}) // eslint-disable-line react-hooks/rules-of-hooks
+                                               : useLocalStorageState(key) as LocalStorageState<Order[]> // eslint-disable-line react-hooks/rules-of-hooks
+
+  const handleAddOrder= (order : Order) => {
+    setOrders(orders.concat([order]))
+  };
+
+//   const handleRemoveProduct = (id: string) => {
+//     const removedItem = products.find((product) => product.id === id);
+//     if (removedItem !== undefined) {
+//         const removeIndex = products.indexOf(removedItem)
+//         setProducts(products.slice(0, removeIndex).concat(products.slice(removeIndex+1)));
+//     }
+//   };
+
+//   const getTotalPrice = () => {
+//     return orders.reduce((total, item) => total + item.price , 0);
+//   };
+
+  const numInArray = (thisID : string) => {
+    const notThisProduct = orders.filter((order) => order.id === thisID)
+    return notThisProduct.length
+  }
+
+  return {
+    orders,
+    pushOrder: handleAddOrder,
+    // removeProduct: (id: string) => handleRemoveProduct(id),
+    // totalPrice: getTotalPrice,
+    setOrders: setOrders,
+    numInArray : numInArray
+  };
+};
+
+export default useOrderArray;
diff --git a/frontend/src/pages/CustomerPage.tsx b/frontend/src/pages/CustomerPage.tsx
@@ -66,4 +66,3 @@ function CustomerPage (props : CustomerPageProps) {
 };
 
 export default CustomerPage;
-
Original file line number	Diff line number	Diff line change
Expand Up		@@ -66,4 +66,3 @@ function CustomerPage (props : CustomerPageProps) {
		};

		export default CustomerPage;