feat(CollectionPage): change Home to Collection Page

Author: MellyGray

public/locales/en/home.json public/locales/en/collection.jsonpublic/locales/en/home.json renamed to public/locales/en/collection.json

@@ -1,5 +1,4 @@
 {
-  "title": "Root",
   "noDatasetsMessage": {
     "authenticated": "This dataverse currently has no datasets. You can add to it by using the Add Data button on this page.",
     "anonymous": "This dataverse currently has no datasets. Please <1>log in</1> to see if you are able to add to it."

src/Router.tsx

@@ -5,7 +5,7 @@ import { DatasetFactory } from './sections/dataset/DatasetFactory'
 import { PageNotFound } from './sections/page-not-found/PageNotFound'
 import { CreateDatasetFactory } from './sections/create-dataset/CreateDatasetFactory'
 import { FileFactory } from './sections/file/FileFactory'
-import { HomeFactory } from './sections/home/HomeFactory'
+import { CollectionFactory } from './sections/collection/CollectionFactory'
 import { DatasetNonNumericVersion } from './dataset/domain/models/Dataset'
 
 const router = createBrowserRouter(
@@ -17,7 +17,11 @@ const router = createBrowserRouter(
       children: [
         {
           path: Route.HOME,
-          element: HomeFactory.create()
+          element: CollectionFactory.create()
+        },
+        {
+          path: Route.COLLECTIONS,
+          element: CollectionFactory.create()
         },
         {
           path: Route.DATASETS,

src/sections/home/Home.tsx src/sections/collection/Collection.tsxsrc/sections/home/Home.tsx renamed to src/sections/collection/Collection.tsx

@@ -1,5 +1,4 @@
 import { Row } from '@iqss/dataverse-design-system'
-import { useTranslation } from 'react-i18next'
 import { DatasetRepository } from '../../dataset/domain/repositories/DatasetRepository'
 import { DatasetsList } from './datasets-list/DatasetsList'
 import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
@@ -8,23 +7,34 @@ import {
   UpwardHierarchyNode
 } from '../../shared/hierarchy/domain/models/UpwardHierarchyNode'
 
-interface HomeProps {
+interface CollectionProps {
   datasetRepository: DatasetRepository
+  id: string
   page?: number
 }
-
-export function Home({ datasetRepository, page }: HomeProps) {
-  const { t } = useTranslation('home')
-
+const rootNode = new UpwardHierarchyNode('Root', DvObjectType.COLLECTION, 'root', undefined)
+export function Collection({ datasetRepository, id, page }: CollectionProps) {
   return (
     <Row>
       <BreadcrumbsGenerator
-        hierarchy={new UpwardHierarchyNode('Root', DvObjectType.COLLECTION, undefined, undefined)}
+        hierarchy={
+          new UpwardHierarchyNode(
+            capitalizeFirstLetter(id),
+            DvObjectType.COLLECTION,
+            id,
+            undefined,
+            id !== rootNode.id ? rootNode : undefined
+          )
+        }
       />
       <header>
-        <h1>{t('title')}</h1>
+        <h1>{capitalizeFirstLetter(id)}</h1>
       </header>
       <DatasetsList datasetRepository={datasetRepository} page={page} />
     </Row>
   )
 }
+
+function capitalizeFirstLetter(text: string): string {
+  return text.charAt(0).toUpperCase() + text.slice(1)
+}

src/sections/home/HomeFactory.tsx …ections/collection/CollectionFactory.tsxsrc/sections/home/HomeFactory.tsx renamed to src/sections/collection/CollectionFactory.tsx src/sections/home/HomeFactory.tsx renamed to src/sections/collection/CollectionFactory.tsx

@@ -1,18 +1,19 @@
 import { ReactElement } from 'react'
-import { Home } from './Home'
+import { Collection } from './Collection'
 import { DatasetJSDataverseRepository } from '../../dataset/infrastructure/repositories/DatasetJSDataverseRepository'
 import { useSearchParams } from 'react-router-dom'
 
 const datasetRepository = new DatasetJSDataverseRepository()
-export class HomeFactory {
+export class CollectionFactory {
   static create(): ReactElement {
-    return <HomeWithSearchParams />
+    return <CollectionWithSearchParams />
   }
 }
 
-function HomeWithSearchParams() {
+function CollectionWithSearchParams() {
   const [searchParams] = useSearchParams()
   const page = searchParams.get('page') ? parseInt(searchParams.get('page') as string) : undefined
+  const id = searchParams.get('id') ? (searchParams.get('id') as string) : 'root'
 
-  return <Home datasetRepository={datasetRepository} page={page} />
+  return <Collection datasetRepository={datasetRepository} page={page} id={id} />
 }

…e/datasets-list/DatasetsList.module.scss …n/datasets-list/DatasetsList.module.scsssrc/sections/home/datasets-list/DatasetsList.module.scss renamed to src/sections/collection/datasets-list/DatasetsList.module.scss src/sections/home/datasets-list/DatasetsList.module.scss renamed to src/sections/collection/datasets-list/DatasetsList.module.scss

@@ -4,7 +4,7 @@ import { useSession } from '../../session/SessionContext'
 import { Route } from '../../Route.enum'
 
 export function NoDatasetsMessage() {
-  const { t } = useTranslation('home')
+  const { t } = useTranslation('collection')
   const { user } = useSession()
 
   return (