added backend route to fid product by sku, now showing order item picture in order item component

ecom-service/src/main/java/com/nisum/ecomservice/controller/ProductsController.java

@@ -6,11 +6,9 @@ import com.nisum.ecomservice.service.ProductService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
-import org.springframework.web.bind.annotation.CrossOrigin;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
 import reactor.core.publisher.Flux;
+import reactor.core.publisher.Mono;
 
 @RestController
 @RequestMapping("/api")
@@ -38,4 +36,11 @@ public class ProductsController {
         return ResponseEntity.ok(productService.getAllPromotions());
     }
 
+    @GetMapping("/products/{sku}")
+    public ResponseEntity<Mono<Product>> getProductBySku(@PathVariable String sku) {
+        return ResponseEntity.ok(productService.getProductBySku(sku));
+    }
+
+
+
 }

ecom-web/src/components/order-history/Order.jsx

@@ -13,7 +13,7 @@ const Order = (props) => {
 
     return (
         <div className="order">
-            <p><span className="order-field">Order ID:</span> {order.id}</p>
+            <p className="order-number">Order #: {order.id}</p>
             <p><span className="order-field">Order Status:</span> {order.orderStatus}</p>
             <p><span className="order-field">Order Placed:</span> {orderPlaced.getUTCMonth()}
                 /{orderPlaced.getUTCDay()}

ecom-web/src/components/order-history/OrderItem.jsx

-import React from 'react';
+import React, { useEffect,useState } from 'react';
+import { fetchProductBySku } from '../../util/product_api_util';
 
 
 const OrderItem = (props) => {
     const {orderItem} = props;
-    const {itemName, itemPrice, itemQuantity} = orderItem;
+    const {itemName, itemPrice, itemQuantity, itemSku} = orderItem;
 
     const subTotal = itemQuantity * itemPrice;
 
+    const [fullItemDetails, setFullItemDetails] = useState({});
+
+    useEffect(async ()=>{
+        const item = await fetchProductBySku(itemSku);
+        setFullItemDetails(item.data);
+    }, []);
 
     return (
         <div className="order-item">
-            <p>Item: {itemName}</p>
-            <p>Quantity: {itemQuantity}</p>
-            <p>Price Per Unit: ${itemPrice.toFixed(2)}</p>
-            <p>Subtotal: ${subTotal.toFixed(2)}</p>
+            <div className="pic-container">
+                <img src={fullItemDetails.productImageUrl} />
+            </div>
+            <div className="item-details-container">
+                <p>Item: {itemName}</p>
+                <p>Quantity: {itemQuantity}</p>
+                
+            </div>
+            <div className="item-price-container">
+                <p>Price Per Unit: ${itemPrice.toFixed(2)}</p>
+                <p>Subtotal: ${subTotal.toFixed(2)}</p>
+            </div>
+
+            
         </div>
     )
 }

ecom-web/src/components/order-history/order-history.css

@@ -6,7 +6,6 @@ main {
 .order {
     display: flex;
     flex-direction: column;
-    border: 1px solid black;
     padding: 20px;
 }
 
@@ -16,12 +15,16 @@ main {
 }
 
 .order-item {
-    border: 1px solid gray;
-    padding: 5px;
+    display: grid;
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-rows: auto;
+    border: 1px solid red;
+    width: 100%;
 }
 
-.order-field {
+.order-number {
     font-weight: 600;
+    border-bottom: 1px solid black;
 }
 
 #order-history-header {

ecom-web/src/util/product_api_util.js

@@ -11,4 +11,8 @@ export const fetchPromotions = () => {
 
 export const fetchProductsAndPromotions = () => {
     return axios.get(`${Config.baseApiUrl}/api/products-and-promos`)
+}
+
+export const fetchProductBySku = (sku) => {
+    return axios.get(`${Config.baseApiUrl}/api/products/${sku}`)
 }
\ No newline at end of file