first commit

resources/client/titles/pages/title-page/sections/title-news/title-news.tsx

@@ -0,0 +1,30 @@
+import {useTitleNews} from '@app/titles/pages/title-page/sections/title-news/use-title-news';
+import React from 'react';
+import {NewsArticleGridItem} from '@app/news/news-article-grid-item';
+import {SiteSectionHeading} from '@app/titles/site-section-heading';
+import {Trans} from '@common/i18n/trans';
+import {Title} from '@app/titles/models/title';
+
+interface Props {
+  title: Title;
+}
+export function TitleNews({title}: Props) {
+  const {data, isLoading} = useTitleNews(title.id);
+
+  if (!isLoading && !data?.news_articles.length) {
+    return null;
+  }
+
+  return (
+    <section className="mt-48">
+      <SiteSectionHeading>
+        <Trans message="Related news" />
+      </SiteSectionHeading>
+      <div className="grid grid-cols-2 gap-24">
+        {data?.news_articles.map(article => (
+          <NewsArticleGridItem key={article.id} article={article} />
+        ))}
+      </div>
+    </section>
+  );
+}

resources/client/titles/pages/title-page/sections/title-news/use-title-news.ts

@@ -0,0 +1,20 @@
+import {useQuery} from '@tanstack/react-query';
+import {apiClient} from '@common/http/query-client';
+import {NewsArticle} from '@app/titles/models/news-article';
+
+interface Response {
+  news_articles: NewsArticle[];
+}
+
+export function useTitleNews(titleId: number | string) {
+  return useQuery({
+    queryKey: ['titles', `${titleId}`, 'news'],
+    queryFn: () => fetchNews(titleId),
+  });
+}
+
+function fetchNews(titleId: number | string) {
+  return apiClient
+    .get<Response>(`titles/${titleId}/news`)
+    .then(response => response.data);
+}