import React, { useState, useEffect } from 'react'
import { Head } from '@inertiajs/inertia-react'
import { Inertia } from '@inertiajs/inertia'
import { usePrevious } from 'react-use'
import { toast } from 'react-toastify'
import { useModalState } from '@/Hooks'
import { formatIDR } from '@/utils'
import Authenticated from '@/Layouts/Authenticated'
import Pagination from '@/Components/Pagination'
import ModalConfirm from '@/Components/ModalConfirm'
import FormProductModal from '@/Modals/FormProductModal'
export default function Products(props) {
const { data: products, links } = props.products
const [search, setSearch] = useState(props._search)
const preValue = usePrevious(search)
const [product, setProduct] = useState(null)
const formModal = useModalState(false)
const toggle = (product = null) => {
setProduct(product)
formModal.toggle()
}
const confirmModal = useModalState(false)
const handleDelete = (product) => {
confirmModal.setData(product)
confirmModal.toggle()
}
const onDelete = () => {
const product = confirmModal.data
if (product != null) {
Inertia.delete(route('products.destroy', product), {
onSuccess: () => toast.success('The Data has been deleted'),
})
}
}
useEffect(() => {
if (preValue) {
Inertia.get(
route(route().current()),
{ q: search },
{
replace: true,
preserveState: true,
}
)
}
}, [search])
return (
Nama | Harga | Deskripsi | Foto | |
---|---|---|---|---|
{product.name} | {formatIDR(product.price)} | {product.description} | {product.photo_url !== null && ( )} |
toggle(product)
}
>
Edit
handleDelete(
product
)
}
>
Delete
|