feat: Basic track page

src/lib/components/TrackCard.svelte

@@ -5,6 +5,7 @@
   export let producerUsername: string;
   export let comments: { author: string; content: string; createdAt: Date }[];
 
+  // TODO:  Relative formatting (ie. 6 days ago, 3 moonths ago)
   const formatDateTime = (datetime: Date) => {
     /*
        If the date is today, then return LocaleTimeString

src/lib/server/db/index.ts

@@ -15,6 +15,16 @@ export interface Database {
     }[]
   >;
 
+  getTrackById: (trackId: number) => Promise<
+    {
+      title: string;
+      objectKey: string;
+      createdAt: Date;
+      producer: {
+        username: string;
+      };
+    }?
+  >;
   createTrack: (producerId: string, title: string, objectKey: string) => Promise<Track>;
   insertTrackVersion: (trackId: number) => Promise<TrackVersion>;
 }

src/lib/server/db/prisma.ts

@@ -65,6 +65,26 @@ export class DatabasePrisma implements Database {
     return res;
   };
 
+  getTrackById = async (trackId: number) => {
+    const track = await this.client.track.findUnique({
+      select: {
+        title: true,
+        objectKey: true,
+        createdAt: true,
+        producer: {
+          select: {
+            username: true
+          }
+        }
+      },
+      where: {
+        id: trackId
+      }
+    });
+
+    return track;
+  };
+
   createTrack = async (producerId: string, title: string, objectKey: string) => {
     const track = await this.client.track.create({
       data: {

src/routes/track/[slug]/+page.server.ts

@@ -0,0 +1,20 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params: { slug }, locals: { database } }) => {
+  const trackId = parseInt(slug);
+
+  if (isNaN(trackId)) {
+    throw error(404, 'Track not found');
+  }
+
+  let track = await database.getTrackById(trackId);
+
+  if (!track) {
+    throw error(440, 'Track not found');
+  }
+
+  return {
+    track
+  };
+};

src/routes/track/[slug]/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let data;
+  let { track } = data;
+</script>
+
+<hgroup>
+  <h1>{track.title}</h1>
+  <h2>by {track.producer.username}</h2>
+</hgroup>