Client - add some error messages translation and refactor

fittrackee_api/fittrackee_api/tests/test_auth_api.py

@@ -62,9 +62,7 @@ def test_user_registration_invalid_short_username(app):
     )
     data = json.loads(response.data.decode())
     assert data['status'] == 'error'
-    assert (
+    assert data['message'] == "Username: 3 to 12 characters required.\n"
-        data['message'] == "Username: 3 to 12 characters required.\n"
-    )
     assert response.content_type == 'application/json'
     assert response.status_code == 400
 
@@ -85,9 +83,7 @@ def test_user_registration_invalid_long_username(app):
     )
     data = json.loads(response.data.decode())
     assert data['status'] == 'error'
-    assert (
+    assert data['message'] == "Username: 3 to 12 characters required.\n"
-        data['message'] == "Username: 3 to 12 characters required.\n"
-    )
     assert response.content_type == 'application/json'
     assert response.status_code == 400
 
@@ -129,9 +125,7 @@ def test_user_registration_invalid_short_password(app):
     )
     data = json.loads(response.data.decode())
     assert data['status'] == 'error'
-    assert (
+    assert data['message'] == "Password: 8 characters required.\n"
-        data['message'] == "Password: 8 characters required.\n"
-    )
     assert response.content_type == 'application/json'
     assert response.status_code == 400
 
@@ -153,8 +147,7 @@ def test_user_registration_mismatched_password(app):
     data = json.loads(response.data.decode())
     assert data['status'] == 'error'
     assert (
-        data['message']
+        data['message'] == "Password and password confirmation don\'t match.\n"
-        == "Password and password confirmation don\'t match.\n"
     )
     assert response.content_type == 'application/json'
     assert response.status_code == 400

fittrackee_client/src/actions/activities.js

@@ -34,7 +34,7 @@ export const addActivity = form => dispatch =>
     .then(ret => {
       if (ret.status === 'created') {
         if (ret.data.activities.length === 0) {
-          dispatch(setError('activities: no correct file'))
+          dispatch(setError('activities|no correct file.'))
         } else if (ret.data.activities.length === 1) {
           dispatch(loadProfile())
           history.push(`/activities/${ret.data.activities[0].id}`)
@@ -44,11 +44,11 @@ export const addActivity = form => dispatch =>
           history.push('/')
         }
       } else {
-        dispatch(setError(`activities: ${ret.message}`))
+        dispatch(setError(`activities|${ret.message}`))
       }
       dispatch(setLoading(false))
     })
-    .catch(error => dispatch(setError(`activities: ${error}`)))
+    .catch(error => dispatch(setError(`activities|${error}`)))
 
 export const addActivityWithoutGpx = form => dispatch =>
   FitTrackeeGenericApi.addData('activities/no_gpx', form)
@@ -57,10 +57,10 @@ export const addActivityWithoutGpx = form => dispatch =>
         dispatch(loadProfile())
         history.push(`/activities/${ret.data.activities[0].id}`)
       } else {
-        dispatch(setError(`activities: ${ret.message}`))
+        dispatch(setError(`activities|${ret.message}`))
       }
     })
-    .catch(error => dispatch(setError(`activities: ${error}`)))
+    .catch(error => dispatch(setError(`activities|${error}`)))
 
 export const getActivityGpx = activityId => dispatch => {
   if (activityId) {
@@ -69,10 +69,10 @@ export const getActivityGpx = activityId => dispatch => {
         if (ret.status === 'success') {
           dispatch(setGpx(ret.data.gpx))
         } else {
-          dispatch(setError(`activities: ${ret.message}`))
+          dispatch(setError(`activities|${ret.message}`))
         }
       })
-      .catch(error => dispatch(setError(`activities: ${error}`)))
+      .catch(error => dispatch(setError(`activities|${error}`)))
   }
   dispatch(setGpx(null))
 }
@@ -86,10 +86,10 @@ export const getSegmentGpx = (activityId, segmentId) => dispatch => {
         if (ret.status === 'success') {
           dispatch(setGpx(ret.data.gpx))
         } else {
-          dispatch(setError(`activities: ${ret.message}`))
+          dispatch(setError(`activities|${ret.message}`))
         }
       })
