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

Refactor of comments and posts

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

18
client-solid/src/Components/PostSegment.tsx
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 { Post } from "../Util/api";
import CommentsButton from "./Buttons/CommentsButton"; import CommentsButton from "./Buttons/CommentsButton";
@ -8,9 +8,9 @@ import ReportButton from "./Buttons/Report";
import ToPostButton from "./Buttons/ToPost"; import ToPostButton from "./Buttons/ToPost";
export function PostSegment(props: { post: Post }): JSXElement { export function PostSegment(props: { post: Post }): JSXElement {
const { post } = props; // Destructuring the post object from props const [local] = splitProps(props, ["post"]);
const dateOfCreation = new Date(post.createdAt).toDateString(); const dateOfCreation = new Date(local.post.createdAt).toDateString();
const isEdited = !(post.createdAt == post.updatedAt); const isEdited = !(local.post.createdAt == local.post.updatedAt);
return ( 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"> <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 /> <ReportButton />
</li> </li>
<li> <li>
<RemovePostButton postId={post.id} /> <RemovePostButton postId={local.post.id} />
</li> </li>
</ul> </ul>
</details> </details>
@ -32,13 +32,13 @@ export function PostSegment(props: { post: Post }): JSXElement {
<Show when={isEdited}> <Show when={isEdited}>
<p>This post has been edited</p> <p>This post has been edited</p>
</Show> </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="card-actions justify-between">
<div class="flex"> <div class="flex">
<EngagementButton postId={post.id} /> <EngagementButton postId={local.post.id} />
<CommentsButton postId={post.id} /> <CommentsButton postId={local.post.id} />
</div> </div>
<ToPostButton post={post} /> <ToPostButton post={local.post} />
</div> </div>
</div> </div>
</div> </div>