From ed0e467404b90285e132b6b9e736ec362fc82cee Mon Sep 17 00:00:00 2001 From: Sam Date: Mon, 16 Sep 2019 18:55:58 +0200 Subject: [PATCH] Client - add some error messages translation and refactor --- .../fittrackee_api/tests/test_auth_api.py | 15 ++----- fittrackee_client/src/actions/activities.js | 42 +++++++++---------- fittrackee_client/src/actions/index.js | 16 +++---- fittrackee_client/src/actions/stats.js | 4 +- .../src/components/Activities/index.jsx | 3 +- .../components/Activity/ActivityAddOrEdit.jsx | 3 +- .../Activity/ActivityDisplay/index.jsx | 3 +- .../src/components/Common/Message.jsx | 29 +++++++++++++ .../src/components/Dashboard/index.jsx | 3 +- .../src/components/User/Profile.jsx | 3 +- .../src/components/User/ProfileEdit.jsx | 3 +- .../src/components/User/UserForm.jsx | 14 ++----- .../src/locales/en/messages.json | 6 +++ .../src/locales/fr/messages.json | 8 +++- 14 files changed, 92 insertions(+), 60 deletions(-) create mode 100644 fittrackee_client/src/components/Common/Message.jsx diff --git a/fittrackee_api/fittrackee_api/tests/test_auth_api.py b/fittrackee_api/fittrackee_api/tests/test_auth_api.py index cbd9e0b5..95d51863 100644 --- a/fittrackee_api/fittrackee_api/tests/test_auth_api.py +++ b/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 ( - data['message'] == "Username: 3 to 12 characters required.\n" - ) + assert 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 ( - data['message'] == "Username: 3 to 12 characters required.\n" - ) + assert 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 ( - data['message'] == "Password: 8 characters required.\n" - ) + assert 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'] - == "Password and password confirmation don\'t match.\n" + data['message'] == "Password and password confirmation don\'t match.\n" ) assert response.content_type == 'application/json' assert response.status_code == 400 diff --git a/fittrackee_client/src/actions/activities.js b/fittrackee_client/src/actions/activities.js index 8228c26f..997f1084 100644 --- a/fittrackee_client/src/actions/activities.js +++ b/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}`))) diff --git a/fittrackee_client/src/actions/index.js b/fittrackee_client/src/actions/index.js index 632257b3..0fd33458 100644 --- a/fittrackee_client/src/actions/index.js +++ b/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 => { diff --git a/fittrackee_client/src/actions/stats.js b/fittrackee_client/src/actions/stats.js index de23f754..834e65d4 100644 --- a/fittrackee_client/src/actions/stats.js +++ b/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}`))) diff --git a/fittrackee_client/src/components/Activities/index.jsx b/fittrackee_client/src/components/Activities/index.jsx index 7e2626bd..1eba78a0 100644 --- a/fittrackee_client/src/components/Activities/index.jsx +++ b/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 { FitTrackee - {t('common:Workouts')} {message ? ( - {t(`messages:${message}`)} + ) : (
diff --git a/fittrackee_client/src/components/Activity/ActivityAddOrEdit.jsx b/fittrackee_client/src/components/Activity/ActivityAddOrEdit.jsx index a7bb3d50..ae0ca153 100644 --- a/fittrackee_client/src/components/Activity/ActivityAddOrEdit.jsx +++ b/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 {

- {message && {t(`messages:${message}`)}} +
diff --git a/fittrackee_client/src/components/Activity/ActivityDisplay/index.jsx b/fittrackee_client/src/components/Activity/ActivityDisplay/index.jsx index 1c06abd9..ee649636 100644 --- a/fittrackee_client/src/components/Activity/ActivityDisplay/index.jsx +++ b/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 { FitTrackee - {title} {message ? ( - {t(`messages:${message}`)} + ) : (
{displayModal && ( diff --git a/fittrackee_client/src/components/Common/Message.jsx b/fittrackee_client/src/components/Common/Message.jsx new file mode 100644 index 00000000..6d772b14 --- /dev/null +++ b/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 !== '' && {singleMessage}} + {messages && messages.length > 0 && ( + +
    + {messages.map(msg => ( +
  • {t(`messages:${msg.value}`)}
  • + ))} +
+
+ )} + + ) + } +} diff --git a/fittrackee_client/src/components/Dashboard/index.jsx b/fittrackee_client/src/components/Dashboard/index.jsx index fab1c824..4ff840c3 100644 --- a/fittrackee_client/src/components/Dashboard/index.jsx +++ b/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 { FitTrackee - {t('common:Dashboard')} {message ? ( - {t(`messages:${message}`)} + ) : ( activities && sports.length > 0 && ( diff --git a/fittrackee_client/src/components/User/Profile.jsx b/fittrackee_client/src/components/User/Profile.jsx index a77094dc..3c1c8014 100644 --- a/fittrackee_client/src/components/User/Profile.jsx +++ b/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 }) { FitTrackee - {t('user:Profile')} - {message !== '' && {t(`messages:${message}`)}} +

{t('user:Profile')}

diff --git a/fittrackee_client/src/components/User/ProfileEdit.jsx b/fittrackee_client/src/components/User/ProfileEdit.jsx index cac79da1..e5d270bf 100644 --- a/fittrackee_client/src/components/User/ProfileEdit.jsx +++ b/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 { FitTrackee - {t('user:Profile Edition')} - {message !== '' && {t(`messages:${message}`)}} + {formData.isAuthenticated && (

{t('user:Profile Edition')}

diff --git a/fittrackee_client/src/components/User/UserForm.jsx b/fittrackee_client/src/components/User/UserForm.jsx index 6176c24c..20c04c1f 100644 --- a/fittrackee_client/src/components/User/UserForm.jsx +++ b/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 { ) : (
- {message !== '' && {t(`messages:${message}`)}} - {messages.length > 0 && ( - -
    - {messages.map(msg => ( -
  • {t(`messages:${msg.value}`)}
  • - ))} -
-
- )} +