feat: wip app mode switch updates

Author: radulescuandrew

mobile/app/(citizen)/(main)/_layout.tsx

@@ -1,14 +1,22 @@
-import { Redirect } from "expo-router";
+import { Redirect, Stack } from "expo-router";
 import React from "react";
+import { useCitizenUserData } from "../../../contexts/citizen-user/CitizenUserContext.provider";
 
 export default function MainLayout() {
   console.log("MainLayout");
 
-  const selectedElectionRound = false;
+  const { selectedElectionRound } = useCitizenUserData();
+
+  console.log("👀 selectedElectionRound", selectedElectionRound);
 
   if (!selectedElectionRound) {
     return <Redirect href="/election-rounds" />;
   }
 
-  return <></>;
+  return (
+    <Stack>
+      <Stack.Screen name="(drawer)" options={{ headerShown: false }} />
+      <Stack.Screen name="questionnaire" options={{ headerShown: false }} />
+    </Stack>
+  );
 }

mobile/app/(citizen)/_layout.tsx

@@ -1,9 +1,17 @@
-import { Slot } from "expo-router";
+import { Stack } from "expo-router";
 import React from "react";
+import CitizenUserContextProvider from "../../contexts/citizen-user/CitizenUserContext.provider";
 
 const CitizenLayout = () => {
   console.log("CitizenLayout");
-  return <Slot />;
+
+  return (
+    <CitizenUserContextProvider>
+      <Stack screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="(main)" />
+      </Stack>
+    </CitizenUserContextProvider>
+  );
 };
 
 export default CitizenLayout;

mobile/app/(citizen)/election-rounds.tsx

@@ -2,15 +2,19 @@ import { Text } from "react-native";
 import React from "react";
 import Button from "../../components/Button";
 import { Screen } from "../../components/Screen";
+import { useCitizenUserData } from "../../contexts/citizen-user/CitizenUserContext.provider";
 import { router } from "expo-router";
 
 function CitizenElectionRoundsSelector() {
+  const { setSelectedElectionRound } = useCitizenUserData();
+
   return (
     <Screen preset="fixed" contentContainerStyle={{ flexGrow: 1 }}>
-      <Text>More Index </Text>
+      <Text>Election Rounds</Text>
       <Button
         onPress={() => {
-          router.replace("(main)");
+          setSelectedElectionRound(true);
+          router.push("(main)");
         }}
       >
         Du-te-n mm

mobile/app/_layout.tsx

@@ -16,6 +16,7 @@ import { isRunningInExpoGo } from "expo";
 import Toast from "react-native-toast-message";
 import { toastConfig } from "../toast.config";
 import * as Notifications from "expo-notifications";
+import AppModeContextProvider from "../contexts/app-mode/AppModeContext.provider";
 
 // Construct a new instrumentation instance. This is needed to communicate between the integration and React
 const routingInstrumentation = new Sentry.ReactNavigationInstrumentation();
@@ -41,7 +42,7 @@ Sentry.init({
   enableNative: true,
   environment: process.env.EXPO_PUBLIC_ENVIRONMENT,
   attachScreenshot: true,
-  enabled: !__DEV__,
+  enabled: false,
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.
   // We recommend adjusting this value in production
@@ -59,6 +60,7 @@ Sentry.init({
 SplashScreen.preventAutoHideAsync();
 
 function RootLayout() {
+  console.log("RootLayout");
   const [loaded] = useFonts({
     Roboto: require("../assets/fonts/Roboto-Medium.ttf"),
     RobotoRegular: require("../assets/fonts/Roboto-Regular.ttf"),
@@ -95,9 +97,11 @@ function RootLayout() {
             <PortalProvider>
               <LanguageContextProvider>
                 <EasUpdateMonitorContextProvider>
-                  <Slot />
-                  <Toast config={toastConfig} position="top" />
-                  <NetInfoBanner />
+                  <AppModeContextProvider>
+                    <Slot />
+                    <Toast config={toastConfig} position="top" />
+                    <NetInfoBanner />
+                  </AppModeContextProvider>
                 </EasUpdateMonitorContextProvider>
               </LanguageContextProvider>
             </PortalProvider>

mobile/app/index.tsx

@@ -1,10 +1,23 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Redirect } from "expo-router";
+import * as SecureStore from "expo-secure-store";
+import { SECURE_STORAGE_KEYS } from "../common/constants";
 
 function AppModeWrapper() {
   console.log("AppModeWrapper");
   const APP_MODE = "citizen";
 
+  useEffect(() => {
+    try {
+      const onboardingComplete = SecureStore.getItem(SECURE_STORAGE_KEYS.ONBOARDING_NEW_COMPLETE);
+      if (onboardingComplete !== "true") {
+        // setOnboardingComplete(false);
+      }
+    } catch (err) {
+      // Sentry.captureException(err);
+    }
+  }, []);
+
   // 1. Redirect to onboarding if not already done // TODO: add another onboarding key
   // 2. Redirect to citizen or app based on last OnBoarding step (Select AppMode)
   // 2.1. The last selection will be added in a context and here will take care of redirecting so we can do it declaratively

mobile/common/constants.ts

@@ -6,6 +6,7 @@ export const ASYNC_STORAGE_KEYS = {
 
 export const SECURE_STORAGE_KEYS = {
   ONBOARDING_COMPLETE: "onboardingComplete",
+  ONBOARDING_NEW_COMPLETE: "onboardingNewComplete",
 };
 
 export const I18N_LANGUAGE = "i18n-language";

mobile/contexts/app-mode/AppModeContext.provider.tsx

@@ -0,0 +1,36 @@
+import { createContext, useState, useContext } from "react";
+
+type AppModeContextType = {
+  appMode?: "citizen" | "observer";
+  setAppMode: (appMode: "citizen" | "observer") => void;
+
+  onboardingComplete: boolean;
+  setOnboardingComplete: (onboardingComplete: boolean) => void;
+};
+
+export const AppModeContext = createContext<AppModeContextType | null>(null);
+
+const AppModeContextProvider = ({ children }: React.PropsWithChildren) => {
+  const [appMode, setAppMode] = useState<"citizen" | "observer">();
+  const [onboardingComplete, setOnboardingComplete] = useState<boolean>(false);
+
+  return (
+    <AppModeContext.Provider
+      value={{ appMode, setAppMode, onboardingComplete, setOnboardingComplete }}
+    >
+      {children}
+    </AppModeContext.Provider>
+  );
+};
+
+export const useAppMode = () => {
+  const data = useContext(AppModeContext);
+
+  if (!data) {
+    throw new Error("No data in AppModeContext found. Was used outside the tree");
+  }
+
+  return data;
+};
+
+export default AppModeContextProvider;

mobile/contexts/citizen-user/CitizenUserContext.provider.tsx

@@ -0,0 +1,45 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+type CitizenUserContextType = {
+  selectedElectionRound: boolean;
+  setSelectedElectionRound: (electionRound: boolean) => void;
+
+  // electionRounds: ElectionRoundVM[] | undefined;
+  // visits: PollingStationVisitVM[] | undefined;
+
+  // activeElectionRound?: ElectionRoundVM;
+  // selectedPollingStation?: PollingStationNomenclatorNodeVM | null;
+
+  // isLoading: boolean;
+
+  // error: Error | null;
+  // setSelectedPollingStationId: (pollingStationId: string | null) => void;
+};
+
+export const CitizenUserContext = createContext<CitizenUserContextType | null>(null);
+
+const CitizenUserContextProvider = ({ children }: React.PropsWithChildren) => {
+  const [selectedElectionRound, setSelectedElectionRound] = useState<boolean>(false);
+
+  useEffect(() => {
+    console.log("👀 [Context] selectedElectionRound", selectedElectionRound);
+  }, [selectedElectionRound]);
+
+  return (
+    <CitizenUserContext.Provider value={{ selectedElectionRound, setSelectedElectionRound }}>
+      {children}
+    </CitizenUserContext.Provider>
+  );
+};
+
+export const useCitizenUserData = () => {
+  const data = useContext(CitizenUserContext);
+
+  if (!data) {
+    throw new Error("No data in CitizenUserContext found. Was used outside the tree");
+  }
+
+  return data;
+};
+
+export default CitizenUserContextProvider;