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 AuthenticatedLayout from '@/Layouts/AuthenticatedLayout' import Pagination from '@/Components/Pagination' import ModalConfirm from '@/Components/ModalConfirm' import UserFormModal from './UserFormModal' export default function Users(props) { const { data: users, links } = props.users const [search, setSearch] = useState('') const preValue = usePrevious(search) const [user, setUser] = useState(null) const formModal = useModalState(false) const toggle = (user = null) => { setUser(user) formModal.toggle() } const confirmModal = useModalState(false) const handleDelete = (user) => { confirmModal.setData(user) confirmModal.toggle() } const onDelete = () => { const user = confirmModal.data if(user != null) { Inertia.delete(route('users.destroy', user), { onSuccess: () => toast.success('The Data has been deleted'), }) } } useEffect(() => { if (preValue) { Inertia.get( route(route().current()), { q: search }, { replace: true, preserveState: true, } ) } }, [search]) return (
toggle()} > Tambah
setSearch(e.target.value) } placeholder="Search" />
{users?.map((user) => ( ))}
Id Nama Email
{user.id} {user.name} {user.email}
toggle(user) } > Edit
{props.auth.user.id !== user.id && (
handleDelete(user) } > Delete
)}
) }