import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import { getQueryClient } from "@repo/core-trpc";
import { blogContainer } from "../../di/container";
import { BLOG_SYMBOLS } from "../../di/symbols";
import type { IGetArticlesController } from "../../interface-adapters/controllers/get-articles.controller";
import { ArticleList as ArticleListClient } from "./article-list.client";

export async function ArticleList() {
  const controller = blogContainer.get<IGetArticlesController>(
    BLOG_SYMBOLS.IGetArticlesController,
  );
  const articles = await controller({ status: "published", limit: 20 });
  const queryClient = getQueryClient();
  queryClient.setQueryData(
    ["blog", "listArticles", { input: { status: "published", limit: 20 } }],
    articles,
  );

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <ArticleListClient />
    </HydrationBoundary>
  );
}