fix: adjust to api changes

src/api/sshoc/helpers.ts

@@ -88,10 +88,11 @@ export function convertToInitialFormValues(
      */
     externalIds: item.externalIds?.map((id) => {
       const identifierService = { code: id.identifierService?.code }
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const identifier = id.identifier!
       const externalId = {
         identifier,
-        serviceIdentifier: identifierService,
+        identifierService,
       }
       return externalId
     }),
@@ -109,14 +110,7 @@ export function convertToInitialFormValues(
     /**
      * Only id needed, but keep additional info around - will be stripped in `sanitizeFormValues` before submit.
      */
-    media: item.media?.map((m) => ({
-      caption: m.caption,
-      mediaId: m.metadata?.mediaId,
-      filename: m.metadata?.filename,
-      hasThumbnail: m.metadata?.hasThumbnail,
-      category: m.metadata?.category,
-      location: m.metadata?.location,
-    })),
+    media: item.media,
   }
 
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

src/components/item/ActorsFormSection/ActorsFormSection.tsx

@@ -263,7 +263,7 @@ function CreateActorForm(props: CreateActorFormProps) {
           // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
           id != null &&
           // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-          id.serviceIdentifier?.code != null &&
+          id.identifierService?.code != null &&
           // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
           id.identifier == null
         ) {
@@ -285,13 +285,13 @@ function CreateActorForm(props: CreateActorFormProps) {
           // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
           id.identifier != null &&
           // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-          id.serviceIdentifier?.code == null
+          id.identifierService?.code == null
         ) {
           if (errors.externalIds === undefined) {
             errors.externalIds = []
           }
           errors.externalIds[index] = {
-            serviceIdentifier: { code: 'Please select an ID service.' },
+            identifierService: { code: 'Please select an ID service.' },
           }
         }
       })
@@ -332,7 +332,7 @@ function CreateActorForm(props: CreateActorFormProps) {
                           }
                         >
                           <ExternalIdServiceSelect
-                            name={`${name}.serviceIdentifier.code`}
+                            name={`${name}.identifierService.code`}
                             label="ID Service"
                           />
                           <FormTextField

src/components/item/AddMediaForm/AddMediaForm.tsx

