Merge pull request #1736 from sumitdaga/issue-1699

fixes #1699

Author: ThomasKranitsas

src/shared/components/TrackHomePages/HowToCompetePage/FAQ/index.jsx

@@ -8,14 +8,15 @@ import './styles.scss';
 
 import QAComponent from '../QAComponent';
 
-const FAQ = ({ data }) => (
+const FAQ = ({ data, hashLink }) => (
   <div styleName="container">
     {
       data.AQs.map((question, index) => (
         <QAComponent
           data={question.fields}
           key={question.fields.title}
           isLastItem={(index + 1) === data.AQs.length ? 'last-item' : ''}
+          isActive={hashLink === question.fields.title}
         />
       ))
     }
@@ -25,6 +26,7 @@ const FAQ = ({ data }) => (
 
 FAQ.propTypes = {
   data: PT.shape().isRequired,
+  hashLink: PT.string.isRequired,
 };
 
 export default FAQ;

src/shared/components/TrackHomePages/HowToCompetePage/QAComponent/index.jsx

@@ -14,7 +14,7 @@ class QAComponent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isActive: false,
+      isActive: props.isActive,
     };
   }
 
@@ -30,7 +30,7 @@ class QAComponent extends React.Component {
     const { isActive } = this.state;
     const className = `container ${isLastItem}`;
     return (
-      <div styleName={className}>
+      <div styleName={className} id={data.title}>
         <div
           tabIndex={0}
           role="button"
@@ -57,6 +57,7 @@ class QAComponent extends React.Component {
 QAComponent.propTypes = {
   data: PT.shape().isRequired,
   isLastItem: PT.string.isRequired,
+  isActive: PT.bool.isRequired,
 };
 
 export default QAComponent;

src/shared/components/TrackHomePages/HowToCompetePage/index.jsx

@@ -13,7 +13,8 @@ import StepByStep from './StepByStep';
 
 import './styles.scss';
 
-const HowToCompetePage = ({ howToCompete }) => {
+const HowToCompetePage = ({ howToCompete, location }) => {
+  const hashLink = decodeURIComponent(location.hash.substring(1));
   const data = howToCompete;
   let faq = {};
   let howToExtras = {};
@@ -96,7 +97,10 @@ Step by Step
                 <h1>
                   Extras
                 </h1>
-                <FAQ data={howToExtras} />
+                <FAQ
+                  data={howToExtras}
+                  hashLink={hashLink}
+                />
               </div>
               <div styleName="faq">
                 <h1>
@@ -105,7 +109,10 @@ FAQ
                 <div styleName="text">
 Here are a few answers to our most common questions
                 </div>
-                <FAQ data={faq} />
+                <FAQ
+                  data={faq}
+                  hashLink={hashLink}
+                />
               </div>
             </div>
           </div>
@@ -117,6 +124,7 @@ Here are a few answers to our most common questions
 
 HowToCompetePage.propTypes = {
   howToCompete: PT.shape().isRequired,
+  location: PT.shape().isRequired,
 };
 
 export default HowToCompetePage;

src/shared/containers/TrackHomePages/HowToCompetePage.jsx

@@ -11,7 +11,7 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import Error404 from 'components/Error404';
 import ContentfulLoader from '../ContentfulLoader';
 
-const HowToCompetePageContainer = ({ match }) => (
+const HowToCompetePageContainer = ({ match, location }) => (
   <ContentfulLoader
     entryQueries={{
       content_type: 'trackHowToCompete',
@@ -31,6 +31,7 @@ const HowToCompetePageContainer = ({ match }) => (
             render={() => (
               <HowToCompetePage
                 howToCompete={howToCompete}
+                location={location}
               />
             )}
             renderPlaceholder={LoadingIndicator}
@@ -49,6 +50,7 @@ HowToCompetePageContainer.propTypes = {
       track: PT.string,
     }),
   }).isRequired,
+  location: PT.shape().isRequired,
 };
 
 export default withRouter(HowToCompetePageContainer);