import React, { useState } from 'react' import { Head, router } from '@inertiajs/react' import CustomerLayout from '@/Layouts/CustomerLayout' import VoucherCard from './VoucherCard' const EmptyHere = () => { return (
Voucher segera tersedia
Yuk, share referral kamu untuk tingkatkan coinnya
) } export default function Exhange(props) { const { locations, vouchers: { data, next_page_url }, _location_id, } = props const [locId, setLocId] = useState(_location_id) const [v, setV] = useState(data) const handleSelectLoc = (loc) => { if (loc.id === locId) { setLocId('') fetch('') return } setLocId(loc.id) fetch(loc.id) } const handleNextPage = () => { router.get( next_page_url, { location_id: locId, }, { replace: true, preserveState: true, only: ['vouchers'], onSuccess: (res) => { setV(v.concat(res.props.vouchers.data)) }, } ) } const fetch = (locId) => { router.get( route(route().current()), { location_id: locId }, { replace: true, preserveState: true, onSuccess: (res) => { setV(res.props.vouchers.data) }, } ) } return (
Tukar Coin
tukarkan coin anda dengan voucher manarik
{v.length <= 0 ? ( ) : (
{/* chips */}
{locations.map((location) => (
handleSelectLoc(location)} key={location.id} className={`px-2 py-1 rounded-2xl ${ location.id === locId ? 'text-white bg-blue-600 border border-blue-800' : 'bg-blue-100 border border-blue-200' }`} > {location.name}
))}
{/* voucher */}
{v.map((voucher) => ( ))} {next_page_url !== null && (
Load more
)}
)}
) }