import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { withTranslation } from 'react-i18next'; import dateFnsFormat from 'date-fns/format'; import UserPicture from '../../User/UserPicture'; import UserMenu from './UserMenu'; import { withUnstatedContainers } from '../../UnstatedUtils'; import AppContainer from '../../../services/AppContainer'; import AdminUsersContainer from '../../../services/AdminUsersContainer'; import SortIcons from './SortIcons'; class UserTable extends React.Component { constructor(props) { super(props); this.state = { }; this.getUserStatusLabel = this.getUserStatusLabel.bind(this); } /** * return status label element by `userStatus` * @param {string} userStatus * @return status label element */ getUserStatusLabel(userStatus) { let additionalClassName; let text; switch (userStatus) { case 1: additionalClassName = 'badge-info'; text = 'Approval Pending'; break; case 2: additionalClassName = 'badge-success'; text = 'Active'; break; case 3: additionalClassName = 'badge-warning'; text = 'Suspended'; break; case 4: additionalClassName = 'badge-danger'; text = 'Deleted'; break; case 5: additionalClassName = 'badge-pink'; text = 'Invited'; break; } return ( {text} ); } /** * return admin label element by `isAdmin` * @param {string} isAdmin * @return admin label element */ getUserAdminLabel(isAdmin) { const { t } = this.props; if (isAdmin) { return {t('admin:user_management.user_table.administrator')}; } } sortIconsClickedHandler(sort, sortOrder) { const isAsc = sortOrder === 'asc'; const { adminUsersContainer } = this.props; adminUsersContainer.sort(sort, isAsc); } render() { const { t, adminUsersContainer } = this.props; const isCurrentSortOrderAsc = adminUsersContainer.state.sortOrder === 'asc'; return (
{adminUsersContainer.state.users.map((user) => { return ( ); })}
#
{t('status')}
{ this.sortIconsClickedHandler('status', sortOrder); }} />
username
{ this.sortIconsClickedHandler('username', sortOrder); }} />
{t('Name')}
{ this.sortIconsClickedHandler('name', sortOrder); }} />
{t('Email')}
{ this.sortIconsClickedHandler('email', sortOrder); }} />
{t('Created')}
{ this.sortIconsClickedHandler('createdAt', sortOrder); }} />
{t('Last_Login')}
{ this.sortIconsClickedHandler('lastLoginAt', sortOrder); }} />
{this.getUserStatusLabel(user.status)} {this.getUserAdminLabel(user.admin)} {user.username} {user.name} {user.email} {dateFnsFormat(new Date(user.createdAt), 'yyyy-MM-dd')} {user.lastLoginAt && {dateFnsFormat(new Date(user.lastLoginAt), 'yyyy-MM-dd HH:mm')}}
); } } UserTable.propTypes = { t: PropTypes.func.isRequired, // i18next appContainer: PropTypes.instanceOf(AppContainer).isRequired, adminUsersContainer: PropTypes.instanceOf(AdminUsersContainer).isRequired, }; const UserTableWrapper = withUnstatedContainers(UserTable, [AppContainer, AdminUsersContainer]); export default withTranslation()(UserTableWrapper);