118 lines
3.1 KiB
JavaScript
118 lines
3.1 KiB
JavaScript
'use client'
|
|
|
|
import { useRouter, useSearchParams } from 'next/navigation'
|
|
import { useState } from 'react'
|
|
|
|
import {
|
|
PageContainer,
|
|
ShowWrapper,
|
|
EmptyUsersList,
|
|
TableSkeleton,
|
|
UsersTable,
|
|
ConfirmDeleteModal,
|
|
HandleResponse,
|
|
Pagination,
|
|
} from '@/components'
|
|
import { useGetUsersQuery, useDeleteUserMutation } from '@/store/services'
|
|
import { useDisclosure, useChangeRoute, useTitle } from '@/hooks'
|
|
|
|
export default function UsersPage() {
|
|
useTitle('用户管理')
|
|
//? Assets
|
|
const { replace } = useRouter()
|
|
const searchParams = useSearchParams()
|
|
const page = searchParams.get('page')
|
|
|
|
const changeRoute = useChangeRoute()
|
|
|
|
//? Modals
|
|
const [isShowConfirmDeleteModal, confirmDeleteModalHandlers] = useDisclosure()
|
|
|
|
//? State
|
|
const [deleteInfo, setDeleteInfo] = useState({
|
|
id: '',
|
|
})
|
|
|
|
//? Get User Data
|
|
const { data, isSuccess, isFetching, error, isError, refetch } = useGetUsersQuery({
|
|
page: page || 1,
|
|
})
|
|
|
|
//? Delete User Query
|
|
const [
|
|
deleteUser,
|
|
{
|
|
isSuccess: isSuccess_delete,
|
|
isLoading: isLoading_delete,
|
|
isError: isError_delete,
|
|
error: error_delete,
|
|
data: data_delete,
|
|
},
|
|
] = useDeleteUserMutation()
|
|
|
|
//? Handlers
|
|
const deleteUserHandler = id => {
|
|
setDeleteInfo({ id })
|
|
confirmDeleteModalHandlers.open()
|
|
}
|
|
const onConfirmUserDelete = () => deleteUser({ id: deleteInfo.id })
|
|
|
|
const onCancelUserDelete = () => {
|
|
confirmDeleteModalHandlers.close()
|
|
setDeleteInfo({ id: '' })
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<ConfirmDeleteModal
|
|
title="用户"
|
|
isLoading={isLoading_delete}
|
|
isShow={isShowConfirmDeleteModal}
|
|
onClose={onCancelUserDelete}
|
|
onCancel={onCancelUserDelete}
|
|
onConfirm={onConfirmUserDelete}
|
|
/>
|
|
{/* Handle Delete Response */}
|
|
{(isSuccess_delete || isError_delete) && (
|
|
<HandleResponse
|
|
isError={isError_delete}
|
|
isSuccess={isSuccess_delete}
|
|
error={error_delete?.data?.message}
|
|
message={data_delete?.message}
|
|
onSuccess={() => {
|
|
onCancelUserDelete()
|
|
}}
|
|
onError={() => {
|
|
onCancelUserDelete()
|
|
}}
|
|
/>
|
|
)}
|
|
<main id="_adminUsers">
|
|
<PageContainer title="用户管理">
|
|
<ShowWrapper
|
|
error={error}
|
|
isError={isError}
|
|
refetch={refetch}
|
|
isFetching={isFetching}
|
|
isSuccess={isSuccess}
|
|
dataLength={data && data.data ? data.data.usersLength : 0}
|
|
emptyComponent={<EmptyUsersList />}
|
|
loadingComponent={<TableSkeleton />}
|
|
>
|
|
<UsersTable deleteUserHandler={deleteUserHandler} users={data?.data?.users} />
|
|
</ShowWrapper>
|
|
{data?.data?.usersLength > 5 && (
|
|
<div className="py-4 mx-auto lg:max-w-5xl">
|
|
<Pagination
|
|
pagination={data?.data?.pagination}
|
|
changeRoute={changeRoute}
|
|
section="_adminUsers"
|
|
/>
|
|
</div>
|
|
)}
|
|
</PageContainer>
|
|
</main>
|
|
</>
|
|
)
|
|
}
|