Merge pull request IQSS#237 from IQSS/feature/229-basic-home-page-wit…

…h-the-list-of-datasets

229 - Basic home page with the list of datasets

.storybook/preview.tsx

@@ -1,5 +1,6 @@
 import type { Preview } from '@storybook/react'
 import { ThemeProvider } from '@iqss/dataverse-design-system'
+import { MemoryRouter } from 'react-router-dom'
 
 const preview: Preview = {
   parameters: {
@@ -14,7 +15,9 @@ const preview: Preview = {
   decorators: [
     (Story) => (
       <ThemeProvider>
-        <Story />
+        <MemoryRouter>
+          <Story />
+        </MemoryRouter>
       </ThemeProvider>
     )
   ]

merged-coverage/lcov.info

@@ -7,7 +7,7 @@ DA:5,108
 BRDA:1,0,0,108
 BRDA:1,0,1,108
 end_of_record
-SF:src/sections/hello-dataverse/HelloDataverse.tsx
+SF:src/sections/hello-dataverse/Home.tsx
 DA:5,76
 DA:6,76
 DA:8,38

public/locales/en/files.json

@@ -8,9 +8,6 @@
       "clearSelection": "Clear selection."
     },
     "zipDownloadExceedsLimit": "The overall size of the files selected ({{selectionTotalSize}}) for download exceeds the zip limit of {{zipDownloadSizeLimit}}. Please unselect some files to continue.",
-    "pagination": {
-      "pageSize": "Files per page"
-    },
     "tabularData": {
       "name": "Tabular Data",
       "variables": "Variables",

public/locales/en/home.json

@@ -0,0 +1,7 @@
+{
+  "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."
+  }
+}

public/locales/en/pagination.json

@@ -0,0 +1,4 @@
+{
+  "results": "{{start}} to {{end}} of {{total}} {{item}}s",
+  "pageSize": "{{item}}s per page"
+}

src/Router.tsx

@@ -1,8 +1,8 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
-import { HelloDataverse } from './sections/hello-dataverse/HelloDataverse'
 import { Layout } from './sections/layout/Layout'
 import { Route } from './sections/Route.enum'
 import { DatasetFactory } from './sections/dataset/DatasetFactory'
+import { HomeFactory } from './sections/home/HomeFactory'
 
 const router = createBrowserRouter(
   [
@@ -12,7 +12,7 @@ const router = createBrowserRouter(
       children: [
         {
           path: Route.HOME,
-          element: <HelloDataverse />
+          element: HomeFactory.create()
         },
         {
           path: `${Route.DATASETS}`,

src/dataset/domain/models/Dataset.ts

@@ -291,7 +291,7 @@ export class Dataset {
     public readonly privateUrl?: PrivateUrl
   ) {}
 
-  public getTitle(): string {
+  public get title(): string {
     return this.metadataBlocks[0].fields.title
   }
 

src/dataset/domain/models/DatasetPaginationInfo.ts

@@ -0,0 +1,7 @@
+import { PaginationInfo } from '../../../shared/domain/models/PaginationInfo'
+
+export class DatasetPaginationInfo extends PaginationInfo<DatasetPaginationInfo> {
+  constructor(page = 1, pageSize = 10, totalItems = 0, itemName = 'Dataset') {
+    super(page, pageSize, totalItems, itemName)
+  }
+}

src/dataset/domain/models/DatasetPreview.ts

@@ -0,0 +1,22 @@
+import { DatasetLabel, DatasetVersion } from './Dataset'
+
+export class DatasetPreview {
+  constructor(
+    public persistentId: string,
+    public title: string,
+    public version: DatasetVersion,
+    public citation: string,
+    public labels: DatasetLabel[],
+    public isDeaccessioned: boolean,
+    public releaseOrCreateDate: Date,
+    public description: string,
+    public thumbnail?: string
+  ) {}
+
+  get abbreviatedDescription(): string {
+    if (this.description.length > 280) {
+      return `${this.description.substring(0, 280)}...`
+    }
+    return this.description
+  }
+}

src/dataset/domain/models/TotalDatasetsCount.ts

@@ -0,0 +1 @@
+export type TotalDatasetsCount = number

src/dataset/domain/repositories/DatasetRepository.ts

@@ -1,6 +1,11 @@
 import { Dataset } from '../models/Dataset'
+import { TotalDatasetsCount } from '../models/TotalDatasetsCount'
+import { DatasetPaginationInfo } from '../models/DatasetPaginationInfo'
+import { DatasetPreview } from '../models/DatasetPreview'
 
 export interface DatasetRepository {
   getByPersistentId: (persistentId: string, version?: string) => Promise<Dataset | undefined>
   getByPrivateUrlToken: (privateUrlToken: string) => Promise<Dataset | undefined>
+  getAll: (paginationInfo: DatasetPaginationInfo) => Promise<DatasetPreview[]>
+  getTotalDatasetsCount: () => Promise<TotalDatasetsCount>
 }

src/dataset/domain/useCases/getDatasets.ts

@@ -0,0 +1,12 @@
+import { DatasetRepository } from '../repositories/DatasetRepository'
+import { DatasetPaginationInfo } from '../models/DatasetPaginationInfo'
+import { DatasetPreview } from '../models/DatasetPreview'
+
+export async function getDatasets(
+  datasetRepository: DatasetRepository,
+  paginationInfo: DatasetPaginationInfo
+): Promise<DatasetPreview[]> {
+  return datasetRepository.getAll(paginationInfo).catch((error: Error) => {
+    throw new Error(error.message)
+  })
+}

src/dataset/domain/useCases/getTotalDatasetsCount.ts

@@ -0,0 +1,10 @@
+import { DatasetRepository } from '../repositories/DatasetRepository'
+import { TotalDatasetsCount } from '../models/TotalDatasetsCount'
+
+export async function getTotalDatasetsCount(
+  datasetRepository: DatasetRepository
+): Promise<TotalDatasetsCount> {
+  return datasetRepository.getTotalDatasetsCount().catch((error: Error) => {
+    throw new Error(error.message)
+  })
+}

src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts

@@ -16,9 +16,32 @@ import {
   FileDownloadSizeMode
 } from '@iqss/dataverse-client-javascript'
 import { JSDatasetMapper } from '../mappers/JSDatasetMapper'
+import { TotalDatasetsCount } from '../../domain/models/TotalDatasetsCount'
+import { DatasetPaginationInfo } from '../../domain/models/DatasetPaginationInfo'
+import { DatasetPreview } from '../../domain/models/DatasetPreview'
+import { DatasetPreviewMother } from '../../../../tests/component/dataset/domain/models/DatasetPreviewMother'
 
 const includeDeaccessioned = true
 export class DatasetJSDataverseRepository implements DatasetRepository {
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  getAll(paginationInfo: DatasetPaginationInfo): Promise<DatasetPreview[]> {
+    // TODO - Implement using the js-dataverse-client
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(DatasetPreviewMother.createManyRealistic(10))
+      }, 1000)
+    })
+  }
+
+  getTotalDatasetsCount(): Promise<TotalDatasetsCount> {
+    // TODO - Implement using the js-dataverse-client
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(200)
+      }, 1000)
+    })
+  }
+
   getByPersistentId(
     persistentId: string,
     version?: string,

src/files/domain/models/FilePaginationInfo.ts

@@ -1,52 +1,7 @@
-export class FilePaginationInfo {
-  constructor(
-    public readonly page: number = 1,
-    public readonly pageSize: number = 10,
-    public readonly totalFiles: number = 0
-  ) {}
+import { PaginationInfo } from '../../../shared/domain/models/PaginationInfo'
 
-  withTotal(total: number): FilePaginationInfo {
-    return new FilePaginationInfo(this.page, this.pageSize, total)
-  }
-  goToPage(page: number): FilePaginationInfo {
-    return new FilePaginationInfo(page, this.pageSize, this.totalFiles)
-  }
-
-  goToPreviousPage(): FilePaginationInfo {
-    if (!this.previousPage) throw new Error('No previous page')
-    return this.goToPage(this.previousPage)
-  }
-
-  goToNextPage(): FilePaginationInfo {
-    if (!this.nextPage) throw new Error('No next page')
-    return this.goToPage(this.nextPage)
-  }
-
-  withPageSize(pageSize: number): FilePaginationInfo {
-    const getNewPage = (oldPageSize: number, newPageSize: number) => {
-      const newPage = Math.ceil(((this.page - 1) * oldPageSize + 1) / newPageSize)
-      return newPage > 0 ? newPage : 1
-    }
-    return new FilePaginationInfo(getNewPage(this.pageSize, pageSize), pageSize, this.totalFiles)
-  }
-
-  get totalPages(): number {
-    return Math.ceil(this.totalFiles / this.pageSize)
-  }
-
-  get hasPreviousPage(): boolean {
-    return this.page > 1
-  }
-
-  get hasNextPage(): boolean {
-    return this.page < this.totalPages
-  }
-
-  get previousPage(): number | undefined {
-    return this.hasPreviousPage ? this.page - 1 : undefined
-  }
-
-  get nextPage(): number | undefined {
-    return this.hasNextPage ? this.page + 1 : undefined
+export class FilePaginationInfo extends PaginationInfo<FilePaginationInfo> {
+  constructor(page = 1, pageSize = 10, totalItems = 0, itemName = 'File') {
+    super(page, pageSize, totalItems, itemName)
   }
 }

src/files/domain/repositories/FileRepository.ts

@@ -1,9 +1,9 @@
 import { File, FileDownloadMode } from '../models/File'
 import { FileCriteria } from '../models/FileCriteria'
 import { FilesCountInfo } from '../models/FilesCountInfo'
-import { FilePaginationInfo } from '../models/FilePaginationInfo'
 import { FileUserPermissions } from '../models/FileUserPermissions'
 import { DatasetVersion } from '../../../dataset/domain/models/Dataset'
+import { FilePaginationInfo } from '../models/FilePaginationInfo'
 
 export interface FileRepository {
   getAllByDatasetPersistentId: (

src/files/domain/useCases/getFilesByDatasetPersistentId.ts

@@ -1,8 +1,8 @@
 import { FileRepository } from '../repositories/FileRepository'
 import { File } from '../models/File'
 import { FileCriteria } from '../models/FileCriteria'
-import { FilePaginationInfo } from '../models/FilePaginationInfo'
 import { DatasetVersion } from '../../../dataset/domain/models/Dataset'
+import { FilePaginationInfo } from '../models/FilePaginationInfo'
 
 export async function getFilesByDatasetPersistentId(
   fileRepository: FileRepository,

src/files/infrastructure/FileJSDataverseRepository.ts

@@ -1,7 +1,6 @@
 import { FileRepository } from '../domain/repositories/FileRepository'
 import { File, FileDownloadMode } from '../domain/models/File'
 import { FilesCountInfo } from '../domain/models/FilesCountInfo'
-import { FilePaginationInfo } from '../domain/models/FilePaginationInfo'
 import { FileUserPermissions } from '../domain/models/FileUserPermissions'
 import {
   File as JSFile,
@@ -19,6 +18,7 @@ import { FileCriteria } from '../domain/models/FileCriteria'
 import { DomainFileMapper } from './mappers/DomainFileMapper'
 import { JSFileMapper } from './mappers/JSFileMapper'
 import { DatasetVersion } from '../../dataset/domain/models/Dataset'
+import { FilePaginationInfo } from '../domain/models/FilePaginationInfo'
 
 const includeDeaccessioned = true
 

src/files/infrastructure/mappers/DomainFileMapper.ts

@@ -1,4 +1,3 @@
-import { FilePaginationInfo } from '../../domain/models/FilePaginationInfo'
 import {
   FileAccessOption,
   FileCriteria,
@@ -11,6 +10,7 @@ import {
   FileOrderCriteria as JSFileOrderCriteria
 } from '@iqss/dataverse-client-javascript'
 import { FileType } from '../../domain/models/File'
+import { FilePaginationInfo } from '../../domain/models/FilePaginationInfo'
 
 export class DomainFileMapper {
   static toJSPagination(paginationInfo: FilePaginationInfo): {

src/sections/dataset/Dataset.tsx

@@ -51,14 +51,14 @@ export function Dataset({ fileRepository }: DatasetProps) {
           </div>
 
           <header className={styles.header}>
-            <h1>{dataset.getTitle()}</h1>
+            <h1>{dataset.title}</h1>
             <DatasetLabels labels={dataset.labels} />
           </header>
           <div className={styles.container}>
             <Row>
               <Col sm={9}>
                 <DatasetCitation
-                  title={dataset.getTitle()}
+                  title={dataset.title}
                   thumbnail={dataset.thumbnail}
                   citation={dataset.citation}
                   version={dataset.version}

src/sections/dataset/dataset-citation/DatasetCitation.module.scss

@@ -17,20 +17,11 @@ min-height: 150px;
     border: 1px solid $dv-danger-color;
 }
 
-.icon {
-    color: #428BCA;
-    font-size: 7.5em;
-    line-height: 1.1;
-}
-
-.preview-image {
-    width: 100%;
-    max-width: 140px;
-    height: auto;
-    max-height: 140px;
-}
-
 .row {
     margin-right: -15px;
     margin-left: -15px;
+}
+
+.thumbnail {
+    font-size: 7.5em;
 }