82 lines
2.4 KiB
React
82 lines
2.4 KiB
React
|
import { format } from 'date-fns'
|
||
|
|
import React from 'react'
|
||
|
|
import { connect } from 'react-redux'
|
||
|
|
import { Helmet } from 'react-helmet'
|
||
|
|
|
||
|
|
import Message from '../../Common/Message'
|
||
|
|
import { history } from '../../../index'
|
||
|
|
import { getOrUpdateData } from '../../../actions'
|
||
|
|
|
||
|
|
class AdminUsers extends React.Component {
|
||
|
|
componentDidMount() {
|
||
|
|
this.props.loadUsers()
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { message, t, users } = this.props
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<Helmet>
|
||
|
|
<title>FitTrackee - {t('administration:Administration')}</title>
|
||
|
|
</Helmet>
|
||
|
|
{message && <Message message={message} t={t} />}
|
||
|
|
<div className="container">
|
||
|
|
<div className="row">
|
||
|
|
<div className="col card">
|
||
|
|
<div className="card-body">
|
||
|
|
<table className="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>{t('administration:id')}</th>
|
||
|
|
<th>{t('user:Username')}</th>
|
||
|
|
<th>{t('user:Email')}</th>
|
||
|
|
<th>{t('user:Registration Date')}</th>
|
||
|
|
<th>{t('activities:Activities')}</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{users.map(user => (
|
||
|
|
<tr key={user.id}>
|
||
|
|
<th scope="row">{user.id}</th>
|
||
|
|
<td>{user.username}</td>
|
||
|
|
<td>{user.email}</td>
|
||
|
|
<td>
|
||
|
|
{user.created_at
|
||
|
|
? format(
|
||
|
|
new Date(user.created_at),
|
||
|
|
'dd/MM/yyyy HH:mm'
|
||
|
|
)
|
||
|
|
: ''}
|
||
|
|
</td>
|
||
|
|
<td>{user.nb_activities}</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<input
|
||
|
|
type="submit"
|
||
|
|
className="btn btn-secondary btn-lg btn-block"
|
||
|
|
onClick={() => history.push('/admin/')}
|
||
|
|
value={t('administration:Back')}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default connect(
|
||
|
|
state => ({
|
||
|
|
message: state.message,
|
||
|
|
users: state.users.data,
|
||
|
|
}),
|
||
|
|
dispatch => ({
|
||
|
|
loadUsers: () => {
|
||
|
|
dispatch(getOrUpdateData('getData', 'users'))
|
||
|
|
},
|
||
|
|
})
|
||
|
|
)(AdminUsers)
|