Client - init users list in Admin

fittrackee_client/src/components/Admin/Users/index.jsx

@@ -0,0 +1,81 @@
+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)

fittrackee_client/src/components/Admin/index.jsx

@@ -8,6 +8,7 @@ import AdminApplication from './Application'
 import AdminDashboard from './AdminDashboard'
 import AdminMenu from './AdminMenu'
 import AdminSports from './Sports'
+import AdminUsers from './Users'
 import NotFound from './../Others/NotFound'
 
 function Admin(props) {
@@ -53,6 +54,11 @@ function Admin(props) {
                   path="/admin/sports"
                   render={() => <AdminSports t={t} />}
                 />
+                <Route
+                  exact
+                  path="/admin/users"
+                  render={() => <AdminUsers t={t} />}
+                />
                 <Route component={NotFound} />
               </Switch>
             </div>

fittrackee_client/src/locales/en/activities.json

@@ -1,4 +1,5 @@
 {
+  "Activities": "Activities",
   "Activity": "Activity",
   "Activity Date": "Activity Date",
   "Add a workout": "Add a workout",

fittrackee_client/src/locales/en/user.json

@@ -24,5 +24,6 @@
   "Registration Date": "Registration Date",
   "Send": "Send",
   "Sunday": "Sunday",
-  "Timezone": "Timezone"
+  "Timezone": "Timezone",
+  "Username": "Username"
 }

fittrackee_client/src/locales/fr/activities.json

@@ -1,4 +1,5 @@
 {
+  "Activities": "Activités",
   "Activity": "Activité",
   "Activity Date": "Date de l'activité",
   "Add a workout": "Ajouter une activité",

fittrackee_client/src/locales/fr/user.json

@@ -24,5 +24,6 @@
   "Registration Date": "Date d'inscription",
   "Send": "Envoyer",
   "Sunday": "Dimanche",
-  "Timezone": "Fuseau horaire"
+  "Timezone": "Fuseau horaire",
+  "Username": "Nom d'utilisateur"
 }

fittrackee_client/src/reducers/index.js

@@ -167,6 +167,9 @@ const statistics = (state = initial.statistics, action) => {
   return handleDataAndError(state, 'statistics', action)
 }
 
+const users = (state = initial.users, action) =>
+  handleDataAndError(state, 'users', action)
+
 export default history =>
   combineReducers({
     activities,
@@ -183,4 +186,5 @@ export default history =>
     sports,
     statistics,
     user,
+    users,
   })

fittrackee_client/src/reducers/initial.js

@@ -39,4 +39,7 @@ export default {
   statistics: {
     data: {},
   },
+  users: {
+    ...emptyData,
+  },
 }