import React, { useState } from 'react' import { router, usePage } from '@inertiajs/react' import { HiXMark } from 'react-icons/hi2' import { useModalState } from '@/hooks' import VoucherCard from '../Partials/VoucherCard' import FormLocation from '../../Components/FormLocation' import LocationModal from '../Partials/LocationModal' const EmptyLocation = () => { return (
Pilih lokasi
pilih lokasi untuk dapat menampilkan voucher tersedia
) } const EmptyVoucher = () => { return (
Voucher belum tersedia
sepertinya voucher di lokasimu sedang tidak tersedia
) } export default function AllVoucher() { const { props: { locations, vouchers: { data, next_page_url }, _slocations, }, } = usePage() const locationModal = useModalState() const nextPageUrl = next_page_url === undefined ? null : next_page_url const [items, setItems] = useState(data === undefined ? [] : data) const [sLocations, setSLocations] = useState(_slocations) const handleAddLocation = (location) => { const isExists = sLocations.find((l) => l.id === location.id) if (!isExists) { const locations = [location].concat(...sLocations) setSLocations(locations) fetch(locations) } } const handleRemoveLocation = (index) => { const locations = sLocations.filter((_, i) => i !== index) setSLocations(locations) fetch(locations) } const handleNextPage = () => { let location_ids = sLocations.map((l) => l.id) router.get( nextPageUrl, { location_ids: location_ids }, { replace: true, preserveState: true, only: ['vouchers'], onSuccess: (res) => { if (res.props.vouchers.data !== undefined) { setItems(items.concat(res.props.vouchers.data)) } }, } ) } const fetch = (locations) => { let location_ids = locations.map((l) => l.id) router.get( route(route().current()), { location_ids: location_ids }, { replace: true, preserveState: true, onSuccess: (res) => { if (res.props.vouchers.data !== undefined) { setItems(res.props.vouchers.data) return } setItems([]) }, } ) } return ( <>
{sLocations.map((location, index) => (
handleRemoveLocation(index)} >
{location.name}
))}
{items.length <= 0 && sLocations.length <= 0 && } {/* voucher */}
{items.map((voucher) => ( ))} {nextPageUrl !== null && (
Load more
)}
{items.length <= 0 && sLocations.length > 0 && } ) }