Merge pull request e-mission#1050 from JGreenlee/fix-onboarding-routes

🐛 Onboarding fixes 10/3
sebastianbarry · Oct 5, 2023 · 22880c8 · 22880c8
2 parents 4336be5 + ffc614e
commit 22880c8
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 46 deletions.
diff --git a/www/js/App.tsx b/www/js/App.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, createContext, useMemo } from 'react';
 import { getAngularService } from './angular-react-helper';
-import { BottomNavigation, Button, useTheme } from 'react-native-paper';
+import { ActivityIndicator, BottomNavigation, useTheme } from 'react-native-paper';
 import { useTranslation } from 'react-i18next';
 import LabelTab from './diary/LabelTab';
 import MetricsTab from './metrics/MetricsTab';
@@ -22,7 +22,8 @@ export const AppContext = createContext<any>({});
 const App = () => {
 
   const [index, setIndex] = useState(0);
-  const [pendingOnboardingState, setPendingOnboardingState] = useState<OnboardingState>(null);
+  // will remain null while the onboarding state is still being determined
+  const [onboardingState, setOnboardingState] = useState<OnboardingState|null>(null);
   const [permissionsPopupVis, setPermissionsPopupVis] = useState(false);
   const appConfig = useAppConfig();
   const { colors } = useTheme();
@@ -41,7 +42,7 @@ const App = () => {
     control: ProfileSettings,
   });
 
