@@ -166,8 +92,8 @@ export class ProfilePage extends React.Component {
@@ -179,54 +105,20 @@ export class ProfilePage extends React.Component {
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
+
{this.props.requiresParentalConsent ? : null}
-
-
-
-
-
+
+
@@ -236,39 +128,46 @@ export class ProfilePage extends React.Component {
}
ProfilePage.propTypes = {
+ // Page state helpers
currentlyEditingField: PropTypes.string,
saveState: PropTypes.oneOf([null, 'pending', 'complete', 'error']),
savePhotoState: PropTypes.oneOf([null, 'pending', 'complete', 'error']),
- error: PropTypes.string,
isCurrentUserProfile: PropTypes.bool.isRequired,
- profileImage: PropTypes.string,
- fullName: PropTypes.string,
+ errors: PropTypes.objectOf(PropTypes.string),
+
+ // Profile data
username: PropTypes.string,
- userLocation: PropTypes.string,
+ profileImage: PropTypes.string,
+ accountPrivacy: PropTypes.string,
+ certificates: PropTypes.arrayOf(PropTypes.shape({
+ title: PropTypes.string,
+ })),
+
+ // Profile data for form fields
education: PropTypes.string,
socialLinks: PropTypes.arrayOf(PropTypes.shape({
platform: PropTypes.string,
socialLink: PropTypes.string,
})),
- aboutMe: PropTypes.string,
bio: PropTypes.string,
- certificates: PropTypes.arrayOf(PropTypes.shape({
- title: PropTypes.string,
- })),
+ visibility: PropTypes.objectOf(PropTypes.string),
+ // Actions
fetchProfile: PropTypes.func.isRequired,
saveProfile: PropTypes.func.isRequired,
saveProfilePhoto: PropTypes.func.isRequired,
deleteProfilePhoto: PropTypes.func.isRequired,
- openField: PropTypes.func.isRequired,
- closeField: PropTypes.func.isRequired,
+ openForm: PropTypes.func.isRequired,
+ closeForm: PropTypes.func.isRequired,
+ updateVisibilityDraft: PropTypes.func.isRequired,
+ updateAccountDraft: PropTypes.func.isRequired,
+
+ // Router
match: PropTypes.shape({
params: PropTypes.shape({
username: PropTypes.string.isRequired,
}).isRequired,
}).isRequired,
- accountPrivacy: PropTypes.string,
- visibility: PropTypes.object, // eslint-disable-line
yearOfBirth: PropTypes.number,
requiresParentalConsent: PropTypes.bool,
};
@@ -277,14 +176,11 @@ ProfilePage.defaultProps = {
currentlyEditingField: null,
saveState: null,
savePhotoState: null,
- error: null,
+ errors: {},
profileImage: null,
- fullName: null,
username: null,
- userLocation: null,
education: null,
socialLinks: [],
- aboutMe: null,
bio: null,
certificates: null,
accountPrivacy: null,
@@ -295,27 +191,26 @@ ProfilePage.defaultProps = {
const mapStateToProps = (state) => {
const profileImage =
- state.profilePage.profile.profileImage != null
- ? state.profilePage.profile.profileImage.imageUrlLarge
+ state.profilePage.account.profileImage != null
+ ? state.profilePage.account.profileImage.imageUrlLarge
: null;
return {
- isCurrentUserProfile: state.userAccount.username === state.profilePage.profile.username,
+ isCurrentUserProfile: state.userAccount.username === state.profilePage.account.username,
currentlyEditingField: state.profilePage.currentlyEditingField,
saveState: state.profilePage.saveState,
savePhotoState: state.profilePage.savePhotoState,
error: state.profilePage.error,
profileImage,
- fullName: state.profilePage.profile.name,
- username: state.profilePage.profile.username,
- userLocation: state.profilePage.profile.country,
- education: state.profilePage.profile.levelOfEducation,
- socialLinks: state.profilePage.profile.socialLinks,
- bio: state.profilePage.profile.bio,
- certificates: state.profilePage.profile.certificates,
+
+ username: state.profilePage.account.username,
+ education: state.profilePage.account.levelOfEducation,
+ socialLinks: state.profilePage.account.socialLinks,
+ bio: state.profilePage.account.bio,
+ certificates: state.profilePage.account.certificates,
accountPrivacy: state.profilePage.preferences.accountPrivacy,
visibility: state.profilePage.preferences.visibility || {},
- yearOfBirth: state.profilePage.profile.yearOfBirth,
- requiresParentalConsent: state.profilePage.profile.requiresParentalConsent,
+ yearOfBirth: state.profilePage.account.yearOfBirth,
+ requiresParentalConsent: state.profilePage.account.requiresParentalConsent,
};
};
@@ -323,10 +218,12 @@ export default connect(
mapStateToProps,
{
fetchProfile,
- saveProfile,
saveProfilePhoto,
deleteProfilePhoto,
- openField,
- closeField,
+ saveProfile,
+ openForm,
+ closeForm,
+ updateVisibilityDraft,
+ updateAccountDraft,
},
)(ProfilePage);
diff --git a/src/components/ProfilePage/Bio.jsx b/src/components/ProfilePage/Bio.jsx
index 423e832..9355df5 100644
--- a/src/components/ProfilePage/Bio.jsx
+++ b/src/components/ProfilePage/Bio.jsx
@@ -1,98 +1,142 @@
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 { Input } from 'reactstrap';
-import EditControls from './elements/EditControls';
+// Components
+import FormControls from './elements/FormControls';
import EditableItemHeader from './elements/EditableItemHeader';
import EmptyContent from './elements/EmptyContent';
import SwitchContent from './elements/SwitchContent';
+// Selectors
+import { editableFormSelector } from '../../selectors/ProfilePageSelector';
-function Bio({
- bio,
- visibility,
- editMode,
- onEdit,
- onChange,
- onSave,
- onCancel,
- onVisibilityChange,
- saveState,
-}) {
- return (
-
-
- onChange('bio', e.target.value)}
- />
- onCancel('bio')}
- onSave={() => onSave('bio')}
- saveState={saveState}
- visibility={visibility}
- onVisibilityChange={e => onVisibilityChange('bio', e.target.value)}
- />
-
- ),
- editable: (
-
- onEdit('bio')}
- showVisibility={Boolean(bio)}
- visibility={visibility}
- />
- {bio}
-
- ),
- empty: (
- onEdit('bio')}>
-
-
- ),
- static: (
-
-
- {bio}
,
-
- ),
- }}
- />
- );
+class Bio extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.handleChange = this.handleChange.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
+ this.handleClose = this.handleClose.bind(this);
+ this.handleOpen = this.handleOpen.bind(this);
+ }
+
+ handleChange(e) {
+ const { name, value } = e.target;
+ this.props.changeHandler(this.props.formId, name, value);
+ }
+
+ handleSubmit(e) {
+ e.preventDefault();
+ this.props.submitHandler(this.props.formId);
+ }
+
+ handleClose() {
+ this.props.closeHandler(this.props.formId);
+ }
+
+ handleOpen() {
+ this.props.openHandler(this.props.formId);
+ }
+
+ render() {
+ const {
+ formId, value, visibility, editMode, saveState, error,
+ } = this.props;
+
+ return (
+
+
+
+
+ {error}
+
+
+
+ ),
+ editable: (
+
+
+ {value}
+
+ ),
+ empty: (
+
+
+
+ ),
+ static: (
+
+
+ {value}
+
+ ),
+ }}
+ />
+ );
+ }
}
Bio.propTypes = {
- editMode: PropTypes.string,
- onEdit: PropTypes.func.isRequired,
- onChange: PropTypes.func.isRequired,
- onSave: PropTypes.func.isRequired,
- onCancel: PropTypes.func.isRequired,
- onVisibilityChange: PropTypes.func.isRequired,
- saveState: PropTypes.string,
- bio: PropTypes.string,
+ // It'd be nice to just set this as a defaultProps...
+ // except the class that comes out on the other side of react-redux's
+ // connect() method won't have it anymore. Static properties won't survive
+ // through the higher order function.
+ formId: PropTypes.string.isRequired,
+
+ // From Selector
+ value: PropTypes.string,
visibility: PropTypes.oneOf(['private', 'all_users']),
+ editMode: PropTypes.oneOf(['editing', 'editable', 'empty', 'static']),
+ saveState: PropTypes.string,
+ error: PropTypes.string,
+
+ // Actions
+ changeHandler: PropTypes.func.isRequired,
+ submitHandler: PropTypes.func.isRequired,
+ closeHandler: PropTypes.func.isRequired,
+ openHandler: PropTypes.func.isRequired,
};
Bio.defaultProps = {
editMode: 'static',
saveState: null,
- bio: null,
+ value: null,
visibility: 'private',
+ error: null,
};
-
-export default Bio;
+export default connect(
+ editableFormSelector,
+ {},
+)(Bio);
diff --git a/src/components/ProfilePage/Certificates.jsx b/src/components/ProfilePage/Certificates.jsx
new file mode 100644
index 0000000..5b545c3
--- /dev/null
+++ b/src/components/ProfilePage/Certificates.jsx
@@ -0,0 +1,168 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Row, Col, Card, CardBody, CardTitle, Button, Form } from 'reactstrap';
+import { connect } from 'react-redux';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDownload } from '@fortawesome/free-solid-svg-icons';
+
+// Components
+import FormControls from './elements/FormControls';
+import EditableItemHeader from './elements/EditableItemHeader';
+import SwitchContent from './elements/SwitchContent';
+
+// Selectors
+import { certificatesSelector } from '../../selectors/ProfilePageSelector';
+
+class Certificates extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.handleChange = this.handleChange.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
+ this.handleClose = this.handleClose.bind(this);
+ this.handleOpen = this.handleOpen.bind(this);
+ }
+
+ handleChange(e) {
+ const { name, value } = e.target;
+ this.props.changeHandler(this.props.formId, name, value);
+ }
+
+ handleSubmit(e) {
+ e.preventDefault();
+ this.props.submitHandler(this.props.formId);
+ }
+
+ handleClose() {
+ this.props.closeHandler(this.props.formId);
+ }
+
+ handleOpen() {
+ this.props.openHandler(this.props.formId);
+ }
+
+ renderCertificate({
+ type: { name }, title, organization, downloadUrl,
+ }) {
+ return (
+
+
+
+
+ {name}
+ {title}
+
+ From
+ {organization}
+
+
+
+
+
+
+ );
+ }
+
+ renderCertificates() {
+ if (this.props.certificates === null) {
+ return null;
+ }
+
+ return (
+ {this.props.certificates.map(certificate => this.renderCertificate(certificate))}
+ );
+ }
+
+ render() {
+ const {
+ formId, visibility, editMode, saveState,
+ } = this.props;
+
+ return (
+
+
+ {this.renderCertificates()}
+
+
+ ),
+ editable: (
+
+
+ {this.renderCertificates()}
+
+ ),
+ empty: (
+
+
+
+ ),
+ static: (
+
+
+ {this.renderCertificates()}
+
+ ),
+ }}
+ />
+ );
+ }
+}
+
+Certificates.propTypes = {
+ // It'd be nice to just set this as a defaultProps...
+ // except the class that comes out on the other side of react-redux's
+ // connect() method won't have it anymore. Static properties won't survive
+ // through the higher order function.
+ formId: PropTypes.string.isRequired,
+
+ // From Selector
+ certificates: PropTypes.arrayOf(PropTypes.shape({
+ title: PropTypes.string,
+ })),
+ visibility: PropTypes.oneOf(['private', 'all_users']),
+ editMode: PropTypes.oneOf(['editing', 'editable', 'empty', 'static']),
+ saveState: PropTypes.string,
+
+ // Actions
+ changeHandler: PropTypes.func.isRequired,
+ submitHandler: PropTypes.func.isRequired,
+ closeHandler: PropTypes.func.isRequired,
+ openHandler: PropTypes.func.isRequired,
+};
+
+Certificates.defaultProps = {
+ editMode: 'static',
+ saveState: null,
+ visibility: 'private',
+ certificates: null,
+};
+
+export default connect(
+ certificatesSelector,
+ {},
+)(Certificates);
diff --git a/src/components/ProfilePage/Country.jsx b/src/components/ProfilePage/Country.jsx
new file mode 100644
index 0000000..a41a4d8
--- /dev/null
+++ b/src/components/ProfilePage/Country.jsx
@@ -0,0 +1,143 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form, FormFeedback, FormGroup, Input, Label } from 'reactstrap';
+import { connect } from 'react-redux';
+
+// Components
+import FormControls from './elements/FormControls';
+import EditableItemHeader from './elements/EditableItemHeader';
+import EmptyContent from './elements/EmptyContent';
+import SwitchContent from './elements/SwitchContent';
+
+// Constants
+import { ALL_COUNTRIES } from '../../constants/countries';
+
+// Selectors
+import { editableFormSelector } from '../../selectors/ProfilePageSelector';
+
+class Country extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.handleChange = this.handleChange.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
+ this.handleClose = this.handleClose.bind(this);
+ this.handleOpen = this.handleOpen.bind(this);
+ }
+
+ handleChange(e) {
+ const {
+ name,
+ value,
+ } = e.target;
+ this.props.changeHandler(this.props.formId, name, value);
+ }
+
+ handleSubmit(e) {
+ e.preventDefault();
+ this.props.submitHandler(this.props.formId);
+ }
+
+ handleClose() {
+ this.props.closeHandler(this.props.formId);
+ }
+
+ handleOpen() {
+ this.props.openHandler(this.props.formId);
+ }
+
+ render() {
+ const {
+ formId, value, visibility, editMode, saveState, error,
+ } = this.props;
+
+ return (
+
+
+
+
+ {Object.keys(ALL_COUNTRIES).map(key => (
+
+ ))}
+
+ {error}
+
+
+
+ ),
+ editable: (
+
+
+ {ALL_COUNTRIES[value]}
+
+ ),
+ empty: Add location,
+ static: (
+
+
+ {ALL_COUNTRIES[value]}
+
+ ),
+ }}
+ />
+ );
+ }
+}
+
+Country.propTypes = {
+ // It'd be nice to just set this as a defaultProps...
+ // except the class that comes out on the other side of react-redux's
+ // connect() method won't have it anymore. Static properties won't survive
+ // through the higher order function.
+ formId: PropTypes.string.isRequired,
+
+ // From Selector
+ value: PropTypes.string,
+ visibility: PropTypes.oneOf(['private', 'all_users']),
+ editMode: PropTypes.oneOf(['editing', 'editable', 'empty', 'static']),
+ saveState: PropTypes.string,
+ error: PropTypes.string,
+
+ // Actions
+ changeHandler: PropTypes.func.isRequired,
+ submitHandler: PropTypes.func.isRequired,
+ closeHandler: PropTypes.func.isRequired,
+ openHandler: PropTypes.func.isRequired,
+};
+
+Country.defaultProps = {
+ editMode: 'static',
+ saveState: null,
+ value: null,
+ visibility: 'private',
+ error: null,
+};
+
+export default connect(
+ editableFormSelector,
+ {},
+)(Country);
diff --git a/src/components/ProfilePage/Education.jsx b/src/components/ProfilePage/Education.jsx
index 94cb6e1..86e7f75 100644
--- a/src/components/ProfilePage/Education.jsx
+++ b/src/components/ProfilePage/Education.jsx
@@ -1,98 +1,143 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { Input } from 'reactstrap';
+import { Form, FormFeedback, FormGroup, Input, Label } from 'reactstrap';
+import { connect } from 'react-redux';
-import EditControls from './elements/EditControls';
+// Components
+import FormControls from './elements/FormControls';
import EditableItemHeader from './elements/EditableItemHeader';
import EmptyContent from './elements/EmptyContent';
import SwitchContent from './elements/SwitchContent';
+// Constants
import EDUCATION from '../../constants/education';
+// Selectors
+import { editableFormSelector } from '../../selectors/ProfilePageSelector';
-function Education({
- education,
- visibility,
- editMode,
- onEdit,
- onChange,
- onSave,
- onCancel,
- onVisibilityChange,
- saveState,
-}) {
- return (
-
-
- onChange('education', e.target.value)}
- >
- {Object.keys(EDUCATION).map(key => (
-
- ))}
-
- onCancel('education')}
- onSave={() => onSave('education')}
- saveState={saveState}
- visibility={visibility}
- onVisibilityChange={e => onVisibilityChange('education', e.target.value)}
- />
-
- ),
- editable: (
-
- onEdit('education')}
- showVisibility={Boolean(education)}
- visibility={visibility}
- />
- {EDUCATION[education]}
-
- ),
- empty: (
- onEdit('education')}>Add education
- ),
- static: (
-
-
- {EDUCATION[education]}
-
- ),
- }}
- />
- );
+class Education extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.handleChange = this.handleChange.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
+ this.handleClose = this.handleClose.bind(this);
+ this.handleOpen = this.handleOpen.bind(this);
+ }
+
+ handleChange(e) {
+ const {
+ name,
+ value,
+ } = e.target;
+ this.props.changeHandler(this.props.formId, name, value);
+ }
+
+ handleSubmit(e) {
+ e.preventDefault();
+ this.props.submitHandler(this.props.formId);
+ }
+
+ handleClose() {
+ this.props.closeHandler(this.props.formId);
+ }
+
+ handleOpen() {
+ this.props.openHandler(this.props.formId);
+ }
+
+ render() {
+ const {
+ formId, value, visibility, editMode, saveState, error,
+ } = this.props;
+
+ return (
+
+
+
+
+ {Object.keys(EDUCATION).map(key => (
+
+ ))}
+
+ {error}
+
+
+
+ ),
+ editable: (
+
+
+ {EDUCATION[value]}
+
+ ),
+ empty: Add education,
+ static: (
+
+
+ {EDUCATION[value]}
+
+ ),
+ }}
+ />
+ );
+ }
}
Education.propTypes = {
- editMode: PropTypes.string,
- onEdit: PropTypes.func.isRequired,
- onChange: PropTypes.func.isRequired,
- onSave: PropTypes.func.isRequired,
- onCancel: PropTypes.func.isRequired,
- onVisibilityChange: PropTypes.func.isRequired,
- saveState: PropTypes.string,
- education: PropTypes.string,
+ // It'd be nice to just set this as a defaultProps...
+ // except the class that comes out on the other side of react-redux's
+ // connect() method won't have it anymore. Static properties won't survive
+ // through the higher order function.
+ formId: PropTypes.string.isRequired,
+
+ // From Selector
+ value: PropTypes.string,
visibility: PropTypes.oneOf(['private', 'all_users']),
+ editMode: PropTypes.oneOf(['editing', 'editable', 'empty', 'static']),
+ saveState: PropTypes.string,
+ error: PropTypes.string,
+
+ // Actions
+ changeHandler: PropTypes.func.isRequired,
+ submitHandler: PropTypes.func.isRequired,
+ closeHandler: PropTypes.func.isRequired,
+ openHandler: PropTypes.func.isRequired,
};
Education.defaultProps = {
editMode: 'static',
saveState: null,
- education: null,
+ value: null,
visibility: 'private',
+ error: null,
};
-
-export default Education;
+export default connect(
+ editableFormSelector,
+ {},
+)(Education);
diff --git a/src/components/ProfilePage/FullName.jsx b/src/components/ProfilePage/FullName.jsx
deleted file mode 100644
index c434837..0000000
--- a/src/components/ProfilePage/FullName.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Input } from 'reactstrap';
-
-import EditControls from './elements/EditControls';
-import EditableItemHeader from './elements/EditableItemHeader';
-import EmptyContent from './elements/EmptyContent';
-import SwitchContent from './elements/SwitchContent';
-
-
-function FullName({
- fullName,
- visibility,
- editMode,
- onEdit,
- onChange,
- onSave,
- onCancel,
- onVisibilityChange,
- saveState,
-}) {
- return (
-
-
- onChange('fullName', e.target.value)}
- />
- onCancel('fullName')}
- onSave={() => onSave('fullName')}
- saveState={saveState}
- visibility={visibility}
- onVisibilityChange={e => onVisibilityChange('fullName', e.target.value)}
- />
-
- ),
- editable: (
-
- onEdit('fullName')}
- showVisibility={Boolean(fullName)}
- visibility={visibility}
- />
- {fullName}
-
- ),
- empty: (
- onEdit('fullName')}>Add name
- ),
- static: (
-
-
- {fullName}
-
- ),
- }}
- />
- );
-}
-
-
-FullName.propTypes = {
- editMode: PropTypes.string,
- onEdit: PropTypes.func.isRequired,
- onChange: PropTypes.func.isRequired,
- onSave: PropTypes.func.isRequired,
- onCancel: PropTypes.func.isRequired,
- onVisibilityChange: PropTypes.func.isRequired,
- saveState: PropTypes.string,
- fullName: PropTypes.string,
- visibility: PropTypes.oneOf(['private', 'all_users']),
-};
-
-FullName.defaultProps = {
- editMode: 'static',
- saveState: null,
- fullName: null,
- visibility: 'private',
-};
-
-
-export default FullName;
diff --git a/src/components/ProfilePage/MyCertificates.jsx b/src/components/ProfilePage/MyCertificates.jsx
deleted file mode 100644
index cf632be..0000000
--- a/src/components/ProfilePage/MyCertificates.jsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { Row, Col, Card, CardBody, CardTitle, CardText, Button } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faDownload } from '@fortawesome/free-solid-svg-icons';
-
-import EditControls from './elements/EditControls';
-import EditableItemHeader from './elements/EditableItemHeader';
-import SwitchContent from './elements/SwitchContent';
-
-function MyCertificates({
- certificates,
- visibility,
- editMode,
- onEdit,
- onSave,
- onCancel,
- onVisibilityChange,
- saveState,
-}) {
- const renderCertificates = () => {
- if (!certificates) return null;
-
- return (
-
- {certificates.map(({
- type: { key, name }, // eslint-disable-line no-unused-vars
- title,
- organization,
- downloadUrl,
- }) => (
-
-
-
-
- {name}
- {title}
-
-
- From
- {organization}
-
-
-
-
-
-
-
- ))}
-
- );
- };
-
- return (
-
-
- {renderCertificates()}
- onCancel('certificates')}
- onSave={() => onSave('certificates')}
- saveState={saveState}
- visibility={visibility}
- onVisibilityChange={e => onVisibilityChange('certificates', e.target.value)}
- />
-
- ),
- editable: (
-
- onEdit('certificates')}
- showVisibility={Boolean(certificates)}
- visibility={visibility}
- />
- {renderCertificates()}
-
- ),
- empty: (
-
-
-
- ),
- static: (
-
-
- {renderCertificates()}
-
- ),
- }}
- />
- );
-}
-
-
-MyCertificates.propTypes = {
- editMode: PropTypes.string,
- onEdit: PropTypes.func.isRequired,
- onSave: PropTypes.func.isRequired,
- onCancel: PropTypes.func.isRequired,
- onVisibilityChange: PropTypes.func.isRequired,
- saveState: PropTypes.string,
- certificates: PropTypes.arrayOf(PropTypes.shape({
- title: PropTypes.string,
- })),
- visibility: PropTypes.oneOf(['private', 'all_users']),
-};
-
-MyCertificates.defaultProps = {
- editMode: 'static',
- saveState: null,
- certificates: null,
- visibility: 'private',
-};
-
-
-export default MyCertificates;
diff --git a/src/components/ProfilePage/Name.jsx b/src/components/ProfilePage/Name.jsx
new file mode 100644
index 0000000..e7db1d7
--- /dev/null
+++ b/src/components/ProfilePage/Name.jsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form, FormFeedback, FormGroup, FormText, Input, Label } from 'reactstrap';
+import { connect } from 'react-redux';
+
+// Components
+import FormControls from './elements/FormControls';
+import EditableItemHeader from './elements/EditableItemHeader';
+import EmptyContent from './elements/EmptyContent';
+import SwitchContent from './elements/SwitchContent';
+
+// Selectors
+import { editableFormSelector } from '../../selectors/ProfilePageSelector';
+
+class Name extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.handleChange = this.handleChange.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
+ this.handleClose = this.handleClose.bind(this);
+ this.handleOpen = this.handleOpen.bind(this);
+ }
+
+ handleChange(e) {
+ const {
+ name,
+ value,
+ } = e.target;
+ this.props.changeHandler(this.props.formId, name, value);
+ }
+
+ handleSubmit(e) {
+ e.preventDefault();
+ this.props.submitHandler(this.props.formId);
+ }
+
+ handleClose() {
+ this.props.closeHandler(this.props.formId);
+ }
+
+ handleOpen() {
+ this.props.openHandler(this.props.formId);
+ }
+
+ render() {
+ const {
+ formId, value, visibility, editMode, saveState, error,
+ } = this.props;
+
+ return (
+
+
+
+
+
+ This is the name that appears in your account and on your certificates.
+
+ {error}
+
+
+
+ ),
+ editable: (
+
+
+ {value}
+
+ ),
+ empty: Add name,
+ static: (
+
+
+ {value}
+
+ ),
+ }}
+ />
+ );
+ }
+}
+
+Name.propTypes = {
+ // It'd be nice to just set this as a defaultProps...
+ // except the class that comes out on the other side of react-redux's
+ // connect() method won't have it anymore. Static properties won't survive
+ // through the higher order function.
+ formId: PropTypes.string.isRequired,
+
+ // From Selector
+ value: PropTypes.string,
+ visibility: PropTypes.oneOf(['private', 'all_users']),
+ editMode: PropTypes.oneOf(['editing', 'editable', 'empty', 'static']),
+ saveState: PropTypes.string,
+ error: PropTypes.string,
+
+ // Actions
+ changeHandler: PropTypes.func.isRequired,
+ submitHandler: PropTypes.func.isRequired,
+ closeHandler: PropTypes.func.isRequired,
+ openHandler: PropTypes.func.isRequired,
+};
+
+Name.defaultProps = {
+ editMode: 'static',
+ saveState: null,
+ value: null,
+ visibility: 'private',
+ error: null,
+};
+
+export default connect(
+ editableFormSelector,
+ {},
+)(Name);
diff --git a/src/components/ProfilePage/SocialLinks.jsx b/src/components/ProfilePage/SocialLinks.jsx
index 1b9efa4..7d7aa20 100644
--- a/src/components/ProfilePage/SocialLinks.jsx
+++ b/src/components/ProfilePage/SocialLinks.jsx
@@ -1,64 +1,80 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { Input } from 'reactstrap';
+import { Form, Input, FormFeedback } from 'reactstrap';
+import { connect } from 'react-redux';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTwitter, faFacebook, faLinkedin } from '@fortawesome/free-brands-svg-icons';
-import EditControls from './elements/EditControls';
+// Components
+import FormControls from './elements/FormControls';
import EditableItemHeader from './elements/EditableItemHeader';
-import SwitchContent from './elements/SwitchContent';
import EmptyContent from './elements/EmptyContent';
+import SwitchContent from './elements/SwitchContent';
-const brandIcons = {
- facebook: faFacebook,
- twitter: faTwitter,
- linkedin: faLinkedin,
+// Selectors
+import { editableFormSelector } from '../../selectors/ProfilePageSelector';
+
+const platformDisplayInfo = {
+ facebook: {
+ icon: faFacebook,
+ name: 'Facebook',
+ },
+ twitter: {
+ icon: faTwitter,
+ name: 'Twitter',
+ },
+ linkedin: {
+ icon: faLinkedin,
+ name: 'LinkedIn',
+ },
};
-
class SocialLinks extends React.Component {
constructor(props) {
super(props);
- this.state = {};
- this.onSave = this.onSave.bind(this);
- this.onEdit = this.onEdit.bind(this);
- this.onInputChange = this.onInputChange.bind(this);
+
+ this.handleChange = this.handleChange.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
+ this.handleClose = this.handleClose.bind(this);
+ this.handleOpen = this.handleOpen.bind(this);
}
- onSave() {
- const values = this.props.platforms.filter(({ key }) => typeof this.state[key] !== 'undefined').map(({ key }) => ({
- platform: key,
- socialLink: this.state[key],
- }));
+ handleChange(e) {
+ const {
+ name,
+ value,
+ } = e.target;
- this.props.onSave('socialLinks', values);
+ if (name !== 'visibility') {
+ const updatedList = this.props.committedValue.map((socialLink) => {
+ if (socialLink.platform === name) {
+ return { platform: name, social_link: value };
+ }
+ return socialLink;
+ });
+ this.props.changeHandler(this.props.formId, 'socialLinks', updatedList);
+ } else {
+ this.props.changeHandler(this.props.formId, name, value);
+ }
}
- onEdit() {
- this.props.onEdit('socialLinks');
+ handleSubmit(e) {
+ e.preventDefault();
+ this.props.submitHandler(this.props.formId);
}
- onInputChange(platform, value) {
- this.setState({ [platform]: value });
- this.props.onChange('socialLinks', this.state);
+ handleClose() {
+ this.props.closeHandler(this.props.formId);
+ }
+
+ handleOpen() {
+ this.props.openHandler(this.props.formId);
}
render() {
const {
- platforms,
- socialLinks,
- editMode,
- visibility,
- saveState,
- onVisibilityChange,
- onCancel,
+ formId, value: values, visibility, editMode, saveState, error,
} = this.props;
- const { onInputChange, onEdit } = this;
- const socialLinksMap = socialLinks.reduce((acc, { platform, socialLink }) => {
- acc[platform] = socialLink;
- return acc;
- }, {});
- const isEmpty = socialLinks && socialLinks.length > 0;
return (
- {platforms.map(({ key, name }) => (
+ {values.map(({ platform }) => (
))}
@@ -80,10 +96,10 @@ class SocialLinks extends React.Component {
- {socialLinks.map(({ platform, socialLink }) => (
+ {values.map(({ platform, social_link: socialLink }) => (
@@ -96,45 +112,46 @@ class SocialLinks extends React.Component {
- {platforms.map(({ key, name }) => (
+ {values.map(({ platform, social_link: socialLink }) => (
))}
),
editing: (
-
+
+
),
}}
/>
@@ -143,42 +160,51 @@ class SocialLinks extends React.Component {
}
SocialLinks.propTypes = {
- socialLinks: PropTypes.arrayOf(PropTypes.shape({
+ // It'd be nice to just set this as a defaultProps...
+ // except the class that comes out on the other side of react-redux's
+ // connect() method won't have it anymore. Static properties won't survive
+ // through the higher order function.
+ formId: PropTypes.string.isRequired,
+
+ // From Selector
+ value: PropTypes.arrayOf(PropTypes.shape({
platform: PropTypes.string,
socialLink: PropTypes.string,
})),
- platforms: PropTypes.arrayOf(PropTypes.shape({
- key: PropTypes.string,
- name: PropTypes.string,
+ committedValue: PropTypes.arrayOf(PropTypes.shape({
+ platform: PropTypes.string,
+ socialLink: PropTypes.string,
})),
visibility: PropTypes.oneOf(['private', 'all_users']),
- editMode: PropTypes.string,
- onEdit: PropTypes.func.isRequired,
- onChange: PropTypes.func.isRequired,
- onSave: PropTypes.func.isRequired,
- onCancel: PropTypes.func.isRequired,
- onVisibilityChange: PropTypes.func.isRequired,
+ editMode: PropTypes.oneOf(['editing', 'editable', 'empty', 'static']),
saveState: PropTypes.string,
+ error: PropTypes.string,
+
+ // Actions
+ changeHandler: PropTypes.func.isRequired,
+ submitHandler: PropTypes.func.isRequired,
+ closeHandler: PropTypes.func.isRequired,
+ openHandler: PropTypes.func.isRequired,
};
+
SocialLinks.defaultProps = {
- socialLinks: [],
- platforms: [
- { key: 'twitter', name: 'Twitter' },
- { key: 'linkedin', name: 'LinkedIn' },
- { key: 'facebook', name: 'Facebook' },
- ],
- visibility: 'private',
editMode: 'static',
saveState: null,
+ value: [],
+ committedValue: [],
+ visibility: 'private',
+ error: null,
};
-export default SocialLinks;
-
+export default connect(
+ editableFormSelector,
+ {},
+)(SocialLinks);
function SocialLink({ url, name, platform }) {
return (
-
+
{name}
);
@@ -197,7 +223,7 @@ function EditableListItem({
onClickEmptyContent,
name,
}) {
- const linkDisplay = url != null ?
+ const linkDisplay = url ?
:
Add {name};
@@ -219,29 +245,36 @@ EditableListItem.defaultProps = {
function EditingListItem({
platform,
name,
- defaultValue,
+ value,
onChange,
+ error,
}) {
return (
{name}
onChange(platform, e.target.value)}
+ name={platform}
+ value={value}
+ onChange={onChange}
+ invalid={error != null}
/>
+ {error}
);
}
EditingListItem.propTypes = {
platform: PropTypes.string.isRequired,
- defaultValue: PropTypes.string,
+ value: PropTypes.string,
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
+ error: PropTypes.string,
};
+
EditingListItem.defaultProps = {
- defaultValue: null,
+ value: null,
+ error: null,
};
diff --git a/src/components/ProfilePage/UserLocation.jsx b/src/components/ProfilePage/UserLocation.jsx
deleted file mode 100644
index 9f69ab7..0000000
--- a/src/components/ProfilePage/UserLocation.jsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Input } from 'reactstrap';
-
-import EditControls from './elements/EditControls';
-import EditableItemHeader from './elements/EditableItemHeader';
-import EmptyContent from './elements/EmptyContent';
-import SwitchContent from './elements/SwitchContent';
-
-import { ALL_COUNTRIES } from '../../constants/countries';
-
-
-function UserLocation({
- userLocation,
- visibility,
- editMode,
- onEdit,
- onChange,
- onSave,
- onCancel,
- onVisibilityChange,
- saveState,
-}) {
- return (
-
-
- onChange('userLocation', e.target.value)}
- >
- {Object.keys(ALL_COUNTRIES).map(key => (
-
- ))}
-
- onCancel('userLocation')}
- onSave={() => onSave('userLocation')}
- saveState={saveState}
- visibility={visibility}
- onVisibilityChange={e => onVisibilityChange('userLocation', e.target.value)}
- />
-
- ),
- editable: (
-
- onEdit('userLocation')}
- showVisibility={Boolean(userLocation)}
- visibility={visibility}
- />
- {ALL_COUNTRIES[userLocation]}
-
- ),
- empty: (
- onEdit('userLocation')}>Add location
- ),
- static: (
-
-
- {ALL_COUNTRIES[userLocation]}
-
- ),
- }}
- />
- );
-}
-
-UserLocation.propTypes = {
- editMode: PropTypes.string,
- onEdit: PropTypes.func.isRequired,
- onChange: PropTypes.func.isRequired,
- onSave: PropTypes.func.isRequired,
- onCancel: PropTypes.func.isRequired,
- onVisibilityChange: PropTypes.func.isRequired,
- saveState: PropTypes.string,
- userLocation: PropTypes.string,
- visibility: PropTypes.oneOf(['private', 'all_users']),
-};
-
-UserLocation.defaultProps = {
- editMode: 'static',
- saveState: null,
- userLocation: null,
- visibility: 'private',
-};
-
-
-export default UserLocation;
diff --git a/src/components/ProfilePage/elements/AsyncActionButton.jsx b/src/components/ProfilePage/elements/AsyncActionButton.jsx
index a1df039..2dd7e52 100644
--- a/src/components/ProfilePage/elements/AsyncActionButton.jsx
+++ b/src/components/ProfilePage/elements/AsyncActionButton.jsx
@@ -11,6 +11,7 @@ function AsyncActionButton({
style,
variant,
labels,
+ type,
}) {
const renderIcon = () => {
if (variant === 'error') return ;
@@ -30,6 +31,7 @@ function AsyncActionButton({
return (