Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

229 - Basic home page with the list of datasets #237

Merged
merged 31 commits into from
Dec 20, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
41d2280
feat(Home): add list of datasets
MellyGray Nov 16, 2023
08a0af3
feat(Home): connect the datasets list to the use case
MellyGray Nov 16, 2023
a3002a0
feat(Home): refactor datasets list
MellyGray Nov 16, 2023
c402cee
refactor: get dataset title
MellyGray Nov 17, 2023
5998ca6
feat: add pagination to Datasets List
MellyGray Nov 20, 2023
3b19577
fix: pagination tests
MellyGray Nov 20, 2023
aeeb3d8
fix: replace Hello Dataverse title by Root
MellyGray Nov 20, 2023
e57508b
fix: remove page size selector from the DatasetList
MellyGray Nov 20, 2023
74638f9
feat(Home): add model DatasetPreview
MellyGray Nov 20, 2023
1de733d
fix(Home): replace anchors by react router links
MellyGray Nov 21, 2023
5484fef
feat(DatasetsList): add skeleton while loading
MellyGray Nov 21, 2023
4985949
feat(DatasetsList): add no datasets message
MellyGray Nov 21, 2023
025da7c
fix: add Router to stories
MellyGray Nov 21, 2023
54a11cd
fix: e2e test failing
MellyGray Nov 22, 2023
bf0760b
Merge branch 'develop' of https://github.com/IQSS/dataverse-frontend …
MellyGray Nov 29, 2023
108228b
feat(DatasetCard): add DatasetCard component
MellyGray Nov 30, 2023
3f8f4c9
feat(DatasetCard): add dataset labels
MellyGray Nov 30, 2023
8144a50
feat(DatasetCard): add thumbnail
MellyGray Nov 30, 2023
2fe350f
feat(DatasetCard): add date
MellyGray Dec 1, 2023
18286d4
feat(DatasetCard): add citation
MellyGray Dec 1, 2023
5e3b47c
feat(DatasetCard): add description
MellyGray Dec 1, 2023
ad4f308
feat(DatasetCard): adjust skeleton
MellyGray Dec 1, 2023
e910803
feat(DatasetCard): refactor component
MellyGray Dec 4, 2023
aaeb023
fix: contrast-ratio deaccessioned background
MellyGray Dec 4, 2023
ad04623
Merge branch 'develop' of https://github.com/IQSS/dataverse-frontend …
MellyGray Dec 11, 2023
d847894
refactor: move CitationDescription to shared folder
MellyGray Dec 14, 2023
6da0f0a
feat(DatasetPreviewMother): mock randomly deaccessioned of draft data…
MellyGray Dec 14, 2023
efbe448
fix: remove tooltip from dataset card citation
MellyGray Dec 14, 2023
44ac492
feat(DatasetCard): add dataset icon at the top right
MellyGray Dec 14, 2023
ff238ce
Merge pull request #248 from IQSS/feature/230-add-dataset-info-to-hom…
GPortas Dec 19, 2023
99e16d3
Merge branch 'develop' of https://github.com/IQSS/dataverse-frontend …
MellyGray Dec 19, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion .storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -14,7 +15,9 @@ const preview: Preview = {
decorators: [
(Story) => (
<ThemeProvider>
<Story />
<MemoryRouter>
<Story />
</MemoryRouter>
</ThemeProvider>
)
]
Expand Down
2 changes: 1 addition & 1 deletion merged-coverage/lcov.info
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 0 additions & 3 deletions public/locales/en/files.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
6 changes: 0 additions & 6 deletions public/locales/en/helloDataverse.json

This file was deleted.

7 changes: 7 additions & 0 deletions public/locales/en/home.json
Original file line number Diff line number Diff line change
@@ -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."
}
}
4 changes: 4 additions & 0 deletions public/locales/en/pagination.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"results": "{{start}} to {{end}} of {{total}} {{item}}s",
"pageSize": "{{item}}s per page"
}
4 changes: 2 additions & 2 deletions src/Router.tsx
Original file line number Diff line number Diff line change
@@ -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(
[
Expand All @@ -12,7 +12,7 @@ const router = createBrowserRouter(
children: [
{
path: Route.HOME,
element: <HelloDataverse />
element: HomeFactory.create()
},
{
path: `${Route.DATASETS}`,
Expand Down
2 changes: 1 addition & 1 deletion src/dataset/domain/models/Dataset.ts
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,7 @@ export class Dataset {
public readonly privateUrl?: PrivateUrl
) {}

public getTitle(): string {
public get title(): string {
return this.metadataBlocks[0].fields.title
}

Expand Down
7 changes: 7 additions & 0 deletions src/dataset/domain/models/DatasetPaginationInfo.ts
Original file line number Diff line number Diff line change
@@ -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)
}
}
22 changes: 22 additions & 0 deletions src/dataset/domain/models/DatasetPreview.ts
Original file line number Diff line number Diff line change
@@ -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
}
}
1 change: 1 addition & 0 deletions src/dataset/domain/models/TotalDatasetsCount.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export type TotalDatasetsCount = number
5 changes: 5 additions & 0 deletions src/dataset/domain/repositories/DatasetRepository.ts
Original file line number Diff line number Diff line change
@@ -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>
}
12 changes: 12 additions & 0 deletions src/dataset/domain/useCases/getDatasets.ts
Original file line number Diff line number Diff line change
@@ -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)
})
}
10 changes: 10 additions & 0 deletions src/dataset/domain/useCases/getTotalDatasetsCount.ts
Original file line number Diff line number Diff line change
@@ -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)
})
}
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
53 changes: 4 additions & 49 deletions src/files/domain/models/FilePaginationInfo.ts
Original file line number Diff line number Diff line change
@@ -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)
}
}
2 changes: 1 addition & 1 deletion src/files/domain/repositories/FileRepository.ts
Original file line number Diff line number Diff line change
@@ -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: (
Expand Down
2 changes: 1 addition & 1 deletion src/files/domain/useCases/getFilesByDatasetPersistentId.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/files/infrastructure/FileJSDataverseRepository.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/files/infrastructure/mappers/DomainFileMapper.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { FilePaginationInfo } from '../../domain/models/FilePaginationInfo'
import {
FileAccessOption,
FileCriteria,
Expand All @@ -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): {
Expand Down
4 changes: 2 additions & 2 deletions src/sections/dataset/Dataset.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
21 changes: 0 additions & 21 deletions src/sections/dataset/dataset-citation/CitationThumbnail.tsx

This file was deleted.

17 changes: 4 additions & 13 deletions src/sections/dataset/dataset-citation/DatasetCitation.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Loading