Events group page and table

src/app/(frontend)/[center]/events/[slug]/page.tsx

@@ -2,7 +2,7 @@ import { Redirects } from '@/components/Redirects'
 import RichText from '@/components/RichText'
 import configPromise from '@payload-config'
 import { draftMode } from 'next/headers'
-import { getPayload, Where } from 'payload'
+import { getPayload } from 'payload'
 
 import { EventInfo } from '@/components/EventInfo'
 import { LivePreviewListener } from '@/components/LivePreviewListener'
@@ -166,19 +166,6 @@ const queryEventBySlug = async ({ center, slug }: { center: string; slug: string
 
   const payload = await getPayload({ config: configPromise })
 
-  const conditions: Where[] = [
-    {
-      'tenant.slug': {
-        equals: center,
-      },
-    },
-    {
-      slug: {
-        equals: slug,
-      },
-    },
-  ]
-
   const result = await payload.find({
     collection: 'events',
     draft,
@@ -191,7 +178,20 @@ const queryEventBySlug = async ({ center, slug }: { center: string; slug: string
         customDomain: true,
       },
     },
-    where: { and: conditions },
+    where: {
+      and: [
+        {
+          'tenant.slug': {
+            equals: center,
+          },
+        },
+        {
+          slug: {
+            equals: slug,
+          },
+        },
+      ],
+    },
   })
 
   return result.docs?.[0] || null

src/app/(payload)/admin/importMap.js

@@ -1,6 +1,5 @@
 import { QueriedPostsComponent as QueriedPostsComponent_a2ad38d8499118f1bebc7752c0fff51e } from '@/blocks/BlogList/fields/QueriedPostsComponent'
 import { DefaultColumnAdder as DefaultColumnAdder_006f8c6c8800e6fe3753b3785f2c4a01 } from '@/blocks/Content/components/DefaultColumnAdder'
-import { QueriedEventsComponent as QueriedEventsComponent_65bd30cc675f775ebce6af07a79e525c } from '@/blocks/EventList/fields/QueriedEventsComponent'
 import { SponsorsLayoutDescription as SponsorsLayoutDescription_6f00823041b5b0999b9929fb565110de } from '@/blocks/SponsorsBlock/components/SponsorsLayoutDescription'
 import { CourseTypeField as CourseTypeField_348fff62462d32a00f93a0ac5be86e99 } from '@/collections/Courses/components/CourseTypeField'
 import { DuplicatePageFor as DuplicatePageFor_8f1d8961a356bec6784e5c591c016925 } from '@/collections/Pages/components/DuplicatePageFor'
@@ -104,8 +103,6 @@ export const importMap = {
   '@/components/ColumnLayoutPicker#default': default_923dc5ccc0b72de4298251644cbfe39e,
   '@/blocks/Content/components/DefaultColumnAdder#DefaultColumnAdder':
     DefaultColumnAdder_006f8c6c8800e6fe3753b3785f2c4a01,
-  '@/blocks/EventList/fields/QueriedEventsComponent#QueriedEventsComponent':
-    QueriedEventsComponent_65bd30cc675f775ebce6af07a79e525c,
   '@payloadcms/plugin-seo/client#OverviewComponent':
     OverviewComponent_a8a977ebc872c5d5ea7ee689724c0860,
   '@payloadcms/plugin-seo/client#MetaImageComponent':

src/blocks/Content/config.ts

@@ -12,6 +12,7 @@ import { ButtonBlock } from '../Button/config'
 import { CalloutBlock } from '../Callout/config'
 import { DocumentBlock } from '../DocumentBlock/config'
 import { EventListBlockLexical } from '../EventList/config'
+import { EventTableBlock } from '../EventTable/config'
 import { GenericEmbedLexical } from '../GenericEmbed/config'
 import { HeaderBlock } from '../Header/config'
 import { MediaBlockLexical } from '../MediaBlock/config'
@@ -131,6 +132,7 @@ export const Content: Block = {
                     CalloutBlock,
                     DocumentBlock,
                     EventListBlockLexical,
+                    EventTableBlock,
                     SingleEventBlockLexical,
                     GenericEmbedLexical,
                     HeaderBlock,

src/blocks/EventList/Component.tsx

@@ -1,43 +1,95 @@
+'use client'
+
 import { EventPreviewSmallRow } from '@/components/EventPreviewSmallRow'
 import RichText from '@/components/RichText'
 import { Button } from '@/components/ui/button'
 import type { Event, EventListBlock as EventListBlockProps } from '@/payload-types'
+import { useTenant } from '@/providers/TenantProvider'
 import { cn } from '@/utilities/ui'
+import { format } from 'date-fns'
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
 
 type EventListComponentProps = EventListBlockProps & {
   className?: string
   wrapInContainer?: boolean
 }
 
-export const EventListBlockComponent = async (args: EventListComponentProps) => {
-  const { heading, belowHeadingContent, backgroundColor, className, wrapInContainer = true } = args
+export const EventListBlockComponent = (args: EventListComponentProps) => {
+  const {
+    heading,
+    belowHeadingContent,
+    backgroundColor,
+    className,
+    wrapInContainer = true,
+    eventOptions,
+  } = args
 
-  const { filterByEventTypes, sortBy, queriedEvents } = args.dynamicOptions || {}
+  const { filterByEventTypes, filterByEventGroups, filterByEventTags, maxEvents } =
+    args.dynamicOptions || {}
   const { staticEvents } = args.staticOptions || {}
 
-  let events = staticEvents?.filter(
-    (event): event is Event => typeof event === 'object' && event !== null,
-  )
+  const { tenant } = useTenant()
+  const [fetchedEvents, setFetchedEvents] = useState<Event[]>([])
+  const [eventParams, setEventParams] = useState<string>('')
 
-  const hasStaticEvents = staticEvents && staticEvents.length > 0
+  useEffect(() => {
+    if (eventOptions !== 'dynamic') return
 
-  if (!staticEvents || (staticEvents.length === 0 && queriedEvents && queriedEvents.length > 0)) {
-    events = queriedEvents?.filter(
-      (event): event is Event => typeof event === 'object' && event !== null,
-    )
-  }
+    const fetchEvents = async () => {
+      const tenantSlug = typeof tenant === 'object' && tenant?.slug
+      if (!tenantSlug) return
 
-  const eventsLinkQueryParams = new URLSearchParams()
-  if (sortBy !== undefined) {
-    eventsLinkQueryParams.set('sort', sortBy)
-  }
+      const params = new URLSearchParams({
+        center: tenantSlug,
+        limit: String(maxEvents || 4),
+        depth: '1',
+      })
 
-  if (filterByEventTypes && filterByEventTypes.length > 0) {
-    eventsLinkQueryParams.set('types', filterByEventTypes.join(','))
-  }
+      if (filterByEventTypes?.length) {
+        params.append('types', filterByEventTypes.join(','))
+      }
+
+      if (filterByEventGroups?.length) {
+        const groupIds = filterByEventGroups
+          .map((g) => (typeof g === 'object' ? g.id : g))
+          .filter(Boolean)
+        if (groupIds.length) {
+          params.append('groups', groupIds.join(','))
+        }
+      }
+
+      if (filterByEventTags?.length) {
+        const tagIds = filterByEventTags
+          .map((t) => (typeof t === 'object' ? t.id : t))
+          .filter(Boolean)
+        if (tagIds.length) {
+          params.append('tags', tagIds.join(','))
+        }
+      }
+      params.append('startDate', format(new Date(), 'MM-dd-yyyy'))
+      setEventParams(params.toString())
+
+      const response = await fetch(`/api/${tenantSlug}/events?${params.toString()}`, {
+        cache: 'no-store',
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch events')
+      }
+
+      const data = await response.json()
+      setFetchedEvents(data.events || [])
+    }
+
+    fetchEvents()
+  }, [eventOptions, filterByEventTypes, filterByEventGroups, filterByEventTags, maxEvents, tenant])
+
+  let displayEvents
+  if (eventOptions === 'static') displayEvents = staticEvents as Event[]
+  if (eventOptions === 'dynamic') displayEvents = fetchedEvents
 
-  if (!events) {
+  if (!displayEvents) {
     return null
   }
 
@@ -62,20 +114,20 @@ export const EventListBlockComponent = async (args: EventListComponentProps) =>
           <div
             className={cn(
               'grid gap-4 lg:gap-6 not-prose max-h-[400px] overflow-y-auto',
-              events && events.length > 1 && '@3xl:grid-cols-2 @6xl:grid-cols-3',
+              displayEvents && displayEvents.length > 1 && '@3xl:grid-cols-2 @6xl:grid-cols-3',
             )}
           >
-            {events && events?.length > 0 ? (
-              events?.map((event, index) => (
+            {displayEvents && displayEvents?.length > 0 ? (
+              displayEvents?.map((event, index) => (
                 <EventPreviewSmallRow doc={event} key={`${event.id}__${index}`} />
               ))
             ) : (
               <h3>There are no events matching these results.</h3>
             )}
           </div>
-          {!hasStaticEvents && (
+          {eventOptions === 'static' && (
             <Button asChild className="not-prose md:self-start">
-              <Link href={`/events?${eventsLinkQueryParams.toString()}`}>View all {heading}</Link>
+              <Link href={`/events?${eventParams}`}>View all {heading}</Link>
             </Button>
           )}
         </div>