fix: ensure correct key for entries with duplicate identifier service…

… in external id fields
SSHOC · Nov 7, 2024 · caf3c17 · caf3c17
1 parent c3a668f
commit caf3c17
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/src/components/item/ItemActors.tsx b/src/components/item/ItemActors.tsx
@@ -5,6 +5,7 @@ import css from '@/components/item/ItemMetadata.module.css'
 import type { Actor } from '@/data/sshoc/api/actor'
 import type { Item } from '@/data/sshoc/api/item'
 import { useI18n } from '@/lib/core/i18n/useI18n'
+import { createKey } from '@/lib/utils/create-key'
 
 export interface ItemActorsProps {
   actors: Item['contributors']
@@ -187,7 +188,7 @@ function ActorExternalIds(props: ActorExternalIdsProps): JSX.Element {
 
         if (id.identifierService.urlTemplate == null) {
           return (
-            <span>
+            <span key={createKey(id.identifierService.code, id.identifier)}>
               {id.identifierService.label}: {id.identifier}
             </span>
           )
@@ -197,7 +198,7 @@ function ActorExternalIds(props: ActorExternalIdsProps): JSX.Element {
 
         return (
           <a
-            key={id.identifierService.code}
+            key={createKey(id.identifierService.code, id.identifier)}
             href={href}
             target="_blank"
             rel="noreferrer"

diff --git a/src/components/item/ItemExternalIds.tsx b/src/components/item/ItemExternalIds.tsx
@@ -4,6 +4,7 @@ import { Fragment } from 'react'
 import css from '@/components/item/ItemMetadata.module.css'
 import type { Item } from '@/data/sshoc/api/item'
 import { useI18n } from '@/lib/core/i18n/useI18n'
+import { createKey } from '@/lib/utils/create-key'
 
 export interface ItemExternalIdsProps {
   ids: Item['externalIds']
@@ -30,16 +31,16 @@ export function ItemExternalIds(props: ItemExternalIdsProps): JSX.Element {
 
             if (id.identifierService.urlTemplate == null) {
               return (
-                <span>
+                <li key={createKey(id.identifierService.code, id.identifier)}>
                   {id.identifierService.label}: {id.identifier}
-                </span>
+                </li>
               )
             }
 
             const href = id.identifierService.urlTemplate.replace('{source-item-id}', id.identifier)
 
             return (
-              <li key={id.identifierService.code}>
+              <li key={createKey(id.identifierService.code, id.identifier)}>
                 <div>
                   <a href={href} target="_blank" rel="noreferrer" className={css['link']}>
                     {id.identifierService.label}

diff --git a/src/lib/utils/create-key.ts b/src/lib/utils/create-key.ts
@@ -0,0 +1,3 @@
+export function createKey(...segments: Array<string>): string {
+  return segments.join('-')
+}