Attempt to fix pagination (#1503)

* Attempt to fix pagination * Fix tests compilation * Fix * Fix tests compilation * Fix tests * Fix tests
SciCatProject · Jun 13, 2024 · 7ca4afd · 7ca4afd
1 parent f645bc0
commit 7ca4afd
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 42 deletions.
diff --git a/src/app/datasets/dashboard/dashboard.component.ts b/src/app/datasets/dashboard/dashboard.component.ts
@@ -14,16 +14,14 @@ import {
   addDatasetAction,
   fetchDatasetCompleteAction,
   fetchMetadataKeysAction,
-  setSearchTermsAction,
 } from "state-management/actions/datasets.actions";
 
 import {
-  selectFilters,
   selectHasPrefilledFilters,
   selectDatasetsInBatch,
   selectCurrentDataset,
   selectSelectedDatasets,
-  selectSearchTerms,
+  selectPagination,
 } from "state-management/selectors/datasets.selectors";
 import { distinctUntilChanged, filter, map, take } from "rxjs/operators";
 import { MatDialog } from "@angular/material/dialog";
@@ -51,7 +49,7 @@ import { AppConfigService } from "app-config.service";
   styleUrls: ["dashboard.component.scss"],
 })
 export class DashboardComponent implements OnInit, OnDestroy {
-  private filters$ = this.store.select(selectFilters);
+  private pagination$ = this.store.select(selectPagination);
   private readyToFetch$ = this.store
     .select(selectHasPrefilledFilters)
     .pipe(filter((has) => has));
@@ -187,9 +185,9 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.updateColumnSubscription();
 
     this.subscriptions.push(
-      combineLatest([this.readyToFetch$, this.loggedIn$])
+      combineLatest([this.pagination$, this.readyToFetch$, this.loggedIn$])
         .pipe(
-          map(([_, loggedIn]) => [loggedIn]),
+          map(([pagination, _, loggedIn]) => [pagination, loggedIn]),
           distinctUntilChanged(deepEqual),
         )
         .subscribe((obj) => {

diff --git a/src/app/state-management/reducers/datasets.reducer.spec.ts b/src/app/state-management/reducers/datasets.reducer.spec.ts
@@ -275,8 +275,8 @@ describe("DatasetsReducer", () => {
       const action = fromActions.setDatasetsLimitFilterAction({ limit });
       const state = fromDatasets.datasetsReducer(initialDatasetState, action);
 
-      expect(state.filters.limit).toEqual(limit);
-      expect(state.filters.skip).toEqual(0);
+      expect(state.pagination.limit).toEqual(limit);
+      expect(state.pagination.skip).toEqual(0);
     });
   });
 
@@ -289,8 +289,8 @@ describe("DatasetsReducer", () => {
       const action = fromActions.changePageAction({ page, limit });
       const state = fromDatasets.datasetsReducer(initialDatasetState, action);
 
-      expect(state.filters.limit).toEqual(limit);
-      expect(state.filters.skip).toEqual(skip);
+      expect(state.pagination.limit).toEqual(limit);
+      expect(state.pagination.skip).toEqual(skip);
     });
   });
 
@@ -366,13 +366,13 @@ describe("DatasetsReducer", () => {
       const act = fromActions.changePageAction({ page, limit });
       const sta = fromDatasets.datasetsReducer(initialDatasetState, act);
 
-      expect(sta.filters.skip).toEqual(skip);
+      expect(sta.pagination.skip).toEqual(skip);
 
       const action = fromActions.clearFacetsAction();
       const state = fromDatasets.datasetsReducer(sta, action);
 
-      expect(state.filters.skip).toEqual(0);
-      expect(state.filters.limit).toEqual(limit);
+      expect(state.pagination.skip).toEqual(0);
+      expect(state.pagination.limit).toEqual(limit);
       expect(state.searchTerms).toEqual("");
     });
   });

