dev: category

package.json

@@ -20,6 +20,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.27.1",
+    "react-paginate": "^8.1.2",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "striptags": "^3.2.0",

src/App.tsx

@@ -41,25 +41,51 @@ function App() {
     const data = await commerce.cart.retrieve();
     setCart(data);
   }
+  const updateHandleAddToCartUI = (product:IProductItem, quantity:number,variant:any) =>{
+    product.quantity = quantity;
+    if( product.variant_groups.length>0){
+      product.variant_groups[0].options = [variant];
+    }
+    cart.line_items.push(product);
+    if(cart.total_items){
+      cart.total_items += quantity;
+    }
+    setCart(cart);
+  }
+  const handleAddToCart = async (product:IProductItem, quantity:number,variant:any) =>{
+    commerce.cart.add(product.id, quantity,Object.fromEntries(variant));
 
-  const handleAddToCart = async (productId:string, quantity:number,variant:any) =>{
-    const item = await commerce.cart.add(productId, quantity,Object.fromEntries(variant));
-    setCart(item.cart);
+    await updateHandleAddToCartUI(product,quantity,variant);
+
+
   }
 
   const handleUpdateCartQty = async (lineItemId:string, quantity:number) => {
-    const response = await commerce.cart.update(lineItemId, { quantity });
-    setCart(response.cart);
+    commerce.cart.update(lineItemId, { quantity });
+    cart.line_items.filter((item)=>(item.id === lineItemId)).map((item)=>{
+      item.quantity = quantity;
+    })
+    var sum =0;
+    cart.line_items.forEach((e)=>{sum+=e.quantity})
+    cart.total_items = sum;
+    setCart(cart);
   };
 
   const handleRemoveFromCart = async (lineItemId:string) => {
-    const response = await commerce.cart.remove(lineItemId);
-    setCart(response.cart);
+    commerce.cart.remove(lineItemId);
+    console.log(cart);
+    if(cart.total_items){
+      cart.total_items -= cart.line_items.filter((item)=>(item.id === lineItemId))[0].quantity;
+      cart.line_items = cart.line_items.filter((item)=>(item.id !== lineItemId));
+    }
+    console.log(cart);
+    setCart(cart);
   };
 
   const handleEmptyCart = async () => {
-    const response = await commerce.cart.empty();
-    setCart(response.cart);
+    commerce.cart.empty();
+    cart.line_items = [];
+    setCart(cart);
   };
 
   const refreshCart = async () => {

src/components/Cart/Cart.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {Container, Typography, Button, Grid} from '@material-ui/core'
 import { ICart } from '../../interfaces';
 import useStyles from './styles';
@@ -15,7 +15,7 @@ interface ICartDetail{
 
 function Cart(cartDetail:ICartDetail) {
     const styles = useStyles();
-
+    const [cartLength,setcartLength] = useState(cartDetail.cart.line_items.length);
   const EmptyCart = () => (
       <Typography variant="subtitle1"> Your cart is empty </Typography>
   )
@@ -30,7 +30,7 @@ function Cart(cartDetail:ICartDetail) {
             ))}
         </Grid>
         <div className={styles.cardDetails}>
-            <Typography variant="h6">
+            <Typography variant="h6" style={{fontFamily: "Montserrat"}}>
                 Subtotal: {cartDetail.cart.subtotal.formatted_with_symbol}
             </Typography>
             <CartButtons />
@@ -56,7 +56,7 @@ function Cart(cartDetail:ICartDetail) {
         <Typography variant="h4" className={styles.title}>
             Your shopping cart
         </Typography>
-        {!cartDetail.cart.line_items.length ? <EmptyCart /> : <FilledCart />}
+        {!cartLength ? <EmptyCart /> : <FilledCart />}
     </Container>
   )
 }

src/components/Cart/CartItem/CartItem.tsx

@@ -3,7 +3,6 @@ import { Typography, Button, Card, CardActions,CardContent, CardMedia, StylesPro
 import { IProductItem } from '../../../interfaces'
 import useStyles from './styles';
 
-
 interface ICartItem{
     product : IProductItem;
     onUpdateQty : Function;
@@ -23,22 +22,22 @@ function CartItem(cartItem:ICartItem) {
         <CardMedia image={cartItem.product.image.url} className={styles.media} />
       <CardContent className={styles.cardContent}>
         <div style={{display:'flex', flexFlow:'column'}}>
-        <Typography variant="h5">{cartItem.product.name}</Typography>
+        <Typography variant="h5" style={{fontFamily: "Montserrat"}}>{cartItem.product.name}</Typography>
         {cartItem.product.selected_options.map((variant)=>(
           <div style={{display:'flex'}}>
-          <Typography variant="subtitle1">{variant.group_name} {variant.option_name}</Typography>
+          <Typography variant="subtitle1" style={{fontFamily: "Montserrat"}}>{variant.group_name} {variant.option_name}</Typography>
           </div>
         ))}
         </div>
-        <Typography variant="h6">{cartItem.product.line_total.formatted_with_symbol}</Typography>
+        <Typography variant="h6" style={{fontFamily: "Montserrat"}}>{cartItem.product.line_total.formatted_with_symbol}</Typography>
       </CardContent>
       <CardActions className={styles.cartActions}>
         <div className={styles.buttons}>
           <Button type="button" size="small" onClick={() => handleUpdateCartQty(cartItem.product.id, cartItem.product.quantity - 1)}>-</Button>
           <Typography>&nbsp;{cartItem.product.quantity}&nbsp;</Typography>
           <Button type="button" size="small" onClick={() => handleUpdateCartQty(cartItem.product.id, cartItem.product.quantity + 1)}>+</Button>
         </div>
-        <Button variant="contained" type="button" color="secondary" onClick={() => handleRemoveFromCart(cartItem.product.id)}>Remove</Button>
+        <Button variant="contained" type="button" color="secondary" onClick={() => handleRemoveFromCart(cartItem.product.id)}>🗑</Button>
       </CardActions>
     </Card>
   )

src/components/Cart/styles.ts

@@ -4,7 +4,8 @@ export default makeStyles((theme) => ({
     toolbar: theme.mixins?.toolbar,
     title: {
         marginTop: '8%',
-        paddingBottom:'1em'
+        paddingBottom:'1em',
+        fontFamily: "Montserrat",
     },
     emptyButton: {
         minWidth: '150px',
@@ -26,5 +27,6 @@ export default makeStyles((theme) => ({
         marginTop: '10%',
         width: '100%',
         justifyContent: 'space-between',
+        fontFamily: "Montserrat",
     },
 }));

src/components/Categories/Categories.tsx

@@ -10,13 +10,13 @@ interface ICategoryTab{
 function Categories(categoryInterface:ICategoryTab) {
 
   return (
-    <>
+    <div style={{paddingTop:'5em'}}>
         {categoryInterface.categories.map((category)=>(
         <Grid style={{display:'flex',flexFlow:'column',width:'100%'}} item key={category.id}>
             <Category category={category} />
         </Grid>
         ))}
-    </>
+    </div>
   )
 }
 

src/components/Categories/Category/Category.tsx

@@ -15,19 +15,17 @@ function Category(categoryData:ICategoryItem) {
   return (
     <>
 
-    <Card className={styles.root} style={{width:'100%'}}>
-      <CardMedia component={Link} to={`/${item.slug}/product`}className={styles.media} image ={item.assets[0].url} title={item.name} />
-
-      </Card>
-      <div style={{width:'100%',color:'white',backgroundColor:'black'}}>
-      <Typography className = {styles.cardContent} variant='h5' >
+    <Card  className={styles.root} title={item.name} style={{width:'100%',backgroundImage:`linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45) ), url("${item.assets[0].url}")`,backgroundSize:'cover',backgroundPosition:'center center'}}>
+      <CardContent component={Link} to={`/${item.slug}/product`} style={{fontSize:'4rem',textDecoration:'none',color:'white',fontFamily: "Montserrat"}}>
+  <Typography className = {styles.cardDesc} variant='h5' style={{fontSize:'6rem',fontWeight:'800'}}>
         {item.name} 
       </Typography>
 
-    <Typography variant="subtitle1" className = {styles.cardDesc}>
+    <Typography variant="subtitle1" className = {styles.cardDesc} style={{fontSize:'1.7rem',lineHeight:'0'}}>
         {item.description.replace(/<[^>]*>?/gm, '')} 
     </Typography>
-      </div>
+      </CardContent>
+      </Card>
     </>
   )
 }

src/components/Categories/Category/styles.ts

@@ -1,9 +1,9 @@
 import { makeStyles} from '@material-ui/core/styles';
-
+import "@fontsource/montserrat"; 
 
 export default makeStyles(() => ({
     root: {
-        marginTop:'5em',
+        marginTop:'3em',
         maxWidth: '90%',
         marginInline:'auto',
         boxShadow: '0 1px 2px rgba(0,0,0,0.15)',
@@ -19,12 +19,7 @@ export default makeStyles(() => ({
           boxShadow: '0 5px 15px rgba(0,0,0,0.3)',
           transition: 'opacity 0.3s ease-in-out'
         },
-        '&:hover':{
-            transform: 'scale(1.1, 1.1)',
-            '&::after': {
-              opacity: 1
-          }
-        }
+
       },
       media: {
        height:0,
@@ -40,7 +35,16 @@ export default makeStyles(() => ({
       },
       cardDesc:{
         display:'flex',
-        justifyContent:'flex-start'
+        justifyContent:'center',
+        textDecoration:'none',
+        fontFamily: "Montserrat",
+        transition: 'all 0.3s ease-in-out',
+        '&:hover':{
+          transform: 'scale(1.1, 1.1)',
+          '&::after': {
+            opacity: 1
+        }
+      }
       },
       inputQty:{
         width:'3em'

src/components/Navbar/Narvbar.tsx

@@ -28,7 +28,7 @@ function Narvbar(navbarData:INavbarItem) {
         <AppBar position="fixed" color="inherit" className = {styles.appBar}>
             <Toolbar>
 
-            <Typography component={Link} to="/" className = {styles.title} variant="h6" color="inherit">
+            <Typography component={Link} to="/" className = {styles.title} variant="h4" color="inherit">
                     JNB
             </Typography>
 

src/components/Navbar/styles.ts

@@ -18,6 +18,8 @@ export default makeStyles((theme) => ({
     flexGrow: 1,
     display: 'flex',
     textDecoration: 'none',
+    fontFamily: "Montserrat",
+    fontWeight:800
   },
   image: {
     marginRight: '10px',

src/components/Products/Product/Product.tsx

@@ -12,7 +12,7 @@ interface IProduct{
 function Product(item:IProduct) {
   const [quantity,setQuantity] = useState(1);
   const styles = useStyles();
-
+  console.log(item)
   return (
     <>
     <Card className={styles.root} >

src/components/Products/Product/ProductDetail.tsx

@@ -83,7 +83,7 @@ function ProductDetail(item:IProductDetail) {
             justifyContent:'center',
             marginTop:'3em'
         }}
-    aria-label="Add to Cart" variant="contained" onClick={()=> item.onAddToCart(productId.id as string, quantity,variant)}>
+    aria-label="Add to Cart" variant="contained" onClick={()=> item.onAddToCart(product, quantity,variant)}>
           <Typography variant="subtitle1" style={{fontSize:'1.5rem'}}>
           Add to Cart &nbsp;&nbsp;
         </Typography> 

src/components/Products/Product/styles.ts

@@ -2,7 +2,7 @@ import { makeStyles } from '@material-ui/core/styles';
 
 export default makeStyles(()=>({
         root: {
-          marginTop:'5em',
+          marginTop:'1.5em',
           maxWidth: '90%',
           width:'90em',
           marginInline:'auto',