From 9e4757703c51a4f637e7218bbdff2fbf4cf0a2e0 Mon Sep 17 00:00:00 2001
From: Roman Godmaire <godmaire@twilit.io>
Date: Sat, 25 Nov 2023 16:16:15 -0500
Subject: [PATCH] feat: show comments on track page

---
 src/lib/server/db/index.ts           |  9 +++++++++
 src/lib/server/db/prisma.ts          | 18 ++++++++++++++++++
 src/routes/track/[slug]/+page.svelte | 25 +++++++++++++++++++++++++
 3 files changed, 52 insertions(+)

diff --git a/src/lib/server/db/index.ts b/src/lib/server/db/index.ts
index 5184bf6..3eb10c4 100644
--- a/src/lib/server/db/index.ts
+++ b/src/lib/server/db/index.ts
@@ -22,6 +22,15 @@ export interface Database {
     producer: {
       username: string;
     };
+    versions: {
+      comments: {
+        createdAt: Date;
+        content: string;
+        author: {
+          username: string;
+        };
+      }[];
+    }[];
   } | null>;
   createTrack: (producerId: string, title: string, objectKey: string) => Promise<Track>;
   createTrackVersion: (trackId: number) => Promise<TrackVersion>;
diff --git a/src/lib/server/db/prisma.ts b/src/lib/server/db/prisma.ts
index 3d15111..f24d4a4 100644
--- a/src/lib/server/db/prisma.ts
+++ b/src/lib/server/db/prisma.ts
@@ -75,6 +75,24 @@ export class DatabasePrisma implements Database {
           select: {
             username: true
           }
+        },
+        versions: {
+          orderBy: {
+            id: 'desc'
+          },
+          select: {
+            comments: {
+              select: {
+                content: true,
+                createdAt: true,
+                author: {
+                  select: {
+                    username: true
+                  }
+                }
+              }
+            }
+          }
         }
       },
       where: {
diff --git a/src/routes/track/[slug]/+page.svelte b/src/routes/track/[slug]/+page.svelte
index 21e3a51..6a7096c 100644
--- a/src/routes/track/[slug]/+page.svelte
+++ b/src/routes/track/[slug]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Comment from '$lib/components/Comment.svelte';
   export let data;
   let { track } = data;
 </script>
@@ -11,3 +12,27 @@
   <h1>{track.title}</h1>
   <h2>by {track.producer.username}</h2>
 </hgroup>
+
+<section>
+  <h2>Comments</h2>
+
+  {#each track.versions as version, versionIndex}
+    <!-- Automatically open the latest version's comments -->
+    <details open={versionIndex + 1 === track.versions.length}>
+      <summary>Version {versionIndex + 1}</summary>
+
+      {#each version.comments as comment, commentIndex}
+        <Comment
+          content={comment.content}
+          author={comment.author.username}
+          createdAt={comment.createdAt}
+        />
+
+        <!-- Do not print the line on the last comment -->
+        {#if commentIndex + 1 !== version.comments.length}
+          <hr />
+        {/if}
+      {/each}
+    </details>
+  {/each}
+</section>