@@ -17,7 +17,7 @@ interface AddMediaFormValues {
 
 interface AddMediaFormProps {
   onDismiss: () => void
-  onSuccess?: (mediaInfo: MediaDetails, caption?: string) => void
+  onSuccess?: (info: MediaDetails, caption?: string) => void
   accept?: string
 }
 
@@ -41,8 +41,8 @@ export function AddMediaForm(props: AddMediaFormProps): JSX.Element {
     const caption = values.caption
 
     const callbacks = {
-      onSuccess(mediaInfo: MediaDetails) {
-        props.onSuccess?.(mediaInfo, caption)
+      onSuccess(info: MediaDetails) {
+        props.onSuccess?.(info, caption)
         toast.success('Sucessfully added media.')
       },
       onError(error: unknown) {

src/components/item/MainFormSection/MainFormSection.tsx

@@ -88,7 +88,7 @@ export function MainFormSection(props: MainFormSectionProps): JSX.Element {
                     }
                   >
                     <ExternalIdServiceSelect
-                      name={`${name}.serviceIdentifier.code`}
+                      name={`${name}.identifierService.code`}
                       label="ID Service"
                     />
                     <FormTextField

src/components/item/MediaFormSection/MediaFormSection.tsx

@@ -45,7 +45,7 @@ export function MediaFormSection(props: MediaFormSectionProps): JSX.Element {
                           return (
                             <Thumbnail
                               onRemove={() => fields.remove(index)}
-                              media={input.value}
+                              media={input.value.info}
                               caption={input.value.caption}
                             />
                           )
@@ -61,9 +61,7 @@ export function MediaFormSection(props: MediaFormSectionProps): JSX.Element {
               <AddMediaDialog
                 isOpen={isDialogOpen}
                 onDismiss={closeDialog}
-                onSuccess={(mediaInfo, caption) =>
-                  fields.push({ ...mediaInfo, caption })
-                }
+                onSuccess={(info, caption) => fields.push({ info, caption })}
               />
             </div>
           )
@@ -76,7 +74,7 @@ export function MediaFormSection(props: MediaFormSectionProps): JSX.Element {
 interface AddMediaDialogProps {
   isOpen: boolean
   onDismiss: () => void
-  onSuccess?: (mediaInfo: MediaDetails, caption?: string) => void
+  onSuccess?: (info: MediaDetails, caption?: string) => void
 }
 
 /**

src/components/item/ThumbnailFormSection/ThumbnailFormSection.tsx

@@ -35,10 +35,12 @@ export function ThumbnailFormSection(
           return (
             <div>
               {input.value != null && input.value !== '' ? (
-                <Thumbnail
-                  onRemove={() => input.onChange(null)}
-                  media={{ ...input.value, hasThumbnail: true }}
-                />
+                <div className="grid grid-cols-3">
+                  <Thumbnail
+                    onRemove={() => input.onChange(null)}
+                    media={{ ...input.value, hasThumbnail: true }}
+                  />
+                </div>
               ) : null}
               <div className="flex items-center space-x-8">
                 <FormFieldAddButton onPress={addThumbnailDialog.open}>
@@ -47,14 +49,14 @@ export function ThumbnailFormSection(
                 <AddThumbnailDialog
                   isOpen={addThumbnailDialog.isOpen}
                   onDismiss={addThumbnailDialog.close}
-                  onSuccess={(mediaInfo, caption) => {
+                  onSuccess={(info) => {
                     if (
-                      mediaInfo.category !== 'image' ||
-                      mediaInfo.hasThumbnail !== true
+                      info.category !== 'image' ||
+                      info.hasThumbnail !== true
                     ) {
                       throw new MediaError('A thumbnail must be an image.')
                     }
-                    input.onChange({ ...mediaInfo, caption })
+                    input.onChange(info)
                   }}
                 />
                 <div>or</div>
@@ -62,8 +64,9 @@ export function ThumbnailFormSection(
                   {({ input: media }) => {
                     const images =
                       media.value?.filter(
-                        (m: MediaDetails) =>
-                          m.category === 'image' && m.hasThumbnail === true,
+                        (m: { info?: MediaDetails }) =>
+                          m.info?.category === 'image' &&
+                          m.info.hasThumbnail === true,
                       ) ?? []
                     return (
                       <Fragment>
@@ -76,8 +79,8 @@ export function ThumbnailFormSection(
                         <ChooseThumbnailDialog
                           isOpen={chooseThumbnailDialog.isOpen}
                           onDismiss={chooseThumbnailDialog.close}
-                          onSuccess={(mediaInfo, caption) => {
-                            input.onChange({ ...mediaInfo, caption })
+                          onSuccess={(info) => {
+                            input.onChange(info)
                           }}
                           images={images}
                         />
@@ -108,7 +111,7 @@ function useDialogState(initialState = false) {
 interface DialogProps {
   isOpen: boolean
   onDismiss: () => void
-  onSuccess?: (mediaInfo: MediaDetails, caption?: string) => void
+  onSuccess?: (info: MediaDetails, caption?: string) => void
 }
 
 type AddThumbnailDialogProps = DialogProps
@@ -143,7 +146,7 @@ function AddThumbnailDialog(props: AddThumbnailDialogProps) {
 }
 
 interface ChooseThumbnailDialogProps extends DialogProps {
-  images: Array<MediaDetails & { caption?: string }>
+  images: Array<{ info: MediaDetails; caption?: string }>
 }
 
 function ChooseThumbnailDialog(props: ChooseThumbnailDialogProps) {
@@ -183,8 +186,8 @@ interface ChooseThumbnailFormProps {
 }
 
 function ChooseThumbnailForm(props: ChooseThumbnailFormProps) {
-  function onSubmit(image: MediaDetails & { caption?: string }) {
-    props.onSuccess?.(image, image.caption)
+  function onSubmit(image: { info: MediaDetails; caption?: string }) {
+    props.onSuccess?.(image.info, image.caption)
     props.onDismiss()
   }
 
@@ -193,9 +196,9 @@ function ChooseThumbnailForm(props: ChooseThumbnailFormProps) {
       <ul className="grid grid-cols-2">
         {props.images.map((image) => {
           return (
-            <li key={image.mediaId}>
+            <li key={image.info.mediaId}>
               <button type="button" onClick={() => onSubmit(image)}>
-                <Thumbnail media={image} caption={image.caption} />
+                <Thumbnail media={image.info} caption={image.caption} />
               </button>
             </li>
           )

src/lib/sshoc/sanitizeFormValues.ts

@@ -37,10 +37,14 @@ export function sanitizeFormValues<
 
   if (Array.isArray(values.media) && values.media.length > 0) {
     values.media = values.media.map((m) => ({
-      mediaId: m.mediaId,
       caption: m.caption,
+      info: { mediaId: m.info?.mediaId },
     }))
   }
 
+  if (values.thumbnail != null && values.thumbnail.mediaId != null) {
+    values.thumbnail = { mediaId: values.thumbnail.mediaId }
+  }
+
   return values
 }

src/lib/sshoc/validateCommonFormFields.ts

@@ -207,7 +207,7 @@ export function validateCommonFormFields<
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         id != null &&
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        id.serviceIdentifier?.code != null &&
+        id.identifierService?.code != null &&
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         id.identifier == null
       ) {
@@ -230,14 +230,14 @@ export function validateCommonFormFields<
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         id.identifier != null &&
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        id.serviceIdentifier?.code == null
+        id.identifierService?.code == null
       ) {
         if (errors.externalIds === undefined) {
           /* @ts-expect-error Untyped empty array. */
           errors.externalIds = []
         }
         errors.externalIds[index] = {
-          serviceIdentifier: { code: 'Please select an ID service.' },
+          identifierService: { code: 'Please select an ID service.' },
         }
       }
     })

src/modules/form/components/FormFieldAddButton/FormFieldAddButton.tsx

 import { useButton } from '@react-aria/button'
 import type { AriaButtonProps } from '@react-types/button'
+import cx from 'clsx'
 import type { ReactNode } from 'react'
 import { useRef } from 'react'
 
@@ -21,8 +22,12 @@ export function FormFieldAddButton(
   const { buttonProps } = useButton(props, ref)
 
   const styles = {
-    button:
-      'transition cursor-default inline-flex space-x-1.5 items-center font-body font-normal font-ui-base text-primary-750 hover:text-secondary-600 focus:text-gray-800 focus:outline-none',
+    button: cx(
+      'transition cursor-default inline-flex space-x-1.5 items-center font-body font-normal font-ui-base hover:text-secondary-600 focus:text-gray-800 focus:outline-none',
+      props.isDisabled === true
+        ? 'pointer-events-none text-gray-550'
+        : 'text-primary-750',
+    ),
     icon: 'w-2.5 h-2.5',
   }
 

src/screens/item/ItemLayout.tsx

@@ -277,10 +277,10 @@ function ItemMedia({ media }: { media: Item['media'] }) {
 
   const current = media[index]
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const mediaId = current.metadata!.mediaId!
+  const mediaId = current.info!.mediaId!
   const currentMediaUrl =
-    current.metadata!.location?.sourceUrl ?? getMediaFileUrl({ mediaId })
-  const currentMediaCategory = current.metadata!.category
+    current.info?.location?.sourceUrl ?? getMediaFileUrl({ mediaId })
+  const currentMediaCategory = current.info?.category
 
   return (
     <section>
@@ -304,8 +304,8 @@ function ItemMedia({ media }: { media: Item['media'] }) {
             <div className="grid place-items-center">
               <a href={currentMediaUrl} download rel="noopener noreferrer">
                 Download{' '}
-                {current.metadata?.filename ??
-                  current.metadata?.location?.sourceUrl ??
+                {current.info?.filename ??
+                  current.info?.location?.sourceUrl ??
                   'document'}
               </a>
             </div>
@@ -343,11 +343,13 @@ function ItemMedia({ media }: { media: Item['media'] }) {
         </button>
         <ul className="flex justify-center flex-1 px-6 space-x-1 border-l border-r border-gray-200">
           {media.map((m, index) => {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const mediaId = m.metadata!.mediaId!
-            const hasThumbnail = m.metadata!.hasThumbnail
+            const mediaId = m.info?.mediaId
+            const hasThumbnail = m.info?.hasThumbnail
+
+            if (mediaId == null) return null
+
             return (
-              <li key={m.metadata?.mediaId}>
+              <li key={m.info?.mediaId}>
                 <button onClick={() => setIndex(index)}>
                   {hasThumbnail === true ? (
                     <img