diff --git a/src/components/ProfilePage.jsx b/src/components/ProfilePage.jsx index 8b76f64..0546a1e 100644 --- a/src/components/ProfilePage.jsx +++ b/src/components/ProfilePage.jsx @@ -191,7 +191,7 @@ export class ProfilePage extends React.Component { {...commonFormProps} /> - + {shouldShowAgeMessage ? : null} ), empty: ( - - - + + + + + + ), static: ( diff --git a/src/components/ProfilePage/Certificates.jsx b/src/components/ProfilePage/Certificates.jsx index 39ecb03..988e249 100644 --- a/src/components/ProfilePage/Certificates.jsx +++ b/src/components/ProfilePage/Certificates.jsx @@ -148,7 +148,7 @@ class Certificates extends React.Component { ), empty: ( -
+ {this.renderCertificates()} -
+ ), static: ( diff --git a/src/components/ProfilePage/Country.jsx b/src/components/ProfilePage/Country.jsx index d023122..beeac65 100644 --- a/src/components/ProfilePage/Country.jsx +++ b/src/components/ProfilePage/Country.jsx @@ -2,7 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Form, FormFeedback, FormGroup, Input, Label } from 'reactstrap'; import { connect } from 'react-redux'; -import { FormattedMessage } from 'react-intl'; +import { injectIntl, intlShape } from 'react-intl'; + +import messages from './Country.messages'; // Components import FormControls from './elements/FormControls'; @@ -49,7 +51,7 @@ class Country extends React.Component { render() { const { - formId, country, visibilityCountry, editMode, saveState, error, + formId, country, visibilityCountry, editMode, saveState, error, intl, } = this.props; return ( @@ -62,11 +64,7 @@ class Country extends React.Component {
), empty: ( - - + - + + {intl.formatMessage(messages['profile.country.empty'])} + + ), static: ( - +

{ALL_COUNTRIES[country]}

 ), @@ -146,6 +147,9 @@ Country.propTypes = { submitHandler: PropTypes.func.isRequired, closeHandler: PropTypes.func.isRequired, openHandler: PropTypes.func.isRequired, + + // i18n + intl: intlShape.isRequired, }; Country.defaultProps = { @@ -159,4 +163,4 @@ Country.defaultProps = { export default connect( editableFormSelector, {}, -)(Country); +)(injectIntl(Country)); diff --git a/src/components/ProfilePage/Country.messages.jsx b/src/components/ProfilePage/Country.messages.jsx new file mode 100644 index 0000000..9472e57 --- /dev/null +++ b/src/components/ProfilePage/Country.messages.jsx @@ -0,0 +1,16 @@ +import { defineMessages } from 'react-intl'; + +const messages = defineMessages({ + 'profile.country.label': { + id: 'profile.country.label', + defaultMessage: 'Location', + description: 'The label for a country in a user profile.', + }, + 'profile.country.empty': { + id: 'profile.country.empty', + defaultMessage: 'Add location', + description: 'The affordance to add country location to a user’s profile.', + }, +}); + +export default messages; diff --git a/src/components/ProfilePage/Education.jsx b/src/components/ProfilePage/Education.jsx index a9c3a62..a25e870 100644 --- a/src/components/ProfilePage/Education.jsx +++ b/src/components/ProfilePage/Education.jsx @@ -105,13 +105,16 @@ class Education extends React.Component { ), empty: ( - - - + + + + + + ), static: ( diff --git a/src/components/ProfilePage/Name.jsx b/src/components/ProfilePage/Name.jsx index 4b2e1c2..201902a 100644 --- a/src/components/ProfilePage/Name.jsx +++ b/src/components/ProfilePage/Name.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Form, FormFeedback, FormGroup, FormText, Input, Label } from 'reactstrap'; import { connect } from 'react-redux'; -import { injectIntl, intlShape, FormattedMessage } from 'react-intl'; +import { injectIntl, intlShape } from 'react-intl'; import messages from './Name.messages'; @@ -60,7 +60,9 @@ class Name extends React.Component {
- + - + {intl.formatMessage(messages['profile.name.details'])} {error} @@ -99,16 +97,21 @@ class Name extends React.Component { visibility={visibilityName} />

{name}

+ + {intl.formatMessage(messages['profile.name.details'])} + ), empty: ( - - - + + + + {intl.formatMessage(messages['profile.name.empty'])} + + + {intl.formatMessage(messages['profile.name.details'])} + + ), static: ( diff --git a/src/components/ProfilePage/Name.messages.jsx b/src/components/ProfilePage/Name.messages.jsx index 7cdf91a..9769af7 100644 --- a/src/components/ProfilePage/Name.messages.jsx +++ b/src/components/ProfilePage/Name.messages.jsx @@ -6,6 +6,16 @@ const messages = defineMessages({ defaultMessage: 'Full Name', description: 'A section of a user profile', }, + 'profile.name.details': { + id: 'profile.name.details', + defaultMessage: 'This is the name that appears in your account and on your certificates.', + description: 'Describes the area for a user to update their name.', + }, + 'profile.name.empty': { + id: 'profile.name.empty', + defaultMessage: 'Add name', + description: 'The affordance to add a name to a user’s profile.', + }, }); export default messages; diff --git a/src/components/ProfilePage/PreferredLanguage.jsx b/src/components/ProfilePage/PreferredLanguage.jsx index f46cfc5..e58fbd2 100644 --- a/src/components/ProfilePage/PreferredLanguage.jsx +++ b/src/components/ProfilePage/PreferredLanguage.jsx @@ -2,7 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Form, FormFeedback, FormGroup, Input, Label } from 'reactstrap'; import { connect } from 'react-redux'; -import { FormattedMessage } from 'react-intl'; +import { injectIntl, intlShape } from 'react-intl'; + +import messages from './PreferredLanguage.messages'; // Components import FormControls from './elements/FormControls'; @@ -57,7 +59,13 @@ class PreferredLanguage extends React.Component { render() { const { - formId, languageProficiencies, visibilityLanguageProficiencies, editMode, saveState, error, + formId, + languageProficiencies, + visibilityLanguageProficiencies, + editMode, + saveState, + error, + intl, } = this.props; const value = languageProficiencies.length ? languageProficiencies[0].code : ''; @@ -72,11 +80,7 @@ class PreferredLanguage extends React.Component { - )} + content={intl.formatMessage(messages['profile.preferredlanguage.label'])} showEditButton onClickEdit={this.handleOpen} showVisibility={visibilityLanguageProficiencies !== null} @@ -123,24 +121,19 @@ class PreferredLanguage extends React.Component { ), empty: ( - - + - + + {intl.formatMessage(messages['profile.preferredlanguage.empty'])} + + ), static: ( - )} + content={intl.formatMessage(messages['profile.preferredlanguage.label'])} />

{ALL_LANGUAGES[value]}

 @@ -175,6 +168,9 @@ PreferredLanguage.propTypes = { submitHandler: PropTypes.func.isRequired, closeHandler: PropTypes.func.isRequired, openHandler: PropTypes.func.isRequired, + + // i18n + intl: intlShape.isRequired, }; PreferredLanguage.defaultProps = { @@ -188,4 +184,4 @@ PreferredLanguage.defaultProps = { export default connect( editableFormSelector, {}, -)(PreferredLanguage); +)(injectIntl(PreferredLanguage)); diff --git a/src/components/ProfilePage/PreferredLanguage.messages.jsx b/src/components/ProfilePage/PreferredLanguage.messages.jsx new file mode 100644 index 0000000..9575200 --- /dev/null +++ b/src/components/ProfilePage/PreferredLanguage.messages.jsx @@ -0,0 +1,16 @@ +import { defineMessages } from 'react-intl'; + +const messages = defineMessages({ + 'profile.preferredlanguage.empty': { + id: 'profile.preferredlanguage.empty', + defaultMessage: 'Add language', + description: 'Instructions when the user doesn’t have a preferred language set.', + }, + 'profile.preferredlanguage.label': { + id: 'profile.preferredlanguage.label', + defaultMessage: 'Primary Language Spoken', + description: 'The label for a user’s primary spoken language.', + }, +}); + +export default messages; diff --git a/src/components/ProfilePage/SocialLinks.jsx b/src/components/ProfilePage/SocialLinks.jsx index 3d22714..a898eea 100644 --- a/src/components/ProfilePage/SocialLinks.jsx +++ b/src/components/ProfilePage/SocialLinks.jsx @@ -101,15 +101,18 @@ class SocialLinks extends React.Component { expression={editMode} cases={{ empty: ( -
    - {socialLinks.map(({ platform }) => ( - - ))} -
+ + +
    + {socialLinks.map(({ platform }) => ( + + ))} +
+ ), static: ( diff --git a/src/components/ProfilePage/elements/EmptyContent.jsx b/src/components/ProfilePage/elements/EmptyContent.jsx index a7cc4dd..7a226f0 100644 --- a/src/components/ProfilePage/elements/EmptyContent.jsx +++ b/src/components/ProfilePage/elements/EmptyContent.jsx @@ -1,6 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Button } from 'reactstrap'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPlus } from '@fortawesome/free-solid-svg-icons'; @@ -17,16 +16,14 @@ function EmptyContent({ children, onClick, showPlusIcon }) { return (
{onClick ? ( - + ) : children}
);