Skip to content
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

Jump to bottom

React ecommerce bug fixes mc #61

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

React ecommerce bug fixes mc #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f103fbb
Fixed product fetch infinite loop and fixed shopping cart not closing…
MiguelCamilo Apr 3, 2023
c378662
fixed persitent cart storage
MiguelCamilo Apr 4, 2023
4ff57fc
fixed issues with localStorage
MiguelCamilo Apr 4, 2023
b184c57
Completed 6 out of the 8 issues
MiguelCamilo Apr 5, 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.

297 changes: 168 additions & 129 deletions src/Components/Cart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,140 +1,179 @@
import { useEffect } from "react";
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 }) {
return (
<Transition.Root show={open} as={Fragment}>
<Dialog
as="div"
className="fixed inset-0 overflow-hidden z-10"
onClose={() => {
setOpen;
}}
>
<div className="absolute inset-0 overflow-hidden">
<Transition.Child
as={Fragment}
enter="ease-in-out duration-500"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in-out duration-500"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>

<div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
<Transition.Child
as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transform transition ease-in-out duration-500 sm:duration-700"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<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 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">
<button
type="button"
className="-m-2 p-2 text-gray-400 hover:text-gray-500"
onClick={() => setOpen(false)}
>
<span className="sr-only">Close panel</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
</div>
const calculate_cart_total = () => {
let sum = 0
cart.forEach((product) => {
// sum += product.price
sum = sum + (product.price * product.quantity)
})
return sum
}

<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>
useEffect(() => {
// localStorage can only store string values thats
// why we use JSON.stringify
localStorage.setItem(`cart-item`, JSON.stringify(cart));
}, [cart]);

<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 (
<Transition.Root show={open} as={Fragment}>
<Dialog
as="div"
className="fixed inset-0 overflow-hidden z-10"
onClose={() => {
setOpen;
}}
>
<div className="absolute inset-0 overflow-hidden">
<Transition.Child
as={Fragment}
enter="ease-in-out duration-500"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in-out duration-500"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay
onClick={() => setOpen(false)}
className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
/>
</Transition.Child>

return p.quantity > 0;
});
updateCart(newCart);
}}
type="button"
className="font-medium text-gray-500 hover:text-black"
>
Remove
</button>
</div>
</div>
</div>
</li>
))}
</ul>
</div>
</div>
</div>
<div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
<Transition.Child
as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transform transition ease-in-out duration-500 sm:duration-700"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<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 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">
<button
type="button"
className="-m-2 p-2 text-gray-400 hover:text-gray-500"
onClick={() => setOpen(false)}
>
<span className="sr-only">Close panel</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
</div>
{/* if no items then show Empty Cart icon */}
{cart.length === 0 &&
<div className="h-full flex flex-col justify-center items-center">
<ShoppingCartIcon className="w-[3rem]" />
<p className="pt-2">Your Cart is Empty.</p>
</div>
}

<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>
</div>
<p className="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
<div className="mt-6">
<a
href="#"
className="flex items-center justify-center rounded-md border border-transparent bg-gray-800 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-black"
>
Checkout
</a>
</div>
<div className="mt-6 flex justify-center text-center text-sm text-gray-500">
<p>
or{" "}
<button
type="button"
className="font-medium text-gray-700 hover:text-black"
onClick={() => setOpen(false)}
>
Continue Shopping<span aria-hidden="true"> &rarr;</span>
</button>
</p>
</div>
</div>
</div>
</div>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
<div className="mt-8">
<div className="flow-root">
<ul
role="list"
className="-my-6 divide-y divide-gray-200"
>
{/* turnary showing empty cart if not items */}
{cart.map((product, index) => (
<li key={index} 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>
</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>
</div>
</div>
</div>
</li>
))}
</ul>
</div>
</div>
</div>

<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>${calculate_cart_total()}</p>
</div>
<p className="mt-0.5 text-sm text-gray-500">
Shipping and taxes calculated at checkout.
</p>
<div className="mt-6">
<a
href="#"
className="flex items-center justify-center rounded-md border border-transparent bg-gray-800 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-black"
>
Checkout
</a>
</div>
<div className="mt-6 flex justify-center text-center text-sm text-gray-500">
<p>
or{" "}
<button
type="button"
className="font-medium text-gray-700 hover:text-black"
onClick={() => setOpen(false)}
>
Continue Shopping
<span aria-hidden="true"> &rarr;</span>
</button>
</p>
</div>
</div>
</div>
</div>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
}
6 changes: 4 additions & 2 deletions src/Components/NavBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { ShoppingBagIcon } from "@heroicons/react/outline";
import React from "react";

export default function NavBar({ setOpen }) {
export default function NavBar({ cart, setOpen }) {
let cart_items = cart.length

return (
<div className="bg-white">
<header className="relative">
Expand Down Expand Up @@ -41,7 +43,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_items}</span>
<span className="sr-only">items in cart, view bag</span>
</button>
</div>
Expand Down
6 changes: 5 additions & 1 deletion src/Components/ProductFilters.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ function classNames(...classes) {
}

export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions }) {
const sort_list = () => {
setSortOptions(sortOptions === 'arc' ? 'desc' : 'asc')
}

return (
<Disclosure
as="section"
Expand Down Expand Up @@ -109,7 +113,7 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
{({ active }) => (
<button
onClick={() => {
// TODO
// TODO:
}}
className={classNames(
option.current ? "font-medium text-gray-900" : "text-gray-500",
Expand Down
20 changes: 12 additions & 8 deletions src/Components/ProductTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,19 @@ export default function ProductTable({ cart, updateCart }) {
const [filterOptions, setFilterOptions] = useState(getDefaultFilterOptions());
const [sortOptions, setSortOptions] = useState(getDefaultSortOptions());

//! fixed product infinite fetch loop
useEffect(() => {
let fetchProducts = async () => {
console.info("Fetching Products...");
let res = await fetch("http://localhost:3001/products");
let body = await res.json();
setProducts(body);
};
fetchProducts();
});
fetch("http://localhost:3001/products")
.then(res => res.json())
.then(data => {
setProducts(data);
console.info("Fetching Products...");
})
.catch(err => {
console.alert(err);
})

},[])

return (
<div className="bg-white">
Expand Down
Loading