Skip to content

Commit 01ac115

Browse files
Birloi FlorianBirloi Florian
Birloi Florian
authored and
Birloi Florian
committed
refactor: wip routing setup
1 parent 8c1f534 commit 01ac115

10 files changed

Lines changed: 101 additions & 61 deletions

File tree

‎mobile/app/(citizen)/(main)/(drawer)/(tabs)/index.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ import { Icon } from "../../../../../components/Icon";
33
import { Screen } from "../../../../../components/Screen";
44
import Header from "../../../../../components/Header";
55
import { Text } from "react-native";
6-
import { useNavigation } from "expo-router";
6+
import { useNavigation, useRouter } from "expo-router";
77
import { DrawerActions } from "@react-navigation/native";
8+
import Button from "../../../../../components/Button";
89

910
export default function Report() {
1011
const navigation = useNavigation();
12+
const router = useRouter();
1113

1214
return (
1315
<Screen preset="fixed" contentContainerStyle={{ flexGrow: 1 }}>
@@ -22,6 +24,7 @@ export default function Report() {
2224
/>
2325

2426
<Text>Report Index </Text>
27+
<Button onPress={() => router.push("/questionnaire/1")}>Go to Questionnaire</Button>
2528
</Screen>
2629
);
2730
}

‎mobile/app/(citizen)/(main)/(drawer)/(tabs)/more.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,16 @@ import { Icon } from "../../../../../components/Icon";
33
import { Screen } from "../../../../../components/Screen";
44
import Header from "../../../../../components/Header";
55
import { Text } from "react-native";
6-
import { useNavigation } from "expo-router";
6+
import { useNavigation, useRouter } from "expo-router";
77
import { DrawerActions } from "@react-navigation/native";
8+
import Button from "../../../../../components/Button";
9+
import { useAppMode } from "../../../../../contexts/app-mode/AppModeContext.provider";
810

911
export default function More() {
1012
const navigation = useNavigation();
13+
const { appMode, setAppMode } = useAppMode();
14+
const router = useRouter();
15+
console.log("render Mode", appMode);
1116

1217
return (
1318
<Screen preset="fixed" contentContainerStyle={{ flexGrow: 1 }}>
@@ -22,6 +27,14 @@ export default function More() {
2227
/>
2328

2429
<Text>More Index </Text>
30+
<Button
31+
onPress={() => {
32+
setAppMode("onboarding");
33+
router.push("/");
34+
}}
35+
>
36+
Go to onboarding
37+
</Button>
2538
</Screen>
2639
);
2740
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function MainLayout() {
1616
return (
1717
<Stack>
1818
<Stack.Screen name="(drawer)" options={{ headerShown: false }} />
19-
<Stack.Screen name="questionnaire" options={{ headerShown: false }} />
19+
<Stack.Screen name="questionnaire/[questionId]" options={{ headerShown: false }} />
2020
</Stack>
2121
);
2222
}

‎mobile/app/(citizen)/(main)/questionnaire.tsx‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎mobile/app/(citizen)/(main)/questionnaire/[questionId].tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Text } from "tamagui";
2+
import { Screen } from "../../../../components/Screen";
3+
import Header from "../../../../components/Header";
4+
import { useLocalSearchParams, useRouter } from "expo-router";
5+
import { Icon } from "../../../../components/Icon";
6+
7+
const Questionnaire = () => {
8+
const { questionId } = useLocalSearchParams<{ questionId: string }>();
9+
console.log("questionId", questionId);
10+
const router = useRouter();
11+
12+
return (
13+
<Screen>
14+
<Header
15+
title="Questionnaire"
16+
leftIcon={<Icon icon="chevronLeft" color="white" />}
17+
onLeftPress={() => {
18+
router.back();
19+
}}
20+
/>
21+
<Text>Questionnaire</Text>
22+
</Screen>
23+
);
24+
};
25+
26+
export default Questionnaire;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ function CitizenElectionRoundsSelector() {
1010

1111
return (
1212
<Screen preset="fixed" contentContainerStyle={{ flexGrow: 1 }}>
13-
<Text>Election Rounds</Text>
13+
<Text style={{ marginBottom: 125 }}>Election Rounds</Text>
1414
<Button
1515
onPress={() => {
1616
setSelectedElectionRound(true);
1717
router.push("(main)");
1818
}}
1919
>
20-
Du-te-n mm
20+
Continue
2121
</Button>
2222
</Screen>
2323
);

‎mobile/app/(observer)/_layout.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
11
import { Slot } from "expo-router";
22
import React from "react";
3-
import { Text } from "react-native";
43

54
const ObserverLayout = () => {
65
console.log("ObserverLayout");
7-
return (
8-
<>
9-
<Text>Observer Layout</Text>
10-
<Slot />
11-
</>
12-
);
6+
return <Slot />;
137
};
148

159
export default ObserverLayout;

‎mobile/app/index.tsx‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
1-
import React, { useEffect } from "react";
1+
import React from "react";
22
import { Redirect } from "expo-router";
3-
import * as SecureStore from "expo-secure-store";
4-
import { SECURE_STORAGE_KEYS } from "../common/constants";
3+
import { useAppMode } from "../contexts/app-mode/AppModeContext.provider";
4+
import { Typography } from "../components/Typography";
5+
import { Screen } from "../components/Screen";
6+
import { YStack } from "tamagui";
7+
import Button from "../components/Button";
58

69
function AppModeWrapper() {
710
console.log("AppModeWrapper");
8-
const APP_MODE = "citizen";
911

10-
useEffect(() => {
11-
try {
12-
const onboardingComplete = SecureStore.getItem(SECURE_STORAGE_KEYS.ONBOARDING_NEW_COMPLETE);
13-
if (onboardingComplete !== "true") {
14-
// setOnboardingComplete(false);
15-
}
16-
} catch (err) {
17-
// Sentry.captureException(err);
18-
}
19-
}, []);
12+
const { appMode, setAppMode } = useAppMode();
13+
console.log("appMode", appMode);
2014

21-
// 1. Redirect to onboarding if not already done // TODO: add another onboarding key
22-
// 2. Redirect to citizen or app based on last OnBoarding step (Select AppMode)
15+
// 1. Redirect to citizen or app based on last OnBoarding step (Select AppMode)
16+
if (appMode === "citizen") {
17+
return <Redirect href={`(citizen)`} />;
18+
}
2319
// 2.1. The last selection will be added in a context and here will take care of redirecting so we can do it declaratively
24-
return APP_MODE === "citizen" ? (
25-
<Redirect href="(citizen)/" />
26-
) : (
27-
<Redirect href="(observer)/(app)" />
20+
if (appMode === "observer") {
21+
return <Redirect href="(observer)/(app)" />;
22+
}
23+
24+
// 3. Redirect to onboarding if not already done // TODO: add another onboarding key
25+
// TODO: do we actually need an onboarding screen?
26+
return (
27+
<Screen>
28+
<Typography>Onboarding</Typography>
29+
<YStack style={{ paddingVertical: 100, gap: 25 }}>
30+
<Button onPress={() => setAppMode("citizen")}>Go to Citizen</Button>
31+
<Button onPress={() => setAppMode("observer")}>Go to Observer</Button>
32+
</YStack>
33+
</Screen>
2834
);
2935
}
3036

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

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
import { createContext, useState, useContext } from "react";
1+
import { createContext, useState, useContext, useEffect } from "react";
2+
import { Typography } from "../../components/Typography";
3+
import { SECURE_STORAGE_KEYS } from "../../common/constants";
4+
import * as SecureStore from "expo-secure-store";
25

36
type AppModeContextType = {
4-
appMode?: "citizen" | "observer";
5-
setAppMode: (appMode: "citizen" | "observer") => void;
7+
appMode: "citizen" | "observer" | "onboarding";
8+
setAppMode: (appMode: "citizen" | "observer" | "onboarding") => void;
69

710
onboardingComplete: boolean;
811
setOnboardingComplete: (onboardingComplete: boolean) => void;
@@ -11,12 +14,30 @@ type AppModeContextType = {
1114
export const AppModeContext = createContext<AppModeContextType | null>(null);
1215

1316
const AppModeContextProvider = ({ children }: React.PropsWithChildren) => {
14-
const [appMode, setAppMode] = useState<"citizen" | "observer">();
17+
const [appMode, setAppMode] = useState<"citizen" | "observer" | "onboarding">();
1518
const [onboardingComplete, setOnboardingComplete] = useState<boolean>(false);
19+
console.log("AppModeContextProvider", appMode);
20+
21+
useEffect(() => {
22+
const storedAppMode = SecureStore.getItem(SECURE_STORAGE_KEYS.ONBOARDING_NEW_COMPLETE);
23+
// if no appMode has been set it should be onboarding to avoid flickering
24+
const appMode = storedAppMode ? (storedAppMode as "citizen" | "observer") : "onboarding";
25+
setAppMode(appMode);
26+
}, []);
27+
28+
const handleSetAppMode = (appMode: "citizen" | "observer" | "onboarding") => {
29+
console.log("handleSetAppMode", appMode);
30+
setAppMode(appMode);
31+
SecureStore.setItem(SECURE_STORAGE_KEYS.ONBOARDING_NEW_COMPLETE, appMode);
32+
};
33+
34+
if (!appMode) {
35+
return <Typography>Loading...</Typography>;
36+
}
1637

1738
return (
1839
<AppModeContext.Provider
19-
value={{ appMode, setAppMode, onboardingComplete, setOnboardingComplete }}
40+
value={{ appMode, setAppMode: handleSetAppMode, onboardingComplete, setOnboardingComplete }}
2041
>
2142
{children}
2243
</AppModeContext.Provider>

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

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,12 @@ import { createContext, useContext, useEffect, useState } from "react";
33
type CitizenUserContextType = {
44
selectedElectionRound: boolean;
55
setSelectedElectionRound: (electionRound: boolean) => void;
6-
7-
// electionRounds: ElectionRoundVM[] | undefined;
8-
// visits: PollingStationVisitVM[] | undefined;
9-
10-
// activeElectionRound?: ElectionRoundVM;
11-
// selectedPollingStation?: PollingStationNomenclatorNodeVM | null;
12-
13-
// isLoading: boolean;
14-
15-
// error: Error | null;
16-
// setSelectedPollingStationId: (pollingStationId: string | null) => void;
176
};
187

198
export const CitizenUserContext = createContext<CitizenUserContextType | null>(null);
209

2110
const CitizenUserContextProvider = ({ children }: React.PropsWithChildren) => {
22-
const [selectedElectionRound, setSelectedElectionRound] = useState<boolean>(false);
11+
const [selectedElectionRound, setSelectedElectionRound] = useState<boolean>(true);
2312

2413
useEffect(() => {
2514
console.log("👀 [Context] selectedElectionRound", selectedElectionRound);

0 commit comments

Comments
 (0)