Initial comment draft with working server communication

This commit is contained in:
Imbus 2024-03-06 08:10:42 +01:00
parent 3a389d854b
commit a5dadfc1d1
4 changed files with 27 additions and 53 deletions

View file

@ -1,47 +1,19 @@
import { useNavigate } from "@solidjs/router";
import { For, JSXElement, Show, createSignal } from "solid-js";
import { CheckMark, loadSpinner } from "../Util/Icons";
import { PublicComment, getComments } from "../Util/api";
//exported into primary as a Route
export function Comment({ postId }: { postId: string }): JSXElement {
const [comments, setComments] = createSignal([] as PublicComment[]);
const [loading, setLoading] = createSignal(true);
getComments(postId, 10, 0).then((comment) => {
setComments(comment);
setLoading(false);
});
import { JSXElement, } from "solid-js";
import { PublicComment } from "../Util/api";
/**
* Comment is a component that displays a single comment.
* @param {Object} props The properties for the Comment component.
* @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 {
return (
<Show when={!loading()} fallback={loadSpinner()}>
<For each={comments()}>
{(comment): JSXElement => <CommentSegment comment={comment} />}
</For>
</Show>
);
}
export function CommentSegment(props: { comment: PublicComment }): JSXElement {
const nav = useNavigate();
return (
<div class="card compact w-full flex-grow border-b-2 border-b-base-300 bg-base-200 text-base-content transition-all hover:bg-base-300">
<div class="card-body">
<p class="break-words text-base-content md:px-6 md:pt-2">
{props.comment?.content}
</p>
<div class="card-actions justify-end">
<button
onClick={(): void =>
nav("/comments?post_id" + props.comment?.parent_comment_id)
}
class="btn btn-xs"
>
<CheckMark />
</button>
</div>
<div class="flex flex-col space-y-2">
<div class="flex flex-row space-x-2">
<div class="text-xs text-gray-500">{comment.created_at}</div>
</div>
<div class="text-sm">{comment.content}</div>
</div>
);
}

View file

@ -1,18 +1,20 @@
import {
For,
JSXElement,
createResource,
} from "solid-js";
import { For, JSXElement, createResource } from "solid-js";
import { getComments } from "../Util/api";
import { CommentSegment } from "./Comment";
import { Comment } from "./Comment";
/**
* CommentSection is a component that displays a collection of comments.
* @param {Object} props The properties for the CommentSection component.
* @param {string} props.postId The id of the post that the comments are a reply to.
* @returns {JSXElement} A JSXElement that contains a collection of comments.
*/
export function CommentSection({ postId }: { postId: string }): JSXElement {
const [comments] = createResource(postId, () => getComments(postId, 0, 10));
const [comments] = createResource(postId, () =>
getComments(postId, 10, 0)
);
return (
<For each={comments()!}>
{(comment) => <CommentSegment comment={comment} />}
</For>
<For each={comments()!}>{(comment) => <Comment comment={comment} />}</For>
);
}

View file

@ -35,7 +35,7 @@ export function NewCommentInputArea({
response.then(() => {
setWaiting(false);
setContent("");
nav("/");
nav("/post/" + parentPostId);
});
}
};

View file

@ -16,7 +16,7 @@ export function SinglePost(): JSXElement {
<Show when={post()}>
<PostSegment post={post()!} />
<NewCommentInputArea parentPostId={parseInt(params.postid)}/>
<CommentSection postId={params.post_id} />
<CommentSection postId={params.postid} />
</Show>
</Suspense>
);