-
Notifications
You must be signed in to change notification settings - Fork 65
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #165 from Utsavladia/wishlist
Added functionality of wishlist
- Loading branch information
Showing
5 changed files
with
215 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import Image from "next/image"; | ||
| import { toast } from "react-hot-toast"; | ||
| import { X } from "lucide-react"; | ||
|
|
||
| import IconButton from "@/components/ui/icon-button"; | ||
| import Currency from "@/components/ui/currency"; | ||
| import useWishlist from "@/hooks/use-wishlist"; | ||
| import { Product } from "@/types"; | ||
|
|
||
| interface CartItemProps { | ||
| data: Product; | ||
| } | ||
|
|
||
| const WishlistItem: React.FC<CartItemProps> = ({ data }) => { | ||
| const wishlist = useWishlist(); | ||
|
|
||
| const onRemove = () => { | ||
| wishlist.removeItem(data.id); | ||
| }; | ||
|
|
||
| return ( | ||
| <li className="flex py-6 border-b"> | ||
| <div className="relative h-24 w-24 rounded-md overflow-hidden sm:h-48 sm:w-48"> | ||
| <Image | ||
| fill | ||
| src={data.images[0].url} | ||
| alt="" | ||
| className="object-cover object-center" | ||
| /> | ||
| </div> | ||
| <div className="relative ml-4 flex flex-1 flex-col justify-between sm:ml-6"> | ||
| <div className="absolute z-10 right-0 top-0"> | ||
| <IconButton onClick={onRemove} icon={<X size={15} />} /> | ||
| </div> | ||
| <div className="relative pr-9 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:pr-0"> | ||
| <div className="flex justify-between"> | ||
| <p className=" text-lg font-semibold text-black">{data.name}</p> | ||
| </div> | ||
|
|
||
| <div className="mt-1 flex text-sm"> | ||
| <p className="text-gray-500">{data.color.name}</p> | ||
| <p className="ml-4 border-l border-gray-200 pl-4 text-gray-500"> | ||
| {data.size.name} | ||
| </p> | ||
| </div> | ||
| <Currency value={data.price} /> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| ); | ||
| }; | ||
|
|
||
| export default WishlistItem; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| "use client"; | ||
|
|
||
| import { useEffect, useState } from "react"; | ||
|
|
||
| import Container from "@/components/ui/container"; | ||
| import useWishlist from "@/hooks/use-wishlist"; | ||
|
|
||
| import WishlistItem from "./components/wishlist-item"; | ||
|
|
||
| const CartPage = () => { | ||
| const [isMounted, setIsMounted] = useState(false); | ||
| const wishlist = useWishlist(); | ||
|
|
||
| useEffect(() => { | ||
| setIsMounted(true); | ||
| }, []); | ||
|
|
||
| if (!isMounted) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="bg-white pt-10"> | ||
| <Container> | ||
| <div className="px-4 py-16 sm:px-6 lg:px-8"> | ||
| <h1 className="text-3xl font-bold text-black">Your Wishlist</h1> | ||
| <div className="mt-12 lg:grid lg:grid-cols-12 lg:items-start gap-x-12"> | ||
| <div className="lg:col-span-7"> | ||
| <ul> | ||
| {wishlist.items.map((item) => ( | ||
| <WishlistItem key={item.id} data={item} /> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </Container> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default CartPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { create } from "zustand"; | ||
| import { toast } from "react-hot-toast"; | ||
| import { persist, createJSONStorage } from "zustand/middleware"; | ||
|
|
||
| import { Product } from "@/types"; | ||
| import { AlertTriangle } from "lucide-react"; | ||
|
|
||
| interface WishlistStore { | ||
| items: Product[]; | ||
| addItem: (data: Product) => void; | ||
| removeItem: (id: string) => void; | ||
| removeAll: () => void; | ||
| } | ||
|
|
||
| const useWishlist = create( | ||
| persist<WishlistStore>( | ||
| (set, get) => ({ | ||
| items: [], | ||
| addItem: (data: Product) => { | ||
| const currentItems = get().items; | ||
| const existingItem = currentItems.find((item) => item.id === data.id); | ||
|
|
||
| if (existingItem) { | ||
| return toast("Item already in wishlist."); | ||
| } | ||
|
|
||
| set({ items: [...get().items, data] }); | ||
| toast.success("Item added to wishlist."); | ||
| }, | ||
| removeItem: (id: string) => { | ||
| set({ items: [...get().items.filter((item) => item.id !== id)] }); | ||
| toast.success("Item removed from wishlist."); | ||
| }, | ||
| removeAll: () => set({ items: [] }), | ||
| }), | ||
| { | ||
| name: "wishlist-storage", | ||
| storage: createJSONStorage(() => localStorage), | ||
| } | ||
| ) | ||
| ); | ||
|
|
||
| export default useWishlist; |