import React, { useState, useEffect } from 'react' import { Head, router } from '@inertiajs/react' import { usePrevious } from 'react-use' import CustomerLayout from '@/Layouts/CustomerLayout' import HeaderTrx from '../Components/HeaderTrx' import { formatIDDate } from '@/utils' import { isEmpty } from 'lodash' const EmptyHere = () => { return (
Transaksi kosong
Yuk, topup saldo kamu sekarang juga
) } export default function Index(props) { const { histories: { data, next_page_url }, _start_date, _end_date, } = props const [deposites, setDeposites] = useState(data) const [dates, setDates] = useState({ startDate: _start_date, endDate: _end_date, }) const preValue = usePrevious(`${dates}`) const handleNextPage = () => { router.get( next_page_url, { startDate: dates.startDate, endDate: dates.endDate }, { replace: true, preserveState: true, only: ['histories'], onSuccess: (res) => { setDeposites(deposites.concat(res.props.histories.data)) }, } ) } useEffect(() => { if (preValue) { if (isEmpty(dates.endDate)) { return } router.get( route(route().current()), { startDate: dates.startDate, endDate: dates.endDate, }, { replace: true, preserveState: true, only: ['histories'], onSuccess: (res) => { setDeposites(res.props.histories.data) }, } ) } }, [dates]) return (
{deposites.length <= 0 && }
{deposites.length > 0 && (
{formatIDDate(dates.startDate)} s/d{' '} {formatIDDate(dates.endDate)}
)} {deposites.map((history) => (
router.get( route( 'transactions.deposit.show', history.id ) ) } >
{history.format_human_created_at}
{history.description}
{history.amount}
{+history.is_valid !== 0 && (
{history.status.text}
)}
))} {next_page_url !== null && (
Load more
)}
) }