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