Client - display app statistics in Administration

fittrackee_client/src/actions/stats.js

@@ -1,6 +1,22 @@
 import FitTrackeeGenericApi from '../fitTrackeeApi'
 import { setData, setError } from './index'
 
+export const setAppStats = data => ({
+  type: 'SET_APP_STATS',
+  data,
+})
+
+export const getAppStats = () => dispatch =>
+  FitTrackeeGenericApi.getData('stats/all')
+    .then(ret => {
+      if (ret.status === 'success') {
+        dispatch(setAppStats(ret.data))
+      } else {
+        dispatch(setError(`application|${ret.message}`))
+      }
+    })
+    .catch(error => dispatch(setError(`application|${error}`)))
+
 export const getStats = (userId, type, data) => dispatch =>
   FitTrackeeGenericApi.getData(`stats/${userId}/${type}`, data)
     .then(ret => {

fittrackee_client/src/components/Admin/AdminDashboard.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
 
+import AdminStats from './AdminStats'
+
 export default function AdminDashboard() {
   return (
     <div>
@@ -11,7 +13,9 @@ export default function AdminDashboard() {
         <div className="card-header">
           <strong>FitTrackee administration</strong>
         </div>
-        <div className="card-body">TODO</div>
+        <div className="card-body">
+          <AdminStats />
+        </div>
       </div>
     </div>
   )

fittrackee_client/src/components/Admin/AdminStats.jsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import { withTranslation } from 'react-i18next'
+import { connect } from 'react-redux'
+
+import { getAppStats } from '../../actions/stats'
+
+class AdminStats extends React.Component {
+  componentDidMount() {
+    this.props.loadAppStats()
+  }
+
+  render() {
+    const { appStats, t } = this.props
+    return (
+      <div className="row">
+        <div className="col-md-4">
+          <div className="card activity-card">
+            <div className="card-body row">
+              <div className="col-3">
+                <i className="fa fa-users fa-3x fa-color" />
+              </div>
+              <div className="col-9 text-right">
+                <div className="huge">
+                  {appStats.users ? appStats.users : 0}
+                </div>
+                <div>{`${
+                  appStats.users === 1
+                    ? t('administration:user')
+                    : t('administration:users')
+                }`}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="col-md-4">
+          <div className="card activity-card">
+            <div className="card-body row">
+              <div className="col-3">
+                <i className="fa fa-tags fa-3x fa-color" />
+              </div>
+              <div className="col-9 text-right">
+                <div className="huge">
+                  {appStats.sports ? appStats.sports : 0}
+                </div>
+                <div>{`${
+                  appStats.sports === 1 ? t('common:sport') : t('common:sports')
+                }`}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="col-md-4">
+          <div className="card activity-card">
+            <div className="card-body row">
+              <div className="col-3">
+                <i className="fa fa-calendar fa-3x fa-color" />
+              </div>
+              <div className="col-9 text-right">
+                <div className="huge">
+                  {appStats.activities ? appStats.activities : 0}
+                </div>
+                <div>{`${
+                  appStats.activities === 1
+                    ? t('common:workout')
+                    : t('common:workouts')
+                }`}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default withTranslation()(
+  connect(
+    state => ({
+      appStats: state.application.statistics,
+    }),
+    dispatch => ({
+      loadAppStats: () => {
+        dispatch(getAppStats())
+      },
+    })
+  )(AdminStats)
+)

fittrackee_client/src/locales/en/administration.json

@@ -11,5 +11,7 @@
   "Image": "Image",
   "Label": "Label",
   "Sports": "Sports",
-  "Users": "Users"
+  "user": "user",
+  "Users": "Users",
+  "users": "users"
 }

fittrackee_client/src/locales/fr/administration.json

@@ -11,5 +11,7 @@
   "Image": "Image",
   "Label": "Label",
   "Sports": "Sports",
-  "Users": "Utilisateurs"
+  "user": "user",
+  "Users": "Utilisateurs",
+  "users": "utilisateurs"
 }

fittrackee_client/src/reducers/index.js

@@ -33,6 +33,16 @@ const activities = (state = initial.activities, action) => {
   }
 }
 
+const application = (state = initial.application, action) => {
+  if (action.type === 'SET_APP_STATS') {
+    return {
+      ...state,
+      statistics: action.data,
+    }
+  }
+  return state
+}
+
 const calendarActivities = (state = initial.calendarActivities, action) => {
   if (action.type === 'UPDATE_CALENDAR') {
     return {
@@ -140,6 +150,7 @@ const statistics = (state = initial.statistics, action) =>
 export default history =>
   combineReducers({
     activities,
+    application,
     calendarActivities,
     chartData,
     gpx,

fittrackee_client/src/reducers/initial.js

@@ -12,6 +12,9 @@ export default {
   activities: {
     ...emptyData,
   },
+  application: {
+    statistics: {},
+  },
   calendarActivities: {
     ...emptyData,
   },