Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
maxim55069633 committed May 6, 2023
1 parent 6dabec4 commit 308d6f4
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 29 deletions.
24 changes: 18 additions & 6 deletions src/Components/Cart.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Dialog, Transition } from "@headlessui/react";
import { XIcon } from "@heroicons/react/outline";
import { XIcon, ShoppingCartIcon } from "@heroicons/react/outline";
import React, { Fragment } from "react";

export default function Cart({ open, setOpen, cart, updateCart }) {
Expand Down Expand Up @@ -39,7 +39,7 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
>
<div className="pointer-events-auto w-screen max-w-md">
<div className="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
<div className="flex-1 overflow-y-auto py-6 px-4 sm:px-6">
<div className="flex-1 overflow-y-auto py-6 px-4 sm:px-6 flex flex-col">
<div className="flex items-start justify-between">
<Dialog.Title className="text-lg font-medium text-gray-900"> Shopping cart </Dialog.Title>
<div className="ml-3 flex h-7 items-center">
Expand All @@ -54,8 +54,15 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
</div>
</div>

<div className="mt-8">
<div className="flow-root">
<div className="mt-8 flex-1">
{
cart.length == 0 ?
<div className="flex flex-col items-center justify-center h-full">
<ShoppingCartIcon className="w-12"/>
<span className="pt-2">Your Cart is Empty.</span>
</div>
:
<div className="flow-root">
<ul role="list" className="-my-6 divide-y divide-gray-200">
{
cart.map((product) => (
Expand Down Expand Up @@ -105,9 +112,14 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
</div>
</div>
</li>
))}
))


}
</ul>
</div>
</div>
}

</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions src/Components/NavBar.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { ShoppingBagIcon } from "@heroicons/react/outline";
import React from "react";

export default function NavBar({ setOpen }) {
export default function NavBar({ setOpen, cart }) {
return (
<div className="bg-white">
<header className="relative">
Expand Down Expand Up @@ -41,7 +41,7 @@ export default function NavBar({ setOpen }) {
className="flex-shrink-0 h-6 w-6 text-gray-400 group-hover:text-gray-500"
aria-hidden="true"
/>
<span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
<span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">{cart.length}</span>
<span className="sr-only">items in cart, view bag</span>
</button>
</div>
Expand Down
51 changes: 32 additions & 19 deletions src/Components/ProductFilters.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
const customFilter = ()=>{
const productsCopy = [...default_products];


// filter price first
let price_i=0

Expand Down Expand Up @@ -89,20 +88,39 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
}
}
}

setProducts(productsCopy);
}

const clearFilter=()=>{
setProducts(default_products)



const all_checkboxes = document.querySelectorAll(`input[type="checkbox"]`);
all_checkboxes.forEach(
element=>{
element.checked=false;
}
);

setProducts(default_products );

}

useEffect(
()=>{

if(filter_num != 0)
customFilter();
customFilter();
else
clearFilter();
clearFilter();


console.log("default_products");
console.log(default_products);
console.log("products");
console.log(products);
console.log("filterOptions");
console.log(filterOptions);
}, [filter_num]
)

Expand Down Expand Up @@ -130,13 +148,7 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
<button type="button" className="text-gray-500"
onClick={ ()=>{
set_filter_num(0);
const all_checkboxes = document.querySelectorAll(`input[type="checkbox"]`);
all_checkboxes.forEach(
element=>{
element.checked=false;
}
);


const new_price_filterOptions = [];
filterOptions["price"].forEach(element => {

Expand All @@ -156,8 +168,8 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
checked: false });

});
setFilterOptions({price:filterOptions["price"], color:filterOptions["color"]});

setFilterOptions({price:new_price_filterOptions, color:new_color_filterOptions});
} }
>
Clear all
Expand All @@ -174,13 +186,14 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
{filterOptions.price.map((option, optionIdx) => (
<div key={option.minValue} className="flex items-center text-base sm:text-sm">
<input

onChange={(e) => {
onChange={ (e)=>{
if(e.currentTarget.checked)
set_filter_num(filter_num+1);
else
set_filter_num(filter_num-1);



// 1 bold the current filter option
const new_price_filterOptions = [];
filterOptions["price"].forEach(element => {
Expand All @@ -196,8 +209,9 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
new_price_filterOptions.push(element);
});
setFilterOptions({price:new_price_filterOptions, color:filterOptions["color"]});

}}
}
}


id={`price-${optionIdx}`}
name="price[]"
Expand Down Expand Up @@ -306,7 +320,6 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
// 2 sort accordingly
setProducts(customSort(option.name));


}}
className={classNames(
option.current ? "font-medium text-gray-900" : "text-gray-500",
Expand Down
2 changes: 1 addition & 1 deletion src/Components/ProductTable.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function ProductTable({ cart, updateCart }) {
set_default_products(body);
};
fetchProducts();
});
},[]);

return (
<div className="bg-white">
Expand Down
2 changes: 1 addition & 1 deletion src/Pages/Home.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function Home() {

return (
<main>
<NavBar {...{ setOpen }} />
<NavBar {...{ setOpen, cart }} />
<Cart {...{ open, setOpen, cart, updateCart }} />
<ProductTable {...{ cart, updateCart }} />
</main>
Expand Down

0 comments on commit 308d6f4

Please sign in to comment.