Skip to content

Introduce CommonsLayout component to standardize page layouts #695

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jrhoads merged 2 commits into from
Oct 6, 2026
+534 −389
Merged

Introduce CommonsLayout component to standardize page layouts #695

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dc2ac47
feat: introduce CommonsLayout to replace repeated Row/Col sidebar lay…
jrhoads Sep 11, 2026
905f79c
refactor: wrap RelatedContent in fluid Container and update tests
jrhoads Sep 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 42 additions & 47 deletions src/app/(main)/doi.org/[...doi]/Content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react'
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'

Expand All @@ -11,9 +10,9 @@ import TitleComponent from 'src/components/Title/Title'
import Claim from 'src/components/Claim/Claim'
import CiteAs from 'src/components/CiteAs/CiteAs'
import DownloadMetadata from 'src/components/DownloadMetadata/DownloadMetadata'
// import DownloadReports from 'src/components/DownloadReports/DownloadReports'
import Work from 'src/components/Work/Work'
import ExportMetadata from 'src/components/DownloadMetadata/ExportMetadata'
import CommonsLayout from 'src/components/CommonsLayout/CommonsLayout'

interface Props {
doi: string
Expand All @@ -24,13 +23,14 @@ export default async function Content(props: Props) {

const { data, error } = await fetchDoi(doi)

if (error) return (
<Col md={{ span: 9, offset: 3 }}>
<Error title="An error occured." message={error.message} />
</Col>
)
if (error)
return (
<CommonsLayout>
<Error title="An error occured." message={error.message} />
</CommonsLayout>
)

const work = data?.work || {} as WorkType
const work = data?.work || ({} as WorkType)

const title = work.titles[0]?.title || ''
const handleUrl =
Expand All @@ -39,46 +39,41 @@ export default async function Content(props: Props) {
: 'https://doi.org/' + work.doi

return (
<Container fluid>
<Row className="mb-4">
<Col md={{ offset: 3 }}>
<TitleComponent title={title} titleLink={handleUrl} link={'https://doi.org/' + work.doi} rights={work.rights} />
</Col>
</Row>
<>
<CommonsLayout className="mb-4">
<TitleComponent
title={title}
titleLink={handleUrl}
link={'https://doi.org/' + work.doi}
rights={work.rights}
/>
</CommonsLayout>

<Row>
<Col md={3} className='pe-5'>
<Row className="mb-2 pb-4">
<Col xs={12}>
<DownloadMetadata modalContent={<ExportMetadata doi={work} />} />
</Col>
{work.registrationAgency.id == "datacite" && (
<Col xs={12} className="mt-3 mb-3">
<Claim doi_id={work.doi} />
<CommonsLayout
sidebarClassName="pe-5"
mainClassName="px-0"
sidebar={
<>
<Row className="mb-2 pb-4">
<Col xs={12}>
<DownloadMetadata
modalContent={<ExportMetadata doi={work} />}
/>
</Col>
)}
</Row>
<Row className="mb-2 pb-4">
<CiteAs doi={work} />
</Row>
{/* <Row className="mb-2 pb-4"> */}
{/* {!isBot && <DownloadReports */}
{/* links={[ */}
{/* { */}
{/* title: 'Related Works (CSV)', */}
{/* helpText: `Includes descriptions and formatted citations in APA style for up to 200 DOIs associated with this ${isProject(work) ? 'project' : 'work'}.`, */}
{/* type: 'doi/related-works', */}
{/* } */}
{/* ]} */}
{/* variables={{ id: doi }} */}
{/* />} */}
{/* </Row> */}
</Col>

<Col md={9} className="px-0">
<Work doi={work} />
</Col>
</Row>
</Container>
{work.registrationAgency.id == 'datacite' && (
<Col xs={12} className="mt-3 mb-3">
<Claim doi_id={work.doi} />
</Col>
)}
</Row>
<Row className="mb-2 pb-4">
<CiteAs doi={work} />
</Row>
</>
}
>
<Work doi={work} />
</CommonsLayout>
</>
)
}
115 changes: 64 additions & 51 deletions src/app/(main)/doi.org/[...doi]/RelatedContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,87 +3,100 @@
import React from 'react'
import { useParams, useSearchParams } from 'next/navigation'
import Container from 'react-bootstrap/Container'
import Col from 'react-bootstrap/Col'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'

import CommonsError from 'src/components/Error/Error'
import Loading from 'src/components/Loading/Loading'
import WorksListing, { SortBy } from 'src/components/WorksListing/WorksListing'
import SearchBox from 'src/components/SearchBox/SearchBox'
import mapSearchparams from './mapSearchParams'
import { useRelatedContentManager } from 'src/data/managers/RelatedContentManager'
import CommonsLayout from 'src/components/CommonsLayout/CommonsLayout'

function getQueryVariables(doi: string, searchParams: URLSearchParams) {
const { variables, connectionType } = mapSearchparams(Object.fromEntries(searchParams.entries()) as any)
const { variables, connectionType } = mapSearchparams(
Object.fromEntries(searchParams.entries()) as any
)
return { relatedDoi: doi, ...variables, connectionType }
}

export default function RelatedContent() {

const doiParams = useParams().doi as string[]
const doi = decodeURIComponent(doiParams.join('/'))
const searchParams = useSearchParams()

const vars = getQueryVariables(doi, searchParams)
const manager = useRelatedContentManager(doi, vars)

if (manager.isLoading) return <Row><Loading /></Row>
if (manager.isLoading)
return (
<Row>
<Loading />
</Row>
)

if (manager.hasError)
return <Row>
<Col md={{ offset: 3 }} className="panel panel-transparent">
<CommonsError title="An error occurred loading related content." message={manager.errorMessage} />
</Col>
</Row>
return (
<CommonsLayout mainClassName="panel panel-transparent">
<CommonsError
title="An error occurred loading related content."
message={manager.errorMessage}
/>
</CommonsLayout>
)

if (!manager.hasData || !manager.hasAnyRelatedWorks) return (
<Container fluid>
<Row>
<Col md={{ offset: 3 }}>
<h3 className="member-results" id="title">Related Works</h3>
</Col>
</Row>
<Row>
<Col md={{ offset: 3 }} className="panel panel-transparent">
if (!manager.hasData || !manager.hasAnyRelatedWorks)
return (
<>
<CommonsLayout>
<h3 className="member-results" id="title">
Related Works
</h3>
</CommonsLayout>
<CommonsLayout mainClassName="panel panel-transparent">
<p>No related works found for this DOI.</p>
</Col>
</Row>
</Container>
)
</CommonsLayout>
</>
)

const { works, title: displayedConnectionTitle } = manager.selectedContent
const { hasPagination, hasNextPage, endCursor } = manager.pagination
const url = '/doi.org/' + doi + '/'
return (
<Container fluid>
<Row>
<Col md={3} className="d-none d-md-block">
</Col>
<Col md={9}>
<Row className="border-bottom ms-1 mb-3">
<Col className="ps-0"><h3 className="member-results border-0 mb-0" id="title">Related Works</h3></Col>
<Col xs="auto"><SortBy /></Col>
</Row>
</Col>
</Row>
<Row>
<WorksListing
works={works}
loading={manager.isLoading}
loadingFacets={manager.facetsAreLoading || manager.connectionCountsLoading}
connectionTypesCounts={manager.connectionTypeCounts}
showAnalytics={!manager.facetsAreLoading}
showSankey={manager.showSankey}
sankeyTitle={`Contributions to ${displayedConnectionTitle}`}
showClaimStatus={true}
hasPagination={hasPagination}
hasNextPage={hasNextPage}
model={'doi'}
url={url + '?'}
endCursor={endCursor}
searchBox={<SearchBox path={url} placeholder="Search within these works..." />}
/>
</Row>
<CommonsLayout fluid={false}>
<Row className="border-bottom ms-1 mb-3">
<Col className="ps-0">
<h3 className="member-results border-0 mb-0" id="title">
Related Works
</h3>
</Col>
<Col xs="auto">
<SortBy />
</Col>
</Row>
</CommonsLayout>
<WorksListing
Comment thread
coderabbitai[bot] marked this conversation as resolved.
works={works}
loading={manager.isLoading}
loadingFacets={
manager.facetsAreLoading || manager.connectionCountsLoading
}
connectionTypesCounts={manager.connectionTypeCounts}
showAnalytics={!manager.facetsAreLoading}
showSankey={manager.showSankey}
sankeyTitle={`Contributions to ${displayedConnectionTitle}`}
showClaimStatus={true}
hasPagination={hasPagination}
hasNextPage={hasNextPage}
model={'doi'}
url={url + '?'}
endCursor={endCursor}
searchBox={
<SearchBox path={url} placeholder="Search within these works..." />
}
/>
</Container>
)
}
27 changes: 11 additions & 16 deletions src/app/(main)/orcid.org/[orcid]/Content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import React from 'react'
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'

import { Person as PersonType } from 'src/data/types'
import { fetchPerson } from 'src/data/queries/personQuery'

import Error from 'src/components/Error/Error'
import Person from 'src/components/Person/Person'
import CommonsLayout from 'src/components/CommonsLayout/CommonsLayout'

interface Props {
orcid: string
Expand All @@ -19,21 +17,18 @@ export default async function Content(props: Props) {

const { data, error } = await fetchPerson(orcid)

if (error) return (
<Col md={{ span: 9, offset: 3 }}>
<Error title="An error occured." message={error.message} />
</Col>
)
if (error)
return (
<CommonsLayout>
<Error title="An error occured." message={error.message} />
</CommonsLayout>
)

const person = data?.person || {} as PersonType
const person = data?.person || ({} as PersonType)

return (
<Container fluid>
<Row>
<Col md={{ span: 9, offset: 3 }}>
<Person person={person} />
</Col>
</Row>
</Container>
<CommonsLayout>
<Person person={person} />
</CommonsLayout>
)
}
Loading