fix: Added an [enabled] prevent multiple calls of GetGuestbook and clean extra props drilling

Author: ChengShi-1

CHANGELOG.md

@@ -17,6 +17,7 @@ This changelog follows the principles of [Keep a Changelog](https://keepachangel
 - Added Notifications tab in Account Page
 - Added runtime configuration options for homepage branding and support link.
 - Added an environment variable to docker-compose-dev.yml to hide the OIDC client used in the SPA from the JSF frontend: DATAVERSE_AUTH_OIDC_HIDDEN_JSF: 1
+- Download with terms of use and guestbook.
 
 ### Changed
 

package-lock.json

@@ -18,7 +18,7 @@
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.1.0-pr435.0c8eb79",
+    "@iqss/dataverse-client-javascript": "2.1.0-alpha.2",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",

package.json

@@ -98,7 +98,7 @@ export function AccessDatasetMenu({
         />
         <DatasetExploreOptions persistentId={persistentId} />
       </DropdownButton>
-      {hasGuestbook && (
+      {hasGuestbook && showDownloadWithGuestbookModal && (
         <DownloadWithGuestbookModal
           show={showDownloadWithGuestbookModal}
           handleClose={() => setShowDownloadWithGuestbookModal(false)}

src/sections/dataset/dataset-action-buttons/access-dataset-menu/AccessDatasetMenu.tsx

@@ -97,7 +97,7 @@ export function DownloadFilesButton({ files, fileSelection }: DownloadFilesButto
         show={showNoFilesSelectedModal}
         handleClose={() => setShowNoFilesSelectedModal(false)}
       />
-      {hasGuestbook && (
+      {hasGuestbook && showDownloadWithGuestbookModal && (
         <DownloadWithGuestbookModal
           fileIds={fileIdsForGuestbookSubmission}
           datasetId={allFilesSelected ? dataset.id : undefined}

src/sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.tsx

@@ -55,7 +55,8 @@ export function DownloadWithGuestbookModal({
   const [formValues, setFormValues] = useState<GuestbookFormValues>({})
   const { guestbook, isLoadingGuestbook, errorGetGuestbook } = useGetGuestbookById({
     guestbookRepository,
-    guestbookId
+    guestbookId,
+    enabled: show
   })
   const accountFieldKeys = useMemo(() => ['name', 'email', 'institution', 'position'], [])
 

src/sections/dataset/dataset-files/files-table/file-actions/file-actions-cell/file-action-buttons/file-options-menu/DownloadWithGuestbookModal.tsx

@@ -9,19 +9,23 @@ import { JSDataverseReadErrorHandler } from '@/shared/helpers/JSDataverseReadErr
 interface useGetGuestbookByIdProps {
   guestbookRepository: GuestbookRepository
   guestbookId?: number
+  enabled?: boolean
 }
 
 export const useGetGuestbookById = ({
   guestbookRepository,
-  guestbookId
+  guestbookId,
+  enabled = true
 }: useGetGuestbookByIdProps) => {
   const { t } = useTranslation('guestbooks')
   const [guestbook, setGuestbook] = useState<Guestbook | undefined>(undefined)
-  const [isLoadingGuestbook, setIsLoadingGuestbook] = useState<boolean>(guestbookId !== undefined)
+  const [isLoadingGuestbook, setIsLoadingGuestbook] = useState<boolean>(
+    enabled && guestbookId !== undefined
+  )
   const [errorGetGuestbook, setErrorGetGuestbook] = useState<string | null>(null)
 
   const fetchGuestbook = useCallback(async () => {
-    if (guestbookId === undefined) {
+    if (!enabled || guestbookId === undefined) {
       setGuestbook(undefined)
       setIsLoadingGuestbook(false)
       setErrorGetGuestbook(null)
@@ -47,7 +51,7 @@ export const useGetGuestbookById = ({
     } finally {
       setIsLoadingGuestbook(false)
     }
-  }, [guestbookId, guestbookRepository, t])
+  }, [enabled, guestbookId, guestbookRepository, t])
 
   useEffect(() => {
     void fetchGuestbook()

src/sections/dataset/dataset-guestbook/useGetGuestbookById.ts

@@ -1,11 +1,17 @@
+import { useState } from 'react'
 import { DropdownHeader } from '@iqss/dataverse-design-system'
 import { Download } from 'react-bootstrap-icons'
 import { FileTabularDownloadOptions } from './FileTabularDownloadOptions'
 import { FileNonTabularDownloadOptions } from './FileNonTabularDownloadOptions'
 import { useTranslation } from 'react-i18next'
-import { FileDownloadUrls, FileType } from '../../../../files/domain/models/FileMetadata'
+import {
+  FileDownloadMode,
+  FileDownloadUrls,
+  FileType
+} from '../../../../files/domain/models/FileMetadata'
 import { useDataset } from '@/sections/dataset/DatasetContext'
 import { CustomTerms, DatasetLicense } from '@/dataset/domain/models/Dataset'
+import { DownloadWithGuestbookModal } from '@/sections/dataset/dataset-files/files-table/file-actions/file-actions-cell/file-action-buttons/file-options-menu/DownloadWithGuestbookModal'
 
 interface FileDownloadOptionsProps {
   fileId: number
@@ -34,6 +40,10 @@ export function FileDownloadOptions({
 }: FileDownloadOptionsProps) {
   const { t } = useTranslation('files')
   const { dataset } = useDataset()
+  const [showDownloadWithGuestbookModal, setShowDownloadWithGuestbookModal] = useState(false)
+  const [selectedDownloadFormat, setSelectedDownloadFormat] = useState<string | FileDownloadMode>(
+    FileDownloadMode.ORIGINAL
+  )
 
   if (!userHasDownloadPermission) {
     return <></>
@@ -44,6 +54,12 @@ export function FileDownloadOptions({
   const resolvedDatasetLicense = datasetLicense ?? dataset?.license
   const resolvedDatasetCustomTerms = datasetCustomTerms ?? dataset?.termsOfUse?.customTerms
   const isLockedFromFileDownload = !!dataset?.isLockedFromFileDownload
+  const hasGuestbook = resolvedGuestbookId !== undefined
+
+  const openGuestbookModal = (format: string | FileDownloadMode) => {
+    setSelectedDownloadFormat(format)
+    setShowDownloadWithGuestbookModal(true)
+  }
 
   return (
     <>
@@ -56,25 +72,33 @@ export function FileDownloadOptions({
           type={type}
           ingestInProgress={ingestInProgress}
           downloadUrls={downloadUrls}
-          guestbookId={resolvedGuestbookId}
-          datasetPersistentId={resolvedDatasetPersistentId}
-          datasetLicense={resolvedDatasetLicense}
-          datasetCustomTerms={resolvedDatasetCustomTerms}
+          hasGuestbook={hasGuestbook}
+          onOpenGuestbookModal={openGuestbookModal}
           isLockedFromFileDownload={isLockedFromFileDownload}
         />
       ) : (
         <FileNonTabularDownloadOptions
           fileId={fileId}
-          guestbookId={resolvedGuestbookId}
-          datasetPersistentId={resolvedDatasetPersistentId}
-          datasetLicense={resolvedDatasetLicense}
-          datasetCustomTerms={resolvedDatasetCustomTerms}
+          hasGuestbook={hasGuestbook}
+          onOpenGuestbookModal={() => openGuestbookModal(FileDownloadMode.ORIGINAL)}
           type={type}
           ingestIsInProgress={ingestInProgress}
           downloadUrlOriginal={downloadUrls.original}
           isLockedFromFileDownload={isLockedFromFileDownload}
         />
       )}
+      {hasGuestbook && showDownloadWithGuestbookModal && (
+        <DownloadWithGuestbookModal
+          fileId={fileId}
+          guestbookId={resolvedGuestbookId}
+          format={selectedDownloadFormat}
+          datasetPersistentId={resolvedDatasetPersistentId}
+          datasetLicense={resolvedDatasetLicense}
+          datasetCustomTerms={resolvedDatasetCustomTerms}
+          show={showDownloadWithGuestbookModal}
+          handleClose={() => setShowDownloadWithGuestbookModal(false)}
+        />
+      )}
     </>
   )
 }

src/sections/file/file-action-buttons/access-file-menu/FileDownloadOptions.tsx

@@ -1,9 +1,7 @@
 import { DropdownButtonItem } from '@iqss/dataverse-design-system'
 import { useTranslation } from 'react-i18next'
 import { FileDownloadMode, FileType } from '../../../../files/domain/models/FileMetadata'
-import { DownloadWithGuestbookModal } from '@/sections/dataset/dataset-files/files-table/file-actions/file-actions-cell/file-action-buttons/file-options-menu/DownloadWithGuestbookModal'
-import { MouseEvent, useState } from 'react'
-import { CustomTerms, DatasetLicense } from '@/dataset/domain/models/Dataset'
+import { MouseEvent } from 'react'
 import { toast } from 'react-toastify'
 import { useAccessRepository } from '@/sections/access/AccessRepositoryContext'
 import {
@@ -14,10 +12,8 @@ import {
 
 interface FileNonTabularDownloadOptionsProps {
   fileId: number
-  guestbookId?: number
-  datasetPersistentId?: string
-  datasetLicense?: DatasetLicense
-  datasetCustomTerms?: CustomTerms
+  hasGuestbook: boolean
+  onOpenGuestbookModal: () => void
   type: FileType
   downloadUrlOriginal: string
   ingestIsInProgress: boolean
@@ -26,18 +22,14 @@ interface FileNonTabularDownloadOptionsProps {
 
 export function FileNonTabularDownloadOptions({
   fileId,
-  guestbookId,
-  datasetPersistentId,
-  datasetLicense,
-  datasetCustomTerms,
+  hasGuestbook,
+  onOpenGuestbookModal,
   type,
   ingestIsInProgress,
   isLockedFromFileDownload
 }: FileNonTabularDownloadOptionsProps) {
   const { t } = useTranslation('files')
   const accessRepository = useAccessRepository()
-  const hasGuestbook = guestbookId !== undefined
-  const [showDownloadWithGuestbookModal, setShowDownloadWithGuestbookModal] = useState(false)
   const downloadDisabled = ingestIsInProgress || isLockedFromFileDownload
 
   const handleDownloadClick = (event: MouseEvent<HTMLElement>) => {
@@ -47,7 +39,7 @@ export function FileNonTabularDownloadOptions({
 
     if (hasGuestbook) {
       event.preventDefault()
-      setShowDownloadWithGuestbookModal(true)
+      onOpenGuestbookModal()
       return
     }
 
@@ -68,27 +60,13 @@ export function FileNonTabularDownloadOptions({
   }
 
   return (
-    <>
-      <DropdownButtonItem
-        data-testid={`download-original-file`}
-        onClick={handleDownloadClick}
-        disabled={downloadDisabled}>
-        {type.displayFormatIsUnknown
-          ? t('actions.accessFileMenu.downloadOptions.options.original')
-          : type.toDisplayFormat()}
-      </DropdownButtonItem>
-      {hasGuestbook && showDownloadWithGuestbookModal && (
-        <DownloadWithGuestbookModal
-          fileId={fileId}
-          guestbookId={guestbookId}
-          format={FileDownloadMode.ORIGINAL}
-          datasetPersistentId={datasetPersistentId}
-          datasetLicense={datasetLicense}
-          datasetCustomTerms={datasetCustomTerms}
-          show={showDownloadWithGuestbookModal}
-          handleClose={() => setShowDownloadWithGuestbookModal(false)}
-        />
-      )}
-    </>
+    <DropdownButtonItem
+      data-testid={`download-original-file`}
+      onClick={handleDownloadClick}
+      disabled={downloadDisabled}>
+      {type.displayFormatIsUnknown
+        ? t('actions.accessFileMenu.downloadOptions.options.original')
+        : type.toDisplayFormat()}
+    </DropdownButtonItem>
   )
 }

src/sections/file/file-action-buttons/access-file-menu/FileNonTabularDownloadOptions.tsx

@@ -1,9 +1,8 @@
-import { MouseEvent, useState } from 'react'
+import { MouseEvent } from 'react'
 import { DropdownButtonItem } from '@iqss/dataverse-design-system'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'react-toastify'
 import { useAccessRepository } from '@/sections/access/AccessRepositoryContext'
-import { DownloadWithGuestbookModal } from '@/sections/dataset/dataset-files/files-table/file-actions/file-actions-cell/file-action-buttons/file-options-menu/DownloadWithGuestbookModal'
 import {
   downloadFromSignedUrl,
   EMPTY_GUESTBOOK_RESPONSE,
@@ -12,17 +11,14 @@ import {
 import { FileDownloadMode, FileType } from '../../../../files/domain/models/FileMetadata'
 import type { FileDownloadUrls } from '../../../../files/domain/models/FileMetadata'
 import FileTypeToFriendlyTypeMap from '../../../../files/domain/models/FileTypeToFriendlyTypeMap'
-import { CustomTerms, DatasetLicense } from '@/dataset/domain/models/Dataset'
 
 interface FileTabularDownloadOptionsProps {
   fileId: number
   type: FileType
   ingestInProgress: boolean
   downloadUrls: FileDownloadUrls
-  guestbookId?: number
-  datasetPersistentId?: string
-  datasetLicense?: DatasetLicense
-  datasetCustomTerms?: CustomTerms
+  hasGuestbook: boolean
+  onOpenGuestbookModal: (format: string) => void
   isLockedFromFileDownload: boolean
 }
 
@@ -31,20 +27,13 @@ export function FileTabularDownloadOptions({
   type,
   ingestInProgress,
   downloadUrls,
-  guestbookId,
-  datasetPersistentId,
-  datasetLicense,
-  datasetCustomTerms,
+  hasGuestbook,
+  onOpenGuestbookModal,
   isLockedFromFileDownload
 }: FileTabularDownloadOptionsProps) {
   const { t } = useTranslation('files')
   const accessRepository = useAccessRepository()
   const downloadDisabled = ingestInProgress || isLockedFromFileDownload
-  const hasGuestbook = guestbookId !== undefined
-  const [showDownloadWithGuestbookModal, setShowDownloadWithGuestbookModal] = useState(false)
-  const [selectedDownloadFormat, setSelectedDownloadFormat] = useState<string>(
-    FileDownloadMode.ORIGINAL
-  )
 
   const handleDownloadClick = (event: MouseEvent<HTMLElement>, format: string) => {
     if (downloadDisabled) {
@@ -54,8 +43,7 @@ export function FileTabularDownloadOptions({
     event.preventDefault()
 
     if (hasGuestbook) {
-      setSelectedDownloadFormat(format)
-      setShowDownloadWithGuestbookModal(true)
+      onOpenGuestbookModal(format)
       return
     }
 
@@ -96,18 +84,6 @@ export function FileTabularDownloadOptions({
           {t('actions.accessFileMenu.downloadOptions.options.RData')}
         </DropdownButtonItem>
       )}
-      {hasGuestbook && showDownloadWithGuestbookModal && (
-        <DownloadWithGuestbookModal
-          fileId={fileId}
-          guestbookId={guestbookId}
-          format={selectedDownloadFormat}
-          datasetPersistentId={datasetPersistentId}
-          datasetLicense={datasetLicense}
-          datasetCustomTerms={datasetCustomTerms}
-          show={showDownloadWithGuestbookModal}
-          handleClose={() => setShowDownloadWithGuestbookModal(false)}
-        />
-      )}
     </>
   )
 }