Fix/8 10 24 (#880)

app/(app)/_layout.tsx

@@ -1,37 +1,10 @@
 import React from 'react'
 import { PortalLayout } from '@/components/layouts/PortalLayout'
-import WaitingScreen from '@/components/WaitingScreen'
-import { useSession } from '@/ctx/SessionProvider'
-import useInit from '@/hooks/useInit'
-import { parse, useURL } from 'expo-linking'
-import { Stack, useGlobalSearchParams } from 'expo-router'
+import { Stack } from 'expo-router'
 import { isWeb, useMedia, View } from 'tamagui'
 
 export default function AppLayout() {
-  const { signIn, isAuth, isLoading } = useSession()
-
-  const { code, _switch_user } = useGlobalSearchParams<{ code?: string; _switch_user?: string }>()
-  const url = useURL()
   const media = useMedia()
-
-  useInit()
-
-  if (!isLoading && (code || url)) {
-    if (isWeb && code) {
-      signIn({ code, isAdmin: _switch_user === 'true' })
-      return <WaitingScreen />
-    }
-    if (url && !isWeb) {
-      const { queryParams } = parse(url)
-      const code = queryParams?.code as string | undefined
-
-      if (code) {
-        signIn({ code })
-        return <WaitingScreen />
-      }
-    }
-  }
-
   return (
     <PortalLayout>
       <View style={{ height: isWeb ? '100svh' : '100%' }} position="relative">

app/(app)/profil/_layout.tsx

@@ -1,29 +1,16 @@
 import { NamedExoticComponent } from 'react'
-import { View } from 'react-native'
 import EuCampaignIllustration from '@/assets/illustrations/EuCampaignIllustration'
-import BoundarySuspenseWrapper from '@/components/BoundarySuspenseWrapper'
 import { NavBar, ProfileView, SmallHeader, VoxHeader } from '@/components/Header/Header'
 import PageLayout from '@/components/layouts/PageLayout/PageLayout'
-import SkeCard from '@/components/Skeleton/CardSkeleton'
 import { useSession } from '@/ctx/SessionProvider'
 import ProfilMenu from '@/screens/profil/menu/Menu'
 import { TabRouter } from '@react-navigation/native'
 import { NativeStackHeaderProps } from '@react-navigation/native-stack'
 import type { IconProps } from '@tamagui/helpers-icon'
-import { ArrowLeft, CircleUser, HelpingHand, MessageCircle, Settings2, TreeDeciduous } from '@tamagui/lucide-icons'
-import { Link, Navigator, Redirect, router, Slot, Stack, useNavigation, usePathname } from 'expo-router'
-import { isWeb, useMedia, XStack, YStack } from 'tamagui'
+import { ArrowLeft, CircleUser, HelpingHand, KeyRound, MessageCircle, Settings2, TreeDeciduous } from '@tamagui/lucide-icons'
+import { Link, Navigator, Redirect, router, Slot, Stack } from 'expo-router'
+import { useMedia, XStack } from 'tamagui'
 
-const Skeleton = () => (
-  <SkeCard>
-    <SkeCard.Content>
-      <SkeCard.Chip />
-      <SkeCard.Title />
-      <SkeCard.Image />
-      <SkeCard.Description />
-    </SkeCard.Content>
-  </SkeCard>
-)
 function CustomRouter() {
   return (
     <Navigator router={TabRouter}>
@@ -69,6 +56,7 @@ const CotisHeader = createProfilHeader(HelpingHand)
 const InfoHeader = createProfilHeader(Settings2)
 const ComHeader = createProfilHeader(MessageCircle)
 const ElusHeader = createProfilHeader(TreeDeciduous)
+const MDPHeader = createProfilHeader(KeyRound)
 
 export default function AppLayout() {
   const { isAuth } = useSession()
@@ -79,19 +67,19 @@ export default function AppLayout() {
   }
 
   return media.md ? (
-    <Stack screenOptions={{ header: (x) => <SmallHeader {...x} />, animation: media.gtSm ? 'none' : 'slide_from_right' }}>
+    <Stack>
       <Stack.Screen
         name="index"
         options={{
           title: 'Mon profil',
-          header: (x) => <IndexHeader {...x} />,
+          header: IndexHeader,
         }}
       />
 
       <Stack.Screen
         name="cotisation-et-dons"
         options={{
-          title: 'Cotisation et dons',
+          title: 'Cotisations et dons',
           header: (x) => <CotisHeader {...x} />,
         }}
       />
@@ -115,10 +103,17 @@ export default function AppLayout() {
       <Stack.Screen
         name="informations-elu"
         options={{
-          title: "Information d'élu",
+          title: "Informations d'élu",
           header: (x) => <ElusHeader {...x} />,
         }}
       />
+      <Stack.Screen
+        name="mot-de-passe"
+        options={{
+          title: 'Mot de passe',
+          header: (x) => <MDPHeader {...x} />,
+        }}
+      />
     </Stack>
   ) : (
     <CustomRouter />

app/(app)/profil/communications.tsx

@@ -9,7 +9,7 @@ function CommunicationScreen() {
   return (
     <>
       <Head>
-        <title>{metatags.createTitle('Cotisation et dons')}</title>
+        <title>{metatags.createTitle('Cotisations et dons')}</title>
       </Head>
 
       <ProfilLayout>

app/(app)/profil/cotisation-et-dons.tsx

@@ -9,7 +9,7 @@ function PersonalInfoScreen() {
   return (
     <>
       <Head>
-        <title>{metatags.createTitle('Cotisation et dons')}</title>
+        <title>{metatags.createTitle('Cotisations et dons')}</title>
       </Head>
 
       <ProfilLayout>

app/(app)/profil/mot-de-passe.tsx

@@ -8,7 +8,7 @@ function ChangePasswordScreen() {
   return (
     <>
       <Head>
-        <title>{metatags.createTitle('Cotisation et dons')}</title>
+        <title>{metatags.createTitle('Mot de passe')}</title>
       </Head>
 
       <ProfilLayout>

app/_layout.tsx

@@ -5,6 +5,7 @@ import WaitingScreen from '@/components/WaitingScreen'
 import { SessionProvider, useSession } from '@/ctx/SessionProvider'
 import useAppUpdate from '@/hooks/useAppUpdate'
 import useImportFont from '@/hooks/useImportFont'
+import useInitPushNotification from '@/hooks/useInit'
 import UpdateScreen from '@/screens/update/updateScreen'
 import TamaguiProvider from '@/tamagui/provider'
 import { ErrorMonitor } from '@/utils/ErrorMonitor'
@@ -34,6 +35,7 @@ const useRegisterRoutingInstrumentation = () => {
 }
 
 const WaitingRoomHoc = (props: { children: ViewProps['children']; isLoading?: boolean }) => {
+  useInitPushNotification()
   const { isLoading } = useSession()
   if (isLoading) {
     return <WaitingScreen />

src/components/Buttons/AuthButton.tsx

@@ -5,7 +5,7 @@ import { useSession } from '@/ctx/SessionProvider'
 export const SignInButton = (props: Omit<ComponentProps<typeof VoxButton>, 'children'>) => {
   const { signIn } = useSession()
   return (
-    <VoxButton onPress={signIn} variant="text" size="md" {...props}>
+    <VoxButton onPress={() => signIn()} variant="text" size="md" {...props}>
       Me connecter
     </VoxButton>
   )

src/components/Header/Header.tsx

@@ -79,7 +79,8 @@ export const NavBar = () => {
 }
 
 export const ProfileView = () => {
-  const user = useGetProfil()
+  const { session } = useSession()
+  const user = useGetProfil({ enabled: !!session })
   const profile = user?.data
   return (
     <View flexDirection="row" gap={'$4'} justifyContent="space-between" alignItems="center">

src/components/ProfileCards/ProfileCard/MyProfileCard.tsx

@@ -7,9 +7,9 @@ import { useUserStore } from '@/store/user-store'
 import { openURL } from 'expo-linking'
 
 export default function MyProfileCard() {
-  const user = useGetProfil()
   const { session } = useSession()
   const { user: credentials } = useUserStore()
+  const user = useGetProfil({ enabled: !!session })
   const profile = user?.data
   const onNavigateToCadre = useCallback(
     () => openURL(`${credentials?.isAdmin ? clientEnv.ADMIN_URL : clientEnv.OAUTH_BASE_URL}${profile?.cadre_auth_path}`),

src/components/events/EventFeedList.tsx

@@ -121,7 +121,8 @@ const EventListCard = memo((args: { item: RestItemEvent; cb: Parameters<typeof m
 
 const EventList = ({ activeTab }: { activeTab: 'events' | 'myEvents' }) => {
   const media = useMedia()
-  const user = useGetProfil()
+  const { session } = useSession()
+  const user = useGetProfil({ enabled: Boolean(session) })
   const listRef = useRef<SectionList>(null)
   useScrollToTop(listRef)
 

src/components/layouts/ProfilLayout.tsx

@@ -21,11 +21,6 @@ export default function ProfilLayout({ children }: { children: React.ReactNode }
 
   return media.md ? (
     <PageLayout>
-      <PageLayout.SideBarLeft showOn="gtSm">
-        <XStack justifyContent="flex-end">
-          <ProfilMenu />
-        </XStack>
-      </PageLayout.SideBarLeft>
       <PageLayout.MainSingleColumn>
         <BoundarySuspenseWrapper
           fallback={

src/components/menu/Item.tsx

@@ -74,9 +74,9 @@ const ItemText = styled(Text, {
 })
 
 const Item = forwardRef<TamaguiElement, ComponentPropsWithoutRef<typeof ItemFrame> & { children: string | string[]; icon: React.ExoticComponent<IconProps> }>(
-  ({ children, icon: Icon, ...props }) => {
+  ({ children, icon: Icon, ...props }, ref) => {
     return (
-      <ItemFrame {...props}>
+      <ItemFrame {...props} ref={ref}>
         <Icon size={props.size === 'lg' ? 16 : '$1'} color="$textPrimary" marginRight={8} />
         <XStack width="100%" flexShrink={1}>
           <ItemText size={'sm'} active={props.active}>

src/ctx/SessionProvider.tsx

@@ -5,7 +5,9 @@ import { useGetProfil, useGetUserScopes } from '@/services/profile/hook'
 import { User, useUserStore } from '@/store/user-store'
 import { ErrorMonitor } from '@/utils/ErrorMonitor'
 import { useToastController } from '@tamagui/toast'
-import { router, useLocalSearchParams } from 'expo-router'
+import { parse, useURL } from 'expo-linking'
+import { router, useGlobalSearchParams, useLocalSearchParams } from 'expo-router'
+import { isWeb } from 'tamagui'
 
 type AuthContext = {
   signIn: (props?: { code: string; isAdmin?: boolean }) => Promise<void>
@@ -44,6 +46,10 @@ export function useSession() {
 export function SessionProvider(props: React.PropsWithChildren) {
   const { user: session, setCredentials: setSession, _hasHydrated } = useUserStore()
   const { redirect: pRedirect } = useLocalSearchParams<{ redirect?: string }>()
+  const params = useGlobalSearchParams<{ code?: string; _switch_user?: string }>()
+  const [onShotParams, setOneShotParams] = React.useState(params)
+
+  const url = useURL()
 
   const [isLoginInProgress, setIsLoginInProgress] = React.useState(false)
   const toast = useToastController()
@@ -63,24 +69,47 @@ export function SessionProvider(props: React.PropsWithChildren) {
   const isGlobalLoading = [isLoginInProgress, user.isLoading, scope.isLoading, !_hasHydrated].some(Boolean)
   const isAuth = Boolean(session && !isGlobalLoading)
 
-  const handleSignIn: AuthContext['signIn'] = async (props) => {
-    try {
-      setIsLoginInProgress(true)
-      const session = await login(props?.code)
-      if (!session) {
-        return
+  const handleSignIn: AuthContext['signIn'] = React.useCallback(
+    async (props) => {
+      try {
+        if (isLoginInProgress) {
+          return
+        }
+        setIsLoginInProgress(true)
+        const session = await login(props?.code)
+        if (!session) {
+          return
+        }
+        const { accessToken, refreshToken } = session
+        setSession({ accessToken, refreshToken, isAdmin: props?.isAdmin })
+      } catch (e) {
+        ErrorMonitor.log(e.message, { e })
+        toast.show('Erreur lors de la connexion', { type: 'error' })
+      } finally {
+        setIsLoginInProgress(false)
+      }
+    },
+    [isLoginInProgress, login],
+  )
+
+  React.useEffect(() => {
+    const { code, _switch_user } = onShotParams
+    if (code || url) {
+      if (isWeb && code) {
+        setOneShotParams({})
+        handleSignIn({ code, isAdmin: _switch_user === 'true' })
+      }
+      if (url && !isWeb) {
+        const { queryParams } = parse(url)
+        const code = queryParams?.code as string | undefined
+        if (code) {
+          handleSignIn({ code })
+        }
       }
-      const { accessToken, refreshToken } = session
-      setSession({ accessToken, refreshToken, isAdmin: props?.isAdmin })
-    } catch (e) {
-      ErrorMonitor.log(e.message, { e })
-      toast.show('Erreur lors de la connexion', { type: 'error' })
-    } finally {
-      setIsLoginInProgress(false)
     }
-  }
+  }, [])
 
-  const handleRegister = async () => {
+  const handleRegister = React.useCallback(async () => {
     try {
       setIsLoginInProgress(true)
       const session = await register()
@@ -96,11 +125,11 @@ export function SessionProvider(props: React.PropsWithChildren) {
     } finally {
       setIsLoginInProgress(false)
     }
-  }
+  }, [isLoginInProgress])
 
-  const handleSignOut = async () => {
+  const handleSignOut = React.useCallback(async () => {
     await logout()
-  }
+  }, [])
 
   const providerValue = useMemo(
     () =>
@@ -114,7 +143,7 @@ export function SessionProvider(props: React.PropsWithChildren) {
         user,
         scope,
       }) satisfies AuthContext,
-    [handleSignIn, handleSignOut, session, isLoginInProgress],
+    [handleSignIn, handleSignOut, session, isLoginInProgress, isGlobalLoading],
   )
 
   return <AuthContext.Provider value={providerValue}>{props.children}</AuthContext.Provider>

src/hooks/useInit.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { ROUTES } from '@/config/routes'
+
 import { useSession } from '@/ctx/SessionProvider'
 import PushRepository from '@/data/PushRepository'
 import { useMatomo } from '@/services/matomo/hook'

src/screens/actions/BottomSheetList.tsx

@@ -3,7 +3,6 @@ import Text from '@/components/base/Text'
 import { ActionCard } from '@/components/Cards'
 import EmptyState from '@/components/EmptyStates/EmptyEvent/EmptyEvent'
 import SkeCard from '@/components/Skeleton/CardSkeleton'
-import { useSession } from '@/ctx/SessionProvider'
 import { RestAction } from '@/services/actions/schema'
 import { useGetProfil } from '@/services/profile/hook'
 import { ScrollView, Sheet, XStack, YStack } from 'tamagui'

src/screens/profil/menu/Menu.tsx

@@ -15,17 +15,17 @@ export const menuData: Array<ComponentProps<typeof Menu.Item> & { pathname?: Hre
   // },
   {
     icon: HelpingHand,
-    children: 'Cotisation et dons',
+    children: 'Cotisations et dons',
     pathname: '/profil/cotisation-et-dons',
   },
   {
     icon: Settings2,
-    children: 'Information personnelles',
+    children: 'Informations personnelles',
     pathname: '/profil/informations-personnelles',
   },
   {
     icon: TreeDeciduous,
-    children: "Information d'élu",
+    children: "Informations d'élu",
     pathname: '/profil/informations-elu',
   },
   // {