From 57348df3564ed5bcbc6494ebce567cde3e779ee8 Mon Sep 17 00:00:00 2001
From: fsimonjetz <fabian.simonjetz@ruhr-uni-bochum.de>
Date: Tue, 31 Oct 2023 10:55:31 +0000
Subject: [PATCH] Reformat Oracc numbers

---
 .../ui/info/ExternalNumberLink.tsx            | 32 ++++++++++++++-----
 .../ui/info/ExternalResources.tsx             | 14 +++++---
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/fragmentarium/ui/info/ExternalNumberLink.tsx b/src/fragmentarium/ui/info/ExternalNumberLink.tsx
index 0c4718d78..06b0311b3 100644
--- a/src/fragmentarium/ui/info/ExternalNumberLink.tsx
+++ b/src/fragmentarium/ui/info/ExternalNumberLink.tsx
@@ -95,7 +95,8 @@ export function YalePeabodyLink({ number }: { number: string }): JSX.Element {
     />
   )
 }
-export function OraccLink({
+
+function OraccLink({
   project,
   cdliNumber,
 }: {
@@ -106,17 +107,32 @@ export function OraccLink({
     project === 'ccp'
       ? 'https://ccp.yale.edu/'
       : `https://oracc.org/${project}/`
+  return (
+    <ExternalLink
+      href={`${baseUrl}${encodeURIComponent(cdliNumber)}`}
+      aria-label={`Oracc text ${project} ${cdliNumber}`}
+    >
+      {project.toUpperCase()}
+    </ExternalLink>
+  )
+}
 
-  const url = `${baseUrl}${encodeURIComponent(cdliNumber)}`
+export function OraccLinks({
+  projects,
+  cdliNumber,
+}: {
+  projects: readonly string[]
+  cdliNumber: string
+}): JSX.Element {
   return (
     <>
       {'Oracc ('}
-      <ExternalLink
-        href={url}
-        aria-label={`Oracc text ${project} ${cdliNumber}`}
-      >
-        {project.toUpperCase()}
-      </ExternalLink>
+      {projects.map((project, index) => (
+        <>
+          {index !== 0 && ', '}
+          <OraccLink project={project} cdliNumber={cdliNumber} key={index} />
+        </>
+      ))}
       {')'}
     </>
   )
diff --git a/src/fragmentarium/ui/info/ExternalResources.tsx b/src/fragmentarium/ui/info/ExternalResources.tsx
index c20457ec7..5872bdbe2 100644
--- a/src/fragmentarium/ui/info/ExternalResources.tsx
+++ b/src/fragmentarium/ui/info/ExternalResources.tsx
@@ -10,8 +10,9 @@ import {
   HilprechtHeidelbergLink,
   BmIdLink,
   YalePeabodyLink,
-  OraccLink,
+  OraccLinks,
 } from './ExternalNumberLink'
+import _ from 'lodash'
 
 type ExternalLinkComponent = ({ number }: { number: string }) => JSX.Element
 
@@ -40,11 +41,14 @@ export default function ExternalResources({
             </li>
           )
       )}
-      {fragment.oraccNumbers.map((project, index) => (
-        <li key={`oracc-${index}`}>
-          <OraccLink project={project} cdliNumber={fragment.cdliNumber} />
+      {!_.isEmpty(fragment.oraccNumbers) && (
+        <li>
+          <OraccLinks
+            projects={fragment.oraccNumbers}
+            cdliNumber={fragment.cdliNumber}
+          />
         </li>
-      ))}
+      )}
     </ul>
   )
 }