Skip to content

BSL-38: add public events list page #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sanjanamanivannan wants to merge 1 commit into
base: main
Choose a base branch
from
Open

BSL-38: add public events list page #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions app/api/events/route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@ import { NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";

export async function GET() {
const now = new Date();

const events = await prisma.event.findMany({
where: {
startAt: { gte: now },
},
orderBy: { startAt: "asc" },
});
Comment on lines 5 to 13
Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a try/catch.. if Prisma throws for any reason, the route crashes with an unhandled promise rejection and returns a generic 500 with nothing useful

Something like this:

export async function GET() {
  try {
    const now = new Date();
    const events = await prisma.event.findMany({
      where: { startAt: { gte: now } },
      orderBy: { startAt: "asc" },
    });
    return NextResponse.json(events);
  } catch (err) {
    console.error("[GET /api/events]", err);
    return NextResponse.json(
      { error: "Failed to load events" },
      { status: 500 }
    );
  }
}


Expand Down
59 changes: 54 additions & 5 deletions app/events/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,61 @@
import React from "react";
import PublicLayout from '@/components/layout/PublicLayout';
"use client";

import { useEffect, useState } from "react";
import PublicLayout from "@/components/layout/PublicLayout";

type Event = {
id: string;
title?: string | null;
name?: string | null;
startAt: string; // ISO string coming from JSON
location?: string | null;
};
Comment on lines +6 to +12
Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Couple things:
make title required
also remove name

so replace with this:

type Event = {
  id: string;
  title: string;
  startAt: string;
  location: string | null;
};

Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually if you resolve the client to server component issue, this wouldn't matter since it would disappear since the server component queries prisma directly and typescript infers the types from the schema auromatically, so no type Event ={} needed


export default function EventsPage() {
const [events, setEvents] = useState<Event[] | null>(null);

useEffect(() => {
async function load() {
const res = await fetch("/api/events");
if (!res.ok) {
setEvents([]);
return;
}
const data = (await res.json()) as Event[];
setEvents(data);
}
load();
}, []);

const items = events ?? [];

Comment on lines +1 to +31
Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the page does not need to be a client component. Convert it to an async server component and query prisma directory... remove use client, useEffect, and useState entirely.

The client approach causes a loading flash on every visit. Server components are the default and right tool here

Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So convert to a server component..

AI generated this, looks to be good but verify/test please:

import PublicLayout from "@/components/layout/PublicLayout";
import { prisma } from "@/lib/prisma";

export default async function EventsPage() {
  let events: { id: string; title: string; startAt: Date; location: string | null }[] = [];

  try {
    events = await prisma.event.findMany({
      where: { startAt: { gte: new Date() } },
      orderBy: { startAt: "asc" },
      select: { id: true, title: true, startAt: true, location: true },
    });
  } catch (err) {
    console.error("[EventsPage]", err);
    // events stays [] — page renders gracefully with empty state
  }

  return (
    <PublicLayout>
      <div className="mx-auto max-w-4xl px-6 py-12">
        <h1 className="text-3xl font-semibold">Events</h1>
        <p className="mt-2 text-gray-600">Upcoming events</p>

        {events.length === 0 ? (
          <div className="mt-8 rounded-lg border p-6 text-gray-600">
            No upcoming events right now. Check back soon.
          </div>
        ) : (
          <ul className="mt-8 space-y-4">
            {events.map((event) => (
              <li key={event.id} className="rounded-lg border p-4">
                <div className="font-medium">{event.title}</div>
                <div className="mt-1 text-sm text-gray-600">
                  {event.startAt.toLocaleDateString("en-US", {
                    weekday: "short", month: "short", day: "numeric", year: "numeric",
                  })}
                  {event.location ? ` • ${event.location}` : ""}
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </PublicLayout>
  );
}

Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is the entire file

return (
<PublicLayout>
<div className="max-w-4xl mx-auto px-6 py-20">
<h1 className="text-4xl font-semibold mb-6">Events</h1>
<p className="text-lg text-gray-700">No events yet — this is a placeholder page so the navbar link doesn&apos;t 404.</p>
<div className="mx-auto max-w-4xl px-6 py-12">
<h1 className="text-3xl font-semibold">Events</h1>
<p className="mt-2 text-gray-600">Upcoming events</p>

{events === null ? (
<div className="mt-8 text-gray-600">Loading…</div>
) : items.length === 0 ? (
<div className="mt-8 rounded-lg border p-6 text-gray-600">
No upcoming events right now. Check back soon.
</div>
) : (
<ul className="mt-8 space-y-4">
{items.map((e) => (
<li key={e.id} className="rounded-lg border p-4">
<div className="font-medium">
{e.title ?? e.name ?? "Untitled event"}
</div>
<div className="mt-1 text-sm text-gray-600">
{new Date(e.startAt).toLocaleString()}
{e.location ? ` • ${e.location}` : ""}
</div>
</li>
))}
</ul>
)}
</div>
</PublicLayout>
);
Expand Down