-      .catch(error => dispatch(setError(`activities: ${error}`)))
+      .catch(error => dispatch(setError(`activities|${error}`)))
   }
   dispatch(setGpx(null))
 }
@@ -101,10 +101,10 @@ export const getActivityChartData = activityId => dispatch => {
         if (ret.status === 'success') {
           dispatch(setChartData(formatChartData(ret.data.chart_data)))
         } else {
-          dispatch(setError(`activities: ${ret.message}`))
+          dispatch(setError(`activities|${ret.message}`))
         }
       })
-      .catch(error => dispatch(setError(`activities: ${error}`)))
+      .catch(error => dispatch(setError(`activities|${error}`)))
   }
   dispatch(setChartData(null))
 }
@@ -118,10 +118,10 @@ export const getSegmentChartData = (activityId, segmentId) => dispatch => {
         if (ret.status === 'success') {
           dispatch(setChartData(formatChartData(ret.data.chart_data)))
         } else {
-          dispatch(setError(`activities: ${ret.message}`))
+          dispatch(setError(`activities|${ret.message}`))
         }
       })
-      .catch(error => dispatch(setError(`activities: ${error}`)))
+      .catch(error => dispatch(setError(`activities|${error}`)))
   }
   dispatch(setChartData(null))
 }
@@ -134,10 +134,10 @@ export const deleteActivity = id => dispatch =>
           .then(() => dispatch(loadProfile()))
           .then(() => history.push('/'))
       } else {
-        dispatch(setError(`activities: ${ret.status}`))
+        dispatch(setError(`activities|${ret.status}`))
       }
     })
-    .catch(error => dispatch(setError(`activities: ${error}`)))
+    .catch(error => dispatch(setError(`activities|${error}`)))
 
 export const editActivity = form => dispatch =>
   FitTrackeeGenericApi.updateData('activities', form)
@@ -146,11 +146,11 @@ export const editActivity = form => dispatch =>
         dispatch(loadProfile())
         history.push(`/activities/${ret.data.activities[0].id}`)
       } else {
-        dispatch(setError(`activities: ${ret.message}`))
+        dispatch(setError(`activities|${ret.message}`))
       }
       dispatch(setLoading(false))
     })
-    .catch(error => dispatch(setError(`activities: ${error}`)))
+    .catch(error => dispatch(setError(`activities|${error}`)))
 
 export const getMoreActivities = params => dispatch =>
   FitTrackeeGenericApi.getData('activities', params)
@@ -160,10 +160,10 @@ export const getMoreActivities = params => dispatch =>
           dispatch(pushActivities(ret.data.activities))
         }
       } else {
-        dispatch(setError(`activities: ${ret.message}`))
+        dispatch(setError(`activities|${ret.message}`))
       }
     })
-    .catch(error => dispatch(setError(`activities: ${error}`)))
+    .catch(error => dispatch(setError(`activities|${error}`)))
 
 export const getMonthActivities = (from, to) => dispatch =>
   FitTrackeeGenericApi.getData('activities', {
@@ -176,7 +176,7 @@ export const getMonthActivities = (from, to) => dispatch =>
       if (ret.status === 'success') {
         dispatch(updateCalendar(ret.data.activities))
       } else {
-        dispatch(setError(`activities: ${ret.message}`))
+        dispatch(setError(`activities|${ret.message}`))
       }
     })
-    .catch(error => dispatch(setError(`activities: ${error}`)))
+    .catch(error => dispatch(setError(`activities|${error}`)))

fittrackee_client/src/actions/index.js

