75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import { useContext, useEffect, useState } from "react";
|
|
import { AppSettingsProviderContext } from "@renderer/context";
|
|
import { PostCard, LoaderSpin } from "@renderer/components";
|
|
import { toast, Button } from "@renderer/components//ui";
|
|
import { t } from "i18next";
|
|
|
|
export const Posts = () => {
|
|
const { webApi } = useContext(AppSettingsProviderContext);
|
|
const [loading, setLoading] = useState<boolean>(true);
|
|
const [posts, setPosts] = useState<PostType[]>([]);
|
|
const [nextPage, setNextPage] = useState(1);
|
|
|
|
const handleDelete = (id: string) => {
|
|
webApi
|
|
.deletePost(id)
|
|
.then(() => {
|
|
toast.success(t("removeSharingSuccessfully"));
|
|
setPosts(posts.filter((post) => post.id !== id));
|
|
})
|
|
.catch((error) => {
|
|
toast.error(t("removeSharingFailed"), { description: error.message });
|
|
});
|
|
};
|
|
|
|
const fetchPosts = async (page: number = nextPage) => {
|
|
if (!page) return;
|
|
|
|
webApi
|
|
.posts({
|
|
page,
|
|
items: 10,
|
|
})
|
|
.then((res) => {
|
|
setPosts([...posts, ...res.posts]);
|
|
setNextPage(res.next);
|
|
})
|
|
.catch((err) => {
|
|
toast.error(err.message);
|
|
})
|
|
.finally(() => {
|
|
setLoading(false);
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchPosts();
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return <LoaderSpin />;
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-screen-sm mx-auto">
|
|
{posts.length === 0 && (
|
|
<div className="text-center text-gray-500">{t("noOneSharedYet")}</div>
|
|
)}
|
|
|
|
<div className="space-y-4">
|
|
{posts.map((post) => (
|
|
<PostCard key={post.id} post={post} handleDelete={handleDelete} />
|
|
))}
|
|
</div>
|
|
|
|
{nextPage && (
|
|
<div className="py-4 flex justify-center">
|
|
<Button variant="link" onClick={() => fetchPosts(nextPage)}>
|
|
{t("loadMore")}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|