feat(LatestPapers.tsx): add LatestPapers component to display the lat…

…est papers fetched from a RSS feed

The LatestPapers component is added to the Frontpage feature. It imports the necessary dependencies and uses the useFetchPublications hook to fetch the latest papers from a specified RSS feed URL. The component then matches the fetch state and renders different components based on the state. If the fetch state is loading, a Loader component is rendered. If there is an error, the error message is rendered. If there is data available, the LatestPapersView component is rendered with the fetched data. Otherwise, a placeholder message is rendered. This component allows the frontpage to display the latest papers in a dynamic and responsive manner.

apps/dicty-frontpage/src/features/Frontpage/LatestPapers.tsx

@@ -0,0 +1,25 @@
+import { match } from "ts-pattern"
+import { useFetchPublications } from "../../common/hooks/useFetchPublications"
+import { LatestPapersView } from "./LatestPapersView"
+import { Loader } from "../../common/components/Loader"
+
+const RSS_URL =
+  "https://pubmed.ncbi.nlm.nih.gov/rss/search/1xSjLNP-2lGAmjK0hZKzE4pxRxyAAh7BAEFNc5kyVReacTxspv/?limit=15&utm_campaign=pubmed-2&fc=20231211102630"
+
+const LatestPapers = () => {
+  const fetchState = useFetchPublications(RSS_URL)
+
+  return match(fetchState)
+    .with({ loading: true }, () => <Loader />)
+    .when(
+      ({ error }) => error.length > 0,
+      ({ error }) => <>{error}</>,
+    )
+    .when(
+      ({ data }) => data.length > 0,
+      ({ data }) => <LatestPapersView data={data} />,
+    )
+    .otherwise(() => <> This message should not appear. </>)
+}
+
+export { LatestPapers }