Imbus/FrostByte
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added props && Interfaces for parentCommentId, Boilerplate idea for comment separation

Browse source
This commit is contained in:
Hollgy 2024-03-11 22:07:39 +01:00
parent 3a42624042
commit 3174f99a51
2 changed files with 35 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
client-solid/src/Components/Comment.tsx
View file

@ -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>
);
}

11
client-solid/src/Components/NewComment.tsx
View file

@ -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) {