Client - application translation

fittrackee_client/src/components/Dashboard/ActivityCard.jsx

@@ -6,7 +6,7 @@ import StaticMap from '../Common/StaticMap'
 import { getDateWithTZ } from '../../utils'
 
 export default function ActivityCard(props) {
-  const { activity, sports, user } = props
+  const { activity, sports, t, user } = props
 
   return (
     <div className="card activity-card text-center">
@@ -14,7 +14,7 @@ export default function ActivityCard(props) {
         <Link to={`/activities/${activity.id}`}>
           {sports
             .filter(sport => sport.id === activity.sport_id)
-            .map(sport => sport.label)}{' '}
+            .map(sport => t(`sports:${sport.label}`))}{' '}
           -{' '}
           {format(
             getDateWithTZ(activity.activity_date, user.timezone),
@@ -31,8 +31,8 @@ export default function ActivityCard(props) {
           )}
           <div className="col">
             <p>
-              <i className="fa fa-clock-o" aria-hidden="true" /> Duration:{' '}
-              {activity.moving}
+              <i className="fa fa-clock-o" aria-hidden="true" />{' '}
+              {t('activities:Duration')}: {activity.moving}
               {activity.map ? (
                 <span>
                   <br />
@@ -41,8 +41,8 @@ export default function ActivityCard(props) {
               ) : (
                 ' - '
               )}
-              <i className="fa fa-road" aria-hidden="true" /> Distance:{' '}
-              {activity.distance} km
+              <i className="fa fa-road" aria-hidden="true" />{' '}
+              {t('activities:Distance')}: {activity.distance} km
             </p>
           </div>
         </div>

fittrackee_client/src/components/Dashboard/Records.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 
-import { formatRecord } from '../../utils/activities'
+import { formatRecord, translateSports } from '../../utils/activities'
 
 export default function RecordsCard(props) {
   const { records, sports, t, user } = props
+  const translatedSports = translateSports(sports, t)
   const recordsBySport = records.reduce((sportList, record) => {
-    const sport = sports.find(s => s.id === record.sport_id)
+    const sport = translatedSports.find(s => s.id === record.sport_id)
     if (sportList[sport.label] === void 0) {
       sportList[sport.label] = {
         img: sport.img,
@@ -19,42 +20,44 @@ export default function RecordsCard(props) {
 
   return (
     <div className="card activity-card">
-      <div className="card-header">Personal records</div>
+      <div className="card-header">{t('activities:Personal records')}</div>
       <div className="card-body">
         {Object.keys(recordsBySport).length === 0
           ? t('common:No records.')
-          : Object.keys(recordsBySport).map(sportLabel => (
-              <table
-                className="table table-borderless table-sm record-table"
-                key={sportLabel}
-              >
-                <thead>
-                  <tr>
-                    <th colSpan="3">
-                      <img
-                        alt={`${sportLabel} logo`}
-                        className="record-logo"
-                        src={recordsBySport[sportLabel].img}
-                      />
-                      {sportLabel}
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {recordsBySport[sportLabel].records.map(rec => (
-                    <tr key={rec.id}>
-                      <td>{rec.record_type}</td>
-                      <td className="text-right">{rec.value}</td>
-                      <td className="text-right">
-                        <Link to={`/activities/${rec.activity_id}`}>
-                          {rec.activity_date}
-                        </Link>
-                      </td>
+          : Object.keys(recordsBySport)
+              .sort()
+              .map(sportLabel => (
+                <table
+                  className="table table-borderless table-sm record-table"
+                  key={sportLabel}
+                >
+                  <thead>
+                    <tr>
+                      <th colSpan="3">
+                        <img
+                          alt={`${sportLabel} logo`}
+                          className="record-logo"
+                          src={recordsBySport[sportLabel].img}
+                        />
+                        {sportLabel}
+                      </th>
                     </tr>
-                  ))}
-                </tbody>
-              </table>
-            ))}
+                  </thead>
+                  <tbody>
+                    {recordsBySport[sportLabel].records.map(rec => (
+                      <tr key={rec.id}>
+                        <td>{t(`activities:${rec.record_type}`)}</td>
+                        <td className="text-right">{rec.value}</td>
+                        <td className="text-right">
+                          <Link to={`/activities/${rec.activity_id}`}>
+                            {rec.activity_date}
+                          </Link>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              ))}
       </div>
     </div>
   )

fittrackee_client/src/components/Dashboard/index.jsx

@@ -69,6 +69,7 @@ class DashBoard extends React.Component {
                         activity={activity}
                         key={activity.id}
                         sports={sports}
+                        t={t}
                         user={user}
                       />
                     ))