From 1204d6b2bb0bc64c4d29c3ee81fd141da379b6e0 Mon Sep 17 00:00:00 2001
From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com>
Date: Mon, 14 Mar 2022 22:57:26 +0100
Subject: [PATCH 1/2] Adding "Add to Cart" functionality in product details
 view.

---
 restapi/controller/ProductController.ts       |   2 +-
 webapp/src/App.tsx                            |   2 +-
 .../src/components/products/ProductPage.tsx   | 118 ++++++++++--------
 3 files changed, 69 insertions(+), 53 deletions(-)

diff --git a/restapi/controller/ProductController.ts b/restapi/controller/ProductController.ts
index 357bd91..c871f04 100644
--- a/restapi/controller/ProductController.ts
+++ b/restapi/controller/ProductController.ts
@@ -33,7 +33,7 @@ class ProductController {
     public async getProductWithId(req: Request, res: Response) {
         const product  = await Product.findOne({_id: req.params.id});
         if (product) {
-            res.send(product);
+            res.status(200).json(product);
             console.log(product);
           } else {
             res.status(404).send({ message: 'Product Not Found' });
diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx
index 976102b..40dcf52 100644
--- a/webapp/src/App.tsx
+++ b/webapp/src/App.tsx
@@ -48,7 +48,7 @@ function App(): JSX.Element {
         <Router>
           <Routes>
              <Route path='/' element={<MainProducts refreshCartList={refreshCartList}  products={products}/>} />
-              <Route path="/products/:id" element={<ProductPage />} />
+              <Route path="/products/:id" element={<ProductPage refreshCartList={refreshCartList}/>} />
               <Route path='/about_us' element={<AboutUs/>} />
               <Route path='/login' element={<SOLIDLogin/>} />
               <Route path='/profile' element={<UserProfile/>} />
diff --git a/webapp/src/components/products/ProductPage.tsx b/webapp/src/components/products/ProductPage.tsx
index afcf24b..c36634e 100644
--- a/webapp/src/components/products/ProductPage.tsx
+++ b/webapp/src/components/products/ProductPage.tsx
@@ -12,6 +12,10 @@ import {Button} from '@mui/material';
 import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
 import { styled } from '@mui/system';
 import { addToCart } from '../../api/api';
+
+type ProductPageProps = {
+  refreshCartList: () => void;
+}
 const DivBtonStyle = styled('div')({
     backgroundColor: '#7c4dff',
     color: '#ffff',
@@ -29,9 +33,13 @@ const DivBtonStyle = styled('div')({
   
   });
 
-  
 
-function ProductPage() : JSX.Element {
+  function addProduct(product: Product): void {
+    addToCart({ product: product, quantity: 1 });
+
+  }
+
+function ProductPage(prop : ProductPageProps) : JSX.Element {
     const {id} = useParams();
     const [product, setProduct] = useState<Product>(); //default empty product
     const getProduct = async () => {
@@ -41,57 +49,65 @@ function ProductPage() : JSX.Element {
         getProduct();
     }, []);
    
- 
-  
-  return (
-    <Grid container
-      direction="row"
-      justifyContent="left"
-      alignItems="center"
-      spacing={{ xs: 2, md: 3 }} columns={{ xs: 6, sm: 12, md: 15 }}
-      rowSpacing={5}
-      
-      > 
-        
-      <Grid  item xs={2} sm={5} md={6} >
-    <Card sx={{ maxWidth: 345 }} style={{height:"100%"}}>
-    
-        <CardMedia
-            component="img"
-            image={product?.image}
-            alt={product?.name}
-            
-        />
-        <CardContent>
-            <Typography gutterBottom variant="h3" component="div">
-             {product?.name}
-            </Typography>
-            <Typography gutterBottom variant="h5" component="div">
-             {product?.price}€
-            </Typography>
-            <Typography gutterBottom variant="body1" component="div">
-             {product?.description}
-            </Typography>
-        </CardContent>
-    
     
-</Card>
-</Grid>
-<Grid  item xs={2} sm={5} md={6} >
-        <DivBtonStyle>
-        <BuyBtton startIcon={<AddShoppingCartIcon />} >
-            Add to Cart
-        </BuyBtton> 
-        </DivBtonStyle>
-</Grid>
-
-</Grid>
- 
-        
-  // the button is contained because it has actions that are primary to our app( add an Item to the cart)
+  if(product){
+    return (
+      <Grid container
+        direction="row"
+        justifyContent="left"
+        alignItems="center"
+        spacing={{ xs: 2, md: 3 }} columns={{ xs: 6, sm: 12, md: 15 }}
+        rowSpacing={5}
         
+        > 
+          
+        <Grid  item xs={2} sm={5} md={6} >
+      <Card sx={{ maxWidth: 345 }} style={{height:"100%"}}>
+      
+          <CardMedia
+              component="img"
+              image={product?.image}
+              alt={product.name}
+              
+          />
+          <CardContent>
+              <Typography gutterBottom variant="h3" component="div">
+               {product?.name}
+              </Typography>
+              <Typography gutterBottom variant="h5" component="div">
+               {product?.price}€
+              </Typography>
+              <Typography gutterBottom variant="body1" component="div">
+               {product?.description}
+              </Typography>
+          </CardContent>
+      
+      
+  </Card>
+  </Grid>
+  <Grid  item xs={2} sm={5} md={6} >
+          <DivBtonStyle>
+          <BuyBtton startIcon={<AddShoppingCartIcon />} onClick={()=>{addProduct(product);
+            prop.refreshCartList();}} >
+              Add to Cart
+          </BuyBtton> 
+          </DivBtonStyle>
+  </Grid>
+  
+  </Grid>
+   
+          
+    // the button is contained because it has actions that are primary to our app( add an Item to the cart)
+          
+  
+    );
+  }else{
+    return (<Typography gutterBottom variant="body1" component="div">
+    No product found
+   </Typography>);
+  }
+  }
+  
 
-  );
-}
 
 export default ProductPage;

From ecf788f54a914c30686744837a3262c3400604e9 Mon Sep 17 00:00:00 2001
From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com>
Date: Mon, 14 Mar 2022 23:07:25 +0100
Subject: [PATCH 2/2] Fix minor error: logo in navbar was missing when showing
 product details view

---
 webapp/src/components/products/ProductCard.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/products/ProductCard.tsx b/webapp/src/components/products/ProductCard.tsx
index 4f80d36..06a9302 100644
--- a/webapp/src/components/products/ProductCard.tsx
+++ b/webapp/src/components/products/ProductCard.tsx
@@ -1,5 +1,5 @@
 import { useState} from "react";
-import { Product, ItemCart } from '../../shared/shareddtypes';
+import { Product } from '../../shared/shareddtypes';
 import { addToCart } from '../../api/api';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
@@ -8,8 +8,8 @@ import Typography from '@mui/material/Typography';
 import {Button, CardActionArea, CardActions} from '@mui/material';
 import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
 import { styled } from '@mui/system';
-import { propTypes } from "react-bootstrap/esm/Image";
 
+import { useNavigate } from "react-router-dom";
 const DivBtonStyle = styled('div')({
   backgroundColor: '#7c4dff',
   color: '#ffff',
@@ -41,15 +41,15 @@ function addProduct(product: Product): void {
 
 
 const ProductCard = ( prod: ProductCardProps): JSX.Element => {
-  const [isAdded, setIsAdded] = useState(false);
 
 
 
+  const navigate = useNavigate();
 
   return (
    
     <Card >
-    <CardActionArea href={"/products/"+prod.product.id}>
+    <CardActionArea  onClick={()=>navigate("products/"+prod.product.id)}>
         <CardMedia
             component="img"
             image={prod.product.image}