Client - add some error messages translation and refactor

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>}
-            {messages.length > 0 && (
-              <code>
-                <ul>
-                  {messages.map(msg => (
-                    <li key={msg.id}>{t(`messages:${msg.value}`)}</li>
-                  ))}
-                </ul>
-              </code>
-            )}
+            <Message message={message} messages={messages} t={t} />
             <Form
               formType={formType}
               userForm={formData}