Client - application translation (wip)

fittrackee_client/src/components/Dashboard/Records.jsx

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
 import { formatRecord } from '../../utils/activities'
 
 export default function RecordsCard(props) {
-  const { records, sports, user } = props
+  const { records, sports, t, user } = props
   const recordsBySport = records.reduce((sportList, record) => {
     const sport = sports.find(s => s.id === record.sport_id)
     if (sportList[sport.label] === void 0) {
@@ -22,7 +22,7 @@ export default function RecordsCard(props) {
       <div className="card-header">Personal records</div>
       <div className="card-body">
         {Object.keys(recordsBySport).length === 0
-          ? 'No records'
+          ? t('common:No records.')
           : Object.keys(recordsBySport).map(sportLabel => (
               <table
                 className="table table-borderless table-sm record-table"

fittrackee_client/src/components/Dashboard/Statistics.jsx

@@ -16,11 +16,12 @@ export default class Statistics extends React.Component {
   }
 
   render() {
+    const { t } = this.props
     return (
       <div className="card activity-card">
-        <div className="card-header">This month</div>
+        <div className="card-header">{t('dashboard:This month')}</div>
         <div className="card-body">
-          <Stats displayEmpty={false} statsParams={this.state} />
+          <Stats displayEmpty={false} statsParams={this.state} t={t} />
         </div>
       </div>
     )

fittrackee_client/src/components/Dashboard/UserStatistics.jsx

@@ -1,10 +1,12 @@
 import React from 'react'
 
 export default function UserStatistics(props) {
-  const { user } = props
+  const { t, user } = props
   const days = user.total_duration.match(/day/g)
-    ? `${user.total_duration.split(',')[0]},`
-    : '0 days,'
+    ? `${user.total_duration.split(' ')[0]} ${
+        user.total_duration.match(/days/g) ? t('common:days') : t('common:day')
+      }`
+    : `0 ${t('common:days')},`
   let duration = user.total_duration.match(/day/g)
     ? user.total_duration.split(', ')[1]
     : user.total_duration
@@ -19,7 +21,11 @@ export default function UserStatistics(props) {
             </div>
             <div className="col-9 text-right">
               <div className="huge">{user.nb_activities}</div>
-              <div>{`workout${user.nb_activities === 1 ? '' : 's'}`}</div>
+              <div>{`${
+                user.nb_activities === 1
+                  ? t('common:workout')
+                  : t('common:workouts')
+              }`}</div>
             </div>
           </div>
         </div>
@@ -60,7 +66,9 @@ export default function UserStatistics(props) {
             </div>
             <div className="col-9 text-right">
               <div className="huge">{user.nb_sports}</div>
-              <div>{`sport${user.nb_sports === 1 ? '' : 's'}`}</div>
+              <div>{`${
+                user.nb_sports === 1 ? t('common:sport') : t('common:sports')
+              }`}</div>
             </div>
           </div>
         </div>

fittrackee_client/src/components/Dashboard/index.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
-import { Link } from 'react-router-dom'
 
 import ActivityCard from './ActivityCard'
 import Calendar from './Calendar'
+import NoActivities from '../Common/NoActivities'
 import Records from './Records'
 import Statistics from './Statistics'
 import UserStatistics from './UserStatistics'
@@ -30,6 +31,7 @@ class DashBoard extends React.Component {
       message,
       records,
       sports,
+      t,
       user,
     } = this.props
     const paginationEnd =
@@ -40,7 +42,7 @@ class DashBoard extends React.Component {
     return (
       <div>
         <Helmet>
-          <title>FitTrackee - Dashboard</title>
+          <title>FitTrackee - {t('common:Dashboard')}</title>
         </Helmet>
         {message ? (
           <code>{message}</code>
@@ -48,11 +50,16 @@ class DashBoard extends React.Component {
           activities &&
           sports.length > 0 && (
             <div className="container dashboard">
-              <UserStatistics user={user} />
+              <UserStatistics user={user} t={t} />
               <div className="row">
                 <div className="col-md-4">
-                  <Statistics />
-                  <Records records={records} sports={sports} user={user} />
+                  <Statistics t={t} />
+                  <Records
+                    t={t}
+                    records={records}
+                    sports={sports}
+                    user={user}
+                  />
                 </div>
                 <div className="col-md-8">
                   <Calendar weekm={user.weekm} />
@@ -66,14 +73,7 @@ class DashBoard extends React.Component {
                       />
                     ))
                   ) : (
-                    <div className="card text-center">
-                      <div className="card-body">
-                        No workouts.{' '}
-                        <Link to={{ pathname: '/activities/add' }}>
-                          Upload one !
-                        </Link>
-                      </div>
-                    </div>
+                    <NoActivities t={t} />
                   )}
                   {!paginationEnd && (
                     <input
@@ -96,21 +96,23 @@ class DashBoard extends React.Component {
   }
 }
 
-export default connect(
-  state => ({
-    activities: state.activities.data,
-    message: state.message,
-    records: state.records.data,
-    sports: state.sports.data,
-    user: state.user,
-  }),
-  dispatch => ({
-    loadActivities: () => {
-      dispatch(getOrUpdateData('getData', 'activities', { page: 1 }))
-      dispatch(getOrUpdateData('getData', 'records'))
-    },
-    loadMoreActivities: page => {
-      dispatch(getMoreActivities({ page }))
-    },
-  })
-)(DashBoard)
+export default withTranslation()(
+  connect(
+    state => ({
+      activities: state.activities.data,
+      message: state.message,
+      records: state.records.data,
+      sports: state.sports.data,
+      user: state.user,
+    }),
+    dispatch => ({
+      loadActivities: () => {
+        dispatch(getOrUpdateData('getData', 'activities', { page: 1 }))
+        dispatch(getOrUpdateData('getData', 'records'))
+      },
+      loadMoreActivities: page => {
+        dispatch(getMoreActivities({ page }))
+      },
+    })
+  )(DashBoard)
+)