Skip to content

Commit

Permalink
fix: action form et event skeleton (#909)
Browse files Browse the repository at this point in the history
  • Loading branch information
@OverGlass
OverGlass authored Nov 6, 2024
1 parent ddd7e25 commit 80756c6
Show file tree
Hide file tree
Showing 8 changed files with 109 additions and 66 deletions.
4 changes: 2 additions & 2 deletions app/(app)/(tabs)/evenements/_layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import EuCampaignIllustration from '@/assets/illustrations/EuCampaignIllustration'
import { NavBar, ProfileNav, VoxHeader } from '@/components/Header/Header'
import { ProfileNav, VoxHeader } from '@/components/Header/Header'
import { useSession } from '@/ctx/SessionProvider'
import { Link, Redirect, Slot } from 'expo-router'
import { Link, Slot } from 'expo-router'
import { useMedia, XStack } from 'tamagui'

export default function AppLayout() {
Expand Down
60 changes: 4 additions & 56 deletions app/(app)/evenements/[id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,12 @@ import AppDownloadCTA from '@/components/ProfileCards/AppDownloadCTA/AppDownload
import ProcurationCTA from '@/components/ProfileCards/ProcurationCTA/ProcurationCTA'
import ProfileLoginCTA from '@/components/ProfileCards/ProfileLoginCTA/ProfileLoginCTA'
import AuthFallbackWrapper from '@/components/Skeleton/AuthFallbackWrapper'
import SkeCard from '@/components/Skeleton/CardSkeleton'
import * as metatags from '@/config/metatags'
import EventDetailsScreen from '@/features/events/pages/detail/EventDetailsScreen'
import EventDetailsScreen, { EventDetailsScreenSkeleton } from '@/features/events/pages/detail/EventDetailsScreen'
import { useGetEvent } from '@/services/events/hook'
import { ArrowLeft } from '@tamagui/lucide-icons'
import { Link, Stack as RouterStack, useLocalSearchParams, useNavigation } from 'expo-router'
import { Stack as RouterStack, useLocalSearchParams, useNavigation } from 'expo-router'
import Head from 'expo-router/head'
import { isWeb, YStack } from 'tamagui'
import { YStack } from 'tamagui'

const HomeScreen: React.FC = () => {
const params = useLocalSearchParams<{ id: string }>()
Expand All @@ -30,57 +28,7 @@ const HomeScreen: React.FC = () => {
</AuthFallbackWrapper>
</YStack>
</PageLayout.SideBarLeft>
<BoundarySuspenseWrapper
fallback={
<>
<PageLayout.MainSingleColumn>
<YStack gap="$4" padding="$8" $sm={{ paddingHorizontal: 0, paddingTop: '$4' }}>
<SkeCard>
{isWeb ? (
<>
<SkeCard.Image />
<SkeCard.Content>
<SkeCard.Chip />
<SkeCard.Title />
<SkeCard.Description />
<SkeCard.Description />
<SkeCard.Description />
<SkeCard.Description />
</SkeCard.Content>
</>
) : (
<SkeCard.Content>
<SkeCard.Image />
<SkeCard.Chip />
<SkeCard.Title />
<SkeCard.Date />
<SkeCard.Description />
<SkeCard.Author />
<SkeCard.Author />
<SkeCard.Actions />
</SkeCard.Content>
)}
</SkeCard>
</YStack>
</PageLayout.MainSingleColumn>
<PageLayout.SideBarRight>
<SkeCard>
<SkeCard.Content>
<SkeCard.Date />
<SkeCard.Author />
<SkeCard.Author />
<SkeCard.Section>
<SkeCard.Author />
</SkeCard.Section>
<SkeCard.Section>
<SkeCard.Actions />
</SkeCard.Section>
</SkeCard.Content>
</SkeCard>
</PageLayout.SideBarRight>
</>
}
>
<BoundarySuspenseWrapper fallback={<EventDetailsScreenSkeleton />}>
<EventDetailScreen id={params.id} />
</BoundarySuspenseWrapper>
</PageLayout>
Expand Down
5 changes: 3 additions & 2 deletions src/components/Skeleton/CardSkeleton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useDerivedValue, useSharedValue, withRepeat, withTiming } from 'react-n
import Chip from '@/components/Chip/Chip'
import { Canvas, LinearGradient, Rect, vec } from '@shopify/react-native-skia'
import { Circle, Separator, Square, Stack, StackProps, styled, Card as TCard, Text, withStaticProperties, XStack, YStack } from 'tamagui'
import { ButtonFrameStyled } from '../Button'

const SkeletonColor = '#F7F7F7'

Expand Down Expand Up @@ -75,8 +76,8 @@ const SkeCardDate = () => {
)
}

const SkeCardButton = () => {
return <Stack height="$2.5" width="$12" bg={SkeletonColor} borderRadius="$4" />
const SkeCardButton = (props: { full?: boolean }) => {
return <ButtonFrameStyled bg={SkeletonColor} {...props} />
}

const SkeActions = () => {
Expand Down
57 changes: 57 additions & 0 deletions src/features/events/pages/detail/EventDesktopScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { StatusBar } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { VoxButton } from '@/components/Button'
import PageLayout from '@/components/layouts/PageLayout/PageLayout'
import SkeCard from '@/components/Skeleton/CardSkeleton'
import VoxCard from '@/components/VoxCard/VoxCard'
import { CategoryChip } from '@/features/events/components/CategoryChip'
import { EventItemHandleButton } from '@/features/events/components/EventItemHandleButton'
Expand Down Expand Up @@ -133,3 +134,59 @@ const EventDesktopScreen = ({ event, userUuid }: EventItemProps) => {
}

export default EventDesktopScreen

const EventDesktopMainSkeleton = () => {
return (
<PageLayout.MainSingleColumn>
<SkeCard.Content>
<SkeCard.Image />
<XStack justifyContent="space-between" alignItems="center">
<SkeCard.Chip />
<SkeCard.Chip />
</XStack>
<SkeCard.Title />
<SkeCard.Description />
</SkeCard.Content>
</PageLayout.MainSingleColumn>
)
}

const EventDesktopAsideSkeleton = () => {
return (
<PageLayout.SideBarRight alwaysShow paddingTop={0}>
<SkeCard.Content>
<SkeCard.Button />
<SkeCard.Separator />
<SkeCard.Date />
<SkeCard.Date />
<SkeCard.Date />
<SkeCard.Section>
<SkeCard.Author />
</SkeCard.Section>
<SkeCard.Section>
<SkeCard.Button full />
<SkeCard.Button full />
<SkeCard.Button full />
</SkeCard.Section>
</SkeCard.Content>
</PageLayout.SideBarRight>
)
}

export const EventDesktopScreenSkeleton = () => {
return (
<YStack padding="$5" flex={1}>
<PageLayout.MainSingleColumn>
<XStack alignItems="flex-start" alignSelf="flex-start" pb={16}>
<SkeCard.Button />
</XStack>
<SkeCard>
<XStack>
<EventDesktopMainSkeleton />
<EventDesktopAsideSkeleton />
</XStack>
</SkeCard>
</PageLayout.MainSingleColumn>
</YStack>
)
}
9 changes: 7 additions & 2 deletions src/features/events/pages/detail/EventDetailsScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,16 @@ import { useSession } from '@/ctx/SessionProvider'
import * as eventTypes from '@/services/events/schema'
import { useGetSuspenseProfil } from '@/services/profile/hook'
import { useMedia } from 'tamagui'
import EventDesktopScreen from './EventDesktopScreen'
import EventMobileScreen from './EventMobileScreen'
import EventDesktopScreen, { EventDesktopScreenSkeleton } from './EventDesktopScreen'
import EventMobileScreen, { EventMobileScreenSkeleton } from './EventMobileScreen'

export default function EventDetailsScreen({ data }: { data: eventTypes.RestEvent }) {
const media = useMedia()
const { user } = useSession()
return media.sm ? <EventMobileScreen event={data} userUuid={user?.data?.uuid} /> : <EventDesktopScreen event={data} userUuid={user?.data?.uuid} />
}

export function EventDetailsScreenSkeleton() {
const media = useMedia()
return media.sm ? <EventMobileScreenSkeleton /> : <EventDesktopScreenSkeleton />
}
30 changes: 30 additions & 0 deletions src/features/events/pages/detail/EventMobileScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Children, isValidElement } from 'react'
import { StatusBar } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import PageLayout from '@/components/layouts/PageLayout/PageLayout'
import SkeCard from '@/components/Skeleton/CardSkeleton'
import VoxCard from '@/components/VoxCard/VoxCard'
import { CategoryChip } from '@/features/events/components/CategoryChip'
import { EventItemHandleButton } from '@/features/events/components/EventItemHandleButton'
Expand Down Expand Up @@ -98,3 +99,32 @@ const EventMobileScreen = ({ event, userUuid }: EventItemProps) => {
}

export default EventMobileScreen

export const EventMobileScreenSkeleton = () => {
return (
<PageLayout.MainSingleColumn>
<StatusBar barStyle={'light-content'} />
<SkeCard.Image />
<SkeCard>
<SkeCard.Content>
<XStack justifyContent="space-between" alignItems="center">
<SkeCard.Chip />
<SkeCard.Chip />
</XStack>
<VoxCard.Separator />
<SkeCard.Date />
<SkeCard.Date />
<SkeCard.Date />
<SkeCard.Section>
<SkeCard.Author />
</SkeCard.Section>
<SkeCard.Section>
<SkeCard.Button full />
<SkeCard.Button full />
<SkeCard.Button full />
</SkeCard.Section>
</SkeCard.Content>
</SkeCard>
</PageLayout.MainSingleColumn>
)
}
4 changes: 3 additions & 1 deletion src/screens/actions/form/ActionForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,9 @@ function _ActionForm({ onCancel, onClose, uuid, scope, data }: Props & { data: A
<Controller
control={control}
name={'description'}
render={({ field }) => <Input placeholder={'Ajoutez une description'} multiline numberOfLines={5} color="gray" onChange={field.onChange} />}
render={({ field }) => (
<Input placeholder={'Ajoutez une description'} multiline numberOfLines={5} color="gray" value={field.value} onChange={field.onChange} />
)}
/>

<Text mt={'$2'}>1000 caractères maximum</Text>
Expand Down
6 changes: 3 additions & 3 deletions src/services/actions/hook/useActions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { SelectType } from '@/screens/actions'
import * as api from '@/services/actions/api'
import { Action, RestActionFull, RestActionRequestParams, RestActions, SelectPeriod } from '@/services/actions/schema'
import { GenericResponseError } from '@/services/common/errors/generic-errors'
import { useGetProfil } from '@/services/profile/hook'
import { useGetProfil, useGetSuspenseProfil } from '@/services/profile/hook'
import { useToastController } from '@tamagui/toast'
import { InfiniteData, useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { optimisticToggleSubscribe } from './helpers'
Expand Down Expand Up @@ -70,7 +70,7 @@ export const useAction = (id?: string, paginatedParams?: Params) => {
export const useSubscribeAction = (id?: string) => {
const queryClient = useQueryClient()
const toast = useToastController()
const user = useGetProfil()
const user = useGetSuspenseProfil()
if (!user.data) {
throw new Error("L'utilisateur est introuvable")
}
Expand All @@ -95,7 +95,7 @@ export const useSubscribeAction = (id?: string) => {
export const useUnsubscribeAction = (id?: string) => {
const queryClient = useQueryClient()
const toast = useToastController()
const user = useGetProfil()
const user = useGetSuspenseProfil()
if (!user.data) {
throw new Error("L'utilisateur est introuvable")
}
Expand Down

0 comments on commit 80756c6

Please sign in to comment.