DIGG-439: Updating dataset series page to include search provider

components/typography/body-variant/index.tsx

@@ -1,6 +1,6 @@
 import { cx, cva, VariantProps } from "class-variance-authority";
 import Link from "next/link";
-import React, { FC, PropsWithChildren } from "react";
+import { ElementType, FC, PropsWithChildren } from "react";
 
 import QuoteIcon from "@/assets/icons/quote.svg";
 import { isExternalLink } from "@/utilities";
@@ -61,7 +61,7 @@ const BodyVariant: FC<PropsWithChildren<BodyProps>> = ({
     );
   }
 
-  const CustomTag = variant as keyof React.JSX.IntrinsicElements;
+  const CustomTag = variant as ElementType;
 
   return (
     <CustomTag className={cx(bodyVariants({ variant }), className)}>

components/typography/heading/index.tsx

@@ -1,5 +1,5 @@
 import { cx, cva, VariantProps } from "class-variance-authority";
-import React, { FC, HTMLAttributes, PropsWithChildren } from "react";
+import { ElementType, FC, HTMLAttributes, PropsWithChildren } from "react";
 
 const headingVariants = cva(["text-wrap"], {
   variants: {
@@ -23,7 +23,7 @@ type HeadingProps = VariantProps<typeof headingVariants> & {
 export const Heading: FC<
   PropsWithChildren<HeadingProps & HTMLAttributes<HTMLElement>>
 > = ({ size, level, className, children }) => {
-  const CustomTag = `h${level}` as keyof React.JSX.IntrinsicElements;
+  const CustomTag = `h${level}` as ElementType;
   return (
     <CustomTag className={cx(headingVariants({ size }), className)}>
       {children}

features/entryscape/dataset-page/index.tsx

@@ -83,18 +83,40 @@ export const DatasetPage: FC = () => {
           {/* Left column */}
           <div className="mb-lg flex w-full max-w-md flex-col gap-lg lg:mb-xl">
             {/* Publisher */}
-            {entry.organisationLink ? (
-              <Link
-                className="text-lg text-green-600 hover:!no-underline"
-                href={entry.organisationLink}
-              >
-                {entry.publisher}
-              </Link>
-            ) : (
-              entry.publisher && (
-                <Preamble className="mb-lg">{entry.publisher}</Preamble>
-              )
-            )}
+            <div className="mb-md flex flex-col gap-md">
+              {entry.organisationLink ? (
+                <Link
+                  className="text-lg font-normal text-green-600 hover:!no-underline"
+                  href={entry.organisationLink}
+                >
+                  {entry.publisher}
+                </Link>
+              ) : (
+                entry.publisher && <Preamble>{entry.publisher}</Preamble>
+              )}
+
+              {/* Related dataset series */}
+              {entry.relatedDatasetSeries &&
+                entry.relatedDatasetSeries.length > 0 && (
+                  <div className="inline-flex flex-wrap items-center gap-sm text-sm">
+                    <span className="text-textSecondary">
+                      {t("pages|datasetpage$related_dataset_series")}
+                    </span>
+                    {entry.relatedDatasetSeries.map((ds, idx) => (
+                      <span key={idx} className="inline-flex items-center">
+                        <Link
+                          href={ds.url}
+                          className="text-sm text-green-600 hover:no-underline"
+                        >
+                          {ds.title}
+                        </Link>
+                        {idx < (entry.relatedDatasetSeries?.length ?? 0) - 1 &&
+                          ", "}
+                      </span>
+                    ))}
+                  </div>
+                )}
+            </div>
 
             {/* Indicators */}
             <div

features/entryscape/dataset-series-page/index.tsx

@@ -1,19 +1,23 @@
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import { FC, useContext, useEffect } from "react";
+import { FC, useContext, useEffect, useMemo } from "react";
 
+import { Badge } from "@/components/badge";
 import { Container } from "@/components/layout/container";
 import { Heading } from "@/components/typography/heading";
-import { SearchHit } from "@/features/search/search-hit";
+import { createSearchProviderSettings } from "@/features/search/search-page/search-page-entryscape/search-page-provider-settings";
+import { SearchResults } from "@/features/search/search-results";
 import { EntrystoreContext } from "@/providers/entrystore-provider";
+import SearchProvider, { SearchContext } from "@/providers/search-provider";
 import { SettingsContext } from "@/providers/settings-provider";
 import { linkBase } from "@/utilities";
 
 export const DatasetSeriesPage: FC = () => {
   const { pathname } = useRouter() || {};
-  const { setBreadcrumb } = useContext(SettingsContext);
+  const { env, setBreadcrumb } = useContext(SettingsContext);
   const entry = useContext(EntrystoreContext);
-  const { t } = useTranslation();
+  const { t, lang } = useTranslation();
+  const router = useRouter();
 
   useEffect(() => {
     setBreadcrumb?.({
@@ -28,33 +32,74 @@ export const DatasetSeriesPage: FC = () => {
     });
   }, [pathname, entry]);
 
+  useEffect(() => {
+    // Check if there are no query parameters or if they're empty
+    if (!router.query.q && !router.query.f) {
+      // Update URL with default query parameters
+      router.replace(
+        {
+          pathname: router.pathname,
+          query: { ...router.query, q: "", f: "" },
+        },
+        undefined,
+        { shallow: true },
+      );
+    }
+  }, [router.isReady]);
+
+  const searchProviderSettings = useMemo(
+    () => createSearchProviderSettings(env, lang),
+    [env, lang],
+  );
+
   return (
     <div>
       <div className="py-lg">
-        <Container>
+        <Container className="space-y-lg">
+          <Badge text={t("pages|dataset-series$data-serie")} />
           <Heading level={1} size="lg" className="mb-none">
             {entry.title}
           </Heading>
-          {entry.description && (
-            <div className="my-md text-md text-textSecondary">
-              {entry.description}
-            </div>
-          )}
-          {entry.publisher && (
-            <div className="text-md font-strong">{entry.publisher}</div>
-          )}
+          <div className="space-y-md">
+            {entry.description && (
+              <div className="my-md text-md text-textSecondary">
+                {entry.description}
+              </div>
+            )}
+            {entry.publisher && (
+              <div className="text-sm font-strong">{entry.publisher}</div>
+            )}
+          </div>
         </Container>
       </div>
 
-      <div className="mt-lg bg-white py-lg">
-        <Container>
-          <ul className="search-result-list space-y-xl">
-            {entry.datasetsInSeries?.map((dataset) => (
-              <SearchHit key={dataset.url} hit={dataset} isCompact={true} />
-            ))}
-          </ul>
-        </Container>
-      </div>
+      <SearchProvider
+        router={router}
+        {...searchProviderSettings["datasets-series"]}
+        entry={entry.entry}
+      >
+        <SearchContext.Consumer>
+          {(search) => (
+            <div className="mt-xl bg-white py-xl">
+              <Container>
+                <div
+                  className={
+                    search.result.hits && search.result.hits.length === 0
+                      ? "min-h-[800px]"
+                      : " "
+                  }
+                >
+                  <SearchResults
+                    showSorting={false}
+                    search={search}
+                    searchMode={"datasets-series"}
+                  />
+                </div>
+              </Container>
+            </div>
+          )}
+        </SearchContext.Consumer>
+      </SearchProvider>
     </div>
   );
 };