parti-renaissance · nitrique · May 20, 2024 · May 20, 2024 · May 20, 2024 · May 20, 2024
diff --git a/app.json b/app.json
@@ -77,8 +77,6 @@
       [
         "@sentry/react-native/expo",
         {
-          "url": "https://sentry.io/",
-          "note": "Use SENTRY_AUTH_TOKEN env to authenticate with Sentry.",
           "project": "vox",
           "organization": "parti-renaissance"
         }

diff --git a/app/(tabs)/(home)/_layout.tsx b/app/(tabs)/(home)/_layout.tsx
@@ -1,3 +1,5 @@
+import EuCampaignIllustration from '@/assets/illustrations/EuCampaignIllustration'
+import Header, { SmallHeader } from '@/components/Header/Header'
 import { useSession } from '@/ctx/SessionProvider'
 import { Redirect, Stack } from 'expo-router'
 
@@ -7,12 +9,13 @@ export default function AppLayout() {
   if (!isAuth) {
     return <Redirect href={'/(tabs)/evenements/'} />
   }
+  const config = { title: '' }
   return (
-    <Stack>
-      <Stack.Screen name="index" options={{ headerShown: false }} />
-      <Stack.Screen name="(modals)/news-detail" options={{ headerShown: false }} />
-      <Stack.Screen name="(modals)/event-detail" options={{ headerShown: false }} />
-      <Stack.Screen name="(modals)/poll-detail" options={{ headerShown: false }} />
+    <Stack screenOptions={{ header: SmallHeader, animation: 'slide_from_right' }}>
+      <Stack.Screen name="index" options={{ title: '', header: Header, headerLeft: () => <EuCampaignIllustration /> }} />
+      <Stack.Screen name="(modals)/news-detail" options={config} />
+      <Stack.Screen name="(modals)/event-detail" options={config} />
+      <Stack.Screen name="(modals)/poll-detail" options={config} />
     </Stack>
   )
 }
diff --git a/app/(tabs)/(home)/index.tsx b/app/(tabs)/(home)/index.tsx
@@ -8,26 +8,13 @@ import MyProfileCard from '@/components/ProfileCards/ProfileCard/MyProfileCard'
 import ProgramCTA from '@/components/ProfileCards/ProgramCTA/ProgramCTA'
 import SkeCard from '@/components/Skeleton/CardSkeleton'
 import * as metatags from '@/config/metatags'
-import { useSession } from '@/ctx/SessionProvider'
 import HomeFeedList from '@/screens/home/feed/HomeFeedList'
-import { Redirect, Stack as RouterStack } from 'expo-router'
 import Head from 'expo-router/head'
 import { YStack } from 'tamagui'
 
 const HomeScreen: React.FC = () => {
-  const { isAuth } = useSession()
-
-  if (!isAuth) {
-    return <Redirect href={'/(tabs)/evenements/'} />
-  }
-
   return (
     <>
-      <RouterStack.Screen
-        options={{
-          headerShown: false,
-        }}
-      />
       <Head>
         <title>{metatags.createTitle('Le fil')}</title>
       </Head>

diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
@@ -1,16 +1,18 @@
 import React from 'react'
 import { Pressable } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import NavBar from '@/components/Header/Header'
+import Text from '@/components/base/Text'
 import WaitingScreen from '@/components/WaitingScreen'
 import { ROUTES } from '@/config/routes'
 import { useSession } from '@/ctx/SessionProvider'
 import useInit from '@/hooks/useInit'
+import { getFocusedRouteNameFromRoute } from '@react-navigation/native'
+import type { Route } from '@react-navigation/routers'
 import { parse, useURL } from 'expo-linking'
-import { Tabs, useGlobalSearchParams } from 'expo-router'
+import { Tabs, useGlobalSearchParams, useSegments } from 'expo-router'
 import { isWeb, useMedia, View } from 'tamagui'
 
-const TAB_BAR_HEIGTH = 60
+const TAB_BAR_HEIGTH = 80
 
 export default function AppLayout() {
   const insets = useSafeAreaInsets()
@@ -22,6 +24,12 @@ export default function AppLayout() {
 
   useInit()
 
+  const segments = useSegments()
+  const getTabBarVisibility = () => {
+    const hideOnScreens = ['tunnel', 'building-detail', 'polls'] // put here name of screen where you want to hide tabBar
+    return hideOnScreens.map((screen) => segments.includes(screen)).some(Boolean)
+  }
+
   if (!isAuth && !isLoading && (code || url)) {
     if (isWeb && code) {
       signIn({ code })
@@ -41,18 +49,31 @@ export default function AppLayout() {
   return (
     <View style={{ height: isWeb ? '100svh' : '100%' }}>
       <Tabs
-        initialRouteName="(home)"
+        initialRouteName={isAuth ? '(home)' : 'evenements'}
         screenOptions={{
-          header: (x) => <NavBar {...x} />,
+          headerShown: false,
           tabBarLabel: () => null,
           tabBarLabelPosition: 'below-icon',
           tabBarButton: (props) => <Pressable {...props} />,
+          tabBarHideOnKeyboard: true,
+          headerShadowVisible: false,
           tabBarStyle: {
             backgroundColor: 'white',
-            borderTopWidth: 2,
-            borderTopColor: 'rgba(145, 158, 171, 0.32)',
-            display: media.gtSm || !session ? 'none' : 'flex',
+            borderTopWidth: 1,
+            shadowOffset: { width: 0, height: 0 },
+            elevation: 0,
+            borderTopColor: 'rgba(145, 158, 171, 0.2)',
+            display: media.gtSm || !session || getTabBarVisibility() ? 'none' : 'flex',
             height: TAB_BAR_HEIGTH + insets.bottom,
+            alignContent: 'center',
+            justifyContent: 'center',
+            padding: 0,
+            paddingTop: 15,
+          },
+
+          tabBarItemStyle: {
+            paddingBottom: 20,
+            // paddingTop: 0,
           },
         }}
       >
@@ -62,11 +83,13 @@ export default function AppLayout() {
             name={route.name}
             options={{
               href: route.hidden === true ? null : undefined,
-              tabBarLabel: route.screenName,
+              title: route.screenName,
+              tabBarLabel: ({ focused }) => (
+                <Text color={focused ? route.labelColor : '$textSecondary'} fontWeight={focused ? '$6' : '$5'} fontSize={10} allowFontScaling={false}>
+                  {route.screenName}
+                </Text>
+              ),
               tabBarActiveTintColor: route.labelColor,
-              tabBarLabelStyle: {
-                marginBottom: 5,
-              },
               tabBarIcon: ({ focused }) => {
                 const Icon = ({ focused }) => <route.icon active={focused} />
 

diff --git a/app/(tabs)/actions/_layout.tsx b/app/(tabs)/actions/_layout.tsx
@@ -1,10 +1,10 @@
-import { headerBlank } from '@/styles/navigationAppearance'
+import { SmallHeader } from '@/components/Header/Header'
 import { Stack } from 'expo-router'
 
 export default function AppLayout() {
   return (
-    <Stack screenOptions={{ ...headerBlank, headerShown: false }}>
-      <Stack.Screen name="index" options={{ headerShown: false }} />
+    <Stack screenOptions={{ header: SmallHeader, animation: 'slide_from_right' }}>
+      <Stack.Screen name="index" options={{ title: 'Actions' }} />
       <Stack.Screen name="phoning/index" options={{ headerShown: false }} />
       <Stack.Screen name="phoning/session/[device]" options={{ presentation: 'modal', headerShown: false }} />
       <Stack.Screen name="phoning/charter" />

diff --git a/app/(tabs)/evenements/[id].tsx b/app/(tabs)/evenements/[id].tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import Error404 from '@/components/404/Error404'
 import BoundarySuspenseWrapper from '@/components/BoundarySuspenseWrapper'
 import PageLayout from '@/components/layouts/PageLayout/PageLayout'
 import AppDownloadCTA from '@/components/ProfileCards/AppDownloadCTA/AppDownloadCTA'
@@ -15,6 +16,7 @@ import { isWeb, YStack } from 'tamagui'
 
 const HomeScreen: React.FC = () => {
   const params = useLocalSearchParams<{ id: string }>()
+  if (!params.id) return <Error404 />
   return (
     <PageLayout>
       <PageLayout.SideBarLeft>

diff --git a/app/(tabs)/evenements/_layout.tsx b/app/(tabs)/evenements/_layout.tsx
@@ -1,11 +1,18 @@
-import { headerBlank } from '@/styles/navigationAppearance'
+import EuCampaignIllustration from '@/assets/illustrations/EuCampaignIllustration'
+import Header, { SmallHeader } from '@/components/Header/Header'
+import { useSession } from '@/ctx/SessionProvider'
 import { Stack } from 'expo-router'
 
-export default function AppLayout() {
+export default function EventLayout() {
+  const { isAuth } = useSession()
   return (
-    <Stack screenOptions={{ headerShown: false}}>
-      <Stack.Screen name="index" options={{ headerShown: false }} />
+    <Stack screenOptions={{ header: (x) => <SmallHeader {...x} />, animation: 'slide_from_right' }}>
+      <Stack.Screen
+        name="index"
+        options={isAuth ? { title: 'événements' } : { header: (x) => <Header {...x} />, title: 'événements', headerLeft: () => <EuCampaignIllustration /> }}
+      />
       <Stack.Screen name="[mode]/filters" options={{ headerShown: false, presentation: 'modal' }} />
+      <Stack.Screen name="[id]" options={{ title: '' }} />
     </Stack>
   )
 }
diff --git a/app/(tabs)/evenements/index.tsx b/app/(tabs)/evenements/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import BoundarySuspenseWrapper from '@/components/BoundarySuspenseWrapper'
 import BottomSheetFilter from '@/components/EventFilterForm/BottomSheetFilters'
 import EventFilterForm from '@/components/EventFilterForm/EventFilterForm'
@@ -9,21 +9,17 @@ import MyProfileCard from '@/components/ProfileCards/ProfileCard/MyProfileCard'
 import ProfileLoginCTA from '@/components/ProfileCards/ProfileLoginCTA/ProfileLoginCTA'
 import AuthFallbackWrapper from '@/components/Skeleton/AuthFallbackWrapper'
 import SkeCard from '@/components/Skeleton/CardSkeleton'
+import { Tabs } from '@/components/Tabs/Tabs'
 import * as metatags from '@/config/metatags'
 import EventFeedList from '@/screens/events/EventFeedList'
-import { Stack as RouterStack } from 'expo-router'
 import Head from 'expo-router/head'
-import { YStack } from 'tamagui'
+import { useMedia, YStack } from 'tamagui'
 
 const EventsScreen: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<'events' | 'myEvents'>('events')
+  const media = useMedia()
   return (
     <>
-      <RouterStack.Screen
-        options={{
-          headerShown: false,
-        }}
-      />
-
       <Head>
         <title>{metatags.createTitle('Nos événements')}</title>
       </Head>
@@ -41,6 +37,16 @@ const EventsScreen: React.FC = () => {
         </PageLayout.SideBarLeft>
         <PageLayout.MainSingleColumn>
           <BottomSheetFilter />
+          <Tabs<'events' | 'myEvents'>
+            value={activeTab}
+            onChange={setActiveTab}
+            grouped={media.lg}
+            $gtMd={{ paddingHorizontal: '$7', paddingTop: '$6', paddingBottom: 0 }}
+          >
+            <Tabs.Tab id="events">Tous les événements</Tabs.Tab>
+            <Tabs.Tab id="myEvents">J'y participe</Tabs.Tab>
+          </Tabs>
+
           <BoundarySuspenseWrapper
             fallback={
               <YStack gap="$4" padding="$8" $sm={{ paddingHorizontal: 0, paddingTop: '$4' }}>
@@ -89,7 +95,7 @@ const EventsScreen: React.FC = () => {
               </YStack>
             }
           >
-            <EventFeedList />
+            <EventFeedList activeTab={activeTab} />
           </BoundarySuspenseWrapper>
         </PageLayout.MainSingleColumn>
         <PageLayout.SideBarRight>

diff --git a/app/(tabs)/porte-a-porte/_layout.tsx b/app/(tabs)/porte-a-porte/_layout.tsx
@@ -1,15 +1,18 @@
-import MobileWallLayout from '@/components/MobileWallLayout/MobileWallLayout'
-import { headerBlank } from '@/styles/navigationAppearance'
+import { SmallHeader } from '@/components/Header/Header'
 import { Stack } from 'expo-router'
-import { isWeb } from 'tamagui'
 
 export default function DoorToDoorLayout() {
-  return isWeb ? (
-    <MobileWallLayout />
-  ) : (
-    <Stack screenOptions={{ ...headerBlank, headerShown: false }}>
-      <Stack.Screen name="index" options={{ headerShown: false }} />
-      <Stack.Screen name="tunnel" options={{ presentation: 'modal', headerShown: false }} />
+  return (
+    <Stack screenOptions={{ header: SmallHeader, animation: 'slide_from_right' }}>
+      <Stack.Screen
+        name="index"
+        options={{
+          title: 'Porte à porte',
+          headerShadowVisible: false,
+        }}
+      />
+      <Stack.Screen name="building-detail" options={{ title: '' }} />
+      <Stack.Screen name="tunnel" options={{ presentation: 'fullScreenModal', headerShown: false }} />
     </Stack>
   )
 }
diff --git a/app/(tabs)/porte-a-porte/building-detail.tsx b/app/(tabs)/porte-a-porte/building-detail.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useLayoutEffect, useState } from 'react'
-import { Image, Modal, RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { Modal, RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native'
 import { BuildingBlock, BuildingBlockHelper } from '@/core/entities/BuildingBlock'
 import { BuildingHistoryPoint } from '@/core/entities/BuildingHistory'
 import { BuildingType, DoorToDoorAddress } from '@/core/entities/DoorToDoor'
@@ -27,7 +27,6 @@ import AlphabetHelper from '@/utils/AlphabetHelper'
 import i18n from '@/utils/i18n'
 import { useIsFocused } from '@react-navigation/native'
 import { router, useNavigation } from 'expo-router'
-import { last } from 'lodash'
 
 enum Tab {
   HISTORY,
@@ -44,7 +43,7 @@ const BuildingDetailScreen = () => {
   const [campaignCardViewModel, setCampaignCardViewModel] = useState<DoorToDoorCampaignCardViewModel>()
   const dtdStore = useDoorToDoorStore()
   const { setTunnel } = useDtdTunnelStore()
-  const [address, setAddress] = useState(dtdStore.address)
+  const [address, setAddress] = useState(dtdStore.address as DoorToDoorAddress)
   const [rankingModalState, setRankingModalState] = useState<RankingModalState>({ visible: false })
   const viewModel = BuildingDetailScreenViewModelMapper.map(address!, history, layout)
   const buildingBlockHelper = new BuildingBlockHelper()
@@ -59,6 +58,9 @@ const BuildingDetailScreen = () => {
   })
 
   const fetchLayout = async (): Promise<Array<BuildingBlock>> => {
+    if (!dtdStore.address) {
+      throw new Error('No address found')
+    }
     return await new UpdateBuildingLayoutInteractor().execute(
       dtdStore.address.building.id,
       campaignStatistics.campaignId,
@@ -68,6 +70,9 @@ const BuildingDetailScreen = () => {
   }
 
   const fetchHistory = async (): Promise<Array<BuildingHistoryPoint>> => {
+    if (!dtdStore.address) {
+      throw new Error('No address found')
+    }
     return await DoorToDoorRepository.getInstance().buildingHistory(dtdStore.address.building.id, campaignStatistics.campaignId)
   }
 
@@ -284,7 +289,7 @@ const BuildingDetailScreen = () => {
                 campaignId: campaignStatistics.campaignId,
                 buildingParams: {
                   id: address.building.id,
-                  block: block?.name,
+                  block: block?.name!,
                   floor: floorNumber,
                   type: address.building.type,
                   door: door,

diff --git a/app/(tabs)/porte-a-porte/index.tsx b/app/(tabs)/porte-a-porte/index.tsx
@@ -1,6 +1,7 @@
 import React, { memo, useCallback, useState } from 'react'
-import { Modal, SafeAreaView, StyleSheet, Text, View } from 'react-native'
+import { Modal, SafeAreaView, StyleSheet, View } from 'react-native'
 import { LatLng, Region } from '@/components/Maps/Maps'
+import MobileWallLayout from '@/components/MobileWallLayout/MobileWallLayout'
 import { DoorToDoorCharterNotAccepted } from '@/core/entities/DoorToDoorCharterState'
 import { GetDoorToDoorAddressesInteractor } from '@/core/interactor/GetDoorToDoorAddressesInteractor'
 import DoorToDoorRepository from '@/data/DoorToDoorRepository'
@@ -19,7 +20,8 @@ import i18n from '@/utils/i18n'
 import { useOnFocus } from '@/utils/useOnFocus.hook'
 import { useQuery } from '@tanstack/react-query'
 import * as Geolocation from 'expo-location'
-import { router } from 'expo-router'
+import { router, useRootNavigationState } from 'expo-router'
+import { isWeb } from 'tamagui'
 
 const DoorToDoorMapView = memo(_DoorToDoorMapView)
 
@@ -162,12 +164,12 @@ const DoorToDoorScreen = () => {
         </Modal>
       )}
 
-      <View style={styles.header}>
+      {/* <View style={styles.header}>
         <Text style={styles.title} numberOfLines={1}>
           {i18n.t('doorToDoor.title')}
         </Text>
         {!error && <MapListSwitch mode={displayMode} onPress={setDisplayMode} />}
-      </View>
+      </View> */}
       {renderContent()}
     </SafeAreaView>
   )
@@ -198,4 +200,4 @@ const styles = StyleSheet.create({
   },
 })
 
-export default DoorToDoorScreen
+export default isWeb ? MobileWallLayout : DoorToDoorScreen
diff --git a/app/(tabs)/porte-a-porte/tunnel/_layout.tsx b/app/(tabs)/porte-a-porte/tunnel/_layout.tsx
@@ -1,7 +1,7 @@
-import React, { FunctionComponent } from 'react'
+import React, { FunctionComponent, useEffect } from 'react'
 import { headerBlank } from '@/styles/navigationAppearance'
 import i18n from '@/utils/i18n'
-import { Stack } from 'expo-router'
+import { Stack, useNavigation, useRootNavigationState } from 'expo-router'
 
 const DoorToDoorTunnelModalNavigator: FunctionComponent = () => {
   return (