[MICROBA-484] Scroll to section based on URL

Added in a check for a locationHash and loaded state to
scroll to the section in the URL so that the page would load to a Nav
Section after loading data.

src/account-settings/AccountSettingsPage.jsx

@@ -38,6 +38,7 @@ import { fetchSiteLanguages } from './site-language';
 import CoachingToggle from './coaching/CoachingToggle';
 import DemographicsSection from './demographics/DemographicsSection';
 
+
 class AccountSettingsPage extends React.Component {
   constructor(props, context) {
     super(props, context);
@@ -53,6 +54,16 @@ class AccountSettingsPage extends React.Component {
     this.state = {
       duplicateTpaProvider,
     };
+
+    this.navLinkRefs = {
+      '#basic-information': React.createRef(),
+      '#profile-information': React.createRef(),
+      '#demographics-information': React.createRef(),
+      '#social-media': React.createRef(),
+      '#site-preferences': React.createRef(),
+      '#linked-accounts': React.createRef(),
+      '#delete-account': React.createRef(),
+    };
   }
 
   componentDidMount() {
@@ -65,6 +76,22 @@ class AccountSettingsPage extends React.Component {
     });
   }
 
+  componentDidUpdate() {
+    if (this.props.loaded) {
+      const locationHash = global.location.hash;
+
+      // Check for the locationHash in the URL and then scroll to it if it is in the
+      // NavLinks list
+      if (typeof locationHash !== 'string')
+        return;
+      if (Object.keys(this.navLinkRefs).includes(locationHash)) {
+        if (this.navLinkRefs[locationHash].current) {
+          window.scrollTo(0, this.navLinkRefs[locationHash].current.offsetTop)
+        }
+      }
+    }
+  }
+
   // NOTE: We need 'locale' for the memoization in getLocalizedTimeZoneOptions.  Don't remove it!
   // eslint-disable-next-line no-unused-vars
   getLocalizedTimeZoneOptions = memoize((timeZoneOptions, countryTimeZoneOptions, locale) => {
@@ -211,7 +238,7 @@ class AccountSettingsPage extends React.Component {
     // check the result of an LMS API call to determine if we should render the DemographicsSection component
     if (this.props.formValues.shouldDisplayDemographicsSection) {
       return (
-        <DemographicsSection/>
+        <DemographicsSection forwardRef={this.navLinkRefs['#demographics-information']}/>
       );
     } else {
       return null;
@@ -247,7 +274,7 @@ class AccountSettingsPage extends React.Component {
 
     return (
       <React.Fragment>
-        <div className="account-section" id="basic-information">
+        <div className="account-section" id="basic-information" ref={this.navLinkRefs['#basic-information']}>
           <h2 className="section-heading">
             {this.props.intl.formatMessage(messages['account.settings.section.account.information'])}
           </h2>
@@ -334,7 +361,7 @@ class AccountSettingsPage extends React.Component {
           }
         </div>
 
-        <div className="account-section" id="profile-information">
+        <div className="account-section" id="profile-information" ref={this.navLinkRefs['#profile-information']}>
           <h2 className="section-heading">
             {this.props.intl.formatMessage(messages['account.settings.section.profile.information'])}
           </h2>
@@ -408,7 +435,7 @@ class AccountSettingsPage extends React.Component {
           />
         </div>
 
-        <div className="account-section" id="site-preferences">
+        <div className="account-section" id="site-preferences" ref={this.navLinkRefs['#site-preferences']}>
           <h2 className="section-heading">
             {this.props.intl.formatMessage(messages['account.settings.section.site.preferences'])}
           </h2>
@@ -439,13 +466,13 @@ class AccountSettingsPage extends React.Component {
           />
         </div>
 
-        <div className="account-section" id="linked-accounts">
+        <div className="account-section" id="linked-accounts" ref={this.navLinkRefs['#linked-accounts']}>
           <h2 className="section-heading">{this.props.intl.formatMessage(messages['account.settings.section.linked.accounts'])}</h2>
           <p>{this.props.intl.formatMessage(messages['account.settings.section.linked.accounts.description'])}</p>
           <ThirdPartyAuth />
         </div>
 
-        <div className="account-section" id="delete-account">
+        <div className="account-section" id="delete-account" ref={this.navLinkRefs['#delete-account']}>
           <DeleteAccount
             isVerifiedAccount={this.props.isActive}
             hasLinkedTPA={hasLinkedTPA}
@@ -488,7 +515,7 @@ class AccountSettingsPage extends React.Component {
         <div>
           <div className="row">
             <div className="col-md-3">
-              <JumpNav 
+              <JumpNav
                 displayDemographicsLink={this.props.formValues.shouldDisplayDemographicsSection}
               />
             </div>

src/account-settings/demographics/DemographicsSection.jsx

@@ -166,7 +166,7 @@ class DemographicsSection extends React.Component {
     const showWorkStatusDescribe = this.props.formValues.demographics_work_status == OTHER;
 
     return (
-      <div className="account-section" id="demographics-information">
+      <div className="account-section" id="demographics-information" ref={this.props.forwardRef}>
         <h2 className="section-heading">
           {this.props.intl.formatMessage(messages['account.settings.section.demographics.information'])}
         </h2>

src/account-settings/demographics/DemographicsSection.messages.jsx

@@ -231,11 +231,6 @@ const messages = defineMessages({
     defaultMessage: 'Some college, but no degree',
     description: 'The label for the some college, but no degree education level option.',
   },
-  'account.settings.field.demographics.education_level.options.some-college': {
-    id: 'account.settings.field.demographics.education_level.options.some-college',
-    defaultMessage: 'Some college, but no degree',
-    description: 'The label for the some college, but no degree education level option.',
-  },
   'account.settings.field.demographics.education_level.options.associates': {
     id: 'account.settings.field.demographics.education_level.options.associates',
     defaultMessage: 'Associates degree',