add author documents display, some issues to fix

src/app/author/[author]/AuthorDisplay.tsx

@@ -3,6 +3,9 @@ import { Fragment } from 'react'
 import { affiliations, nationalities, authors } from '../../db/data'
 import { Zilla_Slab } from 'next/font/google'
 import { notFound } from 'next/navigation'
+import DocumentCard from '@/app/components/DocumentCard'
+import findDocumentsByAuthor from './findDocumentsByAuthor'
+import { redirect } from 'next/navigation' // for server side
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
 
@@ -16,6 +19,8 @@ export default function AuthorDisplay({
 
   const { name, affiliation, image, nationality, formerAffiliations } = data
 
+  const authorsDocuments = findDocumentsByAuthor(author)
+
   const MainPosition = () => {
     const mainAffiliationShort = affiliation[0].split('@')[1]
     const mainPosition = affiliation[0].split('@')[0]
@@ -55,7 +60,7 @@ export default function AuthorDisplay({
     return (
       <>
         <h1 className='text-3xl md:mt-6 mt-4 mb-2 font-serif'>
-          Other Positions:
+          Other Positions
         </h1>
         {affiliation.slice(1).map((a: string, i: number) => {
           const position = a.split('@')[0]
@@ -80,7 +85,7 @@ export default function AuthorDisplay({
     return (
       <>
         <h1 className='text-3xl md:mt-6 mt-4 mb-2 font-serif'>
-          Former Positions:
+          Former Positions
         </h1>
         {formerAffiliations?.map((a: string, i: number) => {
           const position = a.split('@')[0]
@@ -159,7 +164,7 @@ export default function AuthorDisplay({
         <OtherPositions />
         <FormerPositions />
         <h1 className='text-3xl md:my-6 my-4 font-serif'>
-          Ethnicity and Nationality:
+          Ethnicity and Nationality
         </h1>
         <div className='flex gap-2 flex-wrap'>
           {nationality.map((n: string) => (
@@ -169,6 +174,16 @@ export default function AuthorDisplay({
           ))}
         </div>
         <Bio />
+        {authorsDocuments.length > 0 && (
+          <>
+            <h1 className='text-3xl md:my-6 my-4 font-serif'>
+              Published documents
+            </h1>
+            {authorsDocuments.map((d) => (
+              <DocumentCard doc={d.doc} href={`/document/view/${d.slug}`} />
+            ))}
+          </>
+        )}
       </div>
     </div>
   )

src/app/author/[author]/findDocumentsByAuthor.ts

@@ -0,0 +1,28 @@
+import { Document, documents } from '@/app/db/data'
+
+// Assuming the types Document, DocumentStatus, and reviewer are defined as provided in your question
+
+// Interface for the return output
+interface DocumentWithSlug {
+  slug: string
+  doc: Document
+}
+
+export default function findDocumentsByAuthor(
+  authorId: string
+): DocumentWithSlug[] {
+  // Initialize an empty array to store the results
+  const result: DocumentWithSlug[] = []
+
+  // Iterate over the documents object entries
+  for (const [slug, doc] of Object.entries(documents)) {
+    // Check if the authorId is present in the document's authors array
+    if (doc.manifest.authors.includes(authorId)) {
+      // If present, push the document along with its slug to the results array
+      result.push({ slug, doc })
+    }
+  }
+
+  // Return the results array
+  return result
+}

src/app/components/AuthorDocuments.tsx

@@ -0,0 +1,8 @@
+/* this component is likely extremely inefficient so it should only be used in
+server side static components */
+
+export default function AuthorDocuments({
+  authorId,
+}: Readonly<{ authorId: string }>) {
+  return <div className='content text-slate-800'>{authorId}</div>
+}

src/app/components/DocumentCard.tsx

@@ -0,0 +1,41 @@
+import { Document } from '@/app/db/data'
+import { Zilla_Slab } from 'next/font/google'
+import { Authors, Topics } from './DataDisplay'
+import { ItemBadge, Status } from './Badges'
+import { epoch2datestring } from '@/app/utils/epoch2datestring'
+import Link from 'next/link'
+
+const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
+
+const DocumentCard = ({ doc, href }: { doc: Document; href: string }) => {
+  const { manifest, abstract } = doc
+  const { title, authors, topics, dates, status, type } = manifest
+  return (
+    <Link href={href} className='no-link-style'>
+      <div
+        className='border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer shadow-slate-300 shadow-md'
+        role='button' // this is a critical DEI concern as we have marked this element as a button with ARIA role, yet we have not supported button accessiblity features
+      >
+        <h2 className={`${zillaSlab.className} text-3xl`}>{title}</h2>
+        <p className='text-slate-500 py-2 text-md mt-2'>
+          <Authors authors={authors} noLink />
+        </p>
+        <p className='mb-2 text-slate-700 text-md'>
+          Last updated on {epoch2datestring(dates[dates.length - 1])}
+        </p>
+        <p className='mb-2'>
+          <Topics topics={topics} showTitle />
+        </p>
+        <div className='mb-4 flex flex-wrap gap-2'>
+          <ItemBadge itemName={type} /> <Status statusName={status} />
+        </div>
+        <h2 className={`${zillaSlab.className} text-2xl`}>Abstract</h2>
+        <p className='py-2 text-md text-slate-700 font-serif text-lg text-balance'>
+          {abstract.substring(0, 500) + (abstract.length > 500 ? '...' : '')}
+        </p>
+      </div>
+    </Link>
+  )
+}
+
+export default DocumentCard

src/app/utils/actions.ts

@@ -0,0 +1,7 @@
+'use server'
+
+import { redirect } from 'next/navigation'
+
+export async function navigate(data: FormData) {
+  redirect(`/posts/${data.get('id')}`)
+}