fix: fix challenge link for marathon match in member statics page

Author: morehappiness

src/shared/components/ProfilePage/Stats/ChartTooltip/index.jsx

@@ -5,10 +5,11 @@
 import React from 'react';
 import PT from 'prop-types';
 import './styles.scss';
+import _ from 'lodash';
 
 const ChartTooltip = ({
   show, left, top, challengeName,
-  challengeData, rating, ratingColor, href,
+  challengeData, rating, ratingColor, href, onClick,
 }) => (
   <a
     styleName="chart-tooltip"
@@ -19,6 +20,10 @@ const ChartTooltip = ({
       pointerEvents: href ? 'all' : 'none',
     }}
     href={href}
+    onClick={(e) => {
+      e.preventDefault();
+      onClick();
+    }}
   >
     <div styleName="tooltip-rating" style={{ backgroundColor: ratingColor }}>
       {rating}
@@ -44,6 +49,7 @@ ChartTooltip.defaultProps = {
   rating: 0,
   ratingColor: '',
   href: null,
+  onClick: _.noop,
 };
 
 ChartTooltip.propTypes = {
@@ -55,6 +61,7 @@ ChartTooltip.propTypes = {
   rating: PT.number,
   ratingColor: PT.string,
   href: PT.string,
+  onClick: PT.func,
 };
 
 export default ChartTooltip;

src/shared/components/ProfilePage/Stats/HistoryGraph/index.jsx

@@ -15,6 +15,7 @@ export default class HistoryGraph extends React.Component {
     this.state = {};
     this.mobileWidth = 0;
     this.graphRef = React.createRef();
+    this.onHandleDataPointClicked = this.onHandleDataPointClicked.bind(this);
   }
 
   componentDidMount() {
@@ -58,6 +59,23 @@ export default class HistoryGraph extends React.Component {
     return 300;
   }
 
+  onHandleDataPointClicked() {
+    const { challengeId, href } = this.state;
+    fetch(`${config.API.V5}/challenges?legacyId=${challengeId}`)
+      .then(result => result.json())
+      .then((dataResponse) => {
+        if (dataResponse.length > 0) {
+          const challenge = dataResponse[0];
+          window.location.href = `${config.URL.CHALLENGES_URL}/${challenge.id}`;
+        } else {
+          window.location.href = href;
+        }
+      }).catch(() => {
+        window.location.href = href;
+      });
+  }
+
+
   draw() {
     const $scope = this;
     const { history: wrapper, track, subTrack } = this.props;
@@ -247,6 +265,7 @@ export default class HistoryGraph extends React.Component {
           show: true,
           left: e.pageX,
           top: e.pageY,
+          challengeId: d.challengeId,
           challengeName: d.challengeName,
           challengeData: moment(d.ratingDate).format('MMM DD, YYYY'),
           rating: d.newRating,
@@ -259,7 +278,18 @@ export default class HistoryGraph extends React.Component {
   render() {
     return (
       <div styleName="history-graph" ref={this.graphRef}>
-        <ChartTooltip {...this.state} />
+        <ChartTooltip
+          {...this.state}
+          onClick={() => {
+            const { track } = this.props;
+            const { href } = this.state;
+            if (track === 'DATA_SCIENCE') {
+              this.onHandleDataPointClicked();
+            } else {
+              window.location.href = href;
+            }
+          }}
+        />
       </div>
     );
   }