ML-588 ⁃ #272 Add Skip action when the content is unrenderable

app/components/ActivityScreens.js

@@ -39,6 +39,7 @@ class ActivityScreens extends React.PureComponent {
       currentScreen,
       onChange,
       authToken,
+      onContentError,
     } = this.props;
     const { activeScreens, direction } = this.state;
     return (
@@ -60,6 +61,7 @@ class ActivityScreens extends React.PureComponent {
               onChange={onChange}
               authToken={authToken}
               isCurrent={index === currentScreen}
+              onContentError={onContentError}
             />
           </SlideInView>
         ))}
@@ -74,6 +76,7 @@ ActivityScreens.propTypes = {
   currentScreen: PropTypes.number.isRequired,
   authToken: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
+  onContentError: PropTypes.func.isRequired,
 };
 
 export default ActivityScreens;

app/components/screen/Widget.js

@@ -21,7 +21,7 @@ import {
 } from '../../widgets';
 import TimePicker from '../../widgets/TimeRange/TimePicker';
 
-const Widget = ({ screen, answer, onChange, isCurrent, onPress, onRelease }) => {
+const Widget = ({ screen, answer, onChange, isCurrent, onPress, onRelease, onContentError }) => {
   if (screen.inputType === 'radio'
     && R.path(['valueConstraints', 'multipleChoice'], screen) === true) {
     return (
@@ -194,6 +194,8 @@ const Widget = ({ screen, answer, onChange, isCurrent, onPress, onRelease }) =>
   if (screen.inputType === 'markdown-message') {
     return null;
   }
+
+  onContentError();
   return <WidgetError />;
 };
 
@@ -207,6 +209,7 @@ Widget.propTypes = {
   screen: PropTypes.object.isRequired,
   answer: PropTypes.any,
   onChange: PropTypes.func.isRequired,
+  onContentError: PropTypes.func.isRequired,
   isCurrent: PropTypes.bool.isRequired,
   onPress: PropTypes.func,
   onRelease: PropTypes.func,

app/components/screen/index.js

@@ -132,7 +132,7 @@ class ActivityScreen extends Component {
   }
 
   render() {
-    const { screen, answer, onChange, isCurrent } = this.props;
+    const { screen, answer, onChange, isCurrent, onContentError } = this.props;
     const { scrollEnabled, inputDelayed, timerActive } = this.state;
     return (
       <View style={styles.outer}>
@@ -174,6 +174,7 @@ class ActivityScreen extends Component {
                 screen={screen}
                 onPress={() => { this.setState({ scrollEnabled: false }); }}
                 onRelease={() => { this.setState({ scrollEnabled: true }); }}
+                onContentError={onContentError}
               />
             )
           }
@@ -196,6 +197,7 @@ ActivityScreen.propTypes = {
   screen: PropTypes.object.isRequired,
   answer: PropTypes.any,
   onChange: PropTypes.func.isRequired,
+  onContentError: PropTypes.func.isRequired,
   isCurrent: PropTypes.bool.isRequired,
 };
 

app/scenes/Activity/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { StatusBar, View, StyleSheet } from 'react-native';
 import { Container } from 'native-base';
 import PropTypes from 'prop-types';
@@ -55,6 +55,8 @@ const Activity = ({
   const fullScreen = currentItem.fullScreen || activity.fullScreen;
   const autoAdvance = currentItem.autoAdvance || activity.autoAdvance;
 
+  const [isContentError, setContentError] = useState(false);
+
   return (
     <Container>
       <StatusBar hidden />
@@ -69,16 +71,26 @@ const Activity = ({
           }
         }}
         authToken={authToken}
+        onContentError={() => setContentError(true)}
       />
       {!fullScreen && (
         <View style={styles.buttonArea}>
           {activity.items.length > 1 && (
             <ActProgress index={currentScreen} length={activity.items.length} />
           )}
           <ActivityButtons
-            nextLabel={getNextLabel(currentScreen, itemVisibility, activity, responses)}
-            nextEnabled={isNextEnabled(currentScreen, activity, responses)}
-            onPressNext={nextScreen}
+            nextLabel={getNextLabel(
+              currentScreen,
+              itemVisibility,
+              activity,
+              responses,
+              isContentError,
+            )}
+            nextEnabled={isNextEnabled(currentScreen, activity, responses, isContentError)}
+            onPressNext={() => {
+              setContentError(false);
+              nextScreen();
+            }}
             prevLabel={getPrevLabel(currentScreen, itemVisibility)}
             prevEnabled={isPrevEnabled(currentScreen, activity)}
             onPressPrev={prevScreen}

app/services/activityNavigation.js

@@ -42,10 +42,10 @@ export const getLastPos = (index, ar) => {
   return -1;
 };
 
-export const getNextLabel = (index, visibility, activity, responses) => {
+export const getNextLabel = (index, visibility, activity, responses, isContentError) => {
   // If the screen is not valid, then the label is Skip
   const isValid = checkValidity(activity.items[index], responses[index]);
-  if (!isValid) {
+  if (!isValid || isContentError) {
     return SKIP;
   }
 
@@ -60,10 +60,10 @@ export const getNextLabel = (index, visibility, activity, responses) => {
 };
 
 // If item has a valid response, or is skippable, then next is enabled
-export const isNextEnabled = (index, activity, responses) => {
+export const isNextEnabled = (index, activity, responses, isContentError) => {
   const isValid = checkValidity(activity.items[index], responses[index]);
   const isSkippable = checkSkippable(activity, activity.items[index]);
-  return isValid || isSkippable;
+  return isValid || isSkippable || isContentError;
 };
 
 export const isPrevEnabled = (index, activity) => {