#843 add multiple references

apps/portal/src/components/mint/MintDOIModal.tsx

@@ -117,19 +117,23 @@ export function MintDOIModal({
                   </div>
                 </li>
               )}
-              {data.referenceURL && (
+              {data.referenceURLs && (
                 <li className="p-2">
-                  <strong>Reference URL</strong>: Check that the external
-                  reference URL is correct.
-                  <div className="fst-italic">
-                    <a
-                      href={data.referenceURL}
-                      target={'_blank'}
-                      rel="noreferrer"
-                    >
-                      {data.referenceURL}
-                    </a>
-                  </div>
+                  <strong>Reference URLs</strong>: : Check that the external
+                  reference URLs are correct.
+                  <ul className="fst-italic">
+                    {data.referenceURLs.map((referenceURL: any, index: any) => (
+                      <li key={`reference-${index}`}>
+                        <a
+                          href={referenceURL}
+                          target={'_blank'}
+                          rel="noreferrer"
+                        >
+                          {referenceURL}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
                 </li>
               )}
             </ul>

apps/portal/src/components/mint/MintDOIPanel.tsx

@@ -109,7 +109,7 @@ type FormType = {
   }[];
   keywords?: { keyword: string }[];
   citationPublicationDOI?: string;
-  referenceURL?: string;
+  referenceURLs?: { referenceURL: string }[];
 };
 
 function FormSection({
@@ -252,20 +252,30 @@ function FormSection({
         return undefined;
       },
     },
-    referenceURL: {
-      type: 'url',
-      label: 'External reference URL (PDB,...)',
-      validate: (value?: string) => {
-        if (value === undefined || !value?.length) {
-          return undefined;
-        }
-        try {
-          new URL(value);
-          return undefined;
-        } catch {
-          return 'Invalid URL';
-        }
+    referenceURLs: {
+      type: 'array',
+      label: 'External reference URLs (PDB,...)',
+      item: {
+        referenceURL: (v) => ({
+          type: 'url',
+          label: 'Reference URL',
+          required: true,
+          validate: (value?: string) => {
+            if (value === undefined || !value?.length) {
+              return undefined;
+            }
+            try {
+              new URL(value);
+              return undefined;
+            } catch {
+              return 'Invalid URL';
+            }
+          },
+        }),
       },
+      newItem: () => ({
+        referenceURL: '',
+      }),
     },
   };
 
@@ -338,6 +348,9 @@ function FormSection({
             keywords: data.keywords?.map((k) => {
               return k.keyword;
             }),
+            referenceURLs: data.referenceURLs?.map((url) => {
+              return url.referenceURL;
+            }),
           };
           handleClick({ ...postData }, clearForm, onErrorCallBack);
         }}