-  const refreshOnboardingState = () => getPendingOnboardingState().then(setPendingOnboardingState);
+  const refreshOnboardingState = () => getPendingOnboardingState().then(setOnboardingState);
   useEffect(() => { refreshOnboardingState() }, []);
 
   useEffect(() => {
@@ -53,32 +54,43 @@ const App = () => {
 
   const appContextValue = {
     appConfig,
-    pendingOnboardingState, setPendingOnboardingState, refreshOnboardingState,
+    onboardingState, setOnboardingState, refreshOnboardingState,
     permissionsPopupVis, setPermissionsPopupVis,
   }
 
-  console.debug('pendingOnboardingState in App', pendingOnboardingState);
+  console.debug('onboardingState in App', onboardingState);
+
+  let appContent;
+  if (onboardingState == null) {
+    // if onboarding state is not yet determined, show a loading spinner
+    appContent = <ActivityIndicator size={'large'} style={{ flex: 1 }} />
+  } else if (onboardingState?.route == OnboardingRoute.DONE) {
+    // if onboarding route is DONE, show the main app with navigation between tabs
+    appContent = (
+      <BottomNavigation
+        navigationState={{ index, routes }}
+        onIndexChange={setIndex}
+        renderScene={renderScene}
+        // Place at bottom, color of 'surface' (white) by default, and 68px tall (default was 80)
+        safeAreaInsets={{ bottom: 0 }}
+        style={{ backgroundColor: colors.surface }}
+        barStyle={{ height: 68, justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0)' }}
+        // BottomNavigation uses secondaryContainer color for the background, but we want primaryContainer
+        // (light blue), so we override here.
+        theme={{ colors: { secondaryContainer: colors.primaryContainer } }} />
+    );
+  } else {
+    // if there is an onboarding route that is not DONE, show the onboarding stack
+    appContent = <OnboardingStack />
+  }
 
   return (<>
     <AppContext.Provider value={appContextValue}>
-      {pendingOnboardingState == null ?
-        <BottomNavigation
-          navigationState={{ index, routes }}
-          onIndexChange={setIndex}
-          renderScene={renderScene}
-          // Place at bottom, color of 'surface' (white) by default, and 68px tall (default was 80)
-          safeAreaInsets={{ bottom: 0 }}
-          style={{ backgroundColor: colors.surface }}
-          barStyle={{ height: 68, justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0)' }}
-          // BottomNavigation uses secondaryContainer color for the background, but we want primaryContainer
-          // (light blue), so we override here.
-          theme={{ colors: { secondaryContainer: colors.primaryContainer } }} />
-      :
-        <OnboardingStack />
-      }
-      { /* if onboarding is done (state == null), or if is in progress but we are past the
-        consent page (route > CONSENT), the permissions popup can show if needed */ }
-      {(pendingOnboardingState == null || pendingOnboardingState.route > OnboardingRoute.CONSENT) &&
+      {appContent}
+
+      { /* If we are past the consent page (route > CONSENT), the permissions popup can show if needed.
+          This also includes if onboarding is DONE altogether (because "DONE" is > "CONSENT") */ }
+      {(onboardingState && onboardingState.route > OnboardingRoute.CONSENT) &&
         <AppStatusModal permitVis={permissionsPopupVis} setPermitVis={setPermissionsPopupVis} />
       }
     </AppContext.Provider>

diff --git a/www/js/onboarding/OnboardingStack.tsx b/www/js/onboarding/OnboardingStack.tsx
@@ -11,22 +11,22 @@ import { displayErrorMsg } from "../plugin/logger";
 
 const OnboardingStack = () => {
 
-  const { pendingOnboardingState } = useContext(AppContext);
+  const { onboardingState } = useContext(AppContext);
 
-  console.debug('pendingOnboardingState in OnboardingStack', pendingOnboardingState);
+  console.debug('onboardingState in OnboardingStack', onboardingState);
 
-  if (pendingOnboardingState.route == OnboardingRoute.WELCOME) {
+  if (onboardingState.route == OnboardingRoute.WELCOME) {
     return <WelcomePage />;
-  } else if (pendingOnboardingState.route == OnboardingRoute.SUMMARY) {
+  } else if (onboardingState.route == OnboardingRoute.SUMMARY) {
     return <SummaryPage />;
-  } else if (pendingOnboardingState.route == OnboardingRoute.CONSENT) {
+  } else if (onboardingState.route == OnboardingRoute.CONSENT) {
     return <ConsentPage />;
-  } else if (pendingOnboardingState.route == OnboardingRoute.SAVE_QR) {
+  } else if (onboardingState.route == OnboardingRoute.SAVE_QR) {
     return <SaveQrPage />;
-  } else if (pendingOnboardingState.route == OnboardingRoute.SURVEY) {
+  } else if (onboardingState.route == OnboardingRoute.SURVEY) {
     return <SurveyPage />;
   } else {
-    displayErrorMsg('OnboardingStack: unknown route', pendingOnboardingState.route);
+    displayErrorMsg('OnboardingStack: unknown route', onboardingState.route);
   }
 }
 

diff --git a/www/js/onboarding/SaveQrPage.tsx b/www/js/onboarding/SaveQrPage.tsx
@@ -14,13 +14,13 @@ import { preloadDemoSurveyResponse } from "./SurveyPage";
 const SaveQrPage = ({  }) => {
 
   const { t } = useTranslation();
-  const { pendingOnboardingState, refreshOnboardingState } = useContext(AppContext);
+  const { onboardingState, refreshOnboardingState } = useContext(AppContext);
   const { overallStatus } = usePermissionStatus();
 
   useEffect(() => {
     if (overallStatus == true && !registerUserDone) {
       logDebug('permissions done, going to log in');
-      login(pendingOnboardingState.opcode).then((response) => {
+      login(onboardingState.opcode).then((response) => {
         logDebug('login done, refreshing onboarding state');
         setRegisterUserDone(true);
         preloadDemoSurveyResponse();
@@ -63,13 +63,13 @@ const SaveQrPage = ({  }) => {
         </Text>
       </View>
       <View style={[onboardingStyles.pageSection, {paddingHorizontal: 20}]}>
-        <QrCode value={pendingOnboardingState.opcode} style={{marginHorizontal: 8}} />
+        <QrCode value={onboardingState.opcode} style={{marginHorizontal: 8}} />
         <Text style={s.opcodeText}>
-          {pendingOnboardingState.opcode}
+          {onboardingState.opcode}
         </Text>
       </View>
       <View style={onboardingStyles.buttonRow}>
-        <Button mode='contained' icon='share' onPress={() => shareQR(pendingOnboardingState.opcode)}>
+        <Button mode='contained' icon='share' onPress={() => shareQR(onboardingState.opcode)}>
           {t('login.save')}
         </Button>
         <Button mode='outlined' icon='chevron-right' onPress={onFinish}>

diff --git a/www/js/onboarding/StudySummary.tsx b/www/js/onboarding/StudySummary.tsx
@@ -31,16 +31,16 @@ const StudySummary = () => {
 const styles = StyleSheet.create({
   title: {
     fontWeight: "bold",
-    fontSize: 22,
+    fontSize: 24,
     paddingBottom: 10,
     textAlign: "center"
   },
   text: {
-    fontSize: 14,
+    fontSize: 15,
   },
   studyName: {
     fontWeight: "bold",
-    fontSize: 16
+    fontSize: 17,
   },
 });
 

diff --git a/www/js/onboarding/SummaryPage.tsx b/www/js/onboarding/SummaryPage.tsx
@@ -21,8 +21,10 @@ const SummaryPage = () => {
   // summary of the study, followed by 'next' button
   return (<>
     <ScrollView contentContainerStyle={{flex: 1}}>
-      <Surface style={[onboardingStyles.page, {flex:1, gap: 16}]}>
-        <StudySummary />
+      <Surface style={[onboardingStyles.page, {flex: 1, padding: 32}]}>
+        <View style={{ gap: 40, margin: 'auto' }}>
+          <StudySummary />
+        </View>
         <View style={[onboardingStyles.buttonRow, {marginTop: 'auto'}]}>
           <Button mode='contained' onPress={next}> {t('intro.proceed')} </Button>
         </View>

diff --git a/www/js/onboarding/onboardingHelper.ts b/www/js/onboarding/onboardingHelper.ts
@@ -4,13 +4,13 @@ import { getConfig } from "../config/dynamicConfig";
 
 export const INTRO_DONE_KEY = 'intro_done';
 
-// state = null if onboarding is done
 // route = WELCOME if no config present
 // route = SUMMARY if config present, but not consented and summary not done
 // route = CONSENT if config present, but not consented and summary done
 // route = SAVE_QR if config present, consented, but save qr not done
 // route = SURVEY if config present, consented and save qr done
-export enum OnboardingRoute { WELCOME, SUMMARY, CONSENT, SAVE_QR, SURVEY, NONE };
+// route = DONE if onboarding is finished (intro_done marked)
+export enum OnboardingRoute { WELCOME, SUMMARY, CONSENT, SAVE_QR, SURVEY, DONE };
 export type OnboardingState = {
   opcode: string,
   route: OnboardingRoute,
@@ -27,9 +27,10 @@ export const setRegisterUserDone = (b) => registerUserDone = b;
 
 export function getPendingOnboardingState(): Promise<OnboardingState> {
   return Promise.all([getConfig(), readConsented(), readIntroDone()]).then(([config, isConsented, isIntroDone]) => {
-    if (isIntroDone) return null; // onboarding is done; no pending state
-    let route: OnboardingRoute = OnboardingRoute.NONE;
-    if (!config) {
+    let route: OnboardingRoute;
+    if (isIntroDone) {
+      route = OnboardingRoute.DONE;
+    } else if (!config) {
       route = OnboardingRoute.WELCOME;
     } else if (!isConsented && !summaryDone) {
       route = OnboardingRoute.SUMMARY;