Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | import React, { FC } from 'react' import { useTranslation } from 'react-i18next' import Pagination from 'components/Common/Pagination' import UserSearchForm from './UserSearchForm' import UserTableRow from './UserTableRow' export const STATUS = { REGISTERED: 1, ACTIVE: 2, SUSPENDED: 3, DELETED: 4, INVITED: 5, } function withPreventDefault(callback) { return e => { e.preventDefault() callback(e) } } function getHanlders(openResetModal, changeStatus) { return { handleClickEdit() { // TODO: Implement }, handleClickResetPassword(user) { openResetModal({ user }) }, handleClickApprove(user) { changeStatus(user, 'activate') }, handleClickSuspend(user) { changeStatus(user, 'suspend') }, handleClickRestore(user) { changeStatus(user, 'activate') }, handleClickRemove(user) { changeStatus(user, 'remove') }, handleClickRemoveCompletely(user) { changeStatus(user, 'removeCompletely') }, handleClickRevokeAdmin(user) { changeStatus(user, 'removeFromAdmin') }, handleClickGrantAdmin(user) { changeStatus(user, 'makeAdmin') }, } } interface Props { me: any users: any[] pagination: { current: number count: number } query: string setQuery: (query: string) => void search: (query: string) => void move: (page: number) => void openResetModal: (state: any) => void changeStatus: (user: any, string: string) => void } const UserTable: FC<Props> = ({ me, users, pagination, query, setQuery, search, move, openResetModal, changeStatus }) => { const [t] = useTranslation() const { current, count } = pagination const handlers = getHanlders(openResetModal, changeStatus) return ( <> <UserSearchForm value={query} handleChange={e => setQuery(e.target.value)} handleSubmit={withPreventDefault(() => search(query))} /> {users !== null ? ( users.length ? ( <> <table className="table table-hover table-striped table-bordered"> <thead> <tr> <th>#</th> <th>{t('admin.user.user_id')}</th> <th>{t('admin.user.name')}</th> <th>{t('admin.user.email')}</th> <th>{t('admin.user.created_at')}</th> <th>{t('admin.user.status')}</th> <th>{t('admin.user.operation')}</th> </tr> </thead> <tbody> {users.map(user => ( <UserTableRow key={user._id} changeStatus={changeStatus} me={me} user={user} {...handlers} /> ))} </tbody> </table> <Pagination current={current} count={count} onClick={move} /> </> ) : ( <p>{t('admin.user.not_found')}</p> ) ) : null} </> ) } export default UserTable |