From 714078980c58ee260cff504e482fb753815c5728 Mon Sep 17 00:00:00 2001
From: Roman Godmaire <godmaire@twilit.io>
Date: Mon, 20 Nov 2023 09:32:07 -0500
Subject: [PATCH] feat: Render comments on TrackCard

---
 src/lib/components/TrackCard.svelte | 43 +++++++++++++++++++++++++++++
 src/lib/server/db/index.ts          |  5 ++++
 src/lib/server/db/prisma.ts         | 26 ++++++++++++++++-
 src/routes/+page.svelte             |  1 +
 4 files changed, 74 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/TrackCard.svelte b/src/lib/components/TrackCard.svelte
index 61441e7..625b362 100644
--- a/src/lib/components/TrackCard.svelte
+++ b/src/lib/components/TrackCard.svelte
@@ -2,6 +2,19 @@
   export let title: string;
   export let version: number;
   export let producerUsername: string;
+  export let comments: { author: string; content: string; createdAt: Date }[];
+
+  const formatDateTime = (datetime: Date) => {
+    /*
+       If the date is today, then return LocaleTimeString
+       If the date is /not/ today, then return LocaleDateString
+    */
+    if (new Date().toDateString() === datetime.toDateString()) {
+      return datetime.toLocaleTimeString();
+    }
+
+    return datetime.toLocaleDateString();
+  };
 </script>
 
 <article>
@@ -13,8 +26,38 @@
   This is a track card.
 
   <footer>
+    {#if comments.length === 0}
+      <small><em>No comments yet.</em></small>
+    {/if}
+
+    {#each comments as comment}
+      <div>
+        <div class="comment-headline">
+          <small>{comment.author}</small>
+          <small class="comment-timestamp">
+            <abbr title={comment.createdAt.toLocaleString()}>
+              {formatDateTime(comment.createdAt)}
+            </abbr>
+          </small>
+        </div>
+        <p>{comment.content}</p>
+      </div>
+      <hr />
+    {/each}
+
     <label for="comment">
       <input type="text" name="comment" placeholder="Leave some feedback" />
     </label>
   </footer>
 </article>
+
+<style>
+  .comment-headline {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .comment-timestamp {
+    color: gray;
+  }
+</style>
diff --git a/src/lib/server/db/index.ts b/src/lib/server/db/index.ts
index 2a10aca..e978605 100644
--- a/src/lib/server/db/index.ts
+++ b/src/lib/server/db/index.ts
@@ -6,6 +6,11 @@ export interface Database {
       title: string;
       version: number;
       producer: string;
+      comments: {
+        author: string;
+        content: string;
+        createdAt: Date;
+      };
     }[]
   >;
 
diff --git a/src/lib/server/db/prisma.ts b/src/lib/server/db/prisma.ts
index 86ac065..0f3a370 100644
--- a/src/lib/server/db/prisma.ts
+++ b/src/lib/server/db/prisma.ts
@@ -17,6 +17,21 @@ export class DatabasePrisma implements Database {
             username: true
           }
         },
+        versions: {
+          select: {
+            comments: {
+              select: {
+                content: true,
+                createdAt: true,
+                author: {
+                  select: {
+                    username: true
+                  }
+                }
+              }
+            }
+          }
+        },
         _count: {
           select: {
             versions: true
@@ -32,7 +47,16 @@ export class DatabasePrisma implements Database {
       return {
         title: track.title,
         version: track._count.versions,
-        producer: track.producer.username
+        producer: track.producer.username,
+        comments: track.versions.flatMap((v) => {
+          return v.comments.map((c) => {
+            return {
+              author: c.author.username,
+              content: c.content,
+              createdAt: c.createdAt
+            };
+          });
+        })
       };
     });
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3c5c53d..1dd8b28 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -19,6 +19,7 @@
       title={track.title}
       version={track.version}
       producerUsername={track.producer}
+      comments={track.comments}
     />
   {/each}
 {:else}