From 1bc8583f1f98ae70a4451c980535d5e133539ab3 Mon Sep 17 00:00:00 2001 From: Damla Koksal Date: Sun, 31 Oct 2021 21:49:17 +0300 Subject: [PATCH 1/5] [#4] feat: start implementation of filtering --- client/src/App.js | 6 +- .../components/Basket/BasketItem/index.jsx | 1 - .../src/components/Layout/Sidebar/index.jsx | 36 ++++++---- client/src/components/Link/index.jsx | 70 ++++++++++++++++++- client/src/components/Link/styles.module.scss | 6 ++ client/src/components/PageInfo/index.jsx | 3 +- client/src/components/Search/index.jsx | 2 +- .../src/contexts/Filters/FiltersContext.jsx | 56 +++++++++++++++ .../contexts/Pagination/PaginationContext.js | 18 ----- ...ProductsContext.js => ProductsContext.jsx} | 9 +-- client/src/global/variables.scss | 1 - 11 files changed, 163 insertions(+), 45 deletions(-) create mode 100644 client/src/contexts/Filters/FiltersContext.jsx delete mode 100644 client/src/contexts/Pagination/PaginationContext.js rename client/src/contexts/Products/{ProductsContext.js => ProductsContext.jsx} (87%) diff --git a/client/src/App.js b/client/src/App.js index c8d08c3..8d80a81 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,13 +1,13 @@ 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"; function App() { return ( - + @@ -16,7 +16,7 @@ function App() { - + ); } diff --git a/client/src/components/Basket/BasketItem/index.jsx b/client/src/components/Basket/BasketItem/index.jsx index cef0307..25d2e11 100644 --- a/client/src/components/Basket/BasketItem/index.jsx +++ b/client/src/components/Basket/BasketItem/index.jsx @@ -23,4 +23,3 @@ export default function BasketItem() { ); } -// TODO: SCROLLU TRANSPARENT YAP diff --git a/client/src/components/Layout/Sidebar/index.jsx b/client/src/components/Layout/Sidebar/index.jsx index 02bebe1..bb43626 100644 --- a/client/src/components/Layout/Sidebar/index.jsx +++ b/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
Loading...
; + return ( ); diff --git a/client/src/components/Link/index.jsx b/client/src/components/Link/index.jsx index 363d7ec..caf4aa6 100644 --- a/client/src/components/Link/index.jsx +++ b/client/src/components/Link/index.jsx @@ -1,5 +1,71 @@ 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
  • {filterName}
    • ; +export default function Link({ filterName, color, brand }) { + const [isClicked, setClicked] = useState(false); + const { products } = useProducts(); + + const handleClick = () => { + setClicked(!isClicked); + + if (color) { + 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) { + 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); + } + } + + if ( + products.initial.length > 0 && + products.searched.length <= 0 && + products.sorted.length <= 0 + ) { + 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); + } + + // setProducts({ + // initial: products.initial, + // searched: searchedProducts, + // filtered: { brandKeys: [], colorKeys: [], data: [] }, + // sorted: [], + // }); + }; + + return ( +
  • + {filterName} +
    • + ); } diff --git a/client/src/components/Link/styles.module.scss b/client/src/components/Link/styles.module.scss index db6e1b0..6d9e075 100644 --- a/client/src/components/Link/styles.module.scss +++ b/client/src/components/Link/styles.module.scss @@ -8,7 +8,13 @@ line-height: 24px; color: vars.$link-color; cursor: pointer; + &:hover { + color: vars.$primary-font-color; + } +} +.Active { + color: vars.$hover-link-color; &:hover { color: vars.$hover-link-color; } diff --git a/client/src/components/PageInfo/index.jsx b/client/src/components/PageInfo/index.jsx index f7ee6df..70e32fc 100644 --- a/client/src/components/PageInfo/index.jsx +++ b/client/src/components/PageInfo/index.jsx @@ -2,9 +2,8 @@ import styles from "./styles.module.scss"; import { useProducts } from "../../contexts/Products/ProductsContext"; export default function PageInfo() { - const { searchQuery, products } = useProducts(); + const { searchQuery } = useProducts(); - console.log("searched data", products.searched); return (

    Arama Sonuçları

    diff --git a/client/src/components/Search/index.jsx b/client/src/components/Search/index.jsx index ea33545..f366fe9 100644 --- a/client/src/components/Search/index.jsx +++ b/client/src/components/Search/index.jsx @@ -29,7 +29,7 @@ export default function Search() { setProducts({ initial: products.initial, searched: searchedProducts, - filtered: [], + filtered: { brandKeys: [], colorKeys: [] }, sorted: [], }); setSearchQuery(searchField.query); diff --git a/client/src/contexts/Filters/FiltersContext.jsx b/client/src/contexts/Filters/FiltersContext.jsx new file mode 100644 index 0000000..c9c1fd3 --- /dev/null +++ b/client/src/contexts/Filters/FiltersContext.jsx @@ -0,0 +1,56 @@ +import { createContext, useState, useContext, useMemo } from "react"; +import axios from "axios"; + +const FiltersContext = createContext(); + +// couldn't use seperate brand and color product ids endpoints because of time limitations +export const FiltersProvider = ({ children }) => { + const [brands, setBrands] = useState([]); + const [loadingBrands, setLoadingBrands] = useState(true); + + const [colors, setColors] = useState([]); + const [loadingColors, setLoadingColors] = useState(true); + + // fetch all Brands + useMemo(() => { + const fetchBrands = async () => { + setLoadingBrands(true); + const res = await axios.get( + `${process.env.REACT_APP_BACKEND_ENDPOINT}/brands/all` + ); + if (res) { + setBrands(res.data); + } else { + console.error("Something wrong happened while fetching brands data."); + } + setLoadingBrands(false); + }; + fetchBrands(); + }, []); + + // fetch all Colors + useMemo(() => { + const fetchColors = async () => { + setLoadingColors(true); + const res = await axios.get( + `${process.env.REACT_APP_BACKEND_ENDPOINT}/colors/all` + ); + if (res) { + setColors(res.data); + } else { + console.error("Something wrong happened while fetching colors data."); + } + setLoadingColors(false); + }; + fetchColors(); + }, []); + + const values = { brands, loadingBrands, colors, loadingColors }; + + return ( + {children} + ); +}; + +// created custom hook +export const useFilters = () => useContext(FiltersContext); diff --git a/client/src/contexts/Pagination/PaginationContext.js b/client/src/contexts/Pagination/PaginationContext.js deleted file mode 100644 index 1c32332..0000000 --- a/client/src/contexts/Pagination/PaginationContext.js +++ /dev/null @@ -1,18 +0,0 @@ -import { createContext, useContext, useState } from "react"; - -const PaginationContext = createContext(); - -export const PaginationProvider = ({ children }) => { - const [page, setPage] = useState(1); // default page number - - const values = { page, setPage }; - - return ( - - {children} - - ); -}; - -// created custom hook -export const usePagination = () => useContext(PaginationContext); diff --git a/client/src/contexts/Products/ProductsContext.js b/client/src/contexts/Products/ProductsContext.jsx similarity index 87% rename from client/src/contexts/Products/ProductsContext.js rename to client/src/contexts/Products/ProductsContext.jsx index f9c1ed7..4fdad2c 100644 --- a/client/src/contexts/Products/ProductsContext.js +++ b/client/src/contexts/Products/ProductsContext.jsx @@ -7,16 +7,17 @@ export const ProductsProvider = ({ children }) => { const [products, setProducts] = useState({ initial: [], searched: [], - filtered: [], + filtered: { brandKeys: [], colorKeys: [] }, sorted: [], }); + const [filteredProducts, setFilteredProducts] = useState([]); const [searchQuery, setSearchQuery] = useState(""); const [loading, setLoading] = useState(true); // fetch all products useEffect(() => { - const fetchPosts = async () => { + const fetchProducts = async () => { setLoading(true); const res = await axios.get( `${process.env.REACT_APP_BACKEND_ENDPOINT}/products/all` @@ -24,12 +25,12 @@ export const ProductsProvider = ({ children }) => { setProducts({ initial: res.data, searched: [], - filtered: [], + filtered: { brandKeys: [], colorKeys: [] }, sorted: [], }); setLoading(false); }; - fetchPosts(); + fetchProducts(); }, []); const values = { diff --git a/client/src/global/variables.scss b/client/src/global/variables.scss index 93d3e86..023229e 100644 --- a/client/src/global/variables.scss +++ b/client/src/global/variables.scss @@ -25,4 +25,3 @@ $cart-remove-deactive-btn-color: rgba(126, 126, 126, 0.11); $pagination-btn-color: #eeeeee; $search-bg-color: $pagination-btn-color; $search-ph-color: $border-color; // search placeholder - From 7b9e9281ad393d13a60110a972aed4c9c55a687b Mon Sep 17 00:00:00 2001 From: Damla Koksal Date: Mon, 1 Nov 2021 00:19:40 +0300 Subject: [PATCH 2/5] [#10] fix: test response data --- server/test/response.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/server/test/response.js b/server/test/response.js index 201d8ee..06540d9 100644 --- a/server/test/response.js +++ b/server/test/response.js @@ -354,6 +354,7 @@ const seedData = { "61792bc4abc140e64afdf905", "61792c29abc140e64afdf906", "61792c90abc140e64afdf907", + "61792a27abc140e64afdf902", ], }, { @@ -418,6 +419,7 @@ const seedData = { "61783293abc140e64afdf899", "61792c90abc140e64afdf907", "61792c29abc140e64afdf906", + "61792a27abc140e64afdf902", ], nokiaProductIds: ["61783451abc140e64afdf89b", "61783402abc140e64afdf89a"], lgProductIds: [ From 656fd5daf070924aead1e3b422281b4635bb77c8 Mon Sep 17 00:00:00 2001 From: Damla Koksal Date: Mon, 1 Nov 2021 03:21:30 +0300 Subject: [PATCH 3/5] [#5] feat: implement basket functionality --- client/src/App.js | 8 +++---- client/src/components/AddButton/index.jsx | 21 +++++++++-------- .../components/AddButton/styles.module.scss | 2 +- .../components/Basket/BasketDetails/index.jsx | 9 ++++---- .../Basket/BasketDetails/styles.module.scss | 13 +---------- .../components/Basket/BasketItem/index.jsx | 23 ++++++++++--------- client/src/components/Basket/index.jsx | 4 ++-- .../src/components/Basket/styles.module.scss | 11 +++++++++ client/src/components/ImageBox/index.jsx | 7 +----- .../ProductTable/ProductItem/index.jsx | 4 ++-- client/src/components/ProductTable/index.jsx | 4 ++-- client/src/contexts/Basket/BasketContext.js | 22 ++++++++++++++---- 12 files changed, 68 insertions(+), 60 deletions(-) diff --git a/client/src/App.js b/client/src/App.js index 8d80a81..5311175 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -6,8 +6,8 @@ import { FiltersProvider } from "./contexts/Filters/FiltersContext"; function App() { return ( - - + + @@ -16,8 +16,8 @@ function App() { - - + + ); } diff --git a/client/src/components/AddButton/index.jsx b/client/src/components/AddButton/index.jsx index b34abe3..2944736 100644 --- a/client/src/components/AddButton/index.jsx +++ b/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() ? ( ) : ( - ); diff --git a/client/src/components/AddButton/styles.module.scss b/client/src/components/AddButton/styles.module.scss index cda4513..0c85cf0 100644 --- a/client/src/components/AddButton/styles.module.scss +++ b/client/src/components/AddButton/styles.module.scss @@ -23,5 +23,5 @@ border-radius: 8px; width: 233px; height: 32px; - cursor: pointer; + cursor: no-drop; } diff --git a/client/src/components/Basket/BasketDetails/index.jsx b/client/src/components/Basket/BasketDetails/index.jsx index 36d2e5c..fa2a88d 100644 --- a/client/src/components/Basket/BasketDetails/index.jsx +++ b/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 (
    - - - + {productIds.map((id, i) => { + return ; + })}
    ); } diff --git a/client/src/components/Basket/BasketDetails/styles.module.scss b/client/src/components/Basket/BasketDetails/styles.module.scss index 90a8593..b80eb9e 100644 --- a/client/src/components/Basket/BasketDetails/styles.module.scss +++ b/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; } diff --git a/client/src/components/Basket/BasketItem/index.jsx b/client/src/components/Basket/BasketItem/index.jsx index 25d2e11..a719ab8 100644 --- a/client/src/components/Basket/BasketItem/index.jsx +++ b/client/src/components/Basket/BasketItem/index.jsx @@ -1,22 +1,23 @@ -// import React, { useState } from "react"; -// import cn from "classnames"; import styles from "./styles.module.scss"; import { ImageBox } from "../.."; +import { useBasket } from "../../../contexts/Basket/BasketContext"; -export default function BasketItem() { - // const [items, setItems] = useState([{ name: "iPhone11", url: "image" }]); - +export default function BasketItem({ productId }) { + const { removeItem } = useBasket(); + let product = JSON.parse(localStorage.getItem(productId)); + console.log("product", product); return (
    - - iPhone 11 Kırmızı Kılıflı Garantili Telefon - -
    diff --git a/client/src/components/Basket/index.jsx b/client/src/components/Basket/index.jsx index b32c388..c6ca876 100644 --- a/client/src/components/Basket/index.jsx +++ b/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 = () => { diff --git a/client/src/components/Basket/styles.module.scss b/client/src/components/Basket/styles.module.scss index 0d1b049..8be42b1 100644 --- a/client/src/components/Basket/styles.module.scss +++ b/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; diff --git a/client/src/components/ImageBox/index.jsx b/client/src/components/ImageBox/index.jsx index 1e8a664..807b7f7 100644 --- a/client/src/components/ImageBox/index.jsx +++ b/client/src/components/ImageBox/index.jsx @@ -13,12 +13,7 @@ export default function ImageBox({ basketImg, productImg, isHovered }) { <> {basketImg && (
    - basket-item + basket-item
    )} diff --git a/client/src/components/ProductTable/ProductItem/index.jsx b/client/src/components/ProductTable/ProductItem/index.jsx index bafdef9..ffbf3d3 100644 --- a/client/src/components/ProductTable/ProductItem/index.jsx +++ b/client/src/components/ProductTable/ProductItem/index.jsx @@ -7,7 +7,6 @@ import { calculateDiscountedPrice } from "../../../utils/helpers"; export default function ProductItem({ product }) { const [isHovered, setIsHovered] = useState(false); - const { name, brand, @@ -18,6 +17,7 @@ export default function ProductItem({ product }) { const onMouseEnter = () => setIsHovered(true); const onMouseLeave = () => setIsHovered(false); + return (
    {name}
    - +
    )} diff --git a/client/src/components/ProductTable/index.jsx b/client/src/components/ProductTable/index.jsx index 8657c3c..30cf33b 100644 --- a/client/src/components/ProductTable/index.jsx +++ b/client/src/components/ProductTable/index.jsx @@ -53,8 +53,8 @@ export default function ProductTable() { if (items.length === 0) return <>; return ( - {items.map((item, i) => { - return ; + {items.map((item, j) => { + return ; })} ); diff --git a/client/src/contexts/Basket/BasketContext.js b/client/src/contexts/Basket/BasketContext.js index fe68ec5..aaaf034 100644 --- a/client/src/contexts/Basket/BasketContext.js +++ b/client/src/contexts/Basket/BasketContext.js @@ -3,12 +3,25 @@ import { createContext, useState, useContext } from "react"; const BasketContext = createContext(); export const BasketProvider = ({ children }) => { - // initiliazed with static data - const [isOpen, setIsOpen] = useState(""); + const [count, setCount] = useState(localStorage.length); + + // add id - value pair + const addItem = (item) => { + localStorage.setItem(item._id, JSON.stringify(item)); + setCount((c) => c + 1); + }; + + // remove item by using id value + const removeItem = (id) => { + localStorage.removeItem(id); + setCount((c) => c - 1); + }; const values = { - isOpen, - setIsOpen, + addItem, + removeItem, + count, + setCount, }; return ( @@ -16,5 +29,4 @@ export const BasketProvider = ({ children }) => { ); }; -// creayed custom hook export const useBasket = () => useContext(BasketContext); From c75110e81a5fed314371da45d4903d0128f6e1f1 Mon Sep 17 00:00:00 2001 From: Damla Koksal Date: Mon, 1 Nov 2021 03:44:24 +0300 Subject: [PATCH 4/5] [#5] feat: implement modal of remove functionality --- client/src/App.js | 15 ++++---- .../components/Basket/BasketItem/index.jsx | 5 ++- client/src/components/Layout/index.jsx | 12 +++++-- .../src/components/Layout/styles.module.scss | 4 +++ client/src/components/Modal/index.jsx | 10 ++++-- .../src/components/Modal/styles.module.scss | 8 +++++ client/src/contexts/Modal/ModalContext.jsx | 34 +++++++++++++++++++ 7 files changed, 76 insertions(+), 12 deletions(-) create mode 100644 client/src/contexts/Modal/ModalContext.jsx diff --git a/client/src/App.js b/client/src/App.js index 5311175..a56b69c 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -3,18 +3,21 @@ import { Home, Error } from "./pages"; import { ProductsProvider } from "./contexts/Products/ProductsContext"; import { BasketProvider } from "./contexts/Basket/BasketContext"; import { FiltersProvider } from "./contexts/Filters/FiltersContext"; +import { ModalProvider } from "./contexts/Modal/ModalContext"; function App() { return ( - - - - - - + + + + + + + + diff --git a/client/src/components/Basket/BasketItem/index.jsx b/client/src/components/Basket/BasketItem/index.jsx index a719ab8..3bc7ac8 100644 --- a/client/src/components/Basket/BasketItem/index.jsx +++ b/client/src/components/Basket/BasketItem/index.jsx @@ -1,9 +1,12 @@ import styles from "./styles.module.scss"; import { ImageBox } from "../.."; import { useBasket } from "../../../contexts/Basket/BasketContext"; +import { useModal } from "../../../contexts/Modal/ModalContext"; export default function BasketItem({ productId }) { const { removeItem } = useBasket(); + const { activateModal } = useModal(); + let product = JSON.parse(localStorage.getItem(productId)); console.log("product", product); return ( @@ -16,7 +19,7 @@ export default function BasketItem({ productId }) { diff --git a/client/src/components/Layout/index.jsx b/client/src/components/Layout/index.jsx index 00a4ee0..c085a2b 100644 --- a/client/src/components/Layout/index.jsx +++ b/client/src/components/Layout/index.jsx @@ -1,14 +1,20 @@ 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 ( <> -
    +
    diff --git a/client/src/components/Layout/styles.module.scss b/client/src/components/Layout/styles.module.scss index ac6aaa7..75610cc 100644 --- a/client/src/components/Layout/styles.module.scss +++ b/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; diff --git a/client/src/components/Modal/index.jsx b/client/src/components/Modal/index.jsx index da3a654..1973c1d 100644 --- a/client/src/components/Modal/index.jsx +++ b/client/src/components/Modal/index.jsx @@ -1,6 +1,8 @@ import styles from "./styles.module.scss"; +import { useModal } from "../../contexts/Modal/ModalContext"; export default function Modal() { + const { yes, no } = useModal(); return (
    @@ -17,8 +19,12 @@ export default function Modal() {

    - - + +
    ); diff --git a/client/src/components/Modal/styles.module.scss b/client/src/components/Modal/styles.module.scss index e2db0d8..c39489e 100644 --- a/client/src/components/Modal/styles.module.scss +++ b/client/src/components/Modal/styles.module.scss @@ -57,6 +57,10 @@ outline: none; border: none; color: #fff; + + &:hover { + background: #66b32c; + } } .No { @@ -68,6 +72,10 @@ outline: none; border: none; color: #fff; + + &:hover { + background: rgb(190, 63, 63); + } } } } diff --git a/client/src/contexts/Modal/ModalContext.jsx b/client/src/contexts/Modal/ModalContext.jsx new file mode 100644 index 0000000..b98786d --- /dev/null +++ b/client/src/contexts/Modal/ModalContext.jsx @@ -0,0 +1,34 @@ +import { createContext, useState, useContext } from "react"; +import { useBasket } from "../Basket/BasketContext"; +const ModalContext = createContext(); + +export const ModalProvider = ({ children }) => { + const { removeItem } = useBasket(); + const [showModal, setShowModal] = useState(false); + const [productId, setProductId] = useState(""); + + const activateModal = (productId) => { + setProductId(productId); + setShowModal(true); + }; + const yes = () => { + removeItem(productId); + setShowModal(false); + }; + + const no = () => setShowModal(false); + + const values = { + yes, + no, + showModal, + setShowModal, + activateModal, + }; + + return ( + {children} + ); +}; + +export const useModal = () => useContext(ModalContext); From c7067e624b25a72b35fae690fbc292c36b8bcce3 Mon Sep 17 00:00:00 2001 From: Damla Koksal Date: Mon, 1 Nov 2021 04:07:11 +0300 Subject: [PATCH 5/5] style: delete unnecessary imports --- .../components/Basket/BasketItem/index.jsx | 2 - client/src/components/Layout/index.jsx | 1 - client/src/components/Link/index.jsx | 96 ++++++++++++------- client/src/components/Search/index.jsx | 2 +- .../src/contexts/Products/ProductsContext.jsx | 8 +- 5 files changed, 68 insertions(+), 41 deletions(-) diff --git a/client/src/components/Basket/BasketItem/index.jsx b/client/src/components/Basket/BasketItem/index.jsx index 3bc7ac8..ea1b71f 100644 --- a/client/src/components/Basket/BasketItem/index.jsx +++ b/client/src/components/Basket/BasketItem/index.jsx @@ -1,10 +1,8 @@ import styles from "./styles.module.scss"; import { ImageBox } from "../.."; -import { useBasket } from "../../../contexts/Basket/BasketContext"; import { useModal } from "../../../contexts/Modal/ModalContext"; export default function BasketItem({ productId }) { - const { removeItem } = useBasket(); const { activateModal } = useModal(); let product = JSON.parse(localStorage.getItem(productId)); diff --git a/client/src/components/Layout/index.jsx b/client/src/components/Layout/index.jsx index c085a2b..77bc9c5 100644 --- a/client/src/components/Layout/index.jsx +++ b/client/src/components/Layout/index.jsx @@ -1,4 +1,3 @@ -import { useState } from "react"; import { Header, SubHeader, Sidebar, Section, Modal } from ".."; import cn from "classnames"; import styles from "./styles.module.scss"; diff --git a/client/src/components/Link/index.jsx b/client/src/components/Link/index.jsx index caf4aa6..e2d5d67 100644 --- a/client/src/components/Link/index.jsx +++ b/client/src/components/Link/index.jsx @@ -5,59 +5,87 @@ import cn from "classnames"; export default function Link({ filterName, color, brand }) { const [isClicked, setClicked] = useState(false); - const { products } = useProducts(); + const { products, filters, setFilters } = useProducts(); const handleClick = () => { setClicked(!isClicked); + let filterList = filters; + if (color) { - 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); - } + 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) { - 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); - } + 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 filteredProducts = products.initial.filter(function (item) { - for (var key of products.filtered.brandKeys) { - if (item.brand === undefined || item.brand !== key) { - return false; + 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; + } + } } } - for (var key2 of products.filtered.colorKeys) { - if (item.color === undefined || item.color !== key2) { - return false; + 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 true; + return false; }); - console.log("filtreli", filteredProducts); + 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); } - - // setProducts({ - // initial: products.initial, - // searched: searchedProducts, - // filtered: { brandKeys: [], colorKeys: [], data: [] }, - // sorted: [], - // }); }; return ( diff --git a/client/src/components/Search/index.jsx b/client/src/components/Search/index.jsx index f366fe9..ea33545 100644 --- a/client/src/components/Search/index.jsx +++ b/client/src/components/Search/index.jsx @@ -29,7 +29,7 @@ export default function Search() { setProducts({ initial: products.initial, searched: searchedProducts, - filtered: { brandKeys: [], colorKeys: [] }, + filtered: [], sorted: [], }); setSearchQuery(searchField.query); diff --git a/client/src/contexts/Products/ProductsContext.jsx b/client/src/contexts/Products/ProductsContext.jsx index 4fdad2c..68ebcca 100644 --- a/client/src/contexts/Products/ProductsContext.jsx +++ b/client/src/contexts/Products/ProductsContext.jsx @@ -7,10 +7,10 @@ export const ProductsProvider = ({ children }) => { const [products, setProducts] = useState({ initial: [], searched: [], - filtered: { brandKeys: [], colorKeys: [] }, + filtered: [], sorted: [], }); - + const [filters, setFilters] = useState([]); const [filteredProducts, setFilteredProducts] = useState([]); const [searchQuery, setSearchQuery] = useState(""); const [loading, setLoading] = useState(true); @@ -25,7 +25,7 @@ export const ProductsProvider = ({ children }) => { setProducts({ initial: res.data, searched: [], - filtered: { brandKeys: [], colorKeys: [] }, + filtered: [], sorted: [], }); setLoading(false); @@ -38,6 +38,8 @@ export const ProductsProvider = ({ children }) => { setProducts, loading, setLoading, + filters, + setFilters, filteredProducts, setFilteredProducts, searchQuery,