feat(events): event card status

src/components/Cards/EventCard/EventCard.tsx

@@ -1,7 +1,8 @@
-import { ComponentProps } from 'react'
+import React, { ComponentProps, useMemo } from 'react'
 import { ImageRequireSource } from 'react-native'
 import { Button } from '@/components'
 import { VoxAlertDialog } from '@/components/AlertDialog'
+import InternAlert from '@/components/InternAlert/InternAlert'
 import VoxCard, { VoxCardAuthorProps, VoxCardDateProps, VoxCardFrameProps, VoxCardLocationProps } from '@/components/VoxCard/VoxCard'
 import { useSession } from '@/ctx/SessionProvider'
 import { useSubscribeEvent, useUnsubscribeEvent } from '@/services/events/hook'
@@ -76,16 +77,39 @@ export const SubscribeEventButton = ({
 }
 
 const EventCard = ({ payload, onShow, ...props }: EventVoxCardProps) => {
+  const isCancelled = payload.status === 'CANCELLED'
+  const isPassed = isPast(payload.date.end ?? payload.date.start)
   const canSubscribe = [
     !isPast(payload.date.end),
     payload.isSubscribed !== undefined,
-    payload.status !== 'CANCELLED',
+    !isCancelled,
     !payload.isCompleted || (payload.isCompleted && payload.isSubscribed),
   ].every(Boolean)
+
+  const status = useMemo(() => {
+    if (isCancelled) {
+      return (
+        <InternAlert borderLess type="danger">
+          Événement annulée.
+        </InternAlert>
+      )
+    } else if (isPassed) {
+      return <InternAlert borderLess>Événement passée.</InternAlert>
+    } else if (payload.isCompleted) {
+      return (
+        <InternAlert borderLess type="info">
+          Événement complet.
+        </InternAlert>
+      )
+    }
+    return null
+  }, [isCancelled, isPassed, payload.isCompleted])
+
   return (
     <VoxCard {...props}>
       <VoxCard.Content>
         <VoxCard.Chip event>{payload.tag}</VoxCard.Chip>
+        {status}
         <VoxCard.Title>{payload.title}</VoxCard.Title>
         {payload.image ? <VoxCard.Image image={payload.image} /> : null}
         <VoxCard.Date {...payload.date} />

src/components/events/EventFeedList.tsx

@@ -15,6 +15,7 @@ import { useSuspensePaginatedEvents } from '@/services/events/hook'
 import { isFullEvent, isPartialEvent, RestItemEvent, RestPublicItemEvent } from '@/services/events/schema'
 import { useScrollToTop } from '@react-navigation/native'
 import { ChevronDown, Filter } from '@tamagui/lucide-icons'
+import { isPast } from 'date-fns'
 import { router } from 'expo-router'
 import { getToken, Spinner, useMedia, XStack, YStack } from 'tamagui'
 import { useDebounce } from 'use-debounce'
@@ -26,7 +27,7 @@ const splitEvents = (events: RestItemEvent[] | RestPublicItemEvent[]) => {
   const incomming: typeof events = []
   const past: typeof events = []
   events.forEach((event) => {
-    if (new Date(event.begin_at) < new Date()) {
+    if (isPast(event.finish_at)) {
       past.push(event)
     } else {
       incomming.push(event)