diff options
| -rw-r--r-- | src/core/components/elements/Image/Image.jsx | 16 | ||||
| -rw-r--r-- | src/core/components/elements/Sidebar/Sidebar.jsx | 4 | ||||
| -rw-r--r-- | src/lib/transaction/components/Transaction.jsx | 79 | ||||
| -rw-r--r-- | src/lib/wishlist/api/wishlistsApi.js | 10 | ||||
| -rw-r--r-- | src/lib/wishlist/components/Wishlists.jsx | 41 | ||||
| -rw-r--r-- | src/lib/wishlist/hooks/useWishlists.js | 14 | ||||
| -rw-r--r-- | src/pages/my/wishlist.jsx | 10 |
7 files changed, 129 insertions, 45 deletions
diff --git a/src/core/components/elements/Image/Image.jsx b/src/core/components/elements/Image/Image.jsx index 579660a4..a6f0b00c 100644 --- a/src/core/components/elements/Image/Image.jsx +++ b/src/core/components/elements/Image/Image.jsx @@ -2,13 +2,15 @@ import { LazyLoadImage } from "react-lazy-load-image-component" import "react-lazy-load-image-component/src/effects/opacity.css" const Image = ({ ...props }) => ( - <LazyLoadImage - { ...props } - src={props.src || '/images/noimage.jpeg'} - placeholderSrc="/images/indoteknik-placeholder.png" - alt={props.src ? props.alt : 'Image Not Found - Indoteknik'} - wrapperClassName="bg-white" - /> + <> + <LazyLoadImage + { ...props } + src={props.src || '/images/noimage.jpeg'} + placeholderSrc="/images/indoteknik-placeholder.png" + alt={props.src ? props.alt : 'Image Not Found - Indoteknik'} + wrapperClassName="bg-white" + /> + </> ) Image.defaultProps = LazyLoadImage.defaultProps diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx index 88de1c1c..c840a688 100644 --- a/src/core/components/elements/Sidebar/Sidebar.jsx +++ b/src/core/components/elements/Sidebar/Sidebar.jsx @@ -44,8 +44,8 @@ const Sidebar = ({ <div className="p-4 flex gap-x-3"> { !auth && ( <> - <Link href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link> - <Link href="/login" className="btn-solid-red !text-gray_r-1 py-2 flex-1">Masuk</Link> + <Link onClick={close} href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link> + <Link onClick={close} href="/login" className="btn-solid-red !text-gray_r-1 py-2 flex-1">Masuk</Link> </> ) } { auth && ( diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx index e049a9ac..0759dbf8 100644 --- a/src/lib/transaction/components/Transaction.jsx +++ b/src/lib/transaction/components/Transaction.jsx @@ -46,15 +46,6 @@ const Transaction = ({ id }) => { toast.error('Terjadi kesalahan internal, coba lagi nanti atau hubungi kami') } - const [ section, setSection ] = useState({ - customer: false, - invoice: false, - shipping: false - }) - const toggleSection = (name) => { - setSection({ ...section, [name]: !section[name] }) - } - const [ cancelTransaction, setCancelTransaction ] = useState(false) const openCancelTransaction = () => setCancelTransaction(true) const closeCancelTransaction = () => setCancelTransaction(false) @@ -142,33 +133,7 @@ const Transaction = ({ id }) => { <Divider /> - <SectionButton - label="Detail Pelanggan" - active={section.customer} - toggle={() => toggleSection('customer')} - /> - - { section.customer && <SectionContent address={transaction.data?.address?.customer} /> } - - <Divider /> - - <SectionButton - label="Detail Pengiriman" - active={section.shipping} - toggle={() => toggleSection('shipping')} - /> - - { section.shipping && <SectionContent address={transaction.data?.address?.shipping} /> } - - <Divider /> - - <SectionButton - label="Detail Penagihan" - active={section.invoice} - toggle={() => toggleSection('invoice')} - /> - - { section.invoice && <SectionContent address={transaction.data?.address?.invoice} /> } + <SectionAddress address={transaction.data?.address} /> <Divider /> @@ -288,6 +253,48 @@ const Transaction = ({ id }) => { ) } +const SectionAddress = ({ address }) => { + const [ section, setSection ] = useState({ + customer: false, + invoice: false, + shipping: false + }) + const toggleSection = (name) => { + setSection({ ...section, [name]: !section[name] }) + } + + return ( + <> + <SectionButton + label="Detail Pelanggan" + active={section.customer} + toggle={() => toggleSection('customer')} + /> + + { section.customer && <SectionContent address={address?.customer} /> } + + <Divider /> + + <SectionButton + label="Detail Pengiriman" + active={section.shipping} + toggle={() => toggleSection('shipping')} + /> + + { section.shipping && <SectionContent address={address?.shipping} /> } + + <Divider /> + + <SectionButton + label="Detail Penagihan" + active={section.invoice} + toggle={() => toggleSection('invoice')} + /> + { section.invoice && <SectionContent address={address?.invoice} /> } + </> + ) +} + const SectionButton = ({ label, active, toggle }) => ( <button className="p-4 font-medium flex justify-between w-full" onClick={toggle}> <span>{label}</span> diff --git a/src/lib/wishlist/api/wishlistsApi.js b/src/lib/wishlist/api/wishlistsApi.js new file mode 100644 index 00000000..49ef56ee --- /dev/null +++ b/src/lib/wishlist/api/wishlistsApi.js @@ -0,0 +1,10 @@ +import odooApi from "@/core/api/odooApi" +import { getAuth } from "@/core/utils/auth" + +const wishlistsApi = async ({ limit, offset }) => { + const auth = getAuth() + const dataWishlists = await odooApi('GET', `/api/v1/user/${auth.id}/wishlist?limit=${limit}&offset=${offset}`) + return dataWishlists +} + +export default wishlistsApi
\ No newline at end of file diff --git a/src/lib/wishlist/components/Wishlists.jsx b/src/lib/wishlist/components/Wishlists.jsx new file mode 100644 index 00000000..8a456a8d --- /dev/null +++ b/src/lib/wishlist/components/Wishlists.jsx @@ -0,0 +1,41 @@ +import Alert from "@/core/components/elements/Alert/Alert" +import Pagination from "@/core/components/elements/Pagination/Pagination" +import Spinner from "@/core/components/elements/Spinner/Spinner" +import ProductCard from "@/lib/product/components/ProductCard" +import { useRouter } from "next/router" +import useWishlists from "../hooks/useWishlists" + +const Wishlists = () => { + const router = useRouter() + const { + page = 1 + } = router.query + const limit = 30 + const { wishlists } = useWishlists({ page, limit }) + + const pageCount = Math.ceil(wishlists.data?.productTotal / limit) + + return ( + <div className="px-4 py-6"> + { wishlists.isLoading && ( + <Spinner className="w-6 h-6 text-gray-600 fill-gray-900 mx-auto" /> + ) } + { wishlists.data?.products?.length == 0 && ( + <Alert type='info' className='text-center'> + Wishlist anda masih kosong + </Alert> + ) } + <div className="grid grid-cols-2 gap-3"> + {wishlists.data?.products.map((product) => ( + <ProductCard key={product.id} data={product} /> + ))} + </div> + + <div className="mt-6"> + <Pagination currentPage={page} pageCount={pageCount} url={`/my/wishlist`} /> + </div> + </div> + ) +} + +export default Wishlists
\ No newline at end of file diff --git a/src/lib/wishlist/hooks/useWishlists.js b/src/lib/wishlist/hooks/useWishlists.js new file mode 100644 index 00000000..a219ab69 --- /dev/null +++ b/src/lib/wishlist/hooks/useWishlists.js @@ -0,0 +1,14 @@ +import { useQuery } from "react-query" +import wishlistsApi from "../api/wishlistsApi" + +const useWishlists = ({ page, limit }) => { + const offset = (page - 1) * limit + const fetchWishlists = async () => await wishlistsApi({ limit, offset }) + const { data, isLoading } = useQuery(`wishlists-${limit}-${offset}`, fetchWishlists) + + return { + wishlists: { data, isLoading } + } +} + +export default useWishlists
\ No newline at end of file diff --git a/src/pages/my/wishlist.jsx b/src/pages/my/wishlist.jsx new file mode 100644 index 00000000..b7a3e4fe --- /dev/null +++ b/src/pages/my/wishlist.jsx @@ -0,0 +1,10 @@ +import AppLayout from "@/core/components/layouts/AppLayout" +import Wishlists from "@/lib/wishlist/components/Wishlists" + +export default function Wishlist() { + return ( + <AppLayout title="Wishlist"> + <Wishlists /> + </AppLayout> + ) +}
\ No newline at end of file |