feat: map form data to dto

src/collection/domain/useCases/DTOs/CollectionFeaturedItemsDTO.ts

@@ -0,0 +1,9 @@
+export type CollectionFeaturedItemsDTO = CollectionFeaturedItemDTO[]
+
+export interface CollectionFeaturedItemDTO {
+  content: string
+  order: number
+  file?: File
+  keepFile: boolean
+  id?: string
+}

src/sections/collection-featured-items/featured-items-form/FeaturedItemsFormHelper.ts

@@ -1,5 +1,9 @@
 import { CollectionFeaturedItem } from '@/collection/domain/models/CollectionFeaturedItem'
 import { FeaturedItemsFormData } from '../types'
+import {
+  CollectionFeaturedItemDTO,
+  CollectionFeaturedItemsDTO
+} from '@/collection/domain/useCases/DTOs/CollectionFeaturedItemsDTO'
 
 export class FeaturedItemsFormHelper {
   static defineDefaultFeaturedItems(
@@ -24,4 +28,43 @@ export class FeaturedItemsFormHelper {
       }
     })
   }
+
+  static defineFeaturedItemsDTO(
+    formFeaturedItems: FeaturedItemsFormData['featuredItems']
+  ): CollectionFeaturedItemsDTO {
+    const itemsMapped: CollectionFeaturedItemsDTO = formFeaturedItems.map((item, index) => {
+      const { content, image, itemId } = item
+
+      const itemDTO: CollectionFeaturedItemDTO = {
+        content,
+        order: index + 1,
+        keepFile: false
+      }
+
+      const isNewItem = itemId === undefined
+      const imageIsFile = image instanceof File
+      const imageRemainsOriginal = typeof image === 'string' && image !== ''
+
+      // Add itemId of existing item
+      if (itemId) {
+        itemDTO.id = itemId
+      }
+
+      // New item
+      if (isNewItem) {
+        itemDTO.file = imageIsFile ? image : undefined
+        itemDTO.keepFile = false
+      }
+
+      // Existing item
+      if (!isNewItem) {
+        itemDTO.file = imageIsFile ? image : undefined
+        itemDTO.keepFile = imageRemainsOriginal && !imageIsFile ? true : false
+      }
+
+      return itemDTO
+    })
+
+    return itemsMapped
+  }
 }

src/sections/collection-featured-items/featured-items-form/useSubmitFeaturedItems.ts

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 // import { WriteError } from '@iqss/dataverse-client-javascript'
 import { CollectionRepository } from '@/collection/domain/repositories/CollectionRepository'
 import { FeaturedItemsFormData } from '../types'
+import { FeaturedItemsFormHelper } from './FeaturedItemsFormHelper'
 
 export enum SubmissionStatus {
   NotSubmitted = 'NotSubmitted',
@@ -38,24 +39,29 @@ export function useSubmitFeaturedItems(
   )
   const [submitError, setSubmitError] = useState<string | null>(null)
 
-  const submitForm = (formData: FeaturedItemsFormData): void => {
+  const submitForm = (formCollectedData: FeaturedItemsFormData): void => {
     // setSubmissionStatus(SubmissionStatus.IsSubmitting)
 
-    console.log(formData)
+    console.log(formCollectedData)
 
-    // const newOrUpdatedCollection: CollectionDTO = {
-    //   name: formData.name,
-    //   alias: formData.alias,
-    //   type: formData.type,
-    //   affiliation: formData.affiliation,
-    //   description: formData.description,
-    //   contacts: contactsDTO,
-    //   metadataBlockNames: shouldSendMetadataBlockNamesAndInputLevels
-    //     ? metadataBlockNamesDTO
-    //     : undefined,
-    //   inputLevels: shouldSendMetadataBlockNamesAndInputLevels ? inputLevelsDTO : undefined,
-    //   facetIds: shouldSendFacetIds ? facetIdsDTO : undefined
-    // }
+    const formData = new FormData()
+
+    const itemsDTO = FeaturedItemsFormHelper.defineFeaturedItemsDTO(formCollectedData.featuredItems)
+
+    console.log({ itemsDTO })
+
+    itemsDTO.forEach((item) => {
+      if (item.id) {
+        formData.append(`items[${item.order}][id]`, item.id)
+      }
+      formData.append(`items[${item.order}][order]`, JSON.stringify(item.order))
+      formData.append(`items[${item.order}][content]`, item.content)
+      formData.append(`items[${item.order}][keepFile]`, JSON.stringify(item.keepFile))
+
+      if (item.file) {
+        formData.append(`items[${item.order}][file]`, item.file)
+      }
+    })
 
     //   editCollection(collectionRepository, newOrUpdatedCollection, collectionIdOrParentCollectionId)
     //     .then(() => {

tests/component/collection/domain/models/CollectionFeaturedItemMother.ts

@@ -6,6 +6,7 @@ export class CollectionFeaturedItemMother {
       {
         id: 'item-1-id',
         type: 'custom',
+        imageUrl: 'https://via.placeholder.com/400x400',
         order: 1,
         content:
           '<h2 class="rte-heading">Some Title</h2><h3 class="rte-heading">Heading 3</h3><p class="rte-paragraph">Hello <strong class="rte-bold">Dataverse</strong> <em class="rte-italic">new </em><s class="rte-strike">rick</s> <strong class="rte-bold">rich</strong> <em class="rte-italic">text</em> <code class="rte-code">editor</code>! This is a <a target="_blank" rel="noopener noreferrer nofollow" class="rte-link" href="https://beta.dataverse.org/spa/">link</a>.</p><ul class="rte-bullet-list"><li><p class="rte-paragraph">Item</p></li><li><p class="rte-paragraph">Item</p></li></ul><ol class="rte-ordered-list"><li><p class="rte-paragraph">Item 1</p></li><li><p class="rte-paragraph">Item 2</p></li></ol><pre class="rte-code-block"><code class="language-typescriptreact">onUpdate: ({ editor }) =&gt; onChange &amp;&amp; onChange(editor.getHTML())</code></pre><blockquote class="rte-blockquote"><p class="rte-paragraph">This is a blockquoute</p></blockquote><p class="rte-paragraph"></p><p class="rte-paragraph"></p>'
@@ -20,6 +21,7 @@ export class CollectionFeaturedItemMother {
       {
         id: 'item-3-id',
         type: 'custom',
+        imageUrl: 'https://via.placeholder.com/400x200',
         order: 3,
         content:
           '<h2 class="rte-heading">Some Title</h2><h3 class="rte-heading">Heading 3</h3><p class="rte-paragraph">Hello <strong class="rte-bold">Dataverse</strong> <em class="rte-italic">new </em><s class="rte-strike">rick</s> <strong class="rte-bold">rich</strong> <em class="rte-italic">text</em> <code class="rte-code">editor</code>! This is a <a target="_blank" rel="noopener noreferrer nofollow" class="rte-link" href="https://beta.dataverse.org/spa/">link</a>.</p><ul class="rte-bullet-list"><li><p class="rte-paragraph">Item</p></li><li><p class="rte-paragraph">Item</p></li></ul><ol class="rte-ordered-list"><li><p class="rte-paragraph">Item 1</p></li><li><p class="rte-paragraph">Item 2</p></li></ol><pre class="rte-code-block"><code class="language-typescriptreact">onUpdate: ({ editor }) =&gt; onChange &amp;&amp; onChange(editor.getHTML())</code></pre><blockquote class="rte-blockquote"><p class="rte-paragraph">This is a blockquoute</p></blockquote><p class="rte-paragraph"></p><p class="rte-paragraph"></p>'