import React, { useState, useEffect } from 'react' import NumberFormat from 'react-number-format' import { usePrevious } from 'react-use' import { toast } from 'react-toastify' import { Head, useForm } from '@inertiajs/inertia-react' import { Inertia } from '@inertiajs/inertia' import { formatIDR } from '@/utils' import Pagination from '@/Components/Pagination' import Authenticated from '@/Layouts/Authenticated' export default function Category(props) { const [search, setSearch] = useState('') const preValue = usePrevious(search) const [category, setCategory] = useState(null) const { data: categories , links } = props.categories const { data, setData, errors, post, put, processing, delete: destroy } = useForm({ name: '', description: '', amount: 0 }) const handleChange = (e) => { const key = e.target.id; const value = e.target.value setData(key, value) } const handleReset = () => { setCategory(null) setData({ name: '', description: '', amount: '' }) } const handleEdit = (category) => { setCategory(category) setData({ name: category.name, description: category.description, amount: category.default_budget }) } const handleDelete = (category) => { destroy(route('categories.destroy', category), { onBefore: () => confirm('Are you sure you want to delete this record?'), onSuccess: () => Promise.all([ handleReset(), toast.success('data has been deleted') ]) }) } const handleSubmit = (e) => { e.preventDefault() if(category !== null) { put(route('categories.update', category), { onSuccess: () => Promise.all([ handleReset(), toast.success('The Data has been changed') ]) }) return } post(route('categories.store'), { onSuccess: () => Promise.all([ handleReset(), toast.success('Data has been saved') ]) }) } useEffect(() => { if (preValue) { Inertia.get(route(route().current()), { q: search }, { replace: true, preserveState: true, }) } }, [search]) return ( Category } >

Category Name {errors.name}

Description {errors.description}

Amount setData('amount', value) } /> {errors.amount}

setSearch(e.target.value) } placeholder="Search" />

{categories?.map((category) => ( ))}

	Category Name	Description	Amount
{category.id}	{category.name}	{category.description}	{formatIDR( category.default_budget )}	handleEdit(category) } > Edit handleDelete(category) } > Delete

) }