Refactor of comments and posts

This commit is contained in:
Hollgy 2024-03-24 21:40:57 +01:00
parent 2fe0090422
commit 6be8925970
2 changed files with 13 additions and 15 deletions

View file

@ -2,16 +2,14 @@ import { JSXElement, splitProps } from "solid-js";
import { PublicComment } from "../Util/api";
interface CommentProps {
comment: PublicComment;
}
export function Comment(props: CommentProps): JSXElement {
export function Comment(props: { comment: PublicComment }): JSXElement {
const [local] = splitProps(props, ["comment"]);
const dateOfCreation = new Date(local.comment.created_at).toDateString();
return (
<>
<div class="py-5">
<time class="text-xs opacity-50">{local.comment.created_at}</time>
<time class="text-xs opacity-50">{dateOfCreation}</time>
</div>
<div class="">{local.comment.content}</div>
<div class="divider" />

View file

@ -1,4 +1,4 @@
import { JSXElement, Show } from "solid-js";
import { JSXElement, Show, splitProps } from "solid-js";
import { Post } from "../Util/api";
import CommentsButton from "./Buttons/CommentsButton";
@ -8,9 +8,9 @@ import ReportButton from "./Buttons/Report";
import ToPostButton from "./Buttons/ToPost";
export function PostSegment(props: { post: Post }): JSXElement {
const { post } = props; // Destructuring the post object from props
const dateOfCreation = new Date(post.createdAt).toDateString();
const isEdited = !(post.createdAt == post.updatedAt);
const [local] = splitProps(props, ["post"]);
const dateOfCreation = new Date(local.post.createdAt).toDateString();
const isEdited = !(local.post.createdAt == local.post.updatedAt);
return (
<div class="card compact w-full flex-grow border-b-2 border-b-primary bg-base-200 text-base-content transition-all hover:bg-base-300">
@ -24,7 +24,7 @@ export function PostSegment(props: { post: Post }): JSXElement {
<ReportButton />
</li>
<li>
<RemovePostButton postId={post.id} />
<RemovePostButton postId={local.post.id} />
</li>
</ul>
</details>
@ -32,13 +32,13 @@ export function PostSegment(props: { post: Post }): JSXElement {
<Show when={isEdited}>
<p>This post has been edited</p>
</Show>
<p class="my-1 text-base">{post.content}</p>
<p class="my-1 text-base">{local.post.content}</p>
<div class="card-actions justify-between">
<div class="flex">
<EngagementButton postId={post.id} />
<CommentsButton postId={post.id} />
<EngagementButton postId={local.post.id} />
<CommentsButton postId={local.post.id} />
</div>
<ToPostButton post={post} />
<ToPostButton post={local.post} />
</div>
</div>
</div>