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('') 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 ( Barang } >
toggle()} > Tambah
setSearch(e.target.value) } placeholder="Search" />
{products?.map((product) => ( ))}
Id Nama Harga Deskripsi Foto
{product.id} {product.name} {formatIDR(product.price)} {product.description} {product.photo_url !== null && ( )}
toggle(product) } > Edit
handleDelete( product ) } > Delete
) }