Merge pull request #940 from IQSS/UseCollectionRepository

Avoid prop-drilling for collection repository

Author: rtreacy

CHANGELOG.md

@@ -29,6 +29,7 @@ This changelog follows the principles of [Keep a Changelog](https://keepachangel
 - Renamed dataset template fetch/create use cases and DTOs to `getTemplatesByCollectionId` and `CreateTemplateDTO` for API alignment, and added new `getTemplate` and `deleteTemplate` use cases for retrieving a single template by ID and deleting templates.
 - Added disclaimer text and custom popup text to Publish Dataset modal for better communication of the implications of publishing a dataset. The text can be configured through the runtime configuration.
 - Dataset page Terms tab title now depends on permissions: users with dataset update permission see `Terms and Guestbook`, and read-only users see `Terms`.
+- Avoided prop-drilling for collection repository, so used context to share epository instances.
 
 ### Fixed
 

packages/design-system/tsconfig.json

@@ -11,7 +11,7 @@
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

src/alert/domain/models/Alert.ts

@@ -1,4 +1,7 @@
-import { AlertVariant } from '@iqss/dataverse-design-system/dist/components/alert/AlertVariant'
+import { ComponentProps } from 'react'
+import { Alert as DesignSystemAlert } from '@iqss/dataverse-design-system'
+
+type AlertVariant = ComponentProps<typeof DesignSystemAlert>['variant']
 
 export enum AlertMessageKey {
   DRAFT_VERSION = 'draftVersion',

src/sections/account/Account.tsx

@@ -4,7 +4,6 @@ import { useSearchParams } from 'react-router-dom'
 import { Tabs } from '@iqss/dataverse-design-system'
 import { AccountHelper, AccountPanelTabKey } from './AccountHelper'
 import { UserJSDataverseRepository } from '@/users/infrastructure/repositories/UserJSDataverseRepository'
-import { CollectionRepository } from '@/collection/domain/repositories/CollectionRepository'
 import { NotificationRepository } from '@/notifications/domain/repositories/NotificationRepository'
 import { ApiTokenSection } from './api-token-section/ApiTokenSection'
 import { AccountInfoSection } from './account-info-section/AccountInfoSection'
@@ -19,15 +18,13 @@ const tabsKeys = AccountHelper.ACCOUNT_PANEL_TABS_KEYS
 interface AccountProps {
   defaultActiveTabKey: AccountPanelTabKey
   userRepository: UserJSDataverseRepository
-  collectionRepository: CollectionRepository
   roleRepository: RoleJSDataverseRepository
   notificationRepository: NotificationRepository
 }
 
 export const Account = ({
   defaultActiveTabKey,
   userRepository,
-  collectionRepository,
   roleRepository,
   notificationRepository
 }: AccountProps) => {
@@ -54,10 +51,7 @@ export const Account = ({
       <Tabs activeKey={defaultActiveTabKey} onSelect={updateSearchParamTabKeyOnSelect}>
         <Tabs.Tab eventKey={tabsKeys.myData} title={t('tabs.myData')}>
           <div className={styles['tab-container']}>
-            <MyDataItemsPanel
-              roleRepository={roleRepository}
-              collectionRepository={collectionRepository}
-            />
+            <MyDataItemsPanel roleRepository={roleRepository} />
           </div>
         </Tabs.Tab>
         <Tabs.Tab eventKey={tabsKeys.notifications} title={t('tabs.notifications')}>

src/sections/account/AccountFactory.tsx

@@ -6,6 +6,7 @@ import { UserJSDataverseRepository } from '@/users/infrastructure/repositories/U
 import { CollectionJSDataverseRepository } from '@/collection/infrastructure/repositories/CollectionJSDataverseRepository'
 import { RoleJSDataverseRepository } from '@/roles/infrastructure/repositories/RoleJSDataverseRepository'
 import { NotificationJSDataverseRepository } from '@/notifications/infrastructure/repositories/NotificationJSDataverseRepository'
+import { RepositoriesProvider } from '@/shared/contexts/repositories/RepositoriesProvider'
 
 const userRepository = new UserJSDataverseRepository()
 const collectionRepository = new CollectionJSDataverseRepository()
@@ -23,12 +24,13 @@ function AccountWithSearchParams() {
   const defaultActiveTabKey = AccountHelper.defineSelectedTabKey(searchParams)
 
   return (
-    <Account
-      defaultActiveTabKey={defaultActiveTabKey}
-      userRepository={userRepository}
-      collectionRepository={collectionRepository}
-      roleRepository={roleRepository}
-      notificationRepository={notificationRepository}
-    />
+    <RepositoriesProvider collectionRepository={collectionRepository}>
+      <Account
+        defaultActiveTabKey={defaultActiveTabKey}
+        userRepository={userRepository}
+        roleRepository={roleRepository}
+        notificationRepository={notificationRepository}
+      />
+    </RepositoriesProvider>
   )
 }

src/sections/account/my-data-section/MyDataItemsPanel.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert, Stack } from '@iqss/dataverse-design-system'
-import { CollectionRepository } from '@/collection/domain/repositories/CollectionRepository'
 import { CollectionItemsPaginationInfo } from '@/collection/domain/models/CollectionItemsPaginationInfo'
 import { CollectionItemType } from '@/collection/domain/models/CollectionItemType'
 import {
@@ -22,9 +21,9 @@ import { UserNameSearch } from '@/sections/account/my-data-section/user-name-sea
 import styles from './MyDataItemsPanel.module.scss'
 import { RoleRepository } from '@/roles/domain/repositories/RoleRepository'
 import { useSelectableRoles } from '@/sections/account/my-data-section/useSelectableRoles'
+import { useCollectionRepositories } from '@/shared/contexts/repositories/RepositoriesProvider'
 
 interface MyDataItemsPanelProps {
-  collectionRepository: CollectionRepository
   roleRepository: RoleRepository
 }
 
@@ -37,10 +36,8 @@ interface MyDataItemsPanelProps {
  * 4. When the user changes the item types, roles or publication statuses in the filter panel
  */
 
-export const MyDataItemsPanel = ({
-  collectionRepository,
-  roleRepository
-}: MyDataItemsPanelProps) => {
+export const MyDataItemsPanel = ({ roleRepository }: MyDataItemsPanelProps) => {
+  const { collectionRepository } = useCollectionRepositories()
   const { user } = useSession()
   const { t } = useTranslation('account')
   const [roleIds, setRoleIds] = useState<number[]>([])

src/sections/advanced-search/AdvancedSearch.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert } from '@iqss/dataverse-design-system'
-import { CollectionRepository } from '@/collection/domain/repositories/CollectionRepository'
 import { MetadataBlockInfoRepository } from '@/metadata-block-info/domain/repositories/MetadataBlockInfoRepository'
 import { useGetCollectionMetadataBlocksInfo } from '@/shared/hooks/useGetCollectionMetadataBlocksInfo'
 import { useCollection } from '../collection/useCollection'
@@ -16,20 +15,20 @@ import {
 } from './advanced-search-form/AdvancedSearchForm'
 import { MetadataFieldsHelper } from '../shared/form/DatasetMetadataForm/MetadataFieldsHelper'
 import { AdvancedSearchHelper } from './AdvancedSearchHelper'
+import { useCollectionRepositories } from '@/shared/contexts/repositories/RepositoriesProvider'
 
 interface AdvancedSearchProps {
   collectionId: string
-  collectionRepository: CollectionRepository
   metadataBlockInfoRepository: MetadataBlockInfoRepository
   collectionFilterQueries?: string
 }
 
 export const AdvancedSearch = ({
   collectionId,
-  collectionRepository,
   metadataBlockInfoRepository,
   collectionFilterQueries
 }: AdvancedSearchProps) => {
+  const { collectionRepository } = useCollectionRepositories()
   const { t } = useTranslation('advancedSearch')
   const { setIsLoading } = useLoading()
   const [previousAdvancedSearchFormData, setPreviousAdvancedSearchFormData] =

src/sections/advanced-search/AdvancedSearchFactory.tsx

@@ -4,6 +4,7 @@ import { CollectionJSDataverseRepository } from '@/collection/infrastructure/rep
 import { MetadataBlockInfoJSDataverseRepository } from '@/metadata-block-info/infrastructure/repositories/MetadataBlockInfoJSDataverseRepository'
 import { CollectionItemsQueryParams } from '@/collection/domain/models/CollectionItemsQueryParams'
 import { AdvancedSearch } from './AdvancedSearch'
+import { RepositoriesProvider } from '@/shared/contexts/repositories/RepositoriesProvider'
 
 const collectionRepository = new CollectionJSDataverseRepository()
 const metadataBlockInfoRepository = new MetadataBlockInfoJSDataverseRepository()
@@ -23,11 +24,12 @@ function AdvancedSearchWithSearchParams() {
     searchParams.get(CollectionItemsQueryParams.FILTER_QUERIES) ?? undefined
 
   return (
-    <AdvancedSearch
-      collectionId={collectionId}
-      collectionRepository={collectionRepository}
-      metadataBlockInfoRepository={metadataBlockInfoRepository}
-      collectionFilterQueries={collectionPageCurrentFilterQueries}
-    />
+    <RepositoriesProvider collectionRepository={collectionRepository}>
+      <AdvancedSearch
+        collectionId={collectionId}
+        metadataBlockInfoRepository={metadataBlockInfoRepository}
+        collectionFilterQueries={collectionPageCurrentFilterQueries}
+      />
+    </RepositoriesProvider>
   )
 }

src/sections/collection/Collection.tsx

@@ -1,5 +1,4 @@
 import { ButtonGroup, Col, Row } from '@iqss/dataverse-design-system'
-import { CollectionRepository } from '../../collection/domain/repositories/CollectionRepository'
 import { useCollection } from './useCollection'
 import { useScrollTop } from '../../shared/hooks/useScrollTop'
 import { useGetCollectionUserPermissions } from '../../shared/hooks/useGetCollectionUserPermissions'
@@ -23,10 +22,10 @@ import { ContactRepository } from '@/contact/domain/repositories/ContactReposito
 import { NotFoundPage } from '../not-found-page/NotFoundPage'
 import { LinkCollectionDropdown } from './link-collection-dropdown/LinkCollectionDropdown'
 import { useSession } from '../session/SessionContext'
+import { useCollectionRepositories } from '@/shared/contexts/repositories/RepositoriesProvider'
 import styles from './Collection.module.scss'
 
 interface CollectionProps {
-  collectionRepository: CollectionRepository
   collectionIdFromParams: string | undefined
   created: boolean
   collectionQueryParams: UseCollectionQueryParamsReturnType
@@ -37,12 +36,12 @@ interface CollectionProps {
 
 export function Collection({
   collectionIdFromParams,
-  collectionRepository,
   created,
   collectionQueryParams,
   contactRepository,
   accountCreated
 }: CollectionProps) {
+  const { collectionRepository } = useCollectionRepositories()
   useScrollTop()
   const { previousPath } = useHistoryTracker()
   const previousPathIsHomepage = previousPath === Route.HOME
@@ -91,7 +90,6 @@ export function Collection({
               collection.hierarchy
             ) ? /* istanbul ignore next */ null : (
               <FeaturedItems
-                collectionRepository={collectionRepository}
                 collectionId={collection.id}
                 className={styles['featured-items-spacing']}
                 withLoadingSkeleton={false}
@@ -125,15 +123,13 @@ export function Collection({
                         <LinkCollectionDropdown
                           collectionId={collection.id}
                           collectionName={collection.name}
-                          collectionRepository={collectionRepository}
                         />
                       )}
 
                     {canUserEditCollection && (
                       <EditCollectionDropdown
                         collection={collection}
                         canUserDeleteCollection={canUserDeleteCollection}
-                        collectionRepository={collectionRepository}
                       />
                     )}
                   </ButtonGroup>
@@ -144,7 +140,6 @@ export function Collection({
             <CollectionItemsPanel
               key={collection.id}
               collectionId={collection.id}
-              collectionRepository={collectionRepository}
               collectionQueryParams={collectionQueryParams}
               addDataSlot={
                 showAddDataActions ? (

src/sections/collection/CollectionFactory.tsx

@@ -6,6 +6,7 @@ import { Collection } from './Collection'
 import { INFINITE_SCROLL_ENABLED } from './config'
 import { useGetCollectionQueryParams } from './useGetCollectionQueryParams'
 import { ACCOUNT_CREATED_SESSION_STORAGE_KEY } from './AccountCreatedAlert'
+import { RepositoriesProvider } from '@/shared/contexts/repositories/RepositoriesProvider'
 
 const collectionRepository = new CollectionJSDataverseRepository()
 const contactRepository = new ContactJSDataverseRepository()
@@ -31,14 +32,15 @@ function CollectionWithSearchParams() {
     Boolean(sessionStorage.getItem(ACCOUNT_CREATED_SESSION_STORAGE_KEY)) ?? false
 
   return (
-    <Collection
-      collectionRepository={collectionRepository}
-      collectionIdFromParams={collectionId}
-      created={created}
-      collectionQueryParams={collectionQueryParams}
-      accountCreated={accountCreated}
-      infiniteScrollEnabled={INFINITE_SCROLL_ENABLED}
-      contactRepository={contactRepository}
-    />
+    <RepositoriesProvider collectionRepository={collectionRepository}>
+      <Collection
+        collectionIdFromParams={collectionId}
+        created={created}
+        collectionQueryParams={collectionQueryParams}
+        accountCreated={accountCreated}
+        infiniteScrollEnabled={INFINITE_SCROLL_ENABLED}
+        contactRepository={contactRepository}
+      />
+    </RepositoriesProvider>
   )
 }