Client - application translation (wip)

fittrackee_client/src/components/Activity/ActivityAddOrEdit.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 
 import FormWithGpx from './ActivityForms/FormWithGpx'
@@ -23,13 +24,16 @@ class ActivityAddEdit extends React.Component {
   }
 
   render() {
-    const { activity, loading, message, sports } = this.props
+    const { activity, loading, message, sports, t } = this.props
     const { withGpx } = this.state
     return (
       <div>
         <Helmet>
           <title>
-            FitTrackee - {activity ? 'Edit a workout' : 'Add a workout'}
+            FitTrackee -{' '}
+            {activity
+              ? t('activities:Edit a workout')
+              : t('activities:Add a workout')}
           </title>
         </Helmet>
         <br />
@@ -41,14 +45,20 @@ class ActivityAddEdit extends React.Component {
             <div className="col-md-8">
               <div className="card add-activity">
                 <h2 className="card-header text-center">
-                  {activity ? 'Edit a workout' : 'Add a workout'}
+                  {activity
+                    ? t('activities:Edit a workout')
+                    : t('activities:Add a workout')}
                 </h2>
                 <div className="card-body">
                   {activity ? (
                     activity.with_gpx ? (
-                      <FormWithGpx activity={activity} sports={sports} />
+                      <FormWithGpx activity={activity} sports={sports} t={t} />
                     ) : (
-                      <FormWithoutGpx activity={activity} sports={sports} />
+                      <FormWithoutGpx
+                        activity={activity}
+                        sports={sports}
+                        t={t}
+                      />
                     )
                   ) : (
                     <div>
@@ -66,7 +76,7 @@ class ActivityAddEdit extends React.Component {
                                   this.handleRadioChange(event)
                                 }
                               />
-                              with gpx file
+                              {t('activities:with gpx file')}
                             </label>
                           </div>
                           <div className="col">
@@ -81,15 +91,15 @@ class ActivityAddEdit extends React.Component {
                                   this.handleRadioChange(event)
                                 }
                               />
-                              without gpx file
+                              {t('activities:without gpx file')}
                             </label>
                           </div>
                         </div>
                       </form>
                       {withGpx ? (
-                        <FormWithGpx sports={sports} />
+                        <FormWithGpx sports={sports} t={t} />
                       ) : (
-                        <FormWithoutGpx sports={sports} />
+                        <FormWithoutGpx sports={sports} t={t} />
                       )}
                     </div>
                   )}
@@ -104,6 +114,8 @@ class ActivityAddEdit extends React.Component {
   }
 }
 
-export default connect(state => ({
-  loading: state.loading,
-}))(ActivityAddEdit)
+export default withTranslation()(
+  connect(state => ({
+    loading: state.loading,
+  }))(ActivityAddEdit)
+)

fittrackee_client/src/components/Activity/ActivityForms/FormWithGpx.jsx

@@ -1,17 +1,21 @@
 import React from 'react'
+import { Trans } from 'react-i18next'
 import { connect } from 'react-redux'
 
 import { setLoading } from '../../../actions/index'
 import { addActivity, editActivity } from '../../../actions/activities'
 import { history } from '../../../index'
 import { fileSizeLimit, gpxLimit, zipSizeLimit } from '../../../utils'
+import { translateSports } from '../../../utils/activities'
 
 function FormWithGpx(props) {
-  const { activity, loading, onAddActivity, onEditActivity, sports } = props
+  const { activity, loading, onAddActivity, onEditActivity, sports, t } = props
   const sportId = activity ? activity.sport_id : ''
+  const translatedSports = translateSports(sports, t)
   // prettier-ignore
   const zipTooltip =
-    `no folder inside, ${gpxLimit} files max, max size: ${zipSizeLimit}`
+    `${t('activities:no folder inside')}, ${gpxLimit} ${
+    t('activities:files max')}, ${t('activities:max size')}: ${zipSizeLimit}`
   return (
     <form
       encType="multipart/form-data"
@@ -20,7 +24,7 @@ function FormWithGpx(props) {
     >
       <div className="form-group">
         <label>
-          Sport:
+          {t('common:Sport')}:
           <select
             className="form-control input-lg"
             defaultValue={sportId}
@@ -29,7 +33,7 @@ function FormWithGpx(props) {
             required
           >
             <option value="" />
-            {sports.map(sport => (
+            {translatedSports.map(sport => (
               <option key={sport.id} value={sport.id}>
                 {sport.label}
               </option>
@@ -40,7 +44,7 @@ function FormWithGpx(props) {
       {activity ? (
         <div className="form-group">
           <label>
-            Title:
+            {t('activities:Title')}:
             <input
               name="title"
               defaultValue={activity ? activity.title : ''}
@@ -52,17 +56,21 @@ function FormWithGpx(props) {
       ) : (
         <div className="form-group">
           <label>
-            <strong>gpx</strong> file
+            <Trans i18nKey="activities:gpxFile">
+              <strong>gpx</strong> file
+            </Trans>
             <sup>
               <i
                 className="fa fa-question-circle"
                 aria-hidden="true"
                 data-toggle="tooltip"
-                title={`max size: ${fileSizeLimit}`}
+                title={`${t('activities:max size')}: ${fileSizeLimit}`}
               />
             </sup>{' '}
-            or <strong> zip</strong> file containing <strong>gpx </strong>
-            files
+            <Trans i18nKey="activities:zipFile">
+              or <strong> zip</strong> file containing <strong>gpx </strong>
+              files
+            </Trans>
             <sup>
               <i
                 className="fa fa-question-circle"
@@ -86,7 +94,7 @@ function FormWithGpx(props) {
       )}
       <div className="form-group">
         <label>
-          Notes:
+          {t('activities:Notes')}:
           <textarea
             name="notes"
             defaultValue={activity ? activity.notes : ''}
@@ -106,13 +114,13 @@ function FormWithGpx(props) {
             onClick={event =>
               activity ? onEditActivity(event, activity) : onAddActivity(event)
             }
-            value="Submit"
+            value={t('common:Submit')}
           />
           <input
             type="submit"
             className="btn btn-secondary btn-lg btn-block"
             onClick={() => history.push('/')}
-            value="Cancel"
+            value={t('common:Cancel')}
           />
         </div>
       )}

fittrackee_client/src/components/Activity/ActivityForms/FormWithoutGpx.jsx

@@ -6,10 +6,11 @@ import {
   editActivity,
 } from '../../../actions/activities'
 import { history } from '../../../index'
-import { formatActivityDate } from '../../../utils/activities'
+import { formatActivityDate, translateSports } from '../../../utils/activities'
 
 function FormWithoutGpx(props) {
-  const { activity, onAddOrEdit, sports } = props
+  const { activity, onAddOrEdit, sports, t } = props
+  const translatedSports = translateSports(sports, t)
   let activityDate,
     activityTime,
     sportId = ''
@@ -27,7 +28,7 @@ function FormWithoutGpx(props) {
     <form onSubmit={event => event.preventDefault()}>
       <div className="form-group">
         <label>
-          Title:
+          {t('activities:Title')}:
           <input
             name="title"
             defaultValue={activity ? activity.title : ''}
@@ -37,7 +38,7 @@ function FormWithoutGpx(props) {
       </div>
       <div className="form-group">
         <label>
-          Sport:
+          {t('common:Sport')}:
           <select
             className="form-control input-lg"
             defaultValue={sportId}
@@ -45,7 +46,7 @@ function FormWithoutGpx(props) {
             required
           >
             <option value="" />
-            {sports.map(sport => (
+            {translatedSports.map(sport => (
               <option key={sport.id} value={sport.id}>
                 {sport.label}
               </option>
@@ -55,7 +56,7 @@ function FormWithoutGpx(props) {
       </div>
       <div className="form-group">
         <label>
-          Activity Date:
+          {t('activities:Activity Date')}:
           <div className="container">
             <div className="row">
               <input
@@ -78,7 +79,7 @@ function FormWithoutGpx(props) {
       </div>
       <div className="form-group">
         <label>
-          Duration:
+          {t('activities:Duration')}:
           <input
             name="duration"
             defaultValue={activity ? activity.duration : ''}
@@ -92,7 +93,7 @@ function FormWithoutGpx(props) {
       </div>
       <div className="form-group">
         <label>
-          Distance (km):
+          {t('activities:Distance')} (km):
           <input
             name="distance"
             defaultValue={activity ? activity.distance : ''}
@@ -106,7 +107,7 @@ function FormWithoutGpx(props) {
       </div>
       <div className="form-group">
         <label>
-          Notes:
+          {t('activities:Notes')}:
           <textarea
             name="notes"
             defaultValue={activity ? activity.notes : ''}
@@ -119,13 +120,13 @@ function FormWithoutGpx(props) {
         type="submit"
         className="btn btn-primary btn-lg btn-block"
         onClick={event => onAddOrEdit(event, activity)}
-        value="Submit"
+        value={t('common:Submit')}
       />
       <input
         type="submit"
         className="btn btn-secondary btn-lg btn-block"
         onClick={() => history.push('/')}
-        value="Cancel"
+        value={t('common:Cancel')}
       />
     </form>
   )