From 190c4dabf4d7d87afdf84a4c501d67c0ea07dd52 Mon Sep 17 00:00:00 2001 From: dev_only <121720839+brudevtek@users.noreply.github.com> Date: Mon, 24 Apr 2023 18:50:49 -0500 Subject: [PATCH 1/8] solved issue 2,4,5,6,7,8.note: 1 and 3 remain unsolved --- package-lock.json | 1 + src/Components/Cart.jsx | 131 ++++++++++++++++++++------------ src/Components/NavBar.jsx | 29 +++++-- src/Components/ProductTable.jsx | 52 ++++++++----- src/Pages/Home.jsx | 17 +++-- 5 files changed, 150 insertions(+), 80 deletions(-) diff --git a/package-lock.json b/package-lock.json index d01ddfa..bbd664e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "react-ecommerce", "version": "0.0.1", "dependencies": { "@headlessui/react": "^1.6.0", diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx index 917b7a1..45c504a 100644 --- a/src/Components/Cart.jsx +++ b/src/Components/Cart.jsx @@ -1,8 +1,22 @@ -import { Dialog, Transition } from "@headlessui/react"; -import { XIcon } from "@heroicons/react/outline"; -import React, { Fragment } from "react"; +import { Dialog, Transition } from '@headlessui/react'; +import { XIcon } from '@heroicons/react/outline'; +import React, { Fragment, useEffect } from 'react'; +import { ShoppingCartIcon } from '@heroicons/react/outline'; export default function Cart({ open, setOpen, cart, updateCart }) { + + + const displaySubtotal = () => { + let subtotal = 0; + cart.forEach((element) => { + // setCartSubTotal(cartsubtotal + element.price); + let oneprice = element.quantity * element.price; + subtotal += oneprice; + }); + + return subtotal; + }; + return ( - + setOpen(false)} + />
@@ -39,7 +56,10 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
- Shopping cart + + {' '} + Shopping cart{' '} +
+ return p.quantity > 0; + }); + updateCart(newCart); + + }} + type="button" + className="font-medium text-gray-500 hover:text-black" + > + Remove + +
-
+ + )) + ) : ( +
  • + +

    + your cart is empty +

    • - ))} + )}
    -
    +

    Subtotal

    -

    $262.00

    +

    $ {displaySubtotal()}

    -

    Shipping and taxes calculated at checkout.

    +

    + Shipping and taxes calculated at checkout. +

    - or{" "} + or{' '}

    diff --git a/src/Components/NavBar.jsx b/src/Components/NavBar.jsx index b1d0db9..34c97fb 100644 --- a/src/Components/NavBar.jsx +++ b/src/Components/NavBar.jsx @@ -1,7 +1,17 @@ -import { ShoppingBagIcon } from "@heroicons/react/outline"; -import React from "react"; +import { ShoppingBagIcon } from '@heroicons/react/outline'; +import React, { useEffect } from 'react'; + +export default function NavBar({ setOpen, cart }) { + let qtyCart = 0; + const updateQtyCart = () => { + cart.forEach((element) => { + // setCartSubTotal(cartsubtotal + element.price); + qtyCart += element.quantity; + }); + + return qtyCart; + }; -export default function NavBar({ setOpen }) { return (
    @@ -36,13 +46,20 @@ export default function NavBar({ setOpen }) {
    {/* Cart Icon */}
    -
    diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx index ea76621..32731ab 100644 --- a/src/Components/ProductTable.jsx +++ b/src/Components/ProductTable.jsx @@ -1,53 +1,59 @@ -import React, { useEffect, useState } from "react"; -import ProductFilters from "./ProductFilters"; +import React, { useEffect, useState } from 'react'; +import ProductFilters from './ProductFilters'; const getDefaultFilterOptions = () => { return { price: [ - { minValue: 0, maxValue: 25, label: "$0 - $25", checked: false }, - { minValue: 25, maxValue: 50, label: "$25 - $50", checked: false }, - { minValue: 50, maxValue: 75, label: "$50 - $75", checked: false }, - { minValue: 75, maxValue: Number.MAX_VALUE, label: "$75+", checked: false }, + { minValue: 0, maxValue: 25, label: '$0 - $25', checked: false }, + { minValue: 25, maxValue: 50, label: '$25 - $50', checked: false }, + { minValue: 50, maxValue: 75, label: '$50 - $75', checked: false }, + { + minValue: 75, + maxValue: Number.MAX_VALUE, + label: '$75+', + checked: false, + }, ], color: [ - { value: "beige", label: "Beige", checked: false }, - { value: "green", label: "Green", checked: false }, - { value: "white", label: "White", checked: false }, - { value: "black", label: "Black", checked: false }, - { value: "gray", label: "Gray", checked: false }, - { value: "teal", label: "Teal", checked: false }, + { value: 'beige', label: 'Beige', checked: false }, + { value: 'green', label: 'Green', checked: false }, + { value: 'white', label: 'White', checked: false }, + { value: 'black', label: 'Black', checked: false }, + { value: 'gray', label: 'Gray', checked: false }, + { value: 'teal', label: 'Teal', checked: false }, ], }; }; const getDefaultSortOptions = () => { return [ - { name: "Price", current: false }, - { name: "Newest", current: false }, + { name: 'Price', current: false }, + { name: 'Newest', current: false }, ]; }; export default function ProductTable({ cart, updateCart }) { let [products, setProducts] = useState([]); - const [filterOptions, setFilterOptions] = useState(getDefaultFilterOptions()); const [sortOptions, setSortOptions] = useState(getDefaultSortOptions()); useEffect(() => { let fetchProducts = async () => { - console.info("Fetching Products..."); - let res = await fetch("http://localhost:3001/products"); + console.info('Fetching Products...'); + let res = await fetch('http://localhost:3001/products'); let body = await res.json(); setProducts(body); }; fetchProducts(); - }); + }, []); return (
    diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx index 1a5d5d9..37f7ce5 100644 --- a/src/Pages/Home.jsx +++ b/src/Pages/Home.jsx @@ -1,17 +1,20 @@ -import React, { useState } from "react"; -import Cart from "../Components/Cart"; -import NavBar from "../Components/NavBar"; -import ProductTable from "../Components/ProductTable"; +import React, { useState } from 'react'; +import Cart from '../Components/Cart'; +import NavBar from '../Components/NavBar'; +import ProductTable from '../Components/ProductTable'; function Home() { const [open, setOpen] = useState(false); - const [cart, updateCart] = useState([]); + const [cart, updateCart] = useState(JSON.parse(window.localStorage.getItem('local_storage_cart')) ||[]); + const [cartsubtotal, setCartSubTotal] = useState([]); + + return (
    - + - +
    ); } From 55a3dbd5ce0873028cba83e1821e23559c2f9cb7 Mon Sep 17 00:00:00 2001 From: dev_only <121720839+brudevtek@users.noreply.github.com> Date: Mon, 24 Apr 2023 20:28:19 -0500 Subject: [PATCH 2/8] solved issue 1 --- src/Components/ProductFilters.jsx | 65 +++++++++++++++++++++++++------ src/Components/ProductTable.jsx | 9 ++++- 2 files changed, 61 insertions(+), 13 deletions(-) diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx index 0f3262a..0934999 100644 --- a/src/Components/ProductFilters.jsx +++ b/src/Components/ProductFilters.jsx @@ -1,12 +1,19 @@ -import { Disclosure, Menu, Transition } from "@headlessui/react"; -import { ChevronDownIcon, FilterIcon } from "@heroicons/react/solid"; -import React, { Fragment } from "react"; +import { Disclosure, Menu, Transition } from '@headlessui/react'; +import { ChevronDownIcon, FilterIcon } from '@heroicons/react/solid'; +import React, { Fragment } from 'react'; function classNames(...classes) { - return classes.filter(Boolean).join(" "); + return classes.filter(Boolean).join(' '); } -export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions }) { +export default function ProductFilters({ + filterOptions, + setFilterOptions, + sortOptions, + setSortOptions, + products, + setProducts, +}) { return ( Price
    {filterOptions.price.map((option, optionIdx) => ( -
    +
    -
    @@ -61,7 +74,10 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp Color
    {filterOptions.color.map((option, optionIdx) => ( -
    +
    -
    @@ -110,11 +129,33 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
    @@ -59,6 +70,63 @@ export default function ProductFilters({ type="checkbox" className="flex-shrink-0 h-4 w-4 border-gray-300 rounded text-black focus:ring-black" defaultChecked={option.checked} + onClick={(e) => { + filterOptions.price.forEach((element) => { + if (element.minValue.toString() === e.target.value) { + if (element.checked === false) { + element.checked = true; + } else if (element.checked === true) + element.checked = false; + } + }); + + let selected_products = filterOptions.price.filter( + function (x) { + return x.checked === true; + } + ); + let selected_array = []; + selected_products.forEach((element) => { + selected_array.push( + allproducts.filter(function (item) { + return ( + item.price > element.minValue && + item.price < element.maxValue + ); + }) + ); + }); + + setProducts(selected_array.flat(1)); + + set_Nbr_Filters(selected_array.length); + + console.log(nbr_filters); + + // setFilterOptions(products); + // console.log( + // selected_array.reduce(function (acc, x) { + // for (var key in x) acc[key] = x[key]; + // return acc; + // }, {}) + // ); + // setProducts(selected_array); + + // let min_price = Math.min( + // ...selected_products.map((item) => item.minValue) + // ); + // let max_price = Math.max( + // ...selected_products.map((item) => item.maxValue) + // ); + + // setProducts( + // products.filter(function (item) { + // return ( + // item.price > min_price && item.price < max_price + // ); + // }) + // ); + }} />