Skip to content

Commit

Permalink
Digg 439 Refactoring, creating new entrystore service class, adding d…
Browse files Browse the repository at this point in the history
…ataservice page
  • Loading branch information
Kopin1 authored and MikaMunterud committed Dec 13, 2024
1 parent 8364a37 commit 423bcef
Show file tree
Hide file tree
Showing 54 changed files with 4,891 additions and 5,131 deletions.
14 changes: 14 additions & 0 deletions components/badge/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { FC } from "react";

interface BadgeProps {
text: string;
className?: string;
}

export const Badge: FC<BadgeProps> = ({ text, className }) => {
return (
<span className={`bg-green-200 px-sm py-xs text-sm uppercase ${className}`}>
{text}
</span>
);
};
10 changes: 4 additions & 6 deletions components/file-format-badge/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React, { FC } from "react";
import { FC } from "react";

import { Badge } from "@/components/badge";

interface FileFormatBadgeProps {
badgeName: string;
Expand Down Expand Up @@ -139,9 +141,5 @@ export const FileFormatBadge: FC<FileFormatBadgeProps> = ({ badgeName }) => {
break;
}

return (
<span className={`bg-pink-200 px-sm py-xs text-sm uppercase ${className}`}>
{text}
</span>
);
return <Badge text={text} className={className} />;
};
46 changes: 34 additions & 12 deletions features/entryscape/dataset-page/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
115 changes: 115 additions & 0 deletions features/entryscape/dataset-series-page/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
import { Entry } from "@entryscape/entrystore-js";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
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 { 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,
SearchContextData,
} from "@/providers/search-provider";
import { SettingsContext } from "@/providers/settings-provider";
import { linkBase } from "@/utilities";

const SearchTrigger: FC<{ search: SearchContextData; entry: Entry }> = ({
search,
entry,
}) => {
useEffect(() => {
if (!search) return;

// Perform initial search
search
.set({
page: 0,
query: "",
fetchFacets: true,
})
.then(() => search.doSearch(false, false, false, false));
}, [entry]);

return null;
};

export const DatasetSeriesPage: FC = () => {
const { pathname } = useRouter() || {};
const { env, setBreadcrumb } = useContext(SettingsContext);
const entry = useContext(EntrystoreContext);
const { t, lang } = useTranslation();
const router = useRouter();

useEffect(() => {
setBreadcrumb?.({
name: entry.title,
crumbs: [
{ name: "start", link: { ...linkBase, link: "/" } },
{
name: t("routes|datasets$title"),
link: { ...linkBase, link: `/${t("routes|datasets$path")}?q=&f=` },
},
],
});
}, [pathname, entry]);

const searchProviderSettings = useMemo(
() => createSearchProviderSettings(env, lang),
[env, lang],
);

return (
<div>
<div className="py-lg">
<Container className="space-y-lg">
<Badge text={t("pages|dataset-series$data-serie")} />
<Heading level={1} size="lg" className="mb-none">
{entry.title}
</Heading>
<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>

<SearchProvider
router={router}
{...searchProviderSettings["datasets-series"]}
entry={entry.entry}
>
<SearchContext.Consumer>
{(search) => (
<div className="mt-xl bg-white py-xl">
<SearchTrigger search={search} entry={entry.entry} />
<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>
);
};
9 changes: 3 additions & 6 deletions features/entryscape/organisation-page/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,9 @@ import { CustomLink } from "@/components/custom-link";
import { Container } from "@/components/layout/container";
// import { Modal } from "@/components/modal";
import { Heading } from "@/components/typography/heading";
import {
DatasetInfo,
EntrystoreContext,
TermInfo,
} from "@/providers/entrystore-provider";
import { EntrystoreContext } from "@/providers/entrystore-provider";
import { SettingsContext } from "@/providers/settings-provider";
import { DataInfo, TermInfo } from "@/types/organisation";
import { linkBase } from "@/utilities";

export const OrganisationPage: FC = () => {
Expand Down Expand Up @@ -124,7 +121,7 @@ export const OrganisationPage: FC = () => {
/>
<div className="grid grid-cols-2 gap-x-sm gap-y-xl">
{entry.organisationData?.datasets.dataInfo.map(
(data: DatasetInfo, idx: number) => (
(data: DataInfo, idx: number) => (
<div
key={idx}
className="flex flex-col items-center gap-sm"
Expand Down
Loading

0 comments on commit 423bcef

Please sign in to comment.