"use client";
import { Fragment, useState, useCallback } from "react";
import { Loader2 } from "lucide-react";
import { api } from "@/lib/trpc/client";
import { ArticleList, transformPostsToArticleList } from "@/features/posts/_lib/transformers";
import { PostOrderEnum } from "@/config/enums";
import DynamicArticle from "@/components/shared/articles/dynamic-article";
export default function EmneList({ slug }: { slug: string }) {
const [limit, setLimit] = useState(8);
const { data: items = [], isFetching } = api.posts.list.useQuery(
{
with: ["project", "tags", "review", "primaryTag", "author", "vision"],
tagSlug: slug,
limit,
orderBy: PostOrderEnum.PUBLISHED_AT
},
{
select: transformPostsToArticleList,
placeholderData: (data) => data
}
);
const { data: total = 0 } = api.posts.count.useQuery({
tagSlug: slug
});
const hasMore = items.length < total;
const onLoadMoreClick = useCallback(() => {
setLimit((prev) => prev + 8);
}, []);
const viewList = (data: ArticleList) => {
return data.map((item: ArticleList[number], index: number) => {
const isLastInRowSm = (index + 1) % 2 === 0;
const isLastInRowLg = (index + 1) % 4 === 0;
const isLastItem = index === data.length - 1;
return (
{(index + 1) % 4 === 0 && index < data.length - 1 && (
)}
);
});
};
if (!items.length) {
return (
);
}
return (
{hasMore && (
)}
);
}