Client - add some error messages translation and refactor

This commit is contained in:
Sam
2019-09-16 18:55:58 +02:00
parent f6389f1cdd
commit ed0e467404
14 changed files with 92 additions and 60 deletions

View File

@ -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">

View File

@ -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" />

View File

@ -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 && (

View File

@ -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>
)}
</>
)
}
}

View File

@ -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 && (

View File

@ -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">

View File

@ -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>

View File

@ -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}