Merge pull request #219 from nrotstan/notify-if-virtual-challenge-expired

Notify user if virtual challenge has expired.

Author: nrotstan

src/components/HOCs/WithVirtualChallenge/WithVirtualChallenge.js

@@ -6,6 +6,8 @@ import _isFinite from 'lodash/isFinite'
 import _debounce from 'lodash/debounce'
 import { fetchVirtualChallenge }
        from '../../../services/VirtualChallenge/VirtualChallenge'
+import { addError } from '../../../services/Error/Error'
+import AppErrors from '../../../services/Error/AppErrors'
 
 const FRESHNESS_THRESHOLD = 5000 // 5 seconds
 
@@ -64,10 +66,17 @@ export const mapDispatchToProps = (dispatch, ownProps) => {
      *
      * @private
      */
-    loadVirtualChallenge: _debounce(
-      virtualChallengeId => dispatch(fetchVirtualChallenge(virtualChallengeId)),
-      FRESHNESS_THRESHOLD
-    ),
+    loadVirtualChallenge: _debounce(virtualChallengeId => {
+      return dispatch(
+        fetchVirtualChallenge(virtualChallengeId)
+      ).then(results => {
+        if (!results.result ||
+            results.entities.virtualChallenges[results.result].expiry < Date.now()) {
+          dispatch(addError(AppErrors.virtualChallenge.expired))
+          ownProps.history.push('/')
+        }
+      })
+    }, FRESHNESS_THRESHOLD),
   }
 }
 

src/components/TaskPane/TaskPane.js

@@ -60,7 +60,11 @@ export class TaskPane extends Component {
 
   render() {
     if (!_isFinite(_get(this.props, 'task.id'))) {
-      return <BusySpinner />
+      return (
+        <div className="pane-loading full-screen-height">
+          <BusySpinner />
+        </div>
+      )
     }
 
     return (

src/lang/en-US.json

@@ -312,6 +312,7 @@
   "Errors.challenge.rebuildFailure": "Unable to rebuild challenge tasks",
   "Errors.virtualChallenge.fetchFailure": "Unable to retrieve latest virtual challenge data from server.",
   "Errors.virtualChallenge.createFailure": "Unable to create a virtual challenge{details}",
+  "Errors.virtualChallenge.expired": "Virtual challenge has expired.",
   "Errors.project.saveFailure": "Unable to save your changes{details}",
   "Errors.project.fetchFailure": "Unable to retrieve latest project data from server.",
   "Errors.project.searchFailure": "Unable to search projects.",

src/services/Error/AppErrors.js

@@ -40,6 +40,7 @@ export default {
   virtualChallenge: {
     fetchFailure: messages.virtualChallengeFetchFailure,
     createFailure: messages.virtualChallengeCreateFailure,
+    expired: messages.virtualChallengeExpired,
   },
 
   project: {

src/services/Error/Messages.js

@@ -79,6 +79,10 @@ export default defineMessages({
     id: 'Errors.virtualChallenge.createFailure',
     defaultMessage: "Unable to create a virtual challenge{details}",
   },
+  virtualChallengeExpired: {
+    id: 'Errors.virtualChallenge.expired',
+    defaultMessage: "Virtual challenge has expired.",
+  },
 
   projectSaveFailure: {
     id: 'Errors.project.saveFailure',

src/services/Server/GenericEntityReducer.js

@@ -68,6 +68,10 @@ const entities = function(state = {}, action, entityName, reduceFurther) {
   const timestamp = Date.now()
 
   _forOwn(action.entities[entityName], (entity, entityId) => {
+    if (typeof entityId === 'undefined') {
+      return
+    }
+
     // Add a _meta object to each entity where we can store some application
     // meta data about the entity. Right now we just store a timestamp of
     // when the data was fetched so that we can measure the freshness of the

src/services/VirtualChallenge/VirtualChallenge.js

@@ -1,6 +1,7 @@
 import { schema } from 'normalizr'
 import _get from 'lodash/get'
 import _isFinite from 'lodash/isFinite'
+import addHours from 'date-fns/add_hours'
 import { defaultRoutes as api } from '../Server/Server'
 import Endpoint from '../Server/Endpoint'
 import RequestStatus from '../Server/RequestStatus'
@@ -43,13 +44,12 @@ export const fetchVirtualChallenge = function(virtualChallengeId) {
       api.virtualChallenge.single,
       {schema: virtualChallengeSchema(), variables: {id: virtualChallengeId}}
     ).execute().then(normalizedResults => {
-      // Mark that the challenge is virtual.
       if (_isFinite(normalizedResults.result)) {
+        // Mark that the challenge is virtual.
         normalizedResults.entities.virtualChallenges[normalizedResults.result].isVirtual = true
       }
 
       dispatch(receiveVirtualChallenges(normalizedResults.entities))
-
       return normalizedResults
     }).catch((error) => {
       dispatch(addError(AppErrors.virtualChallenge.fetchFailure))
@@ -61,11 +61,12 @@ export const fetchVirtualChallenge = function(virtualChallengeId) {
 /**
  * Creates a new virtual challenge with the given name and tasks.
  */
-export const createVirtualChallenge = function(name, taskIds) {
+export const createVirtualChallenge = function(name, taskIds, expiration) {
   return function(dispatch) {
     const challengeData = {
       name,
       taskIdList: taskIds,
+      expiry: expiration ? expiration : addHours(new Date(), 36).getTime()
     }
 
     return new Endpoint(api.virtualChallenge.create, {
@@ -92,6 +93,27 @@ export const createVirtualChallenge = function(name, taskIds) {
 }
 
 // redux reducers
+//
+/**
+ * reduceVirtualChallengesFurther will be invoked by the genericEntityReducer function to
+ * perform additional reduction on virtualChallenge entities.
+ *
+ * @private
+ */
+const reduceVirtualChallengesFurther = function(mergedState,
+                                                oldState,
+                                                virtualChallengeEntities) {
+  const now = Date.now()
+  virtualChallengeEntities.forEach(entity => {
+    // Ignore deleted and expired virtual challenges
+    if (entity.deleted || entity.expired < now) {
+      delete mergedState[entity.id]
+      return
+    }
+  })
+}
 
 export const virtualChallengeEntities =
-  genericEntityReducer([RECEIVE_VIRTUAL_CHALLENGES], 'virtualChallenges')
+  genericEntityReducer([RECEIVE_VIRTUAL_CHALLENGES],
+                       'virtualChallenges',
+                       reduceVirtualChallengesFurther)

src/theme.scss

@@ -303,6 +303,16 @@ code {
   background-color: $white;
 }
 
+.pane-loading {
+  display: flex;
+  align-items: center;
+  font-size: $size-1;
+  .busy-spinner {
+    @include busy-spinner-color($primary);
+    flex: auto;
+  }
+}
+
 // Add a short-and-wide variant of the rounded Bulma switch
 .switch[type="checkbox"].is-rounded.short-and-wide + label::before {
   width: 60px;