Merge pull request #227 from nrotstan/bug-224-ensure-browsed-challenge-loaded

Ensure browsed challenge data is loaded.

Author: nrotstan

src/components/ChallengePane/ChallengeResultItem/ChallengeResultItem.js

@@ -76,12 +76,18 @@ export class ChallengeResultItem extends Component {
       return true
     }
 
-    // if the browsedChallenge changed and it either references our challenge now
-    // or used to before.
-    if (_get(nextProps, 'browsedChallenge.id') !== _get(this.props, 'browsedChallenge.id') &&
-        (_get(nextProps, 'browsedChallenge.id') === this.props.challenge.id ||
-         _get(this.props, 'browsedChallenge.id') === this.props.challenge.id)) {
-      return true
+    // if the browsedChallenge or its loading status changed and it either
+    // references our challenge now or used to before.
+    if (_get(nextProps, 'browsedChallenge.id') === this.props.challenge.id ||
+        _get(this.props, 'browsedChallenge.id') === this.props.challenge.id) {
+      if (_get(nextProps, 'browsedChallenge.id') !==
+          _get(this.props, 'browsedChallenge.id')) {
+        return true
+      }
+
+      if (nextProps.loadingBrowsedChallenge !== this.props.loadingBrowsedChallenge) {
+        return true
+      }
     }
 
     return false

src/components/ChallengePane/ChallengeResultList/ChallengeResultList.js

@@ -34,10 +34,19 @@ export class ChallengeResultList extends Component {
   render() {
     const challengeResults = this.props.challenges
 
+    if (this.props.loadingBrowsedChallenge) {
+      return (
+        <div className="pane-loading">
+          <BusySpinner />
+        </div>
+      )
+    }
+
     // If the user is actively browsing a challenge, include that challenge even if
     // it didn't pass the filters.
-    if (_isObject(this.props.browsedChallenge)) {
-      if (_findIndex(challengeResults, {id: this.props.browsedChallenge.id}) === -1) {
+    if (_isObject(this.props.browsedChallenge) && !this.props.loadingBrowsedChallenge) {
+      if (this.props.browsedChallenge.isVirtual ||
+          _findIndex(challengeResults, {id: this.props.browsedChallenge.id}) === -1) {
         challengeResults.push(this.props.browsedChallenge)
       }
     }

src/components/HOCs/WithBrowsedChallenge/WithBrowsedChallenge.js

@@ -4,8 +4,13 @@ import { connect } from 'react-redux'
 import _get from 'lodash/get'
 import _isObject from 'lodash/isObject'
 import _isFinite from 'lodash/isFinite'
+import _debounce from 'lodash/debounce'
 import _find from 'lodash/find'
 import _omit from 'lodash/omit'
+import { fetchChallenge }
+       from '../../../services/Challenge/Challenge'
+
+const FRESHNESS_THRESHOLD = 5000 // 5 seconds
 
 /**
  * WithBrowsedChallenge provides functions for starting and stopping browsing
@@ -19,6 +24,7 @@ export const WithBrowsedChallenge = function(WrappedComponent) {
   class _WithBrowsedChallenge extends Component {
     state = {
       browsedChallenge: null,
+      loadingBrowsedChallenge: false,
       isVirtual: false,
     }
 
@@ -67,21 +73,37 @@ export const WithBrowsedChallenge = function(WrappedComponent) {
 
       if (_isFinite(challengeId)) {
         if (_get(this.state, 'browsedChallenge.id') !== challengeId ||
-            this.state.isVirtual !== isVirtual) {
+            this.state.isVirtual !== isVirtual ||
+            this.state.loadingBrowsedChallenge) {
           const challenge = isVirtual ? this.props.virtualChallenge :
                             _find(props.challenges, {id: challengeId})
 
           if (_isObject(challenge)) {
-            this.setState({browsedChallenge: challenge, isVirtual})
+            this.setState({
+              browsedChallenge: challenge,
+              loadingBrowsedChallenge: false,
+              isVirtual
+            })
 
             if (challenge.id !== _get(this.props, 'clusteredTasks.challengeId') ||
                 isVirtual !== _get(this.props, 'clusteredTasks.isVirtualChallenge')) {
               this.props.fetchClusteredTasks(challenge.id, isVirtual)
             }
           }
+          else if (!isVirtual) {
+            // We don't have the challenge available, so fetch it.
+            this.setState({
+              browsedChallenge: {id: challengeId},
+              loadingBrowsedChallenge: true,
+              isVirtual,
+            })
+
+            props.loadChallenge(challengeId)
+          }
         }
       }
-      else if (_isObject(this.state.browsedChallenge)) {
+      else if (_isObject(this.state.browsedChallenge &&
+               !this.state.loadingBrowsedChallenge)) {
         this.setState({browsedChallenge: null, isVirtual: false})
       }
     }
@@ -128,10 +150,13 @@ export const WithBrowsedChallenge = function(WrappedComponent) {
 
       return (
         <WrappedComponent browsedChallenge = {this.state.browsedChallenge}
+                          loadingBrowsedChallenge = {this.state.loadingBrowsedChallenge}
                           startBrowsingChallenge={this.startBrowsingChallenge}
                           stopBrowsingChallenge={this.stopBrowsingChallenge}
                           clusteredTasks={clusteredTasks}
-                          {..._omit(this.props, ['entities', 'clusteredTasks'])} />
+                          {..._omit(this.props, ['entities',
+                                                 'clusteredTasks',
+                                                 'loadChallenge'])} />
       )
     }
   }
@@ -148,5 +173,17 @@ const mapStateToProps = state => ({
   entities: state.entities,
 })
 
+export const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+    loadChallenge: _debounce(
+      challengeId => {
+        return dispatch(fetchChallenge(challengeId))
+      },
+      FRESHNESS_THRESHOLD,
+      {leading: true},
+    ),
+  }
+}
+
 export default WrappedComponent =>
-  connect(mapStateToProps)(WithBrowsedChallenge(WrappedComponent))
+  connect(mapStateToProps, mapDispatchToProps)(WithBrowsedChallenge(WrappedComponent))

src/components/HOCs/WithStartChallenge/WithStartChallenge.js

@@ -29,7 +29,7 @@ export const WithStartChallenge = WrappedComponent =>
  * @private
  */
 export const chooseVisibleTask = (challenge, challengeBounds, clusteredTasks) => {
-  if (challenge.id !== clusteredTasks.challengeId ||
+  if (challenge.id !== _get(clusteredTasks, 'challengeId') ||
       _get(clusteredTasks, 'tasks.length', 0) === 0) {
     return null
   }