refac: directory and slight code refactoring

src/App.jsx

@@ -1,6 +1,6 @@
 import { createContext, useEffect, useState } from "react";
-import ProductsPage from "./ProductsPage/ProductsPage";
-import Cart from "./Cart/Cart";
+import ProductsPage from "./products/ProductsPage";
+import Cart from "./cart/Cart";
 import { getProducts } from "./api/api";
 import "./App.css";
 

src/Cart/Cart.jsx

@@ -5,7 +5,34 @@ import CartItem from "./CartItem";
 import Total from "./Total";
 
 function Cart() {
-  const { cartItems } = useContext(CartContext);
+  const { cartItems, setCartItems, setProducts, products } =
+    useContext(CartContext);
+
+  const increaseQuantity = (id) => {
+    const updatedData = cartItems.map((item) => ({
+      ...item,
+      quantity: item.id === id ? item.quantity + 1 : item.quantity,
+    }));
+    setCartItems(updatedData);
+  };
+
+  const decreaseQuantity = (id, quantity) => {
+    // If quantity is only 1, remove this item from cart
+    if (quantity === 1) {
+      const updatedData = products.map((item) => ({
+        ...item,
+        addedToCart: item.id === id ? false : item.addedToCart,
+      }));
+      setProducts(updatedData);
+      setCartItems((items) => items.filter((item) => item.id !== id));
+    } else {
+      const updatedData = cartItems.map((item) => ({
+        ...item,
+        quantity: item.id === id ? item.quantity - 1 : item.quantity,
+      }));
+      setCartItems(updatedData);
+    }
+  };
 
   return (
     <>
@@ -14,11 +41,16 @@ function Cart() {
       </div>
       <div className={styles.cartItems}>
         {cartItems.map((item) => (
-          <CartItem key={item.id} data={item} />
+          <CartItem
+            key={item.id}
+            data={item}
+            increaseQuantity={increaseQuantity}
+            decreaseQuantity={decreaseQuantity}
+          />
         ))}
       </div>
       <div className={styles.total}>
-        <Total />
+        <Total cartItems={cartItems} />
       </div>
     </>
   );

src/Cart/CartItem.jsx

@@ -1,49 +1,21 @@
-import { useContext } from "react";
 import styles from "./CartItem.module.css";
-import { CartContext } from "../App";
-
-function CartItem({ data }) {
-  const { cartItems, setCartItems, setProducts, products } =
-    useContext(CartContext);
-
-  const increaseQuantity = () => {
-    const updatedData = cartItems.map((item) => ({
-      ...item,
-      quantity: item.id === data.id ? item.quantity + 1 : item.quantity,
-    }));
-    setCartItems(updatedData);
-  };
-
-  const decreaseQuantity = () => {
-    // If quantity is only 1, remove this item from cart
-    if (data.quantity === 1) {
-      const updatedData = products.map((item) => ({
-        ...item,
-        addedToCart: item.id === data.id ? false : item.addedToCart,
-      }));
-      setProducts(updatedData);
-      setCartItems((items) => items.filter((item) => item.id !== data.id));
-    } else {
-      const updatedData = cartItems.map((item) => ({
-        ...item,
-        quantity: item.id === data.id ? item.quantity - 1 : item.quantity,
-      }));
-      setCartItems(updatedData);
-    }
-  };
 
+function CartItem({ data, increaseQuantity, decreaseQuantity }) {
   return (
     <div className={styles.cartItemContainer}>
       <div className={styles.item}>
         <div className={styles.imageContainer}>
           <img className={styles.image} src={data.thumbnail} alt="item-image" />
         </div>
         <div className={styles.controls}>
-          <button type="button" onClick={decreaseQuantity}>
+          <button
+            type="button"
+            onClick={() => decreaseQuantity(data.id, data.quantity)}
+          >
             -
           </button>
           <p>{data.quantity}</p>
-          <button type="button" onClick={increaseQuantity}>
+          <button type="button" onClick={() => increaseQuantity(data.id)}>
             +
           </button>
         </div>

src/Cart/Total.jsx

@@ -1,17 +1,14 @@
-import { useContext } from "react";
-import { CartContext } from "../App";
 import styles from "./Total.module.css";
 
-function Total() {
-  const { cartItems } = useContext(CartContext);
-  const total = cartItems.reduce(
+function Total({ cartItems: data }) {
+  const total = data.reduce(
     (curr, next) => curr + next.quantity * next.price,
     0
   );
 
   return (
     <>
-      {cartItems.length > 0 ? (
+      {data.length > 0 ? (
         <div className={styles.checkoutSection}>
           <p className={styles.totalText}>Total: {total}</p>
           <button className={styles.checkoutButton}>Checkout</button>

src/products/Products/Card.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import styles from "./Card.module.css";
+
+function Card({ data, addToCart }) {
+  return (
+    <div className={styles.dataCard}>
+      <div className={styles.imageContainer}>
+        <img src={data.thumbnail} alt="" className={styles.productImage} />
+      </div>
+      <p className={styles.productTitle}>{data.title}</p>
+      <p>${data.price}</p>
+      <button
+        type="button"
+        className={styles.addToCartButton}
+        style={{ backgroundColor: data.addedToCart ? "#A3BE8C" : "#5E81AC" }}
+        onClick={() => addToCart(data)}
+      >
+        {data.addedToCart ? "Added" : "Add to cart"}
+      </button>
+    </div>
+  );
+}
+
+export default Card;

src/products/Products/Products.jsx

@@ -0,0 +1,38 @@
+import { useContext } from "react";
+import Card from "./Card";
+import { CartContext } from "../../App";
+
+function Products() {
+  const { products, setCartItems, setProducts } = useContext(CartContext);
+
+  const addToCart = (data) => {
+    if (data.addedToCart) return;
+
+    const updateData = products.map((item) => ({
+      ...item,
+      addedToCart: item.id === data.id ? true : item.addedToCart,
+    }));
+    setProducts(updateData);
+
+    setCartItems((prev) => [
+      ...prev,
+      {
+        id: data.id,
+        title: data.title,
+        price: data.price,
+        quantity: 1,
+        thumbnail: data.thumbnail,
+      },
+    ]);
+  };
+
+  return (
+    <>
+      {products.map((product) => (
+        <Card key={product.id} data={product} addToCart={addToCart} />
+      ))}
+    </>
+  );
+}
+
+export default Products;

src/ProductsPage/ProductsPage.jsx → src/products/ProductsPage.jsx

@@ -2,7 +2,6 @@ import styles from "./ProductsPage.module.css";
 import Products from "./Products/Products";
 
 function ProductsPage() {
-
   return (
     <>
       <div className={styles.heading}>