fix: Do not rely on class names in production bundle (#6212)

app/components/PaginatedList.test.tsx

@@ -3,8 +3,7 @@ import { shallow } from "enzyme";
 import { TFunction } from "i18next";
 import * as React from "react";
 import { getI18n } from "react-i18next";
-import RootStore from "~/stores/RootStore";
-import { DEFAULT_PAGINATION_LIMIT } from "~/stores/base/Store";
+import { Pagination } from "@shared/constants";
 import { runAllPromises } from "~/test/support";
 import { Component as PaginatedList } from "./PaginatedList";
 
@@ -12,17 +11,12 @@ describe("PaginatedList", () => {
   const render = () => null;
 
   const i18n = getI18n();
-  const { logout, ...store } = new RootStore();
 
   const props = {
     i18n,
     tReady: true,
     t: ((key: string) => key) as TFunction,
-    logout: () => {
-      //
-    },
-    ...store,
-  };
+  } as any;
 
   it("with no items renders nothing", () => {
     const list = shallow(
@@ -59,13 +53,13 @@ describe("PaginatedList", () => {
     );
     expect(fetch).toHaveBeenCalledWith({
       ...options,
-      limit: DEFAULT_PAGINATION_LIMIT,
+      limit: Pagination.defaultLimit,
       offset: 0,
     });
   });
 
   it("calls fetch when options prop changes", async () => {
-    const fetchedItems = Array(DEFAULT_PAGINATION_LIMIT).fill(undefined);
+    const fetchedItems = Array(Pagination.defaultLimit).fill(undefined);
     const fetch = jest.fn().mockReturnValue(Promise.resolve(fetchedItems));
     const list = shallow(
       <PaginatedList
@@ -81,7 +75,7 @@ describe("PaginatedList", () => {
     await runAllPromises();
     expect(fetch).toHaveBeenCalledWith({
       id: "one",
-      limit: DEFAULT_PAGINATION_LIMIT,
+      limit: Pagination.defaultLimit,
       offset: 0,
     });
     fetch.mockReset();
@@ -95,7 +89,7 @@ describe("PaginatedList", () => {
     await runAllPromises();
     expect(fetch).toHaveBeenCalledWith({
       id: "two",
-      limit: DEFAULT_PAGINATION_LIMIT,
+      limit: Pagination.defaultLimit,
       offset: 0,
     });
   });

app/components/PaginatedList.tsx

@@ -5,8 +5,8 @@ import * as React from "react";
 import { withTranslation, WithTranslation } from "react-i18next";
 import { Waypoint } from "react-waypoint";
 import { CompositeStateReturn } from "reakit/Composite";
+import { Pagination } from "@shared/constants";
 import RootStore from "~/stores/RootStore";
-import { DEFAULT_PAGINATION_LIMIT } from "~/stores/base/Store";
 import ArrowKeyNavigation from "~/components/ArrowKeyNavigation";
 import DelayedMount from "~/components/DelayedMount";
 import PlaceholderList from "~/components/List/Placeholder";
@@ -86,7 +86,7 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
   reset = () => {
     this.offset = 0;
     this.allowLoadMore = true;
-    this.renderCount = DEFAULT_PAGINATION_LIMIT;
+    this.renderCount = Pagination.defaultLimit;
     this.isFetching = false;
     this.isFetchingInitial = false;
     this.isFetchingMore = false;
@@ -99,7 +99,7 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
     }
     this.isFetching = true;
     const counter = ++this.fetchCounter;
-    const limit = this.props.options?.limit ?? DEFAULT_PAGINATION_LIMIT;
+    const limit = this.props.options?.limit ?? Pagination.defaultLimit;
     this.error = undefined;
 
     try {
@@ -139,12 +139,12 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
     const leftToRender = (this.props.items?.length ?? 0) - this.renderCount;
 
     if (leftToRender > 0) {
-      this.renderCount += DEFAULT_PAGINATION_LIMIT;
+      this.renderCount += Pagination.defaultLimit;
     }
 
     // If there are less than a pages results in the cache go ahead and fetch
     // another page from the server
-    if (leftToRender <= DEFAULT_PAGINATION_LIMIT) {
+    if (leftToRender <= Pagination.defaultLimit) {
       this.isFetchingMore = true;
       await this.fetchResults();
     }