Add state wrapper container to UserAccount component.

openedx · Feb 7, 2019 · 7f04300 · 7f04300
1 parent abba97d
commit 7f04300
Show file tree

Hide file tree

Showing 15 changed files with 23,569 additions and 58 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@edx/edx-bootstrap": "^0.4.3",
-    "@edx/frontend-auth": "^1.2.1",
+    "@edx/frontend-auth": "^2.0.0",
     "@edx/frontend-component-footer": "^2.0.0",
     "@edx/frontend-component-site-header": "^1.0.1",
     "@edx/paragon": "^3.8.3",
@@ -34,6 +34,7 @@
     "email-prop-type": "^1.1.5",
     "font-awesome": "^4.7.0",
     "history": "^4.7.2",
+    "i18n-iso-countries": "^3.7.8",
     "prop-types": "^15.5.10",
     "query-string": "^5.1.1",
     "react": "^16.2.0",

diff --git a/src/components/UserAccount/Bio.jsx b/src/components/UserAccount/Bio.jsx
@@ -35,7 +35,17 @@ function Bio({
       renderEditing={(state, setState) => ( // eslint-disable-line no-unused-vars
         <React.Fragment>
           <h3>{title}</h3>
-          <Input defaultValue={bio} type="textarea" name="text" id="exampleText" />
+          <Input
+            defaultValue={state.bio}
+            type="textarea"
+            name="text"
+            id="exampleText"
+            onChange={(e) => {
+              setState({
+                bio: e.target.value,
+              });
+            }}
+          />
         </React.Fragment>
       )}
     />

diff --git a/src/components/UserAccount/EditableContent.jsx b/src/components/UserAccount/EditableContent.jsx
@@ -13,7 +13,7 @@ class EditableContent extends React.Component {
 
     this.state = {
       height: null,
-      values: props.values, // maybe should do this on change to editing mode not on mount?
+      values: null, // maybe should do this on change to editing mode not on mount?
       containerRef: this.container,
       // Mirroring props in state as described here:
       // https://github.com/reactjs/rfcs/blob/master/text/0006-static-lifecycle-methods.md#state-derived-from-propsstate
@@ -111,11 +111,13 @@ class EditableContent extends React.Component {
 
         <CSSTransition in={mode === 'editing'} {...transitionProps}>
           <div ref={isEditing ? this.content : null} className="editable-content">
-            {renderEditing(this.state.values, this.setValueState)}
+            {renderEditing(this.state.values || this.props.values, this.setValueState)}
             <EditControls
               onCancel={this.onClickCancel}
               onSave={this.onClickSave}
-              visibility={this.state.values.visibility}
+              visibility={
+                this.state.values ? this.state.values.visibility : this.props.values.visibility
+              }
               onVisibilityChange={e => this.setValueState({
                 visibility: e.target.value,
               })}

diff --git a/src/components/UserAccount/Education.jsx b/src/components/UserAccount/Education.jsx
@@ -6,17 +6,7 @@ import EditableContent from './EditableContent';
 import EditButton from './EditButton';
 import Visibility from './Visibility';
 
-const valueMap = {
-  p: 'Doctorate',
-  m: 'Master’s or professional degree',
-  b: 'Bachelor’s degree',
-  a: 'Associate degree',
-  hs: 'Secondary/high school',
-  jhs: 'Junior secondary/junior high/middle school',
-  el: 'Elementary/primary school',
-  none: 'No formal education',
-  other: 'Other education',
-};
+import EDUCATION from '../../constants/education';
 
 function Education({ education, visibility, ...editableContentProps }) {
   return (
@@ -29,32 +19,31 @@ function Education({ education, visibility, ...editableContentProps }) {
       renderStatic={() => (
         <React.Fragment>
           <h3>Education</h3>
-          <p>{education.name}</p>
+          <p>{EDUCATION[education]}</p>
         </React.Fragment>
       )}
       renderEditable={onClickEdit => (
         <React.Fragment>
           <h3>Education <EditButton onClick={onClickEdit} /> <br /><Visibility to="Everyone" /></h3>
-          <p>{education.name}</p>
+          <p>{EDUCATION[education]}</p>
         </React.Fragment>
       )}
       renderEditing={(state, setState) => (
         <React.Fragment>
           <h3>Education</h3>
           <Input
-            value={state.education.value}
-            onChange={e => setState({
-              education: {
-                value: e.target.value,
-                name: valueMap[e.target.value],
-              },
-            })}
+            value={state.education}
+            onChange={(e) => {
+              setState({
+                education: e.target.value,
+              });
+            }}
             className="w-100"
             type="select"
             name="select"
           >
-            {Object.keys(valueMap).map(educationKey => (
-              <option key={educationKey} value={educationKey}>{valueMap[educationKey]}</option>
+            {Object.keys(EDUCATION).map(educationKey => (
+              <option key={educationKey} value={educationKey}>{EDUCATION[educationKey]}</option>
             ))}
           </Input>
         </React.Fragment>

diff --git a/src/components/UserAccount/SocialLinks.jsx b/src/components/UserAccount/SocialLinks.jsx
@@ -8,17 +8,17 @@ import EditButton from './EditButton';
 import Visibility from './Visibility';
 
 function SocialLinks({
-  links,
+  socialLinks,
   visibility,
   ...editableContentProps
 }) {
-  const linkKeys = Object.keys(links);
+  const linkKeys = Object.keys(socialLinks);
 
   return (
     <EditableContent
       {...editableContentProps}
       values={{
-        links,
+        socialLinks,
         visibility,
       }}
       renderStatic={() => (
@@ -27,12 +27,12 @@ function SocialLinks({
           <dl>
             {linkKeys.map(linkName => (
               <React.Fragment key={linkName}>
-                <dt>{links[linkName].title}</dt>
+                <dt>{socialLinks[linkName].title}</dt>
                 <dd>
                   <Hyperlink
                     className="word-break-all"
-                    destination={links[linkName].url}
-                    content={links[linkName].display}
+                    destination={socialLinks[linkName].url}
+                    content={socialLinks[linkName].display}
                   />
                 </dd>
               </React.Fragment>
@@ -46,12 +46,12 @@ function SocialLinks({
           <dl>
             {linkKeys.map(linkName => (
               <React.Fragment key={linkName}>
-                <dt>{links[linkName].title}</dt>
+                <dt>{socialLinks[linkName].title}</dt>
                 <dd>
                   <Hyperlink
                     className="word-break-all"
-                    destination={links[linkName].url}
-                    content={links[linkName].display}
+                    destination={socialLinks[linkName].url}
+                    content={socialLinks[linkName].display}
                   />
                 </dd>
               </React.Fragment>
@@ -65,9 +65,20 @@ function SocialLinks({
           <dl>
             {linkKeys.map(linkName => (
               <React.Fragment key={linkName}>
-                <dt>{links[linkName].title}</dt>
+                <dt>{socialLinks[linkName].title}</dt>
                 <dd>
-                  <Input defaultValue={links[linkName].url} type="text" name="text" id="exampleText" />
+                  <Input
+                    defaultValue={state.socialLinks[linkName].url}
+                    type="text"
+                    name={linkName}
+                    id="exampleText"
+                    onChange={(e) => {
+                      const newState = { ...state.socialLinks };
+                      newState[e.target.name].url = e.target.value;
+                      newState[e.target.name].display = e.target.value;
+                      setState({ socialLinks: newState });
+                    }}
+                  />
                 </dd>
               </React.Fragment>
             ))}
@@ -82,7 +93,7 @@ function SocialLinks({
 export default SocialLinks;
 
 SocialLinks.propTypes = {
-  links: PropTypes.shape({
+  socialLinks: PropTypes.shape({
     linkedIn: PropTypes.shape({
       title: PropTypes.string,
       url: PropTypes.string,
@@ -103,6 +114,6 @@ SocialLinks.propTypes = {
 };
 
 SocialLinks.defaultProps = {
-  links: {},
+  socialLinks: {},
   visibility: 'Everyone',
 };
diff --git a/src/components/UserAccount/UserLocation.jsx b/src/components/UserAccount/UserLocation.jsx
@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'reactstrap';
 
+import { ALL_COUNTRIES } from '../../constants/countries';
 import EditableContent from './EditableContent';
 import EditButton from './EditButton';
 
-
 function UserLocation({
   userLocation,
   visibility,
@@ -30,7 +30,21 @@ function UserLocation({
       )}
       renderEditing={(state, setState) => ( // eslint-disable-line no-unused-vars
         <React.Fragment>
-          <Input defaultValue={userLocation} type="text" name="text" id="exampleText" />
+          <Input
+            value={state.userLocation}
+            onChange={(e) => {
+              setState({
+                userLocation: e.target.value,
+              });
+            }}
+            className="w-100"
+            type="select"
+            name="select"
+          >
+            {Object.keys(ALL_COUNTRIES).map(countryKey => (
+              <option value={countryKey}>{ALL_COUNTRIES[countryKey]}</option>
+            ))}
+          </Input>
         </React.Fragment>
       )}
     />

diff --git a/src/components/UserAccount/index.jsx b/src/components/UserAccount/index.jsx
@@ -36,7 +36,9 @@ class UserAccount extends React.Component {
   }
 
   onSave(fieldName, values) {
-    console.log('Save', fieldName, values); // eslint-disable-line
+    const userAccountData = {};
+    userAccountData[fieldName] = values[fieldName];
+    this.props.saveUserAccount(this.props.username, userAccountData, values.visibility);
   }
 
   render() {
@@ -46,9 +48,8 @@ class UserAccount extends React.Component {
       displayName,
       username,
       userLocation,
-      firstName,
       education,
-      links,
+      socialLinks,
       bio,
       certificates,
       courses,
@@ -80,7 +81,7 @@ class UserAccount extends React.Component {
         <SocialLinks
           name="socialLinks"
           mode={getEditMode('socialLinks')}
-          links={links}
+          socialLinks={socialLinks}
           visibility="Everyone"
           {...commonProps}
         />
@@ -139,7 +140,7 @@ class UserAccount extends React.Component {
               <Bio
                 name="bio"
                 mode={getEditMode('bio')}
-                title={`About ${firstName}`}
+                title={`About ${displayName}`}
                 bio={bio}
                 visibility="Everyone"
                 {...commonProps}
@@ -165,12 +166,11 @@ UserAccount.propTypes = {
   displayName: PropTypes.string,
   username: PropTypes.string,
   userLocation: PropTypes.string,
-  firstName: PropTypes.string,
   education: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.string,
   }),
-  links: PropTypes.shape({
+  socialLinks: PropTypes.shape({
     linkedIn: PropTypes.shape({
       title: PropTypes.string,
       url: PropTypes.string,
@@ -195,6 +195,7 @@ UserAccount.propTypes = {
   courses: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string,
   })),
+  saveUserAccount: PropTypes.func,
 };
 
 UserAccount.defaultProps = {
@@ -203,12 +204,11 @@ UserAccount.defaultProps = {
   displayName: 'Hermione Granger',
   username: 'itslevioooosa20',
   userLocation: 'London, UK',
-  firstName: 'Hermione',
   education: {
     name: 'Bachelor’s Degree',
     value: 'b',
   },
-  links: {
+  socialLinks: {
     linkedIn: {
       title: 'Linked In',
       url: 'https://www.linkedin.com/in/hermione-granger',
@@ -229,4 +229,5 @@ UserAccount.defaultProps = {
   bio: 'These are some words about me and who I am as a person.',
   certificates: [{ title: 'Certificate 1' }, { title: 'Certificate 2' }, { title: 'Certificate 3' }],
   courses: [{ title: 'Course ' }, { title: 'Course 2' }, { title: 'Course 3' }],
+  saveUserAccount: null,
 };
diff --git a/src/constants/countries.js b/src/constants/countries.js
@@ -0,0 +1,7 @@
+import COUNTRIES from 'i18n-iso-countries';
+
+COUNTRIES.registerLocale(require('i18n-iso-countries/langs/en.json'));
+
+const ALL_COUNTRIES = COUNTRIES.getNames('en');
+
+export { ALL_COUNTRIES, COUNTRIES };
diff --git a/src/constants/education.js b/src/constants/education.js
@@ -0,0 +1,13 @@
+const EDUCATION = {
+  p: 'Doctorate',
+  m: "Master's or professional degree",
+  b: "Bachelor's Degree",
+  a: "Associate's degree",
+  hs: 'Secondary/high school',
+  jhs: 'Junior secondary/junior high/middle school',
+  el: 'Elementary/primary school',
+  none: 'No formal education',
+  o: 'Other education',
+};
+
+export default EDUCATION;
diff --git a/src/constants/social.js b/src/constants/social.js
@@ -0,0 +1,34 @@
+const SOCIAL = {
+  linkedin: {
+    title: 'Linked In',
+  },
+  twitter: {
+    title: 'Twitter',
+  },
+  facebook: {
+    title: 'Facebook',
+  },
+};
+
+const getSocialLinks = (socialLinksState) => {
+  const socialLinks = {};
+  if (socialLinksState) {
+    socialLinksState.forEach((link) => {
+      const socialLinkUrl = link.socialLink;
+      if (socialLinkUrl) {
+        socialLinks[link.platform] = {
+          ...SOCIAL[link.platform],
+          url: link.socialLink,
+          display: link.socialLink,
+        };
+      }
+    });
+  }
+
+  return socialLinks;
+};
+
+export {
+  getSocialLinks,
+  SOCIAL,
+};