Client - application translation (wip)

fittrackee_client/src/components/Activities/ActivitiesFilter.jsx

@@ -1,15 +1,18 @@
 import React from 'react'
 
+import { translateSports } from '../../utils/activities'
+
 export default class ActivitiesFilter extends React.PureComponent {
   render() {
-    const { loadActivities, sports, updateParams } = this.props
+    const { loadActivities, sports, t, updateParams } = this.props
+    const translatedSports = translateSports(sports, t)
     return (
       <div className="card">
         <div className="card-body activity-filter">
           <form onSubmit={event => event.preventDefault()}>
             <div className="form-group">
               <label>
-                From:
+                {t('activities:From')}:
                 <input
                   className="form-control col-md"
                   name="from"
@@ -18,7 +21,7 @@ export default class ActivitiesFilter extends React.PureComponent {
                 />
               </label>
               <label>
-                To:
+                {t('activities:To')}:
                 <input
                   className="form-control col-md"
                   name="to"
@@ -29,14 +32,14 @@ export default class ActivitiesFilter extends React.PureComponent {
             </div>
             <div className="form-group">
               <label>
-                Sport:
+                {t('common:Sport')}:
                 <select
                   className="form-control input-lg"
                   name="sport_id"
                   onChange={e => updateParams(e)}
                 >
                   <option value="" />
-                  {sports.map(sport => (
+                  {translatedSports.map(sport => (
                     <option key={sport.id} value={sport.id}>
                       {sport.label}
                     </option>
@@ -46,7 +49,7 @@ export default class ActivitiesFilter extends React.PureComponent {
             </div>
             <div className="form-group">
               <label>
-                Distance (km):
+                {t('activities:Distance')} (km):
                 <div className="container">
                   <div className="row">
                     <div className="col-5">
@@ -59,7 +62,9 @@ export default class ActivitiesFilter extends React.PureComponent {
                         type="number"
                       />
                     </div>
-                    <div className="col-2 align-middle text-center">to</div>
+                    <div className="col-2 align-middle text-center">
+                      {t('common:to')}
+                    </div>
                     <div className="col-5">
                       <input
                         className="form-control"
@@ -76,7 +81,7 @@ export default class ActivitiesFilter extends React.PureComponent {
             </div>
             <div className="form-group">
               <label>
-                Duration:
+                {t('activities:Duration')}:
                 <div className="container">
                   <div className="row">
                     <div className="col-5">
@@ -89,7 +94,9 @@ export default class ActivitiesFilter extends React.PureComponent {
                         type="text"
                       />
                     </div>
-                    <div className="col-2 align-middle text-center">to</div>
+                    <div className="col-2 align-middle text-center">
+                      {t('common:to')}
+                    </div>
                     <div className="col-5">
                       <input
                         className="form-control"
@@ -106,7 +113,7 @@ export default class ActivitiesFilter extends React.PureComponent {
             </div>
             <div className="form-group">
               <label>
-                Average speed (km/h):
+                {t('activities:Average speed')} (km/h):
                 <div className="container">
                   <div className="row">
                     <div className="col-5">
@@ -119,7 +126,9 @@ export default class ActivitiesFilter extends React.PureComponent {
                         type="number"
                       />
                     </div>
-                    <div className="col-2 align-middle text-center">to</div>
+                    <div className="col-2 align-middle text-center">
+                      {t('common:to')}
+                    </div>
                     <div className="col-5">
                       <input
                         className="form-control"
@@ -136,7 +145,7 @@ export default class ActivitiesFilter extends React.PureComponent {
             </div>
             <div className="form-group">
               <label>
-                Max speed (km/h):
+                {t('activities:Max. speed')} (km/h):
                 <div className="container">
                   <div className="row">
                     <div className="col-5">
@@ -149,7 +158,9 @@ export default class ActivitiesFilter extends React.PureComponent {
                         type="number"
                       />
                     </div>
-                    <div className="col-2 align-middle text-center">to</div>
+                    <div className="col-2 align-middle text-center">
+                      {t('common:to')}
+                    </div>
                     <div className="col-5">
                       <input
                         className="form-control"
@@ -168,7 +179,7 @@ export default class ActivitiesFilter extends React.PureComponent {
               className="btn btn-primary btn-lg btn-block"
               onClick={() => loadActivities()}
               type="submit"
-              value="Filter"
+              value={t('activities:Filter')}
             />
           </form>
         </div>

fittrackee_client/src/components/Activities/ActivitiesList.jsx

@@ -7,7 +7,7 @@ import { getDateWithTZ } from '../../utils'
 
 export default class ActivitiesList extends React.PureComponent {
   render() {
-    const { activities, sports, user } = this.props
+    const { activities, sports, t, user } = this.props
     return (
       <div className="card  activity-card">
         <div className="card-body">
@@ -15,12 +15,12 @@ export default class ActivitiesList extends React.PureComponent {
             <thead>
               <tr>
                 <th scope="col" />
-                <th scope="col">Workout</th>
-                <th scope="col">Date</th>
-                <th scope="col">Distance</th>
-                <th scope="col">Duration</th>
-                <th scope="col">Ave. speed</th>
-                <th scope="col">Max. speed</th>
+                <th scope="col">{t('common:Workout')}</th>
+                <th scope="col">{t('activities:Date')}</th>
+                <th scope="col">{t('activities:Distance')}</th>
+                <th scope="col">{t('activities:Duration')}</th>
+                <th scope="col">{t('activities:Ave. speed')}</th>
+                <th scope="col">{t('activities:Max. speed')}</th>
               </tr>
             </thead>
             <tbody>

fittrackee_client/src/components/Activities/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 ActivitiesFilter from './ActivitiesFilter'
 import ActivitiesList from './ActivitiesList'
+import NoActivities from '../Common/NoActivities'
 import { getOrUpdateData } from '../../actions'
 import { getMoreActivities } from '../../actions/activities'
 
@@ -40,6 +41,7 @@ class Activities extends React.Component {
       loadMoreActivities,
       message,
       sports,
+      t,
       user,
     } = this.props
     const { params } = this.state
@@ -50,7 +52,7 @@ class Activities extends React.Component {
     return (
       <div>
         <Helmet>
-          <title>FitTrackee - Workouts</title>
+          <title>FitTrackee - {t('common:Workouts')}</title>
         </Helmet>
         {message ? (
           <code>{message}</code>
@@ -61,6 +63,7 @@ class Activities extends React.Component {
                 <ActivitiesFilter
                   sports={sports}
                   loadActivities={() => loadActivities(params)}
+                  t={t}
                   updateParams={e => this.setParams(e)}
                 />
               </div>
@@ -68,6 +71,7 @@ class Activities extends React.Component {
                 <ActivitiesList
                   activities={activities}
                   sports={sports}
+                  t={t}
                   user={user}
                 />
                 {!paginationEnd && (
@@ -82,16 +86,7 @@ class Activities extends React.Component {
                     }}
                   />
                 )}
-                {activities.length === 0 && (
-                  <div className="card text-center">
-                    <div className="card-body">
-                      No workouts.{' '}
-                      <Link to={{ pathname: '/activities/add' }}>
-                        Upload one !
-                      </Link>
-                    </div>
-                  </div>
-                )}
+                {activities.length === 0 && <NoActivities t={t} />}
               </div>
             </div>
           </div>
@@ -101,19 +96,21 @@ class Activities extends React.Component {
   }
 }
 
-export default connect(
-  state => ({
-    activities: state.activities.data,
-    message: state.message,
-    sports: state.sports.data,
-    user: state.user,
-  }),
-  dispatch => ({
-    loadActivities: params => {
-      dispatch(getOrUpdateData('getData', 'activities', params))
-    },
-    loadMoreActivities: params => {
-      dispatch(getMoreActivities(params))
-    },
-  })
-)(Activities)
+export default withTranslation()(
+  connect(
+    state => ({
+      activities: state.activities.data,
+      message: state.message,
+      sports: state.sports.data,
+      user: state.user,
+    }),
+    dispatch => ({
+      loadActivities: params => {
+        dispatch(getOrUpdateData('getData', 'activities', params))
+      },
+      loadMoreActivities: params => {
+        dispatch(getMoreActivities(params))
+      },
+    })
+  )(Activities)
+)