FrostByte/client-solid/src/Posts.tsx

44 lines
1.2 KiB
TypeScript
Raw Normal View History

2023-10-21 08:51:33 +02:00
import { createSignal } from "solid-js";
import { getPosts } from "./api";
import { Post } from "./api";
2023-10-27 16:04:58 +02:00
import { useNavigate } from "@solidjs/router";
2023-10-21 08:51:33 +02:00
export function Posts() {
const [posts, setPosts] = createSignal([] as Post[]);
const [loading, setLoading] = createSignal(true);
getPosts().then((posts) => {
setPosts(posts as any);
setLoading(false);
});
return (
<div class="flex flex-col space-y-2 w-full md:w-96">
{loading() ? (
<span class="loading loading-spinner loading-lg self-center"></span>
) : (
<></>
)}
{posts().map((post) => {
if (post.content == "") return; // Filtering out empty posts, remove this later
return <PostSegment post={post}></PostSegment>;
})}
</div>
);
}
// This is the card container for a post
2023-10-27 16:04:58 +02:00
export function PostSegment({ post }: { post: Post }) {
const nav = useNavigate();
2023-10-21 08:51:33 +02:00
return (
2023-10-27 16:04:58 +02:00
<div
onClick={() => nav("/post/" + post?.id)}
class="card bg-base-200 shadow-lg compact text-base-content w-full"
>
2023-10-21 08:51:33 +02:00
<div class="card-body">
2023-10-27 16:04:58 +02:00
<p class="text-base-content break-words">{post?.content}</p>
2023-10-21 08:51:33 +02:00
</div>
</div>
);
}