Merge branch 'dev' of git.silversoft.se:Imbus/FrostByte into dev

client-solid/src/Components/Comment.tsx

@@ -1,8 +1,12 @@
 import { JSXElement } from "solid-js";
 
-import { ReplyIcon } from "../Util/Icons";
 import { EngagementIcon } from "../Util/Icons";
 import { PublicComment } from "../Util/api";
+import { NewCommentInputArea } from "./NewComment";
+
+interface CommentProps {
+  comment: PublicComment;
+}
 
 /**
  * Comment is a component that displays a single comment.
@@ -10,9 +14,9 @@ import { PublicComment } from "../Util/api";
  * @param {string} props.postId The id of the post that the comment is a reply to.
  * @returns {JSXElement} A JSXElement of a comment
  */
-export function Comment({ comment }: { comment: PublicComment }): JSXElement {
+export function Comment({ comment }: CommentProps): JSXElement {
   return (
-    <div class="flex min-w-full flex-col rounded-lg border-b-secondary border-b-2 bg-base-300 px-5 py-3 text-base-content transition-all hover:bg-base-300 ">
+    <div class="flex min-w-full flex-col rounded-lg border-b-2 border-b-secondary bg-base-300 px-5 py-3 text-base-content transition-all hover:bg-base-300 ">
       <div class="flex flex-row">
         <div class="pb-2 text-xs text-gray-500">{comment.created_at}</div>
       </div>
@@ -23,10 +27,27 @@ export function Comment({ comment }: { comment: PublicComment }): JSXElement {
           {/* Placeholder icon, tbd */}
           <EngagementIcon />
         </div>
-        <div class="btn self-end">
-          <ReplyIcon />
-        </div>
+        <section>
+          <ul class="timeline timeline-vertical">
+            <li>
+              <div class="timeline-start">{comment.created_at}</div>
+              <div class="divider timeline-middle">:</div>
+              <div class="timeline-end timeline-box">{comment.content}</div>
+              <hr />
+            </li>
+            <li>
+              <div class="timeline-end">{comment.created_at}</div>
+              <div class="timeline-middle">:</div>
+              <div class="timeline-start timeline-box">{comment.content}</div>
+              <hr />
+            </li>
+          </ul>
+        </section>
       </div>
+      <NewCommentInputArea
+        parentCommentId={comment.parent_comment_id}
+        parentPostId={comment.parent_post_id}
+      />
     </div>
   );
 }

client-solid/src/Components/CommentSection.tsx

@@ -10,9 +10,7 @@ import { Comment } from "./Comment";
  * @returns {JSXElement} A JSXElement that contains a collection of comments.
  */
 export function CommentSection({ postId }: { postId: string }): JSXElement {
-  const [comments] = createResource(postId, () =>
-    getComments(postId, 10, 0)
-  );
+  const [comments] = createResource(postId, () => getComments(postId, 10, 0));
 
   return (
     <For each={comments()!}>{(comment) => <Comment comment={comment} />}</For>

client-solid/src/Components/NewComment.tsx

@@ -4,6 +4,11 @@ import { JSXElement, Show, createSignal, useContext } from "solid-js";
 import { LoginContext } from "../Context/GlobalState";
 import { NewComment, createComment } from "../Util/api";
 
+interface NewCommentInputAreaProps {
+  parentPostId: number;
+  parentCommentId: number | null;
+}
+
 /** NewCommentInputArea is a component that allows users to submit a comment on a **post or comment**.
  * @param {Object} props The properties for the NewCommentInputArea component.
  * @param {number} props.parentPostId The id of the post that the comment is a reply to.
@@ -11,9 +16,8 @@ import { NewComment, createComment } from "../Util/api";
  */
 export function NewCommentInputArea({
   parentPostId,
-}: {
-  parentPostId: number;
-}): JSXElement {
+  parentCommentId,
+}: NewCommentInputAreaProps): JSXElement {
   const [content, setContent] = createSignal("");
   const [waiting, setWaiting] = createSignal(false);
 
@@ -29,6 +33,7 @@ export function NewCommentInputArea({
       content: content(),
       user_token: login_ctx.token(),
       parent_post_id: parentPostId,
+      parent_comment_id: parentCommentId,
     } as NewComment);
 
     if (response) {

client-solid/src/Components/SinglePost.tsx

@@ -1,11 +1,18 @@
 import { useParams } from "@solidjs/router";
-import { JSXElement, Show, Suspense, createResource, useContext } from "solid-js";
+import {
+  JSXElement,
+  Show,
+  Suspense,
+  createResource,
+  useContext,
+} from "solid-js";
+
 import { LoginContext } from "../Context/GlobalState";
 import { loadSpinner } from "../Util/Icons";
 import { getPost } from "../Util/api";
 import { CommentSection } from "./CommentSection";
-import { PostSegment } from "./Posts";
 import { NewCommentInputArea } from "./NewComment";
+import { PostSegment } from "./Posts";
 
 export function SinglePost(): JSXElement {
   const params = useParams();
@@ -17,7 +24,7 @@ export function SinglePost(): JSXElement {
       <Show when={post()}>
         <PostSegment post={post()!} />
         <Show when={login_ctx.loggedIn()}>
-          <NewCommentInputArea parentPostId={parseInt(params.postid)}/>
+          <NewCommentInputArea parentPostId={parseInt(params.postid)} />
         </Show>
         <CommentSection postId={params.postid} />
       </Show>

client-solid/src/Containers/PageContainer.tsx

@@ -3,8 +3,6 @@ import { JSXElement } from "solid-js";
 // MainContainer is the main container for the page.
 export function PageContainer(props: { children: JSXElement }): JSXElement {
   return (
-    <div class="flex min-h-screen flex-col items-center">
-      {props.children}
-    </div>
+    <div class="flex min-h-screen flex-col items-center">{props.children}</div>
   );
 }

client-solid/src/Util/api.ts

@@ -20,6 +20,7 @@ export interface NewComment {
   content: string;
   user_token: string;
   parent_post_id: number;
+  parent_comment_id?: number;
 }
 
 export interface Comment extends NewComment {