feat: update collection in form

IQSS · Nov 11, 2024 · cfd2e80 · cfd2e80
1 parent 8a75f30
commit cfd2e80
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 50 deletions.
diff --git a/public/locales/en/editCollection.json b/public/locales/en/editCollection.json
@@ -1,4 +1,8 @@
 {
   "pageTitle": "Edit Collection",
-  "notAllowedToEditCollection": "You do not have permissions to edit a collection within this collection."
+  "notAllowedToEditCollection": "You do not have permissions to edit a collection within this collection.",
+  "infoAlert": {
+    "heading": "Edit Collection",
+    "text": "Edit your collection and click Save Changes. Asterisks indicate required fields."
+  }
 }
diff --git a/public/locales/en/shared.json b/public/locales/en/shared.json
@@ -138,9 +138,10 @@
     "submitStatus": {
       "success": "Collection created successfully."
     },
-    "formButtons": {
-      "save": "Create Collection",
-      "cancel": "Cancel"
-    }
+    "saveButton": {
+      "createMode": "Create Collection",
+      "editMode": "Save Changes"
+    },
+    "cancelButton": "Cancel"
   }
 }
diff --git a/src/collection/domain/useCases/editCollection.ts b/src/collection/domain/useCases/editCollection.ts
@@ -4,8 +4,8 @@ import { CollectionDTO } from './DTOs/CollectionDTO'
 
 export async function editCollection(
   collectionRepository: CollectionRepository,
-  collectionId: string,
-  updatedCollection: CollectionDTO
+  updatedCollection: CollectionDTO,
+  collectionId: string
 ): Promise<void> {
   return collectionRepository.edit(collectionId, updatedCollection).catch((error: WriteError) => {
     throw error

diff --git a/src/index.tsx b/src/index.tsx
@@ -8,13 +8,13 @@ import { AppLoader } from './sections/shared/layout/app-loader/AppLoader'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
-  <React.StrictMode>
-    <React.Suspense fallback={<AppLoader fullViewport />}>
-      <LoadingProvider>
-        <ThemeProvider>
-          <App />
-        </ThemeProvider>
-      </LoadingProvider>
-    </React.Suspense>
-  </React.StrictMode>
+  // <React.StrictMode>
+  <React.Suspense fallback={<AppLoader fullViewport />}>
+    <LoadingProvider>
+      <ThemeProvider>
+        <App />
+      </ThemeProvider>
+    </LoadingProvider>
+  </React.Suspense>
+  // </React.StrictMode>
 )
diff --git a/src/sections/edit-collection/EditCollection.tsx b/src/sections/edit-collection/EditCollection.tsx
@@ -94,6 +94,11 @@ export const EditCollection = ({
       </header>
 
       <SeparationLine />
+
+      <Alert variant="info" customHeading={t('infoAlert.heading')}>
+        {t('infoAlert.text')}
+      </Alert>
+
       <RequiredFieldText />
 
       <EditCreateCollectionForm

diff --git a/src/sections/shared/form/EditCreateCollectionForm/collection-form/CollectionForm.tsx b/src/sections/shared/form/EditCreateCollectionForm/collection-form/CollectionForm.tsx
@@ -1,4 +1,4 @@
-import { MouseEvent, useMemo, useRef } from 'react'
+import { useMemo, useRef } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
@@ -16,6 +16,7 @@ import { SeparationLine } from '@/sections/shared/layout/SeparationLine/Separati
 import { MetadataFieldsSection } from './metadata-fields-section/MetadataFieldsSection'
 import { BrowseSearchFacetsSection } from './browse-search-facets-section/BrowseSearchFacetsSection'
 import { EditCreateCollectionFormMode } from '../EditCreateCollectionForm'
+import { RouteWithParams } from '@/sections/Route.enum'
 
 export interface CollectionFormProps {
   mode: EditCreateCollectionFormMode
@@ -27,6 +28,8 @@ export interface CollectionFormProps {
   defaultCollectionFacets: CollectionFormFacet[]
 }
 
+// TODO:ME Add Edited alert on just navigated collection
+
 export const CollectionForm = ({
   mode,
   collectionRepository,
@@ -39,6 +42,7 @@ export const CollectionForm = ({
   const formContainerRef = useRef<HTMLDivElement>(null)
   const { t } = useTranslation('shared', { keyPrefix: 'collectionForm' })
   const navigate = useNavigate()
+  const onCreateMode = mode === 'create'
 
   const { submitForm, submitError, submissionStatus } = useSubmitCollection(
     mode,
@@ -54,27 +58,15 @@ export const CollectionForm = ({
 
   const { formState } = form
 
-  const preventEnterSubmit = (e: React.KeyboardEvent<HTMLFormElement | HTMLButtonElement>) => {
-    // When pressing Enter, only submit the form  if the user is focused on the submit button itself
-    if (e.key !== 'Enter') return
-
-    const isButton = e.target instanceof HTMLButtonElement
-    const isButtonTypeSubmit = isButton ? (e.target as HTMLButtonElement).type === 'submit' : false
-
-    if (!isButton && !isButtonTypeSubmit) e.preventDefault()
-  }
-
   function onSubmittedCollectionError() {
     if (formContainerRef.current) {
       formContainerRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
     }
   }
 
-  const handleCancel = (event: MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault()
-    navigate(-1)
+  const handleCancel = () => {
+    navigate(RouteWithParams.COLLECTIONS(collectionIdOrParentCollectionId))
   }
-
   const disableSubmitButton = useMemo(() => {
     return submissionStatus === SubmissionStatus.IsSubmitting || !formState.isDirty
   }, [submissionStatus, formState.isDirty])
@@ -97,7 +89,6 @@ export const CollectionForm = ({
       <FormProvider {...form}>
         <form
           onSubmit={form.handleSubmit(submitForm)}
-          onKeyDown={preventEnterSubmit}
           noValidate={true}
           data-testid="collection-form">
           <TopFieldsSection />
@@ -127,14 +118,14 @@ export const CollectionForm = ({
 
           <Stack direction="horizontal" className="pt-3">
             <Button type="submit" disabled={disableSubmitButton}>
-              {t('formButtons.save')}
+              {onCreateMode ? t('saveButton.createMode') : t('saveButton.editMode')}
             </Button>
             <Button
               variant="secondary"
               type="button"
               onClick={handleCancel}
               disabled={submissionStatus === SubmissionStatus.IsSubmitting}>
-              {t('formButtons.cancel')}
+              {t('cancelButton')}
             </Button>
           </Stack>
         </form>

diff --git a/src/sections/shared/form/EditCreateCollectionForm/collection-form/useSubmitCollection.ts b/src/sections/shared/form/EditCreateCollectionForm/collection-form/useSubmitCollection.ts
@@ -11,6 +11,7 @@ import {
 } from '../EditCreateCollectionForm'
 import { CollectionDTO } from '@/collection/domain/useCases/DTOs/CollectionDTO'
 import { createCollection } from '@/collection/domain/useCases/createCollection'
+import { editCollection } from '@/collection/domain/useCases/editCollection'
 import { RouteWithParams } from '@/sections/Route.enum'
 import { JSDataverseWriteErrorHandler } from '@/shared/helpers/JSDataverseWriteErrorHandler'
 import { CollectionFormHelper } from '../CollectionFormHelper'
@@ -69,7 +70,7 @@ export function useSubmitCollection(
 
     const useFieldsFromParentChecked = formData[USE_FIELDS_FROM_PARENT]
 
-    const newCollection: CollectionDTO = {
+    const newOrUpdatedCollection: CollectionDTO = {
       name: formData.name,
       alias: formData.alias,
       type: formData.type,
@@ -81,23 +82,47 @@ export function useSubmitCollection(
       facetIds: facetIdsDTO
     }
 
-    createCollection(collectionRepository, newCollection, collectionIdOrParentCollectionId)
-      .then(() => {
-        setSubmitError(null)
-        setSubmissionStatus(SubmissionStatus.SubmitComplete)
+    if (mode === 'create') {
+      createCollection(
+        collectionRepository,
+        newOrUpdatedCollection,
+        collectionIdOrParentCollectionId
+      )
+        .then(() => {
+          setSubmitError(null)
+          setSubmissionStatus(SubmissionStatus.SubmitComplete)
+
+          navigate(RouteWithParams.COLLECTIONS(newOrUpdatedCollection.alias), {
+            state: { created: true }
+          })
+          return
+        })
+        .catch((err: WriteError) => {
+          const error = new JSDataverseWriteErrorHandler(err)
+          const formattedError = error.getReasonWithoutStatusCode() ?? error.getErrorMessage()
+          setSubmitError(formattedError)
+          setSubmissionStatus(SubmissionStatus.Errored)
+          onSubmitErrorCallback()
+        })
+    } else {
+      editCollection(collectionRepository, newOrUpdatedCollection, collectionIdOrParentCollectionId)
+        .then(() => {
+          setSubmitError(null)
+          setSubmissionStatus(SubmissionStatus.SubmitComplete)
 
-        navigate(RouteWithParams.COLLECTIONS(newCollection.alias), {
-          state: { created: true }
+          navigate(RouteWithParams.COLLECTIONS(newOrUpdatedCollection.alias), {
+            state: { edited: true }
+          })
+          return
+        })
+        .catch((err: WriteError) => {
+          const error = new JSDataverseWriteErrorHandler(err)
+          const formattedError = error.getReasonWithoutStatusCode() ?? error.getErrorMessage()
+          setSubmitError(formattedError)
+          setSubmissionStatus(SubmissionStatus.Errored)
+          onSubmitErrorCallback()
         })
-        return
-      })
-      .catch((err: WriteError) => {
-        const error = new JSDataverseWriteErrorHandler(err)
-        const formattedError = error.getReasonWithoutStatusCode() ?? error.getErrorMessage()
-        setSubmitError(formattedError)
-        setSubmissionStatus(SubmissionStatus.Errored)
-        onSubmitErrorCallback()
-      })
+    }
   }
 
   return {