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 Authenticated from '@/Layouts/Authenticated'
import Pagination from '@/Components/Pagination'
import ModalConfirm from '@/Components/ModalConfirm'
import FormEmployeeModal from '@/Modals/FormEmployeeModal'
export default function Employees(props) {
const { data: employees, links } = props.employees
const [search, setSearch] = useState('')
const preValue = usePrevious(search)
const [employee, setEmployee] = useState(null)
const formModal = useModalState(false)
const toggle = (employee = null) => {
setEmployee(employee)
formModal.toggle()
}
const confirmModal = useModalState(false)
const handleDelete = (employee) => {
confirmModal.setData(employee)
confirmModal.toggle()
}
const onDelete = () => {
const employee = confirmModal.data
if (employee != null) {
Inertia.delete(route('employees.destroy', employee), {
onSuccess: () => toast.success('The Data has been deleted'),
})
}
}
useEffect(() => {
if (preValue) {
Inertia.get(
route(route().current()),
{ q: search },
{
replace: true,
preserveState: true,
}
)
}
}, [search])
return (
Id | Nama | Foto | ||
---|---|---|---|---|
{employee.id} | {employee.name} | {employee.whatsapp} | {employee.photo_url !== null && ( )} |
toggle(employee)
}
>
Edit
handleDelete(
employee
)
}
>
Delete
|