refactor people page for RFC (#413)

* refactor for RFC

src/app/orcid.org/[orcid]/Content.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Container, Row, Col } from 'react-bootstrap';
+import Container from 'react-bootstrap/Container'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
 
 import { QueryVar, fetchPerson } from 'src/data/queries/personQuery'
 

src/app/orcid.org/[orcid]/RelatedContent.tsx

@@ -1,25 +1,33 @@
 'use client'
 
 import React from 'react'
-import { Col, Container, Row } from 'react-bootstrap'
+import Container from 'react-bootstrap/Container'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
 import Loading from 'src/components/Loading/Loading'
 
-import { QueryVar, usePersonRelatedContentQuery } from 'src/data/queries/personRelatedContentQuery'
+import { usePersonRelatedContentQuery } from 'src/data/queries/personRelatedContentQuery'
 
 import Error from 'src/components/Error/Error'
 import WorksListing from 'src/components/WorksListing/WorksListing'
 import { pluralize } from 'src/utils/helpers';
+import { useParams, useSearchParams } from 'next/navigation'
+import mapSearchparams from './mapSearchParams'
 
 interface Props {
-  orcid: string
-  variables: QueryVar
   isBot?: boolean
 }
 
 export default function RelatedContent(props: Props) {
-  const { orcid, variables, isBot = false } = props
+  const { isBot = false } = props
+  const orcid = useParams().orcid as string
 
-  const { loading, data, error } = usePersonRelatedContentQuery(variables)
+  const searchParams = useSearchParams()
+  const { variables } = mapSearchparams(Object.fromEntries(searchParams.entries()) as any)
+
+  const vars = { id: 'http://orcid.org/' + orcid, ...variables }
+
+  const { loading, data, error } = usePersonRelatedContentQuery(vars)
 
   if (isBot) return null
 

src/app/orcid.org/[orcid]/mapSearchParams.ts

@@ -0,0 +1,31 @@
+export interface SearchParams {
+  filterQuery?: string
+  cursor?: string
+  published?: string
+  "resource-type"?: string
+  language?: string
+  license?: string
+  "field-of-science"?: string
+  "registration-agency"?: string
+
+  isBot: string
+}
+
+export default function mapSearchparams(searchParams: SearchParams) {
+  return {
+    variables: {
+      filterQuery: searchParams.filterQuery,
+      cursor: searchParams.cursor,
+      published: searchParams.published,
+      resourceTypeId: searchParams['resource-type'],
+      language: searchParams.language,
+      license: searchParams.license,
+      fieldOfScience: searchParams['field-of-science'],
+      registrationAgency: searchParams['registration-agency'],
+    },
+
+    isBot: false
+  }
+}
+
+

src/app/orcid.org/[orcid]/page.tsx

@@ -7,24 +7,14 @@ import Content from './Content'
 import { fetchPersonMetadata } from 'src/data/queries/personQuery'
 import RelatedContent from './RelatedContent'
 import Loading from 'src/components/Loading/Loading'
+import mapSearchparams, { SearchParams } from './mapSearchParams'
 
 
 interface Props {
   params: {
     orcid: string
   },
-  searchParams: {
-    filterQuery?: string
-    cursor?: string
-    published?: string
-    "resource-type"?: string
-    language?: string
-    license?: string
-    "field-of-science"?: string
-    "registration-agency"?: string
-
-    isBot: string
-  }
+  searchParams: SearchParams
 }
 
 
@@ -88,25 +78,10 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   }
 }
 
-function mapSearchparams(searchParams: Props['searchParams']) {
-  return {
-    filterQuery: searchParams.filterQuery,
-    cursor: searchParams.cursor,
-    published: searchParams.published,
-    resourceTypeId: searchParams['resource-type'],
-    language: searchParams.language,
-    license: searchParams.license,
-    fieldOfScience: searchParams['field-of-science'],
-    registrationAgency: searchParams['registration-agency'],
-    isBot: false
-  }
-}
-
-
 export default async function Page({ params, searchParams }: Props) {
   const orcid = 'http://orcid.org/' + params.orcid
-  const { isBot, ...vars } = mapSearchparams(searchParams)
-  const variables = { id: orcid, ...vars }
+  const { variables } = mapSearchparams(searchParams)
+  const vars = { id: orcid, ...variables }
 
 
   // Fetch Person metadata
@@ -117,9 +92,9 @@ export default async function Page({ params, searchParams }: Props) {
 
   return <>
     <Suspense fallback={<Loading />}>
-      <Content variables={variables} isBot={isBot} />
+      <Content variables={vars} />
     </Suspense>
-    <RelatedContent orcid={params.orcid} variables={variables} isBot={isBot} />
+    <RelatedContent />
   </>
 }
 

src/components/Person/Person.tsx

@@ -1,11 +1,11 @@
-'use client'
-
 import React from 'react'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
+import Alert from 'react-bootstrap/Alert'
 import Image from 'next/image'
 import heroImage from '../../../public/images/hero.svg'
 import unlockImage from '../../../public/images/unlock.svg'
 import scienceImage from '../../../public/images/science.svg'
-import { Alert, Row, Col } from 'react-bootstrap'
 
 import { Person as PersonType } from 'src/data/types'
 import PersonMetadata from 'src/components/PersonMetadata/PersonMetadata'

src/components/PersonMetadata/PersonMetadata.tsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Alert, Row, Col, Badge } from 'react-bootstrap'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
+import Alert from 'react-bootstrap/Alert'
+import Badge from 'react-bootstrap/Badge'
 import { Person } from 'src/data/types'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faOrcid } from '@fortawesome/free-brands-svg-icons'