diff --git a/common/app/routes/Settings/components/About-Settings.jsx b/common/app/routes/Settings/components/About-Settings.jsx index 214722f5e2e034..b837c0423f9f9d 100644 --- a/common/app/routes/Settings/components/About-Settings.jsx +++ b/common/app/routes/Settings/components/About-Settings.jsx @@ -3,10 +3,7 @@ import PropTypes from 'prop-types'; import { createSelector } from 'reselect'; import { bindActionCreators } from 'redux'; import { reduxForm } from 'redux-form'; -import { - Nav, - NavItem -} from 'react-bootstrap'; +import { Nav, NavItem } from 'react-bootstrap'; import { FullWidthRow, Spacer } from '../../../helperComponents'; import ThemeSettings from './ThemeSettings.jsx'; @@ -26,17 +23,16 @@ const max288Char = maxLength(288); const mapStateToProps = createSelector( userSelector, - ( - { - about, - location, - name, - picture, - points, - theme, - username - }, - ) => ({ + ({ + about, + location, + name, + picture, + points, + theme, + username, + yearsTopContributor + }) => ({ about, currentTheme: theme, initialValues: { name, location, about, picture }, @@ -44,42 +40,43 @@ const mapStateToProps = createSelector( name, picture, points, - username + username, + yearsTopContributor }) ); -const formFields = [ 'name', 'location', 'picture', 'about' ]; +const formFields = ['name', 'location', 'picture', 'about']; function validator(values) { const errors = {}; - const { - about, - picture - } = values; + const { about, picture } = values; errors.about = max288Char(about); errors.picutre = validURL(picture); - } function mapDispatchToProps(dispatch) { - return bindActionCreators({ - toggleNightMode, - updateUserBackend - }, dispatch); + return bindActionCreators( + { + toggleNightMode, + updateUserBackend + }, + dispatch + ); } const propTypes = { - about: PropTypes.string, - currentTheme: PropTypes.string, - fields: PropTypes.object, - handleSubmit: PropTypes.func.isRequired, - location: PropTypes.string, - name: PropTypes.string, - picture: PropTypes.string, - points: PropTypes.number, - toggleNightMode: PropTypes.func.isRequired, - updateUserBackend: PropTypes.func.isRequired, - username: PropTypes.string + about: PropTypes.string, + currentTheme: PropTypes.string, + fields: PropTypes.object, + handleSubmit: PropTypes.func.isRequired, + location: PropTypes.string, + name: PropTypes.string, + picture: PropTypes.string, + points: PropTypes.number, + toggleNightMode: PropTypes.func.isRequired, + updateUserBackend: PropTypes.func.isRequired, + username: PropTypes.string, + yearsTopContributor: PropTypes.array }; class AboutSettings extends PureComponent { @@ -120,10 +117,7 @@ class AboutSettings extends PureComponent { }; return (
- +
); } @@ -131,22 +125,24 @@ class AboutSettings extends PureComponent { renderPreview() { const { fields: { - picture: { value: picture }, - name: { value: name }, - location: { value: location }, - about: { value: about } + picture: { value: picture }, + name: { value: name }, + location: { value: location }, + about: { value: about } }, points, - username + username, + yearsTopContributor } = this.props; return ( ); } @@ -154,7 +150,9 @@ class AboutSettings extends PureComponent { render() { const { currentTheme, - fields: { _meta: { allPristine } }, + fields: { + _meta: { allPristine } + }, handleSubmit, toggleNightMode, username @@ -164,10 +162,10 @@ class AboutSettings extends PureComponent { const toggleTheme = () => toggleNightMode(username, currentTheme); return (
- +
diff --git a/common/app/routes/Settings/components/Camper.jsx b/common/app/routes/Settings/components/Camper.jsx index f80f444451e099..0907ca1728aabb 100644 --- a/common/app/routes/Settings/components/Camper.jsx +++ b/common/app/routes/Settings/components/Camper.jsx @@ -42,46 +42,37 @@ function Camper({ about, yearsTopContributor }) { - return (
- - { + + {username -

@{ username }

- { name &&

{ name }

} - { location &&

{ location }

} - { about &&

{ about }

} - { - typeof points === 'number' ? ( -

- { `${points} ${pluralise('point', points !== 1)}` } -

- ) : null - } - { yearsTopContributor.filter(Boolean).length > 0 && - ( -
-
+

@{username}

+ {name &&

{name}

} + {location &&

{location}

} + {about &&

{about}

} + {typeof points === 'number' ? ( +

+ {`${points} ${pluralise('point', points !== 1)}`} +

+ ) : null} + {yearsTopContributor.filter(Boolean).length > 0 && ( +
+

- Top Contributor + Top Contributor

-

- { joinArray(yearsTopContributor) } -

-
- ) - } -
+

{joinArray(yearsTopContributor)}

+
+ )} +
); }