Skip to content

Fixed all issues( #1 to #8) #68

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Fixed all issues( #1 to #8) #68

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
190c4da
solved issue 2,4,5,6,7,8.note: 1 and 3 remain unsolved
brudevtek Apr 24, 2023
55a3dbd
solved issue 1
brudevtek Apr 25, 2023
4fb3bd3
able to filter per price and update number of filters
brudevtek Apr 25, 2023
855d583
fixed all issues (from issue 1 to issue 8)
brudevtek Apr 25, 2023
1ae46e9
fixing some minor problems that were causing failure of the automated…
brudevtek Apr 26, 2023
b66339c
fixing some minor problems that were causing failure of the automated…
brudevtek Apr 26, 2023
7f6833d
saving progress as I improve my code based on the reviewer's comment …
brudevtek Apr 28, 2023
158a10c
restructuring code based on comments from reviewer
brudevtek Apr 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

128 changes: 81 additions & 47 deletions src/Components/Cart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,20 @@
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 (
<Transition.Root show={open} as={Fragment}>
<Dialog
Expand All @@ -22,7 +34,10 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<Dialog.Overlay
className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
onClick={() => setOpen(false)}
/>
</Transition.Child>

<div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
Expand All @@ -39,7 +54,10 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
<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 items-start justify-between">
<Dialog.Title className="text-lg font-medium text-gray-900"> Shopping cart </Dialog.Title>
<Dialog.Title className="text-lg font-medium text-gray-900">
{' '}
Shopping cart{' '}
</Dialog.Title>
<div className="ml-3 flex h-7 items-center">
<button
type="button"
Expand All @@ -54,60 +72,75 @@ export default function Cart({ open, setOpen, cart, updateCart }) {

<div className="mt-8">
<div className="flow-root">
<ul role="list" className="-my-6 divide-y divide-gray-200">
{cart.map((product) => (
<li key={product.id} className="flex py-6">
<div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
<img
src={product.imageSrc}
alt={product.imageAlt}
className="h-full w-full object-cover object-center"
/>
</div>

<div className="ml-4 flex flex-1 flex-col">
<div>
<div className="flex justify-between text-base font-medium text-gray-900">
<h3>{product.name}</h3>
<p className="ml-4">${product.price}</p>
</div>
<ul
role="list"
className="-my-6 divide-y divide-gray-200 "
>
{cart.length > 0 ? (
cart.map((product) => (
<li key={product.id} className="flex py-6">
<div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
<img
src={product.imageSrc}
alt={product.imageAlt}
className="h-full w-full object-cover object-center"
/>
</div>
<div className="flex flex-1 items-end justify-between text-sm">
<p className="text-gray-500">Qty {product.quantity}</p>

<div className="flex">
<button
onClick={() => {
let newCart = cart.filter((p) => {
if (p.id === product.id) {
p.quantity -= 1;
}
<div className="ml-4 flex flex-1 flex-col">
<div>
<div className="flex justify-between text-base font-medium text-gray-900">
<h3>{product.name}</h3>
<p className="ml-4">${product.price}</p>
</div>
</div>
<div className="flex flex-1 items-end justify-between text-sm">
<p className="text-gray-500">
Qty {product.quantity}
</p>
<div className="flex">
<button
onClick={() => {
let newCart = cart.filter((p) => {
if (p.id === product.id) {
p.quantity -= 1;
}

return p.quantity > 0;
});
updateCart(newCart);
}}
type="button"
className="font-medium text-gray-500 hover:text-black"
>
Remove
</button>
return p.quantity > 0;
});
updateCart(newCart);
}}
type="button"
className="font-medium text-gray-500 hover:text-black"
>
Remove
</button>
</div>
</div>
</div>
</div>
</li>
))
) : (
<li className="flex flex-col h-96 items-center justify-center">
<ShoppingCartIcon className="max-w-[3rem]" />
<h1 className="capitalize pt-2">
your cart <span>is</span> empty.
</h1>
</li>
))}
)}
</ul>
</div>
</div>
</div>

<div className="border-t border-gray-200 py-6 px-4 sm:px-6">
<div className="border-t border-gray-200 py-6 px-4 sm:px-6 ">
<div className="flex justify-between text-base font-medium text-gray-900">
<p>Subtotal</p>
<p>$262.00</p>
<p>${displaySubtotal()}</p>
</div>
<p className="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
<p className="mt-0.5 text-sm text-gray-500">
Shipping and taxes calculated at checkout.
</p>
<div className="mt-6">
<a
href="#"
Expand All @@ -118,13 +151,14 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
</div>
<div className="mt-6 flex justify-center text-center text-sm text-gray-500">
<p>
or{" "}
or{' '}
<button
type="button"
className="font-medium text-gray-700 hover:text-black"
onClick={() => setOpen(false)}
>
Continue Shopping<span aria-hidden="true"> &rarr;</span>
Continue Shopping
<span aria-hidden="true"> &rarr;</span>
</button>
</p>
</div>
Expand Down
29 changes: 23 additions & 6 deletions src/Components/NavBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="bg-white">
<header className="relative">
Expand Down Expand Up @@ -36,13 +46,20 @@ export default function NavBar({ setOpen }) {
<div className="flex items-center lg:ml-8">
{/* Cart Icon */}
<div className="ml-4 flow-root lg:ml-8">
<button onClick={() => setOpen(true)} className="group -m-2 p-2 flex items-center">
<button
onClick={() => setOpen(true)}
className="group -m-2 p-2 flex items-center"
>
<ShoppingBagIcon
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="sr-only">items in cart, view bag</span>
<span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">
{updateQtyCart()}
</span>
<span className="sr-only">
items in cart, view bag
</span>
</button>
</div>
</div>
Expand Down
Loading