Redesigned events directory

.gitignore

@@ -41,3 +41,4 @@ yarn-error.log*
 
 .idea
 .neon
+.vscode

src/app/admin/clubs/[slug]/events/page.tsx

@@ -38,7 +38,7 @@ export default async function Page({ params, searchParams }: Props) {
       includePast,
       currentTime: now,
     }),
-    api.event.countByClubId({
+    api.event.count({
       clubId: club.id,
       includePast,
       currentTime: now,

src/app/directory/create/CreateClubForm.tsx

@@ -3,8 +3,8 @@
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
 import { z } from 'zod';
+import ClubTagAutocomplete from '@src/components/club/ClubTagAutocomplete';
 import Panel from '@src/components/common/Panel';
-import { ClubTagEdit } from '@src/components/manage/form/ClubTagEdit';
 import { useTRPC } from '@src/trpc/react';
 import { useAppForm } from '@src/utils/form';
 import { createClubSchema } from '@src/utils/formSchemas';
@@ -79,7 +79,8 @@ const CreateClubForm = () => {
           </form.AppField>
           <form.Field name="tags">
             {(field) => (
-              <ClubTagEdit
+              <ClubTagAutocomplete
+                allowAddingOptions
                 value={field.state.value}
                 onChange={(value) => {
                   field.handleChange(value);

src/app/events/(directory)/calendar/page.tsx

@@ -0,0 +1,14 @@
+const Events = async () => {
+  return (
+    <main className="font-bold relative select-none h-72">
+      <h1 className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[200px] text-slate-200 dark:text-slate-800">
+        WIP
+      </h1>
+      <h2 className="absolute bottom-1/2 left-1/2 -translate-x-1/2 translate-y-20 text-3xl text-slate-800 dark:text-slate-200">
+        Coming soon!
+      </h2>
+    </main>
+  );
+};
+
+export default Events;

src/app/events/(directory)/layout.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import EventsTitle from '@src/components/events/directory/EventsTitle';
+import { EventHeader } from '@src/components/header/Header';
+
+type EventDirectoryLayoutProps = {
+  children: ReactNode;
+};
+
+export default async function EventDirectoryLayout({
+  children,
+}: EventDirectoryLayoutProps) {
+  return (
+    <>
+      <EventHeader />
+      <main className="mb-5 flex flex-col sm:px-4 max-w-6xl mx-auto">
+        {/* EventsTitle should be in layout.tsx so that it doesn't re-render between pages */}
+        <EventsTitle />
+        <div className="flex flex-col gap-y-4 max-sm:px-4">{children}</div>
+      </main>
+    </>
+  );
+}

src/app/events/(directory)/page.tsx

@@ -0,0 +1,47 @@
+import { type Metadata } from 'next';
+import { redirect } from 'next/navigation';
+import EventsBody from '@src/components/events/directory/EventsBody';
+import { api } from '@src/trpc/server';
+import { eventFiltersSchema, EventParamsSchema } from '@src/utils/eventFilter';
+
+export const metadata: Metadata = {
+  title: 'Events',
+  description: 'The place to find events at UTD.',
+  alternates: {
+    canonical: 'https://clubs.utdnebula.com/events',
+  },
+  openGraph: {
+    url: 'https://clubs.utdnebula.com/events',
+    description: 'The place to find events at UTD.',
+  },
+};
+const Events = async (props: { searchParams: Promise<EventParamsSchema> }) => {
+  const searchParams = await props.searchParams;
+  const parsed = eventFiltersSchema.parse(searchParams);
+
+  // Server-side query to avoid client-side fetching on load
+  const results = await Promise.allSettled([
+    api.event.findByFilters({ filters: parsed }),
+    api.event.count({ includePast: true }),
+  ]);
+
+  const initialEvents =
+    results[0].status === 'fulfilled' ? results[0].value : undefined;
+  const count = results[1].status === 'fulfilled' ? results[1].value : 0;
+
+  // If error fetching events with current filters, clear all filters and reload page
+  if (
+    results[0].status === 'rejected' &&
+    Object.keys(searchParams).length > 0
+  ) {
+    redirect('/events');
+  }
+
+  return (
+    <>
+      <EventsBody initialQueryData={initialEvents} total={count} />
+    </>
+  );
+};
+
+export default Events;

src/app/layout.tsx

@@ -18,7 +18,7 @@ const inter = Inter({
 
 const baiJamjuree = Bai_Jamjuree({
   subsets: ['latin'],
-  weight: ['500', '700'],
+  weight: ['500', '600', '700'],
   variable: '--font-display',
 });
 

src/app/manage/[slug]/(dashboard)/(forms)/Details.tsx

@@ -4,10 +4,10 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useUploadToUploadURL } from 'src/utils/uploadImage';
+import ClubTagAutocomplete from '@src/components/club/ClubTagAutocomplete';
 import Panel, { PanelSkeleton } from '@src/components/common/Panel';
 import Confirmation from '@src/components/Confirmation';
 import { setSnackbar, SnackbarPresets } from '@src/components/global/Snackbar';
-import { ClubTagEdit } from '@src/components/manage/form/ClubTagEdit';
 import FormImage from '@src/components/manage/form/FormImage';
 import { SelectClub } from '@src/server/db/models';
 import { useTRPC } from '@src/trpc/react';
@@ -278,7 +278,8 @@ const Details = ({ club }: DetailsProps) => {
             </div>
             <form.Field name="tags">
               {(field) => (
-                <ClubTagEdit
+                <ClubTagAutocomplete
+                  allowAddingOptions
                   value={field.state.value}
                   onChange={(value) => {
                     field.handleChange(value);

src/app/manage/[slug]/events/page.tsx

@@ -41,7 +41,7 @@ export default async function Page({
     currentTime: now,
   });
 
-  const totalCount = await api.event.countByClubId({
+  const totalCount = await api.event.count({
     clubId: club.id,
     includePast,
     currentTime: now,