[#5] feat: implement basket with local storage

client/src/App.js

@@ -1,23 +1,26 @@
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import { Home, Error } from "./pages";
 import { ProductsProvider } from "./contexts/Products/ProductsContext";
-import { PaginationProvider } from "./contexts/Pagination/PaginationContext";
 import { BasketProvider } from "./contexts/Basket/BasketContext";
+import { FiltersProvider } from "./contexts/Filters/FiltersContext";
+import { ModalProvider } from "./contexts/Modal/ModalContext";
 
 function App() {
   return (
-    <ProductsProvider>
-      <PaginationProvider>
+    <FiltersProvider>
+      <ProductsProvider>
         <BasketProvider>
-          <Router>
-            <Switch>
-              <Route path="/" exact component={Home} />
-              <Route path="*" component={Error} />
-            </Switch>
-          </Router>
+          <ModalProvider>
+            <Router>
+              <Switch>
+                <Route path="/" exact component={Home} />
+                <Route path="*" component={Error} />
+              </Switch>
+            </Router>
+          </ModalProvider>
         </BasketProvider>
-      </PaginationProvider>
-    </ProductsProvider>
+      </ProductsProvider>
+    </FiltersProvider>
   );
 }
 

client/src/components/AddButton/index.jsx

@@ -1,22 +1,23 @@
-import React, { useState } from "react";
+import React from "react";
+import { useBasket } from "../../contexts/Basket/BasketContext";
 import styles from "./styles.module.scss";
 
-export default function AddButton() {
-  const [isActive, setIsActive] = useState(true);
+export default function AddButton({ product, onClick }) {
+  const { addItem } = useBasket();
 
-  const handleActive = () => {
-    setIsActive(false);
-  };
+  const checkBasket = () => !Object.keys(localStorage).includes(product._id);
 
-  return isActive ? (
+  return checkBasket() ? (
     <button
-      className={isActive ? styles.ActiveButton : undefined}
-      onClick={() => handleActive()}
+      className={styles.ActiveButton}
+      onClick={() => {
+        addItem(product);
+      }}
     >
       Sepete Ekle
     </button>
   ) : (
-    <button className={!isActive ? styles.DeactiveButton : undefined}>
+    <button className={styles.DeactiveButton}>
       Bu ürünü sepete ekleyemezsiniz.
     </button>
   );

client/src/components/AddButton/styles.module.scss

@@ -23,5 +23,5 @@
   border-radius: 8px;
   width: 233px;
   height: 32px;
-  cursor: pointer;
+  cursor: no-drop;
 }

client/src/components/Basket/BasketDetails/index.jsx

@@ -3,14 +3,13 @@ import styles from "./styles.module.scss";
 import BasketItem from "../BasketItem";
 
 export default function BasketDetails() {
-  // const [items, setItems] = useState([{ name: "iPhone11", url: "image" }]);
-  // const buttonClasses = cn(styles.Container, isOpen && styles.Open);
+  let productIds = Object.keys(localStorage);
 
   return (
     <div className={styles.Container}>
-      <BasketItem />
-      <BasketItem />
-      <BasketItem />
+      {productIds.map((id, i) => {
+        return <BasketItem key={i} productId={id} />;
+      })}
     </div>
   );
 }

client/src/components/Basket/BasketDetails/styles.module.scss

@@ -12,16 +12,5 @@
   background-color: #ffff;
   border: 1px solid vars.$border-color;
   border-radius: 4px;
-  // TODO: Overflow
-
-  &:after {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 118px;
-    top: -2px;
-    right: 0;
-    z-index: 3;
-    border: 2px solid #ffff;
-  }
+  overflow-y: scroll;
 }

client/src/components/Basket/BasketItem/index.jsx

@@ -1,26 +1,27 @@
-// import React, { useState } from "react";
-// import cn from "classnames";
 import styles from "./styles.module.scss";
 import { ImageBox } from "../..";
+import { useModal } from "../../../contexts/Modal/ModalContext";
 
-export default function BasketItem() {
-  // const [items, setItems] = useState([{ name: "iPhone11", url: "image" }]);
+export default function BasketItem({ productId }) {
+  const { activateModal } = useModal();
 
+  let product = JSON.parse(localStorage.getItem(productId));
+  console.log("product", product);
   return (
     <div className={styles.Container}>
       <ImageBox
-        src={`${process.env.REACT_APP_IMAGE_URL}s/32/224-332/10352817012786.jpg`}
-        basketImg
+        basketImg={`${process.env.REACT_APP_IMAGE_URL}${product.imgUrl}.jpg`}
       />
       <div className={styles.Wrapper}>
-        <span className={styles.ItemName}>
-          iPhone 11 Kırmızı Kılıflı Garantili Telefon
-        </span>
-        <button type="button" className={styles.RemoveButton}>
+        <span className={styles.ItemName}>{product.name}</span>
+        <button
+          type="button"
+          className={styles.RemoveButton}
+          onClick={() => activateModal(productId)}
+        >
           Kaldır
         </button>
       </div>
     </div>
   );
 }
-// TODO: SCROLLU TRANSPARENT YAP

client/src/components/Basket/index.jsx

@@ -2,11 +2,11 @@ import React, { useState, useEffect, useRef } from "react";
 import cn from "classnames";
 import styles from "./styles.module.scss";
 import { BasketDetails } from "..";
-// import { useBasket } from "../../contexts/Basket/BasketContext";
+import { useBasket } from "../../contexts/Basket/BasketContext";
 
 export default function Basket() {
   const [isOpen, setIsOpen] = useState(false);
-  const [count] = useState(4);
+  const { count } = useBasket();
   const clickRef = useRef(null);
 
   const openCart = () => {

client/src/components/Basket/styles.module.scss

@@ -18,6 +18,17 @@
     outline: unset;
     cursor: pointer;
 
+    &:after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 118px;
+      top: 37px;
+      right: 0;
+      z-index: 3;
+      border: 2px solid #ffff;
+    }
+
     &.Open {
       border-radius: 4px 4px 0 0;
       border-bottom-color: #ffff;

client/src/components/ImageBox/index.jsx

@@ -13,12 +13,7 @@ export default function ImageBox({ basketImg, productImg, isHovered }) {
     <>
       {basketImg && (
         <div className={basketItemClasses}>
-          <img
-            src={`${process.env.REACT_APP_IMAGE_URL}s/32/224-332/10352817012786.jpg`}
-            width="40"
-            height="59.23"
-            alt="basket-item"
-          />
+          <img src={basketImg} width="40" height="59.23" alt="basket-item" />
         </div>
       )}
 

client/src/components/Layout/Sidebar/index.jsx

@@ -1,15 +1,24 @@
 import { LinkList, Link } from "../..";
 import styles from "./styles.module.scss";
+import { useFilters } from "../../../contexts/Filters/FiltersContext";
 
 export default function Sidebar() {
+  const { brands, loadingBrands, colors, loadingColors } = useFilters();
+
+  if (loadingBrands || loadingColors) return <div>Loading...</div>;
+
   return (
     <aside className={styles.Container}>
       <LinkList filterTitle="Renk">
-        <Link filterName="Label Text (4)" />
-        <Link filterName="Lacivert (3)" />
-        <Link filterName="Sarı (1)" />
-        <Link filterName="Siyah (5)" />
-        <Link filterName="Beyaz (2)" />
+        {colors.map((color, i) => {
+          return (
+            <Link
+              key={i}
+              filterName={color.name + " (" + color.products.length + ")"}
+              color={color}
+            />
+          );
+        })}
       </LinkList>
       <LinkList filterTitle="Sıralama">
         <Link filterName="En Düşük Fiyat" />
@@ -18,14 +27,15 @@ export default function Sidebar() {
         <Link filterName="En Yeniler (Z>A)" />
       </LinkList>
       <LinkList filterTitle="Marka">
-        <Link filterName="Samsung (4)" />
-        <Link filterName="Nokia (6)" />
-        <Link filterName="Apple (3)" />
-        <Link filterName="LG (2)" />
-        <Link filterName="Huawei (6)" />
-        <Link filterName="Xiaomi (9)" />
-        <Link filterName="General Mobile (1)" />
-        {/* count eklenecek */}
+        {brands.map((brand, i) => {
+          return (
+            <Link
+              key={i}
+              filterName={brand.name + " (" + brand.products.length + ")"}
+              brand={brand}
+            />
+          );
+        })}
       </LinkList>
     </aside>
   );

client/src/components/Layout/index.jsx

@@ -1,14 +1,19 @@
-import { useState } from "react";
 import { Header, SubHeader, Sidebar, Section, Modal } from "..";
-
+import cn from "classnames";
 import styles from "./styles.module.scss";
+import { useModal } from "../../contexts/Modal/ModalContext";
 
 export default function Layout() {
-  const [showModal] = useState(false);
+  const { showModal } = useModal();
 
   return (
     <>
-      <div className={styles.Container}>
+      <div
+        className={cn(
+          styles.Container,
+          showModal ? styles.OverflowHidden : undefined
+        )}
+      >
         <Header />
         <SubHeader />
         <main className={styles.Wrapper}>

client/src/components/Layout/styles.module.scss

@@ -9,6 +9,10 @@
   width: 100vw;
   position: relative;
 
+  &.OverflowHidden {
+    overflow-y: hidden;
+  }
+
   .Wrapper {
     display: flex;
     min-width: vars.$desktop-width;

client/src/components/Link/index.jsx

@@ -1,5 +1,99 @@
 import styles from "./styles.module.scss";
+import { useProducts } from "../../contexts/Products/ProductsContext";
+import React, { useState } from "react";
+import cn from "classnames";
 
-export default function Link({ filterName }) {
-  return <li className={styles.Container}>{filterName}</li>;
+export default function Link({ filterName, color, brand }) {
+  const [isClicked, setClicked] = useState(false);
+  const { products, filters, setFilters } = useProducts();
+
+  const handleClick = () => {
+    setClicked(!isClicked);
+
+    let filterList = filters;
+
+    if (color) {
+      filterList.push({ color: color.name });
+      // let index = products.filtered.colorKeys.findIndex(
+      //   (c) => c === color.name
+      // );
+      // if (index < 0) {
+      //   products.filtered.colorKeys.push(color.name);
+      // } else {
+      //   products.filtered.colorKeys.splice(index, 1);
+      // }
+    }
+    if (brand) {
+      filterList.push({ brand: brand.name });
+      // const index = products.filtered.brandKeys.findIndex(
+      //   (b) => b === brand.name
+      // );
+      // if (index < 0) {
+      //   products.filtered.brandKeys.push(brand.name);
+      // } else {
+      //   products.filtered.brandKeys.splice(index, 1);
+      // }
+    }
+    setFilters(filterList);
+
+    if (
+      products.initial.length > 0 &&
+      products.searched.length <= 0 &&
+      products.sorted.length <= 0
+    ) {
+      let filterOnBrand = products.initial.filter(function (item) {
+        let count = 0;
+        for (let i = 0; i < filters.length; i++) {
+          if (filters[i].brand) {
+            count++;
+            for (var key in filters[i]) {
+              if (item[key] === filters[i][key]) {
+                return true;
+              }
+            }
+          }
+        }
+        if (count === 0) return true;
+        return false;
+      });
+
+      let filtered = filterOnBrand.filter(function (item) {
+        for (let i = 0; i < filters.length; i++) {
+          if (filters[i].color) {
+            for (var key in filters[i]) {
+              if (item[key] === filters[i][key]) {
+                return true;
+              }
+            }
+          }
+        }
+        return false;
+      });
+      console.log(filtered);
+      console.log("filtreler", filters);
+      // let filteredProducts = products.initial.filter(function (item) {
+      //   for (var key of products.filtered.brandKeys) {
+      //     if (item.brand === undefined || item.brand !== key) {
+      //       return false;
+      //     }
+      //   }
+      //   for (var key2 of products.filtered.colorKeys) {
+      //     if (item.color === undefined || item.color !== key2) {
+      //       return false;
+      //     }
+      //   }
+      //   return true;
+      // });
+      // console.log("filtreli", filteredProducts);
+    }
+  };
+
+  return (
+    <li
+      onClick={handleClick}
+      className={cn(styles.Container, isClicked ? styles.Active : undefined)}
+    >
+      {filterName}
+    </li>
+  );
 }