@@ -26,17 +26,17 @@ export const setLoading = loading => ({
 
 export const getOrUpdateData = (action, target, data) => dispatch => {
   if (data && data.id && isNaN(data.id)) {
-    return dispatch(setError(target, `${target}: Incorrect id`))
+    return dispatch(setError(`${target}|Incorrect id`))
   }
   return FitTrackeeApi[action](target, data)
     .then(ret => {
       if (ret.status === 'success') {
         dispatch(setData(target, ret.data))
       } else {
-        dispatch(setError(`${target}: ${ret.message || ret.status}`))
+        dispatch(setError(`${target}|${ret.message || ret.status}`))
       }
     })
-    .catch(error => dispatch(setError(`${target}: ${error}`)))
+    .catch(error => dispatch(setError(`${target}|${error}`)))
 }
 
 export const addData = (target, data) => dispatch =>
@@ -45,24 +45,24 @@ export const addData = (target, data) => dispatch =>
       if (ret.status === 'created') {
         history.push(`/admin/${target}`)
       } else {
-        dispatch(setError(`${target}: ${ret.status}`))
+        dispatch(setError(`${target}|${ret.status}`))
       }
     })
-    .catch(error => dispatch(setError(`${target}: ${error}`)))
+    .catch(error => dispatch(setError(`${target}|${error}`)))
 
 export const deleteData = (target, id) => dispatch => {
   if (isNaN(id)) {
-    return dispatch(setError(target, `${target}: Incorrect id`))
+    return dispatch(setError(target, `${target}|Incorrect id`))
   }
   return FitTrackeeApi.deleteData(target, id)
     .then(ret => {
       if (ret.status === 204) {
         history.push(`/admin/${target}`)
       } else {
-        dispatch(setError(`${target}: ${ret.message || ret.status}`))
+        dispatch(setError(`${target}|${ret.message || ret.status}`))
       }
     })
-    .catch(error => dispatch(setError(`${target}: ${error}`)))
+    .catch(error => dispatch(setError(`${target}|${error}`)))
 }
 
 export const updateLanguage = language => dispatch => {

fittrackee_client/src/actions/stats.js

@@ -7,7 +7,7 @@ export const getStats = (userId, type, data) => dispatch =>
       if (ret.status === 'success') {
         dispatch(setData('statistics', ret.data))
       } else {
-        dispatch(setError(`statistics: ${ret.message}`))
+        dispatch(setError(`statistics|${ret.message}`))
       }
     })
-    .catch(error => dispatch(setError(`statistics: ${error}`)))
+    .catch(error => dispatch(setError(`statistics|${error}`)))

fittrackee_client/src/components/Activities/index.jsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
 
 import ActivitiesFilter from './ActivitiesFilter'
 import ActivitiesList from './ActivitiesList'
+import Message from '../Common/Message'
 import NoActivities from '../Common/NoActivities'
 import { getOrUpdateData } from '../../actions'
 import { getMoreActivities } from '../../actions/activities'
@@ -55,7 +56,7 @@ class Activities extends React.Component {
           <title>FitTrackee - {t('common:Workouts')}</title>
         </Helmet>
         {message ? (
-          <code>{t(`messages:${message}`)}</code>
+          <Message message={message} t={t} />
         ) : (
           <div className="container history">
             <div className="row">

fittrackee_client/src/components/Activity/ActivityAddOrEdit.jsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
 
 import FormWithGpx from './ActivityForms/FormWithGpx'
 import FormWithoutGpx from './ActivityForms/FormWithoutGpx'
+import Message from '../Common/Message'
 
 class ActivityAddEdit extends React.Component {
   constructor(props, context) {
@@ -38,7 +39,7 @@ class ActivityAddEdit extends React.Component {
         </Helmet>
         <br />
         <br />
-        {message && <code>{t(`messages:${message}`)}</code>}
+        <Message message={message} t={t} />
         <div className="container">
           <div className="row">
             <div className="col-md-2" />

fittrackee_client/src/components/Activity/ActivityDisplay/index.jsx

@@ -11,6 +11,7 @@ import ActivityNoMap from './ActivityNoMap'
 import ActivityNotes from './ActivityNotes'
 import ActivitySegments from './ActivitySegments'
 import CustomModal from '../../Common/CustomModal'
+import Message from '../../Common/Message'
 import { getOrUpdateData } from '../../../actions'
 import { deleteActivity } from '../../../actions/activities'
 
@@ -85,7 +86,7 @@ class ActivityDisplay extends React.Component {
           <title>FitTrackee - {title}</title>
         </Helmet>
         {message ? (
-          <code>{t(`messages:${message}`)}</code>
+          <Message message={message} t={t} />
         ) : (
           <div className="container">
             {displayModal && (

fittrackee_client/src/components/Common/Message.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+export default class Message extends React.PureComponent {
+  render() {
+    const { message, messages, t } = this.props
+    const singleMessage =
+      message === '' || !message
+        ? ''
+        : message.split('|').length > 1
+        ? `${t(`messages:${message.split('|')[0]}`)}: ${t(
+            `messages:${message.split('|')[1]}`
+          )}`
+        : t(`messages:${message}`)
+    return (
+      <>
+        {singleMessage !== '' && <code>{singleMessage}</code>}
+        {messages && messages.length > 0 && (
+          <code>
+            <ul>
+              {messages.map(msg => (
+                <li key={msg.id}>{t(`messages:${msg.value}`)}</li>
+              ))}
+            </ul>
+          </code>
+        )}
+      </>
+    )
+  }
+}

fittrackee_client/src/components/Dashboard/index.jsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
 
 import ActivityCard from './ActivityCard'
 import Calendar from './Calendar'
+import Message from '../Common/Message'
 import NoActivities from '../Common/NoActivities'
 import Records from './Records'
 import Statistics from './Statistics'
@@ -45,7 +46,7 @@ class DashBoard extends React.Component {
           <title>FitTrackee - {t('common:Dashboard')}</title>
         </Helmet>
         {message ? (
-          <code>{t(`messages:${message}`)}</code>
+          <Message message={message} t={t} />
         ) : (
           activities &&
           sports.length > 0 && (

fittrackee_client/src/components/User/Profile.jsx

@@ -5,6 +5,7 @@ import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 
+import Message from '../Common/Message'
 import { deletePicture, uploadPicture } from '../../actions/user'
 import { apiUrl, fileSizeLimit } from '../../utils'
 
@@ -20,7 +21,7 @@ function Profile({ message, onDeletePicture, onUploadPicture, t, user }) {
       <Helmet>
         <title>FitTrackee - {t('user:Profile')}</title>
       </Helmet>
-      {message !== '' && <code>{t(`messages:${message}`)}</code>}
+      <Message message={message} t={t} />
       <div className="container">
         <h1 className="page-title">{t('user:Profile')}</h1>
         <div className="row">

fittrackee_client/src/components/User/ProfileEdit.jsx

@@ -5,6 +5,7 @@ import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import TimezonePicker from 'react-timezone'
 
+import Message from '../Common/Message'
 import { handleProfileFormSubmit } from '../../actions/user'
 import { history } from '../../index'
 import { languages } from '../NavBar/LanguageDropdown'
@@ -58,7 +59,7 @@ class ProfileEdit extends React.Component {
         <Helmet>
           <title>FitTrackee - {t('user:Profile Edition')}</title>
         </Helmet>
-        {message !== '' && <code>{t(`messages:${message}`)}</code>}
+        <Message message={message} t={t} />
         {formData.isAuthenticated && (
           <div className="container">
             <h1 className="page-title">{t('user:Profile Edition')}</h1>

fittrackee_client/src/components/User/UserForm.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Redirect } from 'react-router-dom'
 
 import Form from './Form'
+import Message from '../Common/Message'
 import { handleUserFormSubmit } from '../../actions/user'
 import { isLoggedIn } from '../../utils'
-import { withTranslation } from 'react-i18next'
 
 class UserForm extends React.Component {
   constructor(props, context) {
@@ -53,16 +54,7 @@ class UserForm extends React.Component {
           <Redirect to="/" />
         ) : (
           <div>
-            {message !== '' && <code>{t(`messages:${message}`)}</code>}
+            <Message message={message} messages={messages} t={t} />
-            {messages.length > 0 && (
-              <code>
-                <ul>
-                  {messages.map(msg => (
-                    <li key={msg.id}>{t(`messages:${msg.value}`)}</li>
-                  ))}
-                </ul>
-              </code>
-            )}
             <Form
               formType={formType}
               userForm={formData}

fittrackee_client/src/locales/en/messages.json

@@ -2,24 +2,30 @@
   "3 to 12 characters required for username.": "3 to 12 characters required for username.",
   "8 characters required for password.": "8 characters required for password.",
   "An error occurred. Please contact the administrator.": "An error occurred. Please contact the administrator.",
+  "activities": "activities",
   "Error during picture deletion.": "Error during picture deletion.",
   "Error during picture update.":  "Error during picture update.",
   "Error during picture update, file size exceeds max size.": "Error during picture update, file size exceeds max size.",
   "Error. Registration is disabled.": "Error. Registration is disabled.",
   "Error. Please try again or contact the administrator.": "Error. Please try again or contact the administrator.",
   "File extension not allowed.": "File extension not allowed.",
+  "Incorrect id": "Incorrect id",
   "Invalid credentials.": "Invalid credentials.",
   "Invalid payload.": "Invalid payload.",
   "Invalid token. Please log in again.": "Invalid token. Please log in again.",
   "No file part.": "No file part.",
   "No picture.": "No picture.",
   "No selected file.": "No selected file.",
+  "no correct file.": "no correct file.",
   "no gpx file for this activity": "no gpx file for this activity",
   "Password and password confirmation don't match.": "Password and password confirmation don't match.",
   "Provide a valid auth token": "Provide a valid auth token",
+  "records": "records",
   "Signature expired. Please log in again.": "Signature expired. Please log in again.",
   "Sorry. That user already exists.": "Sorry. That user already exists.",
   "Sport does not exist.": "Sport does not exist.",
+  "sports": "sports",
+  "statistics": "statistiques",
   "User does not exist.": "User does not exist.",
   "Valid email must be provided.\n": "Valid email must be provided.",
   "You do not have permissions.": "You do not have permissions."

fittrackee_client/src/locales/fr/messages.json

@@ -2,24 +2,30 @@
   "3 to 12 characters required for username.": "3 à 12 caractères requis pour le nom.",
   "8 characters required for password.": "8 caractères minimum pour le mot de passe.",
   "An error occurred. Please contact the administrator.": "Une erreur s'est produite. Merci de contacter l'administrateur.",
+  "activities": "activités",
   "Error during picture deletion.": "Erreur lors de la suppression de l'image.",
   "Error during picture update.":  "Erreur lors de la mise à jour de l'image.",
   "Error during picture update, file size exceeds max size.": "Erreur lors de la mise à jour de l'image, la taille du ficher dépasse la taille maximum autorisée",
   "Error. Registration is disabled.": "Erreur. L'inscription est désactivée.",
   "Error. Please try again or contact the administrator.": "Erreur. Veuillez réessayer ou contacter l'administrateur",
-  "File extension not allowed.": "Extension de fichier non autorisée",
+  "File extension not allowed.": "Extension de fichier non autorisée.",
+  "Incorrect id": "Id incorrect",
   "Invalid credentials.": "Identifiants invalides.",
   "Invalid payload.": "Données incorrectes.",
   "Invalid token. Please log in again.": "Jeton invalide. Merci de vous reconnecter.",
   "No file part.": "Pas de fichier fourni.",
   "No picture.": "Pas d'image.",
   "No selected file.": "Pas de fichier sélectionné.",
+  "no correct file.": "fichier incorrect",
   "no gpx file for this activity": "pas de fichier gpx pour cette activité",
   "Password and password confirmation don't match.": "Les mots de passe saisis sont différents.",
   "Provide a valid auth token": "Merci de fournir un jeton valide",
+  "records": "records",
   "Signature expired. Please log in again.": "Signature expirée. Merci de vous reconnecter.",
   "Sorry. That user already exists.": "Désolé. Cet utilisateur existe déjà.",
   "Sport does not exist.": "Le sport n'existe pas.",
+  "sports": "sports",
+  "statistics": "statistics",
   "User does not exist.": "L'utilisateur n'existe pas.",
   "Valid email must be provided.\n": "L'email fourni n'est pas valide.",
   "You do not have permissions.": "Vous n'avez pas les permissions nécessaires."