Reuse userAccount data for profile if possible. (#142)

* Removing rename of “levelOfEducation” to “education” It caused the user account and profile data to diverge, and we want to use the same data for both at the moment. * Reuse userAccount data for profile if possible. Don’t make a separate request to fetch the user profile if we’ve already gotten it for the current user.
2019-04-10 12:06:50 -04:00
parent f150842f6d
commit a51f08b065
15 changed files with 247 additions and 134 deletions
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -16,6 +16,7 @@ import ConnectedProfilePage from './ProfilePage';
 import FooterLogo from '../../assets/edx-footer.png';
 import ErrorPage from './ErrorPage';
 import NotFoundPage from './NotFoundPage';
+import PageLoading from './common/PageLoading';

 class App extends Component {
  componentDidMount() {
@@ -24,41 +25,51 @@ class App extends Component {
    this.props.fetchUserAccount(userAccountApiService, username);
  }

+  renderContent() {
+    if (!this.props.loaded) {
+      return <PageLoading />;
+    }
+
+    return (
+      <div>
+        <SiteHeader />
+        <main>
+          <Switch>
+            <Route path="/u/:username" component={ConnectedProfilePage} />
+            <Route path="/error" component={ErrorPage} />
+            <Route path="/notfound" component={NotFoundPage} />
+            <Route path="*" component={NotFoundPage} />
+          </Switch>
+        </main>
+        <SiteFooter
+          siteName={process.env.SITE_NAME}
+          siteLogo={FooterLogo}
+          marketingSiteBaseUrl={process.env.MARKETING_SITE_BASE_URL}
+          supportUrl={process.env.SUPPORT_URL}
+          contactUrl={process.env.CONTACT_URL}
+          openSourceUrl={process.env.OPEN_SOURCE_URL}
+          termsOfServiceUrl={process.env.TERMS_OF_SERVICE_URL}
+          privacyPolicyUrl={process.env.PRIVACY_POLICY_URL}
+          facebookUrl={process.env.FACEBOOK_URL}
+          twitterUrl={process.env.TWITTER_URL}
+          youTubeUrl={process.env.YOU_TUBE_URL}
+          linkedInUrl={process.env.LINKED_IN_URL}
+          googlePlusUrl={process.env.GOOGLE_PLUS_URL}
+          redditUrl={process.env.REDDIT_URL}
+          appleAppStoreUrl={process.env.APPLE_APP_STORE_URL}
+          googlePlayUrl={process.env.GOOGLE_PLAY_URL}
+          handleAllTrackEvents={sendTrackEvent}
+        />
+      </div>
+    );
+  }
+
  render() {
    return (
      <IntlProvider locale={getLocale()} messages={getMessages()}>
        <Provider store={this.props.store}>
          <ConnectedRouter history={this.props.history}>
-            <div>
-              <SiteHeader />
-              <main>
-                <Switch>
-                  <Route path="/u/:username" component={ConnectedProfilePage} />
-                  <Route path="/error" component={ErrorPage} />
-                  <Route path="/notfound" component={NotFoundPage} />
-                  <Route path="*" component={NotFoundPage} />
-                </Switch>
-              </main>
-              <SiteFooter
-                siteName={process.env.SITE_NAME}
-                siteLogo={FooterLogo}
-                marketingSiteBaseUrl={process.env.MARKETING_SITE_BASE_URL}
-                supportUrl={process.env.SUPPORT_URL}
-                contactUrl={process.env.CONTACT_URL}
-                openSourceUrl={process.env.OPEN_SOURCE_URL}
-                termsOfServiceUrl={process.env.TERMS_OF_SERVICE_URL}
-                privacyPolicyUrl={process.env.PRIVACY_POLICY_URL}
-                facebookUrl={process.env.FACEBOOK_URL}
-                twitterUrl={process.env.TWITTER_URL}
-                youTubeUrl={process.env.YOU_TUBE_URL}
-                linkedInUrl={process.env.LINKED_IN_URL}
-                googlePlusUrl={process.env.GOOGLE_PLUS_URL}
-                redditUrl={process.env.REDDIT_URL}
-                appleAppStoreUrl={process.env.APPLE_APP_STORE_URL}
-                googlePlayUrl={process.env.GOOGLE_PLAY_URL}
-                handleAllTrackEvents={sendTrackEvent}
-              />
-            </div>
+            {this.renderContent()}
          </ConnectedRouter>
        </Provider>
      </IntlProvider>
@@ -71,10 +82,16 @@ App.propTypes = {
  username: PropTypes.string.isRequired,
  store: PropTypes.object.isRequired, // eslint-disable-line
  history: PropTypes.object.isRequired, // eslint-disable-line
+  loaded: PropTypes.bool,
+};
+
+App.defaultProps = {
+  loaded: false,
 };

 const mapStateToProps = state => ({
  username: state.authentication.username,
+  loaded: state.userAccount.loaded,
 });

 export default connect(
--- a/src/components/ProfilePage.jsx
+++ b/src/components/ProfilePage.jsx
@@ -29,8 +29,8 @@ import Bio from './ProfilePage/Bio';
 import Certificates from './ProfilePage/Certificates';
 import AgeMessage from './ProfilePage/AgeMessage';
 import DateJoined from './ProfilePage/DateJoined';
-import PageLoading from './ProfilePage/PageLoading';
-import Banner from './ProfilePage/elements/Banner';
+import PageLoading from './common/PageLoading';
+import Banner from './common/Banner';
 import { profilePageSelector } from '../selectors/ProfilePageSelector';

 // Configuration
@@ -84,7 +84,7 @@ export class ProfilePage extends React.Component {

  // Inserted into the DOM in two places (for responsive layout)
  renderViewMyRecordsButton() {
-    if (!this.props.isCurrentUserProfile) {
+    if (!this.props.isAuthenticatedUserProfile) {
      return null;
    }

@@ -131,8 +131,8 @@ export class ProfilePage extends React.Component {
      visibilityName,
      country,
      visibilityCountry,
-      education,
-      visibilityEducation,
+      levelOfEducation,
+      visibilityLevelOfEducation,
      socialLinks,
      draftSocialLinksByPlatform,
      visibilitySocialLinks,
@@ -142,7 +142,7 @@ export class ProfilePage extends React.Component {
      bio,
      visibilityBio,
      requiresParentalConsent,
-      isCurrentUserProfile,
+      isAuthenticatedUserProfile,
      isLoadingProfile,
    } = this.props;

@@ -155,7 +155,7 @@ export class ProfilePage extends React.Component {
      changeHandler: this.handleChange,
    };

-    const shouldShowAgeMessage = requiresParentalConsent && isCurrentUserProfile;
+    const shouldShowAgeMessage = requiresParentalConsent && isAuthenticatedUserProfile;

    return (
      <div className="profile-page">
@@ -171,7 +171,7 @@ export class ProfilePage extends React.Component {
                  onSave={this.handleSaveProfilePhoto}
                  onDelete={this.handleDeleteProfilePhoto}
                  savePhotoState={this.props.savePhotoState}
-                  isEditable={this.props.isCurrentUserProfile && !requiresParentalConsent}
+                  isEditable={this.props.isAuthenticatedUserProfile && !requiresParentalConsent}
                />
              </div>
            </div>
@@ -212,9 +212,9 @@ export class ProfilePage extends React.Component {
                {...commonFormProps}
              />
              <Education
-                education={education}
-                visibilityEducation={visibilityEducation}
-                formId="education"
+                levelOfEducation={levelOfEducation}
+                visibilityLevelOfEducation={visibilityLevelOfEducation}
+                formId="levelOfEducation"
                {...commonFormProps}
              />
              <SocialLinks
@@ -251,7 +251,7 @@ ProfilePage.propTypes = {
  username: PropTypes.string,
  requiresParentalConsent: PropTypes.bool,
  dateJoined: PropTypes.string,
-  isCurrentUserProfile: PropTypes.bool.isRequired,
+  isAuthenticatedUserProfile: PropTypes.bool.isRequired,

  // Bio form data
  bio: PropTypes.string,
@@ -268,8 +268,8 @@ ProfilePage.propTypes = {
  visibilityCountry: PropTypes.string.isRequired,

  // Education form data
-  education: PropTypes.string,
-  visibilityEducation: PropTypes.string.isRequired,
+  levelOfEducation: PropTypes.string,
+  visibilityLevelOfEducation: PropTypes.string.isRequired,

  // Language proficiency form data
  languageProficiencies: PropTypes.arrayOf(PropTypes.shape({
@@ -331,7 +331,7 @@ ProfilePage.defaultProps = {
  profileImage: {},
  name: null,
  username: null,
-  education: null,
+  levelOfEducation: null,
  country: null,
  socialLinks: [],
  draftSocialLinksByPlatform: {},
--- a/src/components/ProfilePage.test.jsx
+++ b/src/components/ProfilePage.test.jsx
@@ -18,7 +18,7 @@ const storeMocks = {
  savingEditedBio: require('./__mocks__/savingEditedBio.mockStore.js'),
 };
 const requiredProfilePageProps = {
-  isCurrentUserProfile: true,
+  isAuthenticatedUserProfile: true,
  fetchProfile: () => {},
  saveProfile: () => {},
  saveProfilePhoto: () => {},
--- a/src/components/ProfilePage/Education.jsx
+++ b/src/components/ProfilePage/Education.jsx
@@ -52,7 +52,7 @@ class Education extends React.Component {

  render() {
    const {
-      formId, education, visibilityEducation, editMode, saveState, error, intl,
+      formId, levelOfEducation, visibilityLevelOfEducation, editMode, saveState, error, intl,
    } = this.props;

    return (
@@ -75,7 +75,7 @@ class Education extends React.Component {
                    className="form-control"
                    id={formId}
                    name={formId}
-                    value={education}
+                    value={levelOfEducation}
                    onChange={this.handleChange}
                  >
                    {EDUCATION_LEVELS.map(level => (
@@ -90,9 +90,9 @@ class Education extends React.Component {
                  </select>
                </ValidationFormGroup>
                <FormControls
-                  visibilityId="visibilityEducation"
+                  visibilityId="visibilityLevelOfEducation"
                  saveState={saveState}
-                  visibility={visibilityEducation}
+                  visibility={visibilityLevelOfEducation}
                  cancelHandler={this.handleClose}
                  changeHandler={this.handleChange}
                />
@@ -105,13 +105,13 @@ class Education extends React.Component {
                content={intl.formatMessage(messages['profile.education.education'])}
                showEditButton
                onClickEdit={this.handleOpen}
-                showVisibility={visibilityEducation !== null}
-                visibility={visibilityEducation}
+                showVisibility={visibilityLevelOfEducation !== null}
+                visibility={visibilityLevelOfEducation}
              />
              <p className="h5">
                {intl.formatMessage(get(
                  messages,
-                  `profile.education.levels.${education}`,
+                  `profile.education.levels.${levelOfEducation}`,
                  messages['profile.education.levels.o'],
                ))}
              </p>
@@ -135,7 +135,7 @@ class Education extends React.Component {
              <p className="h5">
                {intl.formatMessage(get(
                  messages,
-                  `profile.education.levels.${education}`,
+                  `profile.education.levels.${levelOfEducation}`,
                  messages['profile.education.levels.o'],
                ))}
              </p>
@@ -155,8 +155,8 @@ Education.propTypes = {
  formId: PropTypes.string.isRequired,

  // From Selector
-  education: PropTypes.string,
-  visibilityEducation: PropTypes.oneOf(['private', 'all_users']),
+  levelOfEducation: PropTypes.string,
+  visibilityLevelOfEducation: PropTypes.oneOf(['private', 'all_users']),
  editMode: PropTypes.oneOf(['editing', 'editable', 'empty', 'static']),
  saveState: PropTypes.string,
  error: PropTypes.string,
@@ -174,8 +174,8 @@ Education.propTypes = {
 Education.defaultProps = {
  editMode: 'static',
  saveState: null,
-  education: null,
-  visibilityEducation: 'private',
+  levelOfEducation: null,
+  visibilityLevelOfEducation: 'private',
  error: null,
 };

--- a/src/components/mocks/savingEditedBio.mockStore.js
+++ b/src/components/mocks/savingEditedBio.mockStore.js
@@ -92,7 +92,7 @@ module.exports = {
        }
      ],
      timeZone: null,
-      education: 'el',
+      levelOfEducation: 'el',
      gender: null,
      accountPrivacy: 'custom'
    },
@@ -100,7 +100,7 @@ module.exports = {
      visibilityUserLocation: 'all_users',
      visibilitySocialLinks: 'all_users',
      visibilityCertificates: 'private',
-      visibilityEducation: 'private',
+      visibilityLevelOfEducation: 'private',
      visibilityCourseCertificates: 'all_users',
      prefLang: 'en',
      visibilityBio: 'all_users',
--- a/src/components/mocks/viewOtherProfile.mockStore.js
+++ b/src/components/mocks/viewOtherProfile.mockStore.js
@@ -79,7 +79,7 @@ module.exports = {
      country: null,
      socialLinks: [],
      timeZone: null,
-      education: null,
+      levelOfEducation: null,
      gender: null,
      accountPrivacy: 'private'
    },
--- a/src/components/mocks/viewOwnProfile.mockStore.js
+++ b/src/components/mocks/viewOwnProfile.mockStore.js
@@ -92,7 +92,7 @@ module.exports = {
        }
      ],
      timeZone: null,
-      education: 'el',
+      levelOfEducation: 'el',
      gender: null,
      accountPrivacy: 'custom'
    },
@@ -100,7 +100,7 @@ module.exports = {
      visibilityUserLocation: 'all_users',
      visibilitySocialLinks: 'all_users',
      visibilityCertificates: 'private',
-      visibilityEducation: 'private',
+      visibilityLevelOfEducation: 'private',
      visibilityCourseCertificates: 'all_users',
      prefLang: 'en',
      visibilityBio: 'all_users',
--- a/src/components/ProfilePage/elements/Banner.jsx
+++ b/src/components/ProfilePage/elements/Banner.jsx
--- a/src/components/ProfilePage/PageLoading.jsx
+++ b/src/components/ProfilePage/PageLoading.jsx
@@ -1,6 +1,6 @@
 import React from 'react';

-import Banner from './elements/Banner';
+import Banner from './Banner';

 function PageLoading() {
  return (