Merge pull request #342 from IQSS/feature/322-support-infinite-scrolling

Feature/322 support infinite scrolling

.env.example

@@ -1 +1 @@
-VITE_DATAVERSE_BACKEND_URL=http://localhost:8080
+VITE_DATAVERSE_BACKEND_URL=http://localhost:8000

README.md

@@ -288,6 +288,11 @@ The new SPA does not use Solr as the API endpoint it uses performs all queries o
 
 The decision of this change is made on the assumption that Solr may not be required in the context of files tab search, whose search facets are reduced compared to other in-application searches. Therefore, if we find evidence that the assumption is incorrect, we will work on extending the search capabilities to support Solr.
 
+#### Dataverses/Datasets list
+
+The original JSF Dataverses/Datasets list on the home page uses normal paging buttons at the bottom of the list.
+We have implemented infinite scrolling in this list, replacing the normal paging buttons, but the goal would be to be able to toggle between normal paging and infinite scrolling via a toggle setting or button.
+
 ## Publishing the Design System
 
 The Design System is published to the npm Package Registry. To publish a new version, follow these steps:

package.json

@@ -24,6 +24,7 @@
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
     "bootstrap": "5.2.3",
+    "classnames": "2.5.1",
     "html-react-parser": "3.0.16",
     "i18next": "22.4.9",
     "i18next-browser-languagedetector": "7.0.1",
@@ -32,6 +33,7 @@
     "react-bootstrap": "2.7.2",
     "react-bootstrap-icons": "1.10.3",
     "react-i18next": "12.1.5",
+    "react-infinite-scroll-hook": "4.1.1",
     "react-loader-spinner": "5.3.4",
     "react-markdown": "8.0.7",
     "react-router-dom": "6.8.1",
@@ -61,6 +63,7 @@
     "test:coverage-merge": "lcov-result-merger '**/*/lcov.info' 'merged-coverage/lcov.info' && perl -pi -e 's/src\\/lib/packages\\/design-system\\/src\\/lib/g' merged-coverage/lcov.info",
     "git:add": "git add .",
     "storybook": "concurrently 'storybook dev -p 6006 && open \"http://localhost:6006\"' 'cd packages/design-system && npm run storybook'",
+    "storybook:windows": "concurrently \"storybook dev -p 6006\" \"npm run storybook -w packages/design-system\"",
     "build-storybook": "storybook build",
     "test:storybook": "test-storybook",
     "test:storybook-all": "concurrently 'test-storybook' 'cd packages/design-system && npm run test:storybook'",

public/locales/en/pagination.json

@@ -1,5 +1,10 @@
 {
   "results_one": "1 {{item}}",
   "results_other": "{{start}} to {{end}} of {{count}} {{item}}s",
+  "accumulated": {
+    "one": "{{count}} {{item}}",
+    "lessThanPageSize": "{{count}} {{item}}s",
+    "moreThanPageSize": "{{accumulated}} of {{count}} {{item}}s seen"
+  },
   "pageSize": "{{item}}s per page"
 }

src/dataset/domain/models/DatasetsWithCount.ts

@@ -0,0 +1,7 @@
+import { DatasetPreview } from '../../domain/models/DatasetPreview'
+import { TotalDatasetsCount } from './TotalDatasetsCount'
+
+export interface DatasetsWithCount {
+  datasetPreviews: DatasetPreview[]
+  totalCount: TotalDatasetsCount
+}

src/dataset/domain/repositories/DatasetRepository.ts

@@ -3,12 +3,17 @@ import { TotalDatasetsCount } from '../models/TotalDatasetsCount'
 import { DatasetPaginationInfo } from '../models/DatasetPaginationInfo'
 import { DatasetPreview } from '../models/DatasetPreview'
 import { DatasetFormFields } from '../models/DatasetFormFields'
+import { DatasetsWithCount } from '../models/DatasetsWithCount'
 
 export interface DatasetRepository {
   getByPersistentId: (persistentId: string, version?: string) => Promise<Dataset | undefined>
   getByPrivateUrlToken: (privateUrlToken: string) => Promise<Dataset | undefined>
   getAll: (collectionId: string, paginationInfo: DatasetPaginationInfo) => Promise<DatasetPreview[]>
   getTotalDatasetsCount: (collectionId: string) => Promise<TotalDatasetsCount>
+  getAllWithCount: (
+    collectionId: string,
+    paginationInfo: DatasetPaginationInfo
+  ) => Promise<DatasetsWithCount>
   // Created as placeholder for https://github.com/IQSS/dataverse-frontend/pull/251
   createDataset: (fields: DatasetFormFields) => Promise<string>
 }

src/dataset/domain/useCases/getDatasetsWithCount.ts

@@ -0,0 +1,13 @@
+import { DatasetRepository } from '../repositories/DatasetRepository'
+import { DatasetPaginationInfo } from '../models/DatasetPaginationInfo'
+import { DatasetsWithCount } from '../models/DatasetsWithCount'
+
+export async function getDatasetsWithCount(
+  datasetRepository: DatasetRepository,
+  collectionId: string,
+  paginationInfo: DatasetPaginationInfo
+): Promise<DatasetsWithCount> {
+  return datasetRepository.getAllWithCount(collectionId, paginationInfo).catch((error: Error) => {
+    throw new Error(error.message)
+  })
+}

src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts

@@ -24,6 +24,7 @@ import { DatasetPaginationInfo } from '../../domain/models/DatasetPaginationInfo
 import { DatasetPreview } from '../../domain/models/DatasetPreview'
 import { JSDatasetPreviewMapper } from '../mappers/JSDatasetPreviewMapper'
 import { DatasetFormFields } from '../../domain/models/DatasetFormFields'
+import { DatasetsWithCount } from '../../domain/models/DatasetsWithCount'
 
 const includeDeaccessioned = true
 
@@ -47,6 +48,24 @@ export class DatasetJSDataverseRepository implements DatasetRepository {
       })
   }
 
+  getAllWithCount(
+    collectionId: string,
+    paginationInfo: DatasetPaginationInfo
+  ): Promise<DatasetsWithCount> {
+    return getAllDatasetPreviews
+      .execute(paginationInfo.pageSize, paginationInfo.offset, collectionId)
+      .then((subset: DatasetPreviewSubset) => {
+        const datasetPreviewsMapped = subset.datasetPreviews.map(
+          (datasetPreview: JSDatasetPreview) =>
+            JSDatasetPreviewMapper.toDatasetPreview(datasetPreview)
+        )
+        return {
+          datasetPreviews: datasetPreviewsMapped,
+          totalCount: subset.totalDatasetCount
+        }
+      })
+  }
+
   getByPersistentId(
     persistentId: string,
     version?: string,

src/sections/collection/Collection.tsx

@@ -1,6 +1,7 @@
 import { Row } from '@iqss/dataverse-design-system'
 import { DatasetRepository } from '../../dataset/domain/repositories/DatasetRepository'
 import { DatasetsList } from './datasets-list/DatasetsList'
+import { DatasetsListWithInfiniteScroll } from './datasets-list/DatasetsListWithInfiniteScroll'
 import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
 import {
   DvObjectType,
@@ -14,6 +15,7 @@ interface CollectionProps {
   datasetRepository: DatasetRepository
   id: string
   page?: number
+  infiniteScrollEnabled?: boolean
 }
 const rootNode = new UpwardHierarchyNode(
   'Root',
@@ -24,7 +26,12 @@ const rootNode = new UpwardHierarchyNode(
   undefined
 )
 
-export function Collection({ datasetRepository, id, page }: CollectionProps) {
+export function Collection({
+  datasetRepository,
+  id,
+  page,
+  infiniteScrollEnabled = false
+}: CollectionProps) {
   const { user } = useSession()
 
   return (
@@ -49,7 +56,11 @@ export function Collection({ datasetRepository, id, page }: CollectionProps) {
           <AddDataActionsButton />
         </div>
       )}
-      <DatasetsList datasetRepository={datasetRepository} page={page} collectionId={id} />
+      {infiniteScrollEnabled ? (
+        <DatasetsListWithInfiniteScroll datasetRepository={datasetRepository} collectionId={id} />
+      ) : (
+        <DatasetsList datasetRepository={datasetRepository} page={page} collectionId={id} />
+      )}
     </Row>
   )
 }

src/sections/collection/CollectionFactory.tsx

@@ -2,6 +2,7 @@ import { ReactElement } from 'react'
 import { Collection } from './Collection'
 import { DatasetJSDataverseRepository } from '../../dataset/infrastructure/repositories/DatasetJSDataverseRepository'
 import { useSearchParams } from 'react-router-dom'
+import { INFINITE_SCROLL_ENABLED } from './config'
 
 const datasetRepository = new DatasetJSDataverseRepository()
 export class CollectionFactory {
@@ -15,5 +16,12 @@ function CollectionWithSearchParams() {
   const page = searchParams.get('page') ? parseInt(searchParams.get('page') as string) : undefined
   const id = searchParams.get('id') ? (searchParams.get('id') as string) : 'root'
 
-  return <Collection datasetRepository={datasetRepository} page={page} id={id} />
+  return (
+    <Collection
+      datasetRepository={datasetRepository}
+      page={page}
+      id={id}
+      infiniteScrollEnabled={INFINITE_SCROLL_ENABLED}
+    />
+  )
 }

src/sections/collection/config.ts

@@ -0,0 +1 @@
+export const INFINITE_SCROLL_ENABLED = true

src/sections/collection/datasets-list/DatasetsList.module.scss

@@ -1,13 +1,50 @@
-@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+@import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
 
 .container {
   min-height: calc(100vh + 100px);
-  padding:15px;
+  padding: 15px;
   border: 1px solid #ddd;
   border-radius: 4px;
 }
 
 .empty-message-container {
-  padding: .5em 1em;
+  padding: 0.5em 1em;
   background: $dv-warning-box-color;
 }
+
+// Infinite scroll enabled
+.scrollable-container {
+  --inline-padding: 1rem;
+
+  height: 650px;
+  max-height: 650px;
+  padding-inline: var(--inline-padding);
+  overflow-x: hidden;
+  overflow-y: auto;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+
+  @media screen and (max-width: 768px) {
+    --inline-padding: 8px;
+  }
+
+  @media screen and (min-width: 1280px) {
+    height: 60vh;
+    max-height: 60vh;
+  }
+
+  &--empty-or-error {
+    padding-block: 1rem;
+  }
+
+  .sticky-pagination-results {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    width: calc(100% + (var(--inline-padding) * 2));
+    padding: 1rem var(--inline-padding) 0.5rem;
+    background-color: var(--bs-white);
+    box-shadow: 0 0 10px 0 rgba(0 0 0 / 30%);
+    transform: translateX(calc(var(--inline-padding) * -1));
+  }
+}