feat: add organizer to event cards

cypress.config.ts

@@ -18,6 +18,7 @@ const resetEvents = async () => {
   const data = events25To50Km.map((event) => ({
     ...event,
     creatorId: user.id,
+    organizedBy: session.user.name,
   }));
   return await prisma.event.createMany({
     data,

cypress/e2e/manage-events/add-event.cy.ts

@@ -12,6 +12,7 @@ describe("Add Event", () => {
     cy.get("[data-cy='input-link']").type("https://test.event");
     cy.get("[data-cy='input-latitude-add'").type("0");
     cy.get("[data-cy='input-longitude-add'").type("0");
+    cy.get("[data-cy='input-organizedBy'").type("Test Organizer");
     cy.get("[data-cy='submit-add-event'").click();
 
     cy.location("pathname").should("eq", "/");
@@ -29,5 +30,6 @@ describe("Add Event", () => {
     // We should only see the event we just created
     cy.get("[data-cy='event-card']").should("have.length", 1);
     cy.contains("Test Event");
+    cy.contains("Test Organizer");
   });
 });

prisma/migrations/20240208152336_add_event_organizer/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Added the required column `organizedBy` to the `Event` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "Event" ADD COLUMN     "organizedBy" TEXT NOT NULL;

prisma/schema.prisma

@@ -54,14 +54,15 @@ model User {
 }
 
 model Event {
-  id        String   @id @default(cuid())
-  name      String
-  date      DateTime
-  link      String
-  latitude  Float
-  longitude Float
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  creator   User     @relation(fields: [creatorId], references: [id])
-  creatorId String
+  id          String   @id @default(cuid())
+  name        String
+  date        DateTime
+  link        String
+  latitude    Float
+  longitude   Float
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+  creator     User     @relation(fields: [creatorId], references: [id])
+  organizedBy String
+  creatorId   String
 }

prisma/seed.ts

@@ -39,6 +39,7 @@ const createEvents = async () => {
   const data = events25To50Km.map((event) => ({
     ...event,
     creatorId: user.id,
+    organizedBy: session.user.name,
   }));
   await prisma.event.createMany({
     data,
@@ -51,4 +52,3 @@ export const setupDb = async () => {
 };
 
 setupDb();
-

src/components/event-card.tsx

@@ -0,0 +1,24 @@
+import { format } from "date-fns";
+import type { EventWithDistance } from "@/types";
+
+export function EventCard({ event }: { event: EventWithDistance }) {
+  return (
+    <div data-cy="event-card">
+      <h2>
+        Title: <a href={event.link}>{event.name}</a>
+      </h2>
+
+      <p>Organized by: {event.organizedBy}</p>
+
+      {/* TODO: replace with a spinner (or similar) to gracefully handle
+          the delay between receiving the HTML and the browser rendering 
+          the date */}
+      <p suppressHydrationWarning>
+        Date: {format(new Date(event.date), "E LLLL d, yyyy @ HH:mm")}
+      </p>
+      {event.distance !== null && (
+        <p>Distance to event: {event.distance.toFixed(2)} km</p>
+      )}
+    </div>
+  );
+}

src/components/location-form.tsx

@@ -0,0 +1,53 @@
+import { typeboxResolver } from "@hookform/resolvers/typebox";
+import { useForm } from "react-hook-form";
+import { Button, Stack } from "@mui/material";
+import { type Point, type Feature } from "@turf/helpers";
+
+import { type Location, locationSchema } from "@/validation/schema";
+import FormField from "@/components/form-field";
+
+export function LocationForm({
+    userPosition,
+    onSubmit,
+  }: {
+    userPosition: Feature<Point>;
+    onSubmit: (data: Location) => void;
+  }) {
+    const {
+      register,
+      handleSubmit,
+      formState: { errors },
+    } = useForm<Location>({
+      defaultValues: {
+        latitude: userPosition?.geometry.coordinates[1],
+        longitude: userPosition?.geometry.coordinates[0],
+      },
+      resolver: typeboxResolver(locationSchema),
+    });
+
+    // TODO: DRY this and add-event out, they're almost identical.
+    return (
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Stack spacing={2}>
+          <FormField
+            label="Latitude: "
+            type="text"
+            helperText="Latitude must be between -90 and 90 inclusive"
+            errors={errors}
+            {...register("latitude", { required: true, valueAsNumber: true })}
+          />
+          <FormField
+            label="Longitude: "
+            type="text"
+            helperText="Longitude must be between -180 and 180 inclusive"
+            errors={errors}
+            {...register("longitude", { required: true, valueAsNumber: true })}
+          />
+          <Button data-cy="submit-location" type="submit">
+            Submit
+          </Button>
+        </Stack>
+      </form>
+    );
+  }
+

src/pages/add-event.tsx

@@ -48,6 +48,14 @@ export default function AddEvent() {
             {...register("name", { required: true })}
           />
 
+          <FormField
+            type="text"
+            label="Organized By"
+            errors={errors}
+            helperText="Organizer names must be between 1 and 100 characters long"
+            {...register("organizedBy", { required: true })}
+          />
+
           <FormField
             type="url"
             label="URL"

src/pages/api/event.ts

@@ -55,13 +55,14 @@ const createEvent = async (req: NextApiRequest, res: NextApiResponse) => {
             email: user.email,
           },
         },
+        organizedBy: req.body.organizedBy,
       },
     });
   } catch (error) {
     return res.status(500).json({ message: "Could not create event" });
   }
 
-  await res.revalidate("/")
+  await res.revalidate("/");
   res.status(200).json({ message: "Event created" });
 };
 

src/pages/index.tsx

@@ -1,18 +1,15 @@
 import Head from "next/head";
 import { Inter } from "next/font/google";
 import { GetStaticProps } from "next";
-import { format } from "date-fns";
 import { useEffect, useState } from "react";
 import distance from "@turf/distance";
 import { point, type Point, type Feature } from "@turf/helpers";
-import { Button, Stack, Typography } from "@mui/material";
-import { typeboxResolver } from "@hookform/resolvers/typebox";
-import { Event } from "@prisma/client";
-import { useForm } from "react-hook-form";
+import { Typography } from "@mui/material";
 
 import { prisma } from "@/db";
-import { type Location, locationSchema } from "@/validation/schema";
-import FormField from "@/components/form-field";
+import { EventCard } from "@/components/event-card";
+import { LocationForm } from "@/components/location-form";
+import type { EventInfo } from "@/types";
 
 // Given that people can (currently) be assumed to be meeting on the surface of
 // the Earth, we can use its circumference to calculate a safe upper bound for
@@ -21,13 +18,6 @@ const EARTH_CIRCUMFERENCE = "40075.017";
 
 const inter = Inter({ subsets: ["latin"] });
 
-type EventInfo = { date: string } & Omit<
-  Event,
-  "createdAt" | "updatedAt" | "creatorId" | "date"
->;
-
-type EventWithDistance = EventInfo & { distance: number | null };
-
 type EventProps = {
   events: EventInfo[];
 };
@@ -43,6 +33,7 @@ export const getStaticProps: GetStaticProps<EventProps> = async () => {
         link: true,
         latitude: true,
         longitude: true,
+        organizedBy: true,
       },
     });
     serializeableEvents = events.map((event) => ({
@@ -85,71 +76,6 @@ function eventInRadius(
   return distanceToEvent ? distanceToEvent <= radius : true;
 }
 
-function EventCard({ event }: { event: EventWithDistance }) {
-  return (
-    <div data-cy="event-card">
-      <h2>
-        Title: <a href={event.link}>{event.name}</a>
-      </h2>
-
-      {/* TODO: replace with a spinner (or similar) to gracefully handle
-        the delay between receiving the HTML and the browser rendering 
-        the date */}
-      <p suppressHydrationWarning>
-        Date: {format(new Date(event.date), "E LLLL d, yyyy @ HH:mm")}
-      </p>
-      {event.distance !== null && (
-        <p>Distance to event: {event.distance.toFixed(2)} km</p>
-      )}
-    </div>
-  );
-}
-
-function LocationForm({
-  userPosition,
-  onSubmit,
-}: {
-  userPosition: Feature<Point>;
-  onSubmit: (data: Location) => void;
-}) {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<Location>({
-    defaultValues: {
-      latitude: userPosition?.geometry.coordinates[1],
-      longitude: userPosition?.geometry.coordinates[0],
-    },
-    resolver: typeboxResolver(locationSchema),
-  });
-
-  // TODO: DRY this and add-event out, they're almost identical.
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Stack spacing={2}>
-        <FormField
-          label="Latitude: "
-          type="text"
-          helperText="Latitude must be between -90 and 90 inclusive"
-          errors={errors}
-          {...register("latitude", { required: true, valueAsNumber: true })}
-        />
-        <FormField
-          label="Longitude: "
-          type="text"
-          helperText="Longitude must be between -180 and 180 inclusive"
-          errors={errors}
-          {...register("longitude", { required: true, valueAsNumber: true })}
-        />
-        <Button data-cy="submit-location" type="submit">
-          Submit
-        </Button>
-      </Stack>
-    </form>
-  );
-}
-
 export default function Home({ events }: EventProps) {
   const [userPosition, setUserPosition] = useState<Feature<Point> | null>(null);
   const [geoLocationEnabled, setGeoLocationEnabled] = useState(true);

src/types.ts

@@ -0,0 +1,8 @@
+import type { Event } from "@prisma/client";
+
+export type EventInfo = { date: string } & Omit<
+  Event,
+  "createdAt" | "updatedAt" | "creatorId" | "date"
+>;
+
+export type EventWithDistance = EventInfo & { distance: number | null };

src/validation/schema.ts

@@ -28,6 +28,7 @@ export const eventSchema = Type.Composite([
     name: Type.String({ minLength: 1, maxLength: 100 }),
     link: Type.String({ format: "uri" }),
     date: Type.String({ format: "date-time" }),
+    organizedBy: Type.String({ minLength: 1, maxLength: 100}),
   }),
   locationSchema,
 ]);