Avoid props drilling multiple repositories

.storybook/preview.tsx

@@ -5,6 +5,7 @@ import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router-d
 import { FakerHelper } from '../tests/component/shared/FakerHelper'
 import { ExternalToolsProvider } from '../src/shared/contexts/external-tools/ExternalToolsProvider'
 import { ExternalToolsEmptyMockRepository } from '../src/stories/shared-mock-repositories/externalTools/ExternalToolsMockRepository'
+import { RepositoriesStoryProvider } from '../src/stories/WithRepositories'
 import 'react-loading-skeleton/dist/skeleton.css'
 import '../src/assets/global.scss'
 import '../src/assets/swal-custom.scss'
@@ -40,9 +41,12 @@ const preview: Preview = {
 
       return (
         <ThemeProvider>
-          <ExternalToolsProvider externalToolsRepository={new ExternalToolsEmptyMockRepository()}>
-            <RouterProvider router={browserRouter} />
-          </ExternalToolsProvider>
+          <RepositoriesStoryProvider
+            externalToolsRepository={new ExternalToolsEmptyMockRepository()}>
+            <ExternalToolsProvider>
+              <RouterProvider router={browserRouter} />
+            </ExternalToolsProvider>
+          </RepositoriesStoryProvider>
         </ThemeProvider>
       )
     }

CHANGELOG.md

@@ -12,6 +12,8 @@ This changelog follows the principles of [Keep a Changelog](https://keepachangel
 
 ### Changed
 
+- Avoided prop-drilling for file, guestbook, user and external tool repository, so used context to share epository instances.
+
 ### Fixed
 
 ### Removed

src/App.tsx

@@ -8,6 +8,9 @@ import { ExternalToolsJSDataverseRepository } from './externalTools/infrastructu
 import { RepositoriesProvider } from './shared/contexts/repositories/RepositoriesProvider'
 import { CollectionJSDataverseRepository } from './collection/infrastructure/repositories/CollectionJSDataverseRepository'
 import { DatasetJSDataverseRepository } from './dataset/infrastructure/repositories/DatasetJSDataverseRepository'
+import { FileJSDataverseRepository } from './files/infrastructure/FileJSDataverseRepository'
+import { GuestbookJSDataverseRepository } from './guestbooks/infrastructure/repositories/GuestbookJSDataverseRepository'
+import { UserJSDataverseRepository } from './users/infrastructure/repositories/UserJSDataverseRepository'
 import 'react-loading-skeleton/dist/skeleton.css'
 import './assets/global.scss'
 import './assets/react-toastify-custom.scss'
@@ -16,6 +19,9 @@ import './assets/swal-custom.scss'
 const externalToolsRepository = new ExternalToolsJSDataverseRepository()
 const collectionRepository = new CollectionJSDataverseRepository()
 const datasetRepository = new DatasetJSDataverseRepository()
+const fileRepository = new FileJSDataverseRepository()
+const guestbookRepository = new GuestbookJSDataverseRepository()
+const userRepository = new UserJSDataverseRepository()
 
 function App() {
   const appConfig = requireAppConfig()
@@ -38,13 +44,17 @@ function App() {
   return (
     <>
       <AuthProvider authConfig={authConfig}>
-        <ExternalToolsProvider externalToolsRepository={externalToolsRepository}>
-          <RepositoriesProvider
-            collectionRepository={collectionRepository}
-            datasetRepository={datasetRepository}>
+        <RepositoriesProvider
+          collectionRepository={collectionRepository}
+          datasetRepository={datasetRepository}
+          externalToolsRepository={externalToolsRepository}
+          fileRepository={fileRepository}
+          guestbookRepository={guestbookRepository}
+          userRepository={userRepository}>
+          <ExternalToolsProvider>
             <Router />
-          </RepositoriesProvider>
-        </ExternalToolsProvider>
+          </ExternalToolsProvider>
+        </RepositoriesProvider>
       </AuthProvider>
       <ToastContainer position="top-right" autoClose={5000} pauseOnHover />
     </>

src/router/routes.tsx

@@ -1,6 +1,5 @@
 import { lazy, Suspense } from 'react'
 import { Navigate, RouteObject } from 'react-router-dom'
-import { UserJSDataverseRepository } from '@/users/infrastructure/repositories/UserJSDataverseRepository'
 import { Route } from '@/sections/Route.enum'
 import { Layout } from '@/sections/layout/Layout'
 import { ErrorPage } from '@/sections/error-page/ErrorPage'
@@ -9,8 +8,6 @@ import { AuthCallback } from '@/sections/auth-callback/AuthCallback'
 import { SessionProvider } from '@/sections/session/SessionProvider'
 import { ProtectedRoute } from './ProtectedRoute'
 
-const userRepository = new UserJSDataverseRepository()
-
 const Homepage = lazy(() =>
   import('../sections/homepage/HomepageFactory').then(({ HomepageFactory }) => ({
     default: () => HomepageFactory.create()
@@ -155,7 +152,7 @@ const AdvancedSearchPage = lazy(() =>
 
 export const routes: RouteObject[] = [
   {
-    element: <SessionProvider repository={userRepository} />,
+    element: <SessionProvider />,
     children: [
       {
         path: '/',

src/sections/account/Account.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 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 { NotificationRepository } from '@/notifications/domain/repositories/NotificationRepository'
 import { ApiTokenSection } from './api-token-section/ApiTokenSection'
 import { AccountInfoSection } from './account-info-section/AccountInfoSection'
@@ -17,14 +16,12 @@ const tabsKeys = AccountHelper.ACCOUNT_PANEL_TABS_KEYS
 
 interface AccountProps {
   defaultActiveTabKey: AccountPanelTabKey
-  userRepository: UserJSDataverseRepository
   roleRepository: RoleJSDataverseRepository
   notificationRepository: NotificationRepository
 }
 
 export const Account = ({
   defaultActiveTabKey,
-  userRepository,
   roleRepository,
   notificationRepository
 }: AccountProps) => {
@@ -66,7 +63,7 @@ export const Account = ({
         </Tabs.Tab>
         <Tabs.Tab eventKey={tabsKeys.apiToken} title={t('tabs.apiToken')}>
           <div className={styles['tab-container']}>
-            <ApiTokenSection repository={userRepository} />
+            <ApiTokenSection />
           </div>
         </Tabs.Tab>
       </Tabs>

src/sections/account/AccountFactory.tsx

@@ -2,11 +2,9 @@ import { ReactElement } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { AccountHelper } from './AccountHelper'
 import { Account } from './Account'
-import { UserJSDataverseRepository } from '@/users/infrastructure/repositories/UserJSDataverseRepository'
 import { RoleJSDataverseRepository } from '@/roles/infrastructure/repositories/RoleJSDataverseRepository'
 import { NotificationJSDataverseRepository } from '@/notifications/infrastructure/repositories/NotificationJSDataverseRepository'
 
-const userRepository = new UserJSDataverseRepository()
 const roleRepository = new RoleJSDataverseRepository()
 const notificationRepository = new NotificationJSDataverseRepository()
 
@@ -23,7 +21,6 @@ function AccountWithSearchParams() {
   return (
     <Account
       defaultActiveTabKey={defaultActiveTabKey}
-      userRepository={userRepository}
       roleRepository={roleRepository}
       notificationRepository={notificationRepository}
     />

src/sections/account/api-token-section/ApiTokenSection.tsx

@@ -7,21 +7,18 @@ import { useRevokeApiToken } from './useRevokeApiToken'
 import { ApiTokenSectionSkeleton } from './ApiTokenSectionSkeleton'
 import { TokenInfo } from '@/users/domain/models/TokenInfo'
 import { DateHelper } from '@/shared/helpers/DateHelper'
-import { UserRepository } from '@/users/domain/repositories/UserRepository'
 import { Button } from '@iqss/dataverse-design-system'
 import { Alert } from '@iqss/dataverse-design-system'
+import { useUserRepositories } from '@/shared/contexts/repositories/RepositoriesProvider'
 import accountStyles from '../Account.module.scss'
 import styles from './ApiTokenSection.module.scss'
 
-interface ApiTokenSectionProps {
-  repository: UserRepository
-}
-
-export const ApiTokenSection = ({ repository }: ApiTokenSectionProps) => {
+export const ApiTokenSection = () => {
+  const { userRepository } = useUserRepositories()
   const { t } = useTranslation('account', { keyPrefix: 'apiToken' })
   const [currentApiTokenInfo, setCurrentApiTokenInfo] = useState<TokenInfo>()
 
-  const { error: getError, apiTokenInfo, isLoading } = useGetApiToken(repository)
+  const { error: getError, apiTokenInfo, isLoading } = useGetApiToken(userRepository)
 
   useEffect(() => {
     setCurrentApiTokenInfo(apiTokenInfo)
@@ -32,7 +29,7 @@ export const ApiTokenSection = ({ repository }: ApiTokenSectionProps) => {
     isRecreating,
     error: recreatingError,
     apiTokenInfo: updatedTokenInfo
-  } = useRecreateApiToken(repository)
+  } = useRecreateApiToken(userRepository)
 
   useEffect(() => {
     if (updatedTokenInfo) {
@@ -44,7 +41,7 @@ export const ApiTokenSection = ({ repository }: ApiTokenSectionProps) => {
     void recreateToken()
   }
 
-  const { revokeToken, isRevoking, error: revokingError } = useRevokeApiToken(repository)
+  const { revokeToken, isRevoking, error: revokingError } = useRevokeApiToken(userRepository)
 
   const handleRevokeToken = async () => {
     await revokeToken()

src/sections/collection/Collection.tsx

@@ -22,7 +22,7 @@ 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 { useRepositories } from '@/shared/contexts/repositories/RepositoriesProvider'
 import styles from './Collection.module.scss'
 
 interface CollectionProps {
@@ -41,7 +41,7 @@ export function Collection({
   contactRepository,
   accountCreated
 }: CollectionProps) {
-  const { collectionRepository } = useCollectionRepositories()
+  const { collectionRepository } = useRepositories()
   useScrollTop()
   const { previousPath } = useHistoryTracker()
   const previousPathIsHomepage = previousPath === Route.HOME

src/sections/dataset/Dataset.tsx

@@ -11,7 +11,6 @@ import { DatasetMetadata } from './dataset-metadata/DatasetMetadata'
 import { DatasetSummary } from './dataset-summary/DatasetSummary'
 import { DatasetCitation } from './dataset-citation/DatasetCitation'
 import { DatasetFiles } from './dataset-files/DatasetFiles'
-import { FileRepository } from '../../files/domain/repositories/FileRepository'
 import { DatasetActionButtons } from './dataset-action-buttons/DatasetActionButtons'
 import { useDataset } from './DatasetContext'
 import { useNotImplementedModal } from '../not-implemented/NotImplementedModalContext'
@@ -34,7 +33,6 @@ import { useAnonymized } from './anonymized/AnonymizedContext'
 import { useDatasetRepositories } from '@/shared/contexts/repositories/RepositoriesProvider'
 
 interface DatasetProps {
-  fileRepository: FileRepository
   metadataBlockInfoRepository: MetadataBlockInfoRepository
   contactRepository: ContactRepository
   dataverseInfoRepository: DataverseInfoRepository
@@ -44,7 +42,6 @@ interface DatasetProps {
 }
 
 export function Dataset({
-  fileRepository,
   metadataBlockInfoRepository,
   contactRepository,
   dataverseInfoRepository,
@@ -173,15 +170,13 @@ export function Dataset({
                 <div className={styles['tab-container']}>
                   {filesTabInfiniteScrollEnabled ? (
                     <DatasetFilesScrollable
-                      filesRepository={fileRepository}
                       datasetPersistentId={dataset.persistentId}
                       datasetVersion={dataset.version}
                       canUpdateDataset={canUpdateDataset}
                       key={dataset.version.publishingStatus}
                     />
                   ) : (
                     <DatasetFiles
-                      filesRepository={fileRepository}
                       datasetPersistentId={dataset.persistentId}
                       datasetVersion={dataset.version}
                     />
@@ -205,7 +200,6 @@ export function Dataset({
                   <DatasetTerms
                     license={dataset.license}
                     termsOfUse={dataset.termsOfUse}
-                    filesRepository={fileRepository}
                     datasetPersistentId={dataset.persistentId}
                     datasetVersion={dataset.version}
                     canUpdateDataset={canUpdateDataset}

src/sections/dataset/DatasetFactory.tsx

@@ -19,35 +19,30 @@ import { FILES_TAB_INFINITE_SCROLL_ENABLED } from './config'
 import { ContactJSDataverseRepository } from '@/contact/infrastructure/ContactJSDataverseRepository'
 import { AccessJSDataverseRepository } from '@/access/infrastructure/repositories/AccessJSDataverseRepository'
 import { AccessRepositoryProvider } from '../access/AccessRepositoryProvider'
-import { GuestbookJSDataverseRepository } from '@/guestbooks/infrastructure/repositories/GuestbookJSDataverseRepository'
-import { GuestbookRepositoryProvider } from '../guestbooks/GuestbookRepositoryProvider'
 
 const datasetRepository = new DatasetJSDataverseRepository()
 const fileRepository = new FileJSDataverseRepository()
 const metadataBlockInfoRepository = new MetadataBlockInfoJSDataverseRepository()
 const contactRepository = new ContactJSDataverseRepository()
 const dataverseInfoRepository = new DataverseInfoJSDataverseRepository()
 const accessRepository = new AccessJSDataverseRepository()
-const guestbookRepository = new GuestbookJSDataverseRepository()
 
 export class DatasetFactory {
   static create(): ReactElement {
     return (
-      <GuestbookRepositoryProvider repository={guestbookRepository}>
-        <AccessRepositoryProvider repository={accessRepository}>
-          <MultipleFileDownloadProvider repository={fileRepository}>
-            <SettingsProvider dataverseInfoRepository={dataverseInfoRepository}>
-              <NotImplementedModalProvider>
-                <AnonymizedProvider>
-                  <AlertProvider>
-                    <DatasetWithSearchParams />
-                  </AlertProvider>
-                </AnonymizedProvider>
-              </NotImplementedModalProvider>
-            </SettingsProvider>
-          </MultipleFileDownloadProvider>
-        </AccessRepositoryProvider>
-      </GuestbookRepositoryProvider>
+      <AccessRepositoryProvider repository={accessRepository}>
+        <MultipleFileDownloadProvider repository={fileRepository}>
+          <SettingsProvider dataverseInfoRepository={dataverseInfoRepository}>
+            <NotImplementedModalProvider>
+              <AnonymizedProvider>
+                <AlertProvider>
+                  <DatasetWithSearchParams />
+                </AlertProvider>
+              </AnonymizedProvider>
+            </NotImplementedModalProvider>
+          </SettingsProvider>
+        </MultipleFileDownloadProvider>
+      </AccessRepositoryProvider>
     )
   }
 }
@@ -82,7 +77,6 @@ function DatasetWithSearchParams() {
         searchParams={{ privateUrlToken: privateUrlToken }}
         isPublishing={publishInProgress}>
         <Dataset
-          fileRepository={fileRepository}
           metadataBlockInfoRepository={metadataBlockInfoRepository}
           contactRepository={contactRepository}
           filesTabInfiniteScrollEnabled={FILES_TAB_INFINITE_SCROLL_ENABLED}
@@ -99,7 +93,6 @@ function DatasetWithSearchParams() {
       searchParams={{ persistentId: persistentId, version: version }}
       isPublishing={publishInProgress}>
       <Dataset
-        fileRepository={fileRepository}
         metadataBlockInfoRepository={metadataBlockInfoRepository}
         contactRepository={contactRepository}
         publishInProgress={publishInProgress}

src/sections/dataset/dataset-action-buttons/DatasetToolsOptions.tsx

@@ -5,7 +5,7 @@ import { BarChartFill as BarChartFillIcon, GearFill } from 'react-bootstrap-icon
 import { DropdownButtonItem, DropdownHeader } from '@iqss/dataverse-design-system'
 import { useExternalTools } from '@/shared/contexts/external-tools/ExternalToolsProvider'
 import { getDatasetExternalToolResolved } from '@/externalTools/domain/useCases/GetDatasetExternalToolResolved'
-import { ExternalToolsRepository } from '@/externalTools/domain/repositories/ExternalToolsRepository'
+import { useExternalToolsRepositories } from '@/shared/contexts/repositories/RepositoriesProvider'
 
 type ToolKind = 'explore' | 'configure'
 
@@ -16,7 +16,7 @@ interface DatasetToolOptionsProps {
 
 const DatasetToolOptions = ({ persistentId, kind }: DatasetToolOptionsProps) => {
   const { t } = useTranslation('shared')
-  const { datasetExploreTools, datasetConfigureTools, externalToolsRepository } = useExternalTools()
+  const { datasetExploreTools, datasetConfigureTools } = useExternalTools()
 
   const tools = kind === 'explore' ? datasetExploreTools : datasetConfigureTools
   if (!tools || tools.length === 0) return null
@@ -35,7 +35,6 @@ const DatasetToolOptions = ({ persistentId, kind }: DatasetToolOptionsProps) =>
         <ToolOption
           toolId={tool.id}
           toolDisplayName={tool.displayName}
-          externalToolsRepository={externalToolsRepository}
           persistentId={persistentId}
           key={tool.id}
         />
@@ -48,15 +47,10 @@ interface ToolOptionProps {
   toolId: number
   toolDisplayName: string
   persistentId: string
-  externalToolsRepository: ExternalToolsRepository
 }
 
-const ToolOption = ({
-  toolId,
-  toolDisplayName,
-  persistentId,
-  externalToolsRepository
-}: ToolOptionProps) => {
+const ToolOption = ({ toolId, toolDisplayName, persistentId }: ToolOptionProps) => {
+  const { externalToolsRepository } = useExternalToolsRepositories()
   const [isOpening, setIsOpening] = useState(false)
   const { t, i18n } = useTranslation('shared')
   const openingRef = useRef(false)