WIP: new routing

Author: radulescuandrew

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

@@ -0,0 +1,69 @@
+import React from "react";
+import { Tabs } from "expo-router";
+import { TextStyle, ViewStyle } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTheme } from "tamagui";
+import { useTranslation } from "react-i18next";
+import { useNetInfoContext } from "../../../../../contexts/net-info-banner/NetInfoContext";
+import { Icon } from "../../../../../components/Icon";
+
+export default function TabLayout() {
+  const insets = useSafeAreaInsets();
+  const theme = useTheme();
+  const { t } = useTranslation("tabs");
+
+  const { shouldDisplayBanner } = useNetInfoContext();
+
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: theme.purple5?.val,
+        tabBarHideOnKeyboard: true,
+        headerShown: false,
+        tabBarStyle: [
+          $tabBar,
+          {
+            height: insets.bottom + 60,
+            ...(shouldDisplayBanner && insets?.bottom ? { marginBottom: -insets.bottom + 10 } : {}),
+          },
+        ],
+        tabBarLabelStyle: $tabBarLabel,
+        tabBarAllowFontScaling: false,
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Report",
+          tabBarIcon: ({ color }) => <Icon icon="observation" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="resources"
+        options={{
+          title: "Resources",
+          tabBarIcon: ({ color }) => <Icon icon="quickReport" color={color} />,
+          href: "/resources",
+        }}
+      />
+      <Tabs.Screen
+        name="more"
+        options={{
+          title: t("more"),
+          tabBarIcon: ({ color }) => <Icon icon="more" color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}
+
+const $tabBar: ViewStyle = {
+  backgroundColor: "white",
+};
+
+const $tabBarLabel: TextStyle = {
+  marginBottom: 11,
+  marginTop: -5,
+  fontFamily: "Roboto",
+  fontSize: 12,
+};

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { Icon } from "../../../../../components/Icon";
+import { Screen } from "../../../../../components/Screen";
+import Header from "../../../../../components/Header";
+import { Text } from "react-native";
+import { useNavigation } from "expo-router";
+import { DrawerActions } from "@react-navigation/native";
+
+export default function Report() {
+  const navigation = useNavigation();
+
+  return (
+    <Screen preset="fixed" contentContainerStyle={{ flexGrow: 1 }}>
+      <Header
+        title="Report"
+        titleColor="white"
+        barStyle="light-content"
+        leftIcon={<Icon icon="menuAlt2" color="white" />}
+        onLeftPress={() => navigation.dispatch(DrawerActions.openDrawer)}
+        rightIcon={<Icon icon="dotsVertical" color="white" />}
+        onRightPress={() => {}}
+      />
+
+      <Text>Report Index </Text>
+    </Screen>
+  );
+}

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { Icon } from "../../../../../components/Icon";
+import { Screen } from "../../../../../components/Screen";
+import Header from "../../../../../components/Header";
+import { Text } from "react-native";
+import { useNavigation } from "expo-router";
+import { DrawerActions } from "@react-navigation/native";
+
+export default function More() {
+  const navigation = useNavigation();
+
+  return (
+    <Screen preset="fixed" contentContainerStyle={{ flexGrow: 1 }}>
+      <Header
+        title="More"
+        titleColor="white"
+        barStyle="light-content"
+        leftIcon={<Icon icon="menuAlt2" color="white" />}
+        onLeftPress={() => navigation.dispatch(DrawerActions.openDrawer)}
+        rightIcon={<Icon icon="dotsVertical" color="white" />}
+        onRightPress={() => {}}
+      />
+
+      <Text>More Index </Text>
+    </Screen>
+  );
+}

mobile/app/(citizen)/(main)/(drawer)/(tabs)/resources.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Icon } from "../../../../../components/Icon";
+import { Screen } from "../../../../../components/Screen";
+import Header from "../../../../../components/Header";
+import { Text } from "react-native";
+import { useNavigation } from "expo-router";
+import { DrawerActions } from "@react-navigation/native";
+
+export default function Resources() {
+  const navigation = useNavigation();
+
+  return (
+    <Screen preset="fixed" contentContainerStyle={{ flexGrow: 1 }}>
+      <Header
+        title="Resources"
+        titleColor="white"
+        barStyle="light-content"
+        leftIcon={<Icon icon="menuAlt2" color="white" />}
+        onLeftPress={() => navigation.dispatch(DrawerActions.openDrawer)}
+        rightIcon={<Icon icon="dotsVertical" color="white" />}
+        onRightPress={() => {}}
+      />
+
+      <Text>Resources Index </Text>
+    </Screen>
+  );
+}

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { Drawer } from "expo-router/drawer";
+import { ScrollViewProps, Text } from "react-native";
+import { DrawerContentScrollView } from "@react-navigation/drawer";
+import { useTheme } from "tamagui";
+
+type DrawerContentProps = ScrollViewProps & {
+  children?: React.ReactNode;
+  backgroundColor: string;
+};
+
+export const DrawerContent = (props: DrawerContentProps) => {
+  return (
+    <DrawerContentScrollView {...props}>
+      <Text>Drawer Content</Text>
+    </DrawerContentScrollView>
+  );
+};
+
+export default function DrawerLayout() {
+  const theme = useTheme();
+
+  console.log("DrawerLayout");
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <Drawer
+        drawerContent={() => <DrawerContent backgroundColor={theme.purple5?.val} />}
+        screenOptions={{
+          drawerType: "front",
+          headerShown: false,
+        }}
+      >
+        <Drawer.Screen name="(tabs)" />
+      </Drawer>
+    </GestureHandlerRootView>
+  );
+}

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

@@ -0,0 +1,14 @@
+import { Redirect } from "expo-router";
+import React from "react";
+
+export default function MainLayout() {
+  console.log("MainLayout");
+
+  const selectedElectionRound = false;
+
+  if (!selectedElectionRound) {
+    return <Redirect href="/election-rounds" />;
+  }
+
+  return <></>;
+}

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

@@ -0,0 +1,12 @@
+import { Text } from "tamagui";
+import { Screen } from "../../../components/Screen";
+
+const Questionnaire = () => {
+  return (
+    <Screen>
+      <Text>Ha test</Text>
+    </Screen>
+  );
+};
+
+export default Questionnaire;

mobile/app/(citizen)/_layout.tsx

@@ -0,0 +1,9 @@
+import { Slot } from "expo-router";
+import React from "react";
+
+const CitizenLayout = () => {
+  console.log("CitizenLayout");
+  return <Slot />;
+};
+
+export default CitizenLayout;

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

@@ -0,0 +1,22 @@
+import { Text } from "react-native";
+import React from "react";
+import Button from "../../components/Button";
+import { Screen } from "../../components/Screen";
+import { router } from "expo-router";
+
+function CitizenElectionRoundsSelector() {
+  return (
+    <Screen preset="fixed" contentContainerStyle={{ flexGrow: 1 }}>
+      <Text>More Index </Text>
+      <Button
+        onPress={() => {
+          router.replace("(main)");
+        }}
+      >
+        Du-te-n mm
+      </Button>
+    </Screen>
+  );
+}
+
+export default CitizenElectionRoundsSelector;