From a2e9314724b5d92e66fd32e6fca4a1b63562bfc1 Mon Sep 17 00:00:00 2001
From: Joonas <qwerty@kalli.st>
Date: Sat, 14 Jan 2023 13:23:40 +0200
Subject: [PATCH] added relation between post replyid and id so we can show and
 link replies on the reply in the thread

---
 app/routes/threads/$threadId.jsx | 35 +++++++++++++++++++++++---------
 prisma/schema.prisma             |  2 ++
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/app/routes/threads/$threadId.jsx b/app/routes/threads/$threadId.jsx
index 54ab30a..d4744fc 100644
--- a/app/routes/threads/$threadId.jsx
+++ b/app/routes/threads/$threadId.jsx
@@ -56,7 +56,11 @@ export async function loader({ params }) {
       id: parseInt(threadId),
     },
     include: {
-      posts: true,
+      posts: {
+        include: {
+          replies: true,
+        },
+      },
     },
   });
 
@@ -80,15 +84,26 @@ export default function Thread() {
         <ul className="flex flex-col m-8 ">
           {data.posts.map(post => 
             <li id={`${post.id}`} className="rounded shadow p-4 m-4 odd:bg-ctp-mantle even:bg-ctp-base" key={post.id}>
-              <span id={`${post.id}`}>Reply id: <strong>{post.id}</strong> Replied at: <strong>{post.createdAt} </strong></span>
-              <Link onClick={(event) => {
-                event.preventDefault();
-                document.getElementById(`bottom`).scrollIntoView(true);
-                setReplying(post.id);
-                }} to={`#bottom`} 
-                >Reply
-              </Link>
-              <br />
+              <div className="flex">
+                <span>Reply id: <strong>{post.id}</strong> Replied at: <strong>{post.createdAt} </strong></span>
+                <Link className="mx-2 text-ctp-rosewater hover:text-ctp-maroon hover:underline" onClick={(event) => {
+                  event.preventDefault();
+                  document.getElementById(`bottom`).scrollIntoView(true);
+                  setReplying(post.id);
+                  }} to={`#bottom`} 
+                  >Reply
+                </Link>
+                <ul className="flex flex-wrap space-x-1">
+                  {post?.replies?.map(reply => 
+                    <li key={reply.id}>
+                      <Link onClick={event => {
+                        event.preventDefault();
+                        document.getElementById(`${reply.id}`).scrollIntoView(true);
+                      }} className="text-ctp-teal hover:text-ctp-sky hover:underline" to={`#${reply.id}`}>{reply.id}</Link>
+                    </li>    
+                  )}
+                </ul>
+              </div>
               {post.replyingTo ? <Link onClick={event => {
                 event.preventDefault();
                 document.getElementById(`${post.replyingTo}`).scrollIntoView(true);
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 5d93733..22afcc8 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -29,6 +29,8 @@ model Post {
   comment     String
   imageName   String?
   replyingTo  Int?
+  Reply       Post?     @relation("d", fields: [replyingTo], references: [id])
+  replies     Post[]    @relation("d")
 
   post        Thread    @relation(fields: [postId], references: [id])
   postId      Int