Create a basic events page draft #45
Conversation
* tidies up some config * add lint-staged & precommit hooks * tidies up README * tidies up issue template
| @@ -64,3 +64,5 @@ export default buildConfig({ | |||
| }), | |||
| ], | |||
| }) | |||
|
|
|||
| export const serverURL = env.SERVER_URL | |||
There was a problem hiding this comment.
if you intended to use this on the client side, have a look at our env validation ibrary. Client side environment variables must also be prefixed with NEXT_PUBLIC_
https://env.t3.gg/docs/nextjs
however, we are unlikely to need this
|
|
||
| env: { | ||
| SERVER_URL: process.env.SERVER_URL, | ||
| }, |
| import { useSearchParams } from 'next/navigation' | ||
|
|
||
| // 👇 Suspense 내부에 렌더링용 분리 컴포넌트 | ||
| function EventList() { |
There was a problem hiding this comment.
can add this to a colocated components folder
app/events/_components/event-list.tsx
There was a problem hiding this comment.
for general shared components we put them under @/components
| const res = await fetch( | ||
| `http://localhost:3000/api/events?limit=10&page=${pageParam}&sort=startTime&where[status][equals]=published`, | ||
| ) |
There was a problem hiding this comment.
Look at the payload local api for fetching data
https://payloadcms.com/docs/local-api/overview
this can be used server side
| @@ -1,13 +1,101 @@ | |||
| export default async function EventsPage() { | |||
| 'use client' | |||
There was a problem hiding this comment.
Try make this a server component instead
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns
closes #36
🌟 Context
This pr implements the basic Events page for the frontend.
📝 Description
Fetched all published events from Payload, sorted by
startTime(ascending)Displayed event title, start time, and location in each card
Implemented loading and error states
Added pagination (10 items per page)
-Added dynamic routing for each event using its
slug📋 Notes
Only events with the status
publishedare displayedEdited
events/page.tsxto build the page and added aslughook inevents.tsto support dynamic routing