Fix an ESlint TS error in inconv way

app/events/page.tsx

@@ -1,8 +1,59 @@
+import Link from 'next/link';
+import { getEventsInsecure } from '../../database/events';
+
 export const metadata = {
   title: 'Upcoming Events',
   description: 'Upcoming events around the city',
 };
 
-export default function EventsPage() {
-  return <h1>Upcoming Events</h1>;
+function formatDuration(duration: number | null): string {
+  if (duration === null) {
+    return 'N/A';
+  }
+  const hours = Math.floor(duration / 60);
+  const minutes = duration % 60;
+  return `${hours}h ${minutes}m`;
+}
+
+export default async function EventsPage() {
+  const events = await getEventsInsecure();
+  return (
+    <div>
+      <h1>These Are Our Currently Available Products</h1>
+      <div>
+        <br />
+        {events.map((event) => {
+          return (
+            <div key={`events-${event.id}`}>
+              <div>
+                {event.name}
+                <br />
+                {event.type}
+                <br />
+                {event.date.toLocaleDateString()}
+                <br />
+                {event.location}
+                <br />
+                {formatDuration(event.duration)}
+                <br />
+                {event.image}
+                <br />
+                {event.category}
+                <br />
+
+                <br />
+              </div>
+              <br />
+              <br />
+            </div>
+          );
+        })}
+        <br />
+      </div>
+      <br />
+      <div>
+        <Link href="/">Back to Home page</Link>
+      </div>
+    </div>
+  );
 }

app/layout.tsx

@@ -43,13 +43,14 @@ export default async function RootLayout({ children }: Props) {
             <div>
               <Link href="/">Home</Link>
               <Link href="/events">Upcoming Events</Link>
-              <Link href="/post">Post Events</Link>
+
               <div>
                 {user ? (
                   <>
                     <Link href={`/profile/${user.username}`}>
                       {user.username}
                     </Link>
+                    <Link href="/post">Post Events</Link>
                     <LogoutButton />
                   </>
                 ) : (

database/events.ts

@@ -1,16 +1,60 @@
-export type Event = {
-  id: number;
-  user_id: number;
-  name: string;
-  type: string;
-  date: Date;
-  location: string;
-  duration: number | null;
-  entry_fee: number | null;
-  category: string;
-  description: string;
-  image: string;
-  organizer_url: string;
-  age_restriction: boolean | null;
-  archived: boolean | null;
-};
+import { cache } from 'react';
+import { sql } from './connect';
+
+export const getEventsInsecure = cache(async () => {
+  const events = await sql<
+    {
+      id: number;
+      userId: number;
+      name: string;
+      type: string;
+      date: Date;
+      location: string;
+      duration: number | null;
+      entryFee: number | null;
+      category: string;
+      description: string;
+      image: string;
+      organizerUrl: string;
+      ageRestriction: boolean | null;
+      archived: boolean;
+    }[]
+  >`
+    SELECT
+      *
+    FROM
+      events
+  `;
+
+  return events;
+});
+
+export const getEventInsecure = cache(async (id: number) => {
+  const [event] = await sql<
+    {
+      id: number;
+      userId: number;
+      name: string;
+      type: string;
+      date: Date;
+      location: string;
+      duration: number | null;
+      entryFee: number | null;
+      category: string;
+      description: string;
+      image: string;
+      organizerUrl: string;
+      ageRestriction: boolean | null;
+      archived: boolean;
+    }[]
+  >`
+    SELECT
+      *
+    FROM
+      events
+    WHERE
+      id = ${id}
+  `;
+
+  return event;
+});

migrations/00002-createTableEvents.ts

@@ -1,5 +1,22 @@
 import { Sql } from 'postgres';
 
+export type Event = {
+  id: number;
+  userId: number;
+  name: string;
+  type: string;
+  date: Date;
+  location: string;
+  duration: null | number;
+  entryFee: null | number;
+  category: string;
+  description: string;
+  image: string;
+  organizerUrl: string;
+  ageRestriction: null | false | true;
+  archived: boolean;
+};
+
 export async function up(sql: Sql) {
   await sql`
     CREATE TABLE events (

migrations/00007-insertEvents.ts

@@ -188,7 +188,9 @@ export async function up(sql: Sql) {
           ${event.user_id},
           ${event.name},
           ${event.type},
-          ${event.date},
+          date (
+            ${event.date}
+          ),
           ${event.location},
           ${event.duration},
           ${event.entry_fee},