Users Hooks

import { useUserEvents } from '@meaple/react-query'
 
function MyEvents({ userId }) {
  const { data: events, isLoading, error } = useUserEvents(userId)
 
  if (isLoading) return <div>Loading your events...</div>
  if (error) return <div>Error: {error.message}</div>
 
  return (
    <div>
      <h2>My Events</h2>
      {events?.map(event => (
        <div key={event.id}>
          <h3>{event.name}</h3>
          <p>{event.date}</p>
          <p>{event.location}</p>
        </div>
      ))}
    </div>
  )
}

import { useUserEvents } from '@meaple/react-query'
import { useAuth } from '@/hooks/useAuth'
 
function UserDashboard() {
  const { user } = useAuth()
  const { data: events } = useUserEvents(user?.id, {
    enabled: !!user?.id
  })
 
  if (!user) return <div>Please log in</div>
 
  return (
    <div>
      <h1>Welcome, {user.name}!</h1>
      <div>
        {events?.map(event => (
          <EventCard key={event.id} event={event} />
        ))}
      </div>
    </div>
  )
}

function FilteredUserEvents({ userId }) {
  const { data: allEvents } = useUserEvents(userId)
 
  const upcomingEvents = allEvents?.filter(
    event => new Date(event.date) > new Date()
  )
 
  const pastEvents = allEvents?.filter(
    event => new Date(event.date) <= new Date()
  )
 
  return (
    <div>
      <section>
        <h2>Upcoming Events</h2>
        {upcomingEvents?.map(event => (
          <EventCard key={event.id} event={event} />
        ))}
      </section>
 
      <section>
        <h2>Past Events</h2>
        {pastEvents?.map(event => (
          <EventCard key={event.id} event={event} />
        ))}
      </section>
    </div>
  )
}

const { data: events } = useUserEvents(userId, {
  refetchInterval: 30000,
  refetchOnWindowFocus: true,
});

import { Suspense } from 'react'
 
function UserEventsWithSuspense({ userId }) {
  const { data: events } = useUserEvents(userId, {
    suspense: true
  })
 
  return (
    <div>
      {events.map(event => (
        <EventCard key={event.id} event={event} />
      ))}
    </div>
  )
}
 
function Page() {
  return (
    <Suspense fallback={<div>Loading events...</div>}>
      <UserEventsWithSuspense userId="123" />
    </Suspense>
  )
}