Commit d1547bbd authored by Stefan Probst's avatar Stefan Probst
Browse files

fix: use persistent id for item details

parent b6a84b5d
......@@ -26,8 +26,11 @@ export default function ItemCard({ item }: { item: Item }): JSX.Element {
className="flex-shrink-0"
height="2.5em"
/>
<Link href={{ pathname: `/${item.category}/${item.id}` }} passHref>
<a className="hover:text-primary-800 transition-colors duration-150">
<Link
href={{ pathname: `/${item.category}/${item.persistentId}` }}
passHref
>
<a className="transition-colors duration-150 hover:text-primary-800">
<span>{item.label}</span>
</a>
</Link>
......@@ -36,7 +39,10 @@ export default function ItemCard({ item }: { item: Item }): JSX.Element {
<div className="text-sm leading-7 text-gray-600">
<Plaintext text={item.description} maxLength={MAX_DESCRIPTION_LENGTH} />
</div>
<Link href={{ pathname: `/${item.category}/${item.id}` }} passHref>
<Link
href={{ pathname: `/${item.category}/${item.persistentId}` }}
passHref
>
<Anchor className="self-end text-sm">Read more</Anchor>
</Link>
</VStack>
......
......@@ -41,14 +41,14 @@ export default function RelatedItems({
return (
<VStack as="section" className="space-y-4">
<HStack className="space-x-2 items-baseline">
<HStack className="items-baseline space-x-2">
<SectionTitle>Related</SectionTitle>
<span className="text-xl text-gray-500">({relatedItems.length})</span>
</HStack>
<ul className="grid grid-cols-2 border-t border-b border-gray-200">
{relatedItems.slice(0, cursor).map((item) => {
return (
<li key={item.id} className="border-t border-gray-200 -mt-px">
<li key={item.id} className="-mt-px border-t border-gray-200">
<RelatedItem item={item} />
</li>
)
......@@ -73,7 +73,7 @@ export default function RelatedItems({
}
function RelatedItem({ item }: { item: RelatedItem }): JSX.Element {
const pathname = `/${item.category}/${item.id}`
const pathname = `/${item.category}/${item.persistentId}`
return (
<VStack as="article" className="px-4 py-5 space-y-4">
<h3 className="flex items-center space-x-4 text-lg font-medium leading-5">
......
......@@ -23,7 +23,7 @@ export async function getServerSideProps(
if (id === undefined) return { notFound: true }
try {
const dataset = await getDataset({ id })
const dataset = await getDataset({ id }, {})
return { props: { dataset } }
} catch {
/** context.res.statusCode = 404 */
......
......@@ -25,7 +25,7 @@ export async function getServerSideProps(
if (id === undefined) return { notFound: true }
try {
const publication = await getPublication({ id })
const publication = await getPublication({ id }, {})
return { props: { publication } }
} catch {
/** context.res.statusCode = 404 */
......
......@@ -23,7 +23,7 @@ export async function getServerSideProps(
if (id === undefined) return { notFound: true }
try {
const tool = await getTool({ id })
const tool = await getTool({ id }, {})
return { props: { tool } }
} catch {
/** context.res.statusCode = 404 */
......
......@@ -25,7 +25,7 @@ export async function getServerSideProps(
if (id === undefined) return { notFound: true }
try {
const trainingMaterial = await getTrainingMaterial({ id })
const trainingMaterial = await getTrainingMaterial({ id }, {})
return { props: { trainingMaterial } }
} catch {
/** context.res.statusCode = 404 */
......
......@@ -23,7 +23,7 @@ export async function getServerSideProps(
if (id === undefined) return { notFound: true }
try {
const workflow = await getWorkflow({ workflowId: id })
const workflow = await getWorkflow({ workflowId: id }, {})
return { props: { workflow } }
} catch {
/** context.res.statusCode = 404 */
......
......@@ -68,9 +68,9 @@ function Hero() {
quality={100}
// applies to the <img>, not the <div> container, so we still need
// to add position: relative to content that should be layered above
className="-z-10 object-cover"
className="object-cover -z-10"
/>
<div className="mx-auto max-w-screen-md xl:max-w-screen-lg mt-24 space-y-6 p-6 relative text-sm">
<div className="relative max-w-screen-md p-6 mx-auto mt-24 space-y-6 text-sm xl:max-w-screen-lg">
<Title>{meta.title}</Title>
<Mdx>
<Content />
......@@ -81,7 +81,7 @@ function Hero() {
<SubmitButton className="h-12" />
</ItemSearchForm>
</div>
<PeopleImage className="mx-auto max-w-screen-xl -mt-12 mb-6" />
<PeopleImage className="max-w-screen-xl mx-auto mb-6 -mt-12" />
</FullWidth>
)
}
......@@ -172,7 +172,7 @@ function LastAdded({ items }: { items?: Items }) {
<VStack as="ul" className="divide-y divide-gray-200">
{items.slice(0, MAX_LAST_ADDED_ITEMS).map((item) => {
return (
<li key={item.id}>
<li key={item.persistentId}>
<ItemCard item={item} />
</li>
)
......@@ -227,7 +227,7 @@ function SubSection({
}: PropsWithChildren<{ title: string; href: LinkProps['href'] }>) {
return (
<Fragment>
<HStack className="justify-between items-baseline border-b border-gray-200 py-4">
<HStack className="items-baseline justify-between py-4 border-b border-gray-200">
<SubSectionTitle>{title}</SubSectionTitle>
<Link href={href} passHref>
<Anchor>See all</Anchor>
......
......@@ -35,7 +35,6 @@ type ItemCategory = Exclude<ItemCategoryWithStep, 'step'>
type ItemProperties = Exclude<Item['properties'], undefined>
type ItemProperty = ItemProperties[number]
type ItemContributors = Exclude<Item['contributors'], undefined>
type ItemContributor = ItemContributors[number]
type RelatedItems = Exclude<Item['relatedItems'], undefined>
/**
......@@ -353,26 +352,28 @@ function ItemPropertiesList({
<SubSectionTitle as="h2">Details</SubSectionTitle>
<VStack as="dl" className="space-y-2 text-sm leading-7">
{/* contributors are a top-level field, not a property */}
<dt className="inline mr-2 text-gray-500">Contributors:</dt>
<dd className="inline">
{contributors.map((contributor, index) => {
if (contributor == null || contributor.actor == null) return null
return (
<Fragment
key={`${contributor.actor.id}${contributor.role?.code}`}
>
{index !== 0 ? <span>, </span> : null}
{contributor.actor?.website != null ? (
<a href={contributor.actor.website}>
{contributor.actor.name}
</a>
) : (
contributor.actor.name
)}
</Fragment>
)
})}
</dd>
<div>
<dt className="inline mr-2 text-gray-500">Contributors:</dt>
<dd className="inline">
{contributors.map((contributor, index) => {
if (contributor == null || contributor.actor == null) return null
return (
<Fragment
key={`${contributor.actor.id}${contributor.role?.code}`}
>
{index !== 0 ? <span>, </span> : null}
{contributor.actor?.website != null ? (
<a href={contributor.actor.website}>
{contributor.actor.name}
</a>
) : (
contributor.actor.name
)}
</Fragment>
)
})}
</dd>
</div>
{sortedLabels.map((label) => {
const properties = groupedProperties[label]
......
......@@ -3,9 +3,8 @@ import { ensureScalar } from '@/utils/ensureScalar'
export function sanitizeItemQueryParams(
params: GetServerSidePropsContext['params'],
): { id?: number } {
): { id?: string } {
if (params === undefined || params.id === undefined) return {}
const id = parseInt(ensureScalar(params.id), 10)
if (Number.isNaN(id) || id <= 0) return {}
const id = ensureScalar(params.id)
return { id }
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment