Merge pull request #64 from Arquisoft/mainProducts

Adding ''Add to Cart'' functionality in Product's Details View.
Arquisoft · Mar 14, 2022 · b4fab92 · b4fab92
2 parents ff9eb09 + f33a999
commit b4fab92
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 57 deletions.
diff --git 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
@@ -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/ProductCard.tsx b/webapp/src/components/products/ProductCard.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+
 import { Product } from '../../shared/shareddtypes';
 import { addToCart } from '../../api/api';
 import Card from '@mui/material/Card';
@@ -9,6 +9,7 @@ import { Button, CardActionArea, CardActions } from '@mui/material';
 import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
 import { styled } from '@mui/system';
 
+import { useNavigate } from "react-router-dom";
 const DivBtonStyle = styled('div')({
   backgroundColor: '#7c4dff',
   color: '#ffff',
@@ -39,16 +40,19 @@ function addProduct(product: Product): void {
 
 
 
-const ProductCard = (prod: ProductCardProps): JSX.Element => {
-  const [isAdded, setIsAdded] = useState(false);
+const ProductCard = ( prod: ProductCardProps): JSX.Element => {
+
 
 
 
+  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}

diff --git a/webapp/src/components/products/ProductPage.tsx b/webapp/src/components/products/ProductPage.tsx
@@ -11,6 +11,13 @@ import  Grid  from "@mui/material/Grid";
 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',
@@ -28,9 +35,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 () => {
@@ -40,57 +51,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;