diff --git a/src/app/state-management/reducers/datasets.reducer.ts b/src/app/state-management/reducers/datasets.reducer.ts
@@ -227,15 +227,15 @@ const reducer = createReducer(
   on(
     fromActions.setDatasetsLimitFilterAction,
     (state, { limit }): DatasetState => {
-      const filters = { ...state.filters, limit, skip: 0 };
-      return { ...state, filters };
+      const pagination = { limit, skip: 0 };
+      return { ...state, pagination };
     },
   ),
 
   on(fromActions.changePageAction, (state, { page, limit }): DatasetState => {
     const skip = page * limit;
-    const filters = { ...state.filters, skip, limit };
-    return { ...state, filters };
+    const pagination = { skip, limit };
+    return { ...state, pagination };
   }),
   on(
     fromActions.sortByColumnAction,
@@ -347,9 +347,10 @@ const reducer = createReducer(
   }),
 
   on(fromActions.clearFacetsAction, (state): DatasetState => {
-    const limit = state.filters.limit; // Save limit
+    const limit = state.pagination.limit; // Save limit
     const filters = { ...initialDatasetState.filters, skip: 0, limit };
-    return { ...state, filters, searchTerms: "" };
+    const pagination = { skip: 0, limit };
+    return { ...state, filters, pagination, searchTerms: "" };
   }),
 
   on(fromActions.setTextFilterAction, (state, { text }): DatasetState => {

diff --git a/src/app/state-management/selectors/datasets.selectors.spec.ts b/src/app/state-management/selectors/datasets.selectors.spec.ts
@@ -41,6 +41,10 @@ const initialDatasetState: DatasetState = {
     isPublished: false,
     pid: "",
   },
+  pagination: {
+    skip: 0,
+    limit: 30,
+  },
   relatedDatasetsFilters: {
     skip: 0,
     limit: 25,
@@ -275,7 +279,7 @@ describe("test dataset selectors", () => {
     it("should return the fullquery params", () => {
       const fullqueryKeys = Object.keys(
         fromDatasetSelectors.selectFullqueryParams.projector(
-          initialDatasetState.filters,
+          initialDatasetState,
         ),
       );
       expect(fullqueryKeys).toContain("query");
@@ -284,9 +288,10 @@ describe("test dataset selectors", () => {
 
   describe("selectFullfacetParams", () => {
     it("should return the fullfacet params", () => {
-      const fullfacet = fromDatasetSelectors.selectFullfacetParams.projector(
-        initialDatasetState.filters,
-      );
+      const fullfacet =
+        fromDatasetSelectors.selectFullfacetParams.projector(
+          initialDatasetState,
+        );
       const fullfacetKeys = Object.keys(fullfacet);
       expect(fullfacet.facets).toEqual([
         "type",
@@ -309,7 +314,9 @@ describe("test dataset selectors", () => {
   describe("selectPage", () => {
     it("should select the current page", () => {
       expect(
-        fromDatasetSelectors.selectPage.projector(initialDatasetState.filters),
+        fromDatasetSelectors.selectPage.projector(
+          initialDatasetState.pagination,
+        ),
       ).toEqual(0);
     });
   });
@@ -318,7 +325,7 @@ describe("test dataset selectors", () => {
     it("should select the limit filter", () => {
       expect(
         fromDatasetSelectors.selectDatasetsPerPage.projector(
-          initialDatasetState.filters,
+          initialDatasetState.pagination,
         ),
       ).toEqual(30);
     });

diff --git a/src/app/state-management/selectors/datasets.selectors.ts b/src/app/state-management/selectors/datasets.selectors.ts
@@ -59,6 +59,11 @@ export const selectCurrentAttachments = createSelector(
   (dataset) => (dataset ? dataset.attachments : []),
 );
 
+export const selectPagination = createSelector(
+  selectDatasetState,
+  (state) => state.pagination,
+);
+
 // === Filters ===
 
 export const selectFilters = createSelector(
@@ -168,20 +173,33 @@ const restrictFilter = (filter: any, allowedKeys?: string[]) => {
   }, {});
 };
 
-export const selectFullqueryParams = createSelector(selectFilters, (filter) => {
-  // don't query with modeToggle, it's only in filters for persistent routing
-  const { skip, limit, sortField, modeToggle, ...theRest } = filter;
-  const limits = { skip, limit, order: sortField };
-  const query = restrictFilter(theRest);
-  return { query: JSON.stringify(query), limits };
-});
+export const selectFullqueryParams = createSelector(
+  selectDatasetState,
+  (state) => {
+    const filter = state.filters;
+    const pagination = state.pagination;
+    // don't query with modeToggle, it's only in filters for persistent routing
+    const { skip, limit, sortField, modeToggle, ...theRest } = filter;
+    const limits = { ...pagination, order: sortField };
+    const query = restrictFilter(theRest);
+    return { query: JSON.stringify(query), limits };
+  },
+);
 
-export const selectFullfacetParams = createSelector(selectFilters, (filter) => {
-  const { skip, limit, sortField, modeToggle, ...theRest } = filter;
-  const fields = restrictFilter(theRest);
-  const facets = ["type", "creationLocation", "ownerGroup", "keywords"];
-  return { fields, facets };
-});
+export const selectFullfacetParams = createSelector(
+  selectDatasetState,
+  (state) => {
+    const filter = state.filters;
+    const pagination = state.pagination;
+    const { skip, limit, sortField, modeToggle, ...theRest } = {
+      ...filter,
+      ...pagination,
+    };
+    const fields = restrictFilter(theRest);
+    const facets = ["type", "creationLocation", "ownerGroup", "keywords"];
+    return { fields, facets };
+  },
+);
 
 // === Misc. ===
 
@@ -190,14 +208,14 @@ export const selectTotalSets = createSelector(
   (state) => state.totalCount,
 );
 
-export const selectPage = createSelector(selectFilters, (filters) => {
-  const { skip, limit } = filters;
+export const selectPage = createSelector(selectPagination, (pagination) => {
+  const { skip, limit } = pagination;
   return skip / limit;
 });
 
 export const selectDatasetsPerPage = createSelector(
-  selectFilters,
-  (filters) => filters.limit,
+  selectPagination,
+  (pagination) => pagination.limit,
 );
 
 export const selectSearchTerms = createSelector(

diff --git a/src/app/state-management/state/datasets.store.ts b/src/app/state-management/state/datasets.store.ts
@@ -15,6 +15,11 @@ export interface FacetCounts {
   [field: string]: FacetCount[];
 }
 
+export interface Pagination {
+  skip: number;
+  limit: number;
+}
+
 export interface DatasetState {
   datasets: Dataset[];
   selectedSets: Dataset[];
@@ -30,6 +35,7 @@ export interface DatasetState {
   keywordsTerms: string;
   pidTerms: string;
   filters: DatasetFilters;
+  pagination: Pagination;
 
   relatedDatasetsFilters: {
     skip: number;
@@ -72,6 +78,10 @@ export const initialDatasetState: DatasetState = {
     isPublished: "",
     pid: "",
   },
+  pagination: {
+    skip: 0,
+    limit: 25,
+  },
   relatedDatasetsFilters: {
     skip: 0,
     limit: 25,