feature/OC-703/dynamic-pagination

pwa/package.json

@@ -4,9 +4,7 @@
   "private": true,
   "description": "Gatsby Skeleton Application",
   "author": "Conduction B.V.",
-  "keywords": [
-    "gatsby"
-  ],
+  "keywords": ["gatsby"],
   "scripts": {
     "develop": "gatsby develop",
     "start": "gatsby develop",
@@ -16,7 +14,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@conduction/components": "2.1.27",
+    "@conduction/components": "2.1.30",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",

pwa/src/components/paginate/Paginate.tsx

@@ -10,7 +10,7 @@ import clsx from "clsx";
 interface PaginateProps {
   totalPages: number;
   currentPage: number;
-  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+  setCurrentPage: (newPage: number) => void;
   layoutClassName?: string;
 }
 

pwa/src/context/global.ts

@@ -6,6 +6,7 @@ import { defaultLogFiltersContext, ILogFiltersContext } from "./logs";
 import { defaultTabsContext, ITabsContext } from "./tabs";
 import { defaultObjectsContext, IObjectsStateContext } from "./objects";
 import { defaultTableColumnsContext, ITableColumnsContext } from "./tableColumns";
+import { defaultPaginationContext, IPaginationContext } from "./pagination";
 
 export interface IGlobalContext {
   gatsby: IGatsbyContext;
@@ -15,6 +16,7 @@ export interface IGlobalContext {
   deletedItems: IDeletedItemsContext;
   objectsState: IObjectsStateContext;
   tableColumns: ITableColumnsContext;
+  pagination: IPaginationContext;
 }
 
 export const defaultGlobalContext: IGlobalContext = {
@@ -25,6 +27,7 @@ export const defaultGlobalContext: IGlobalContext = {
   deletedItems: defaultDeletedItemsContext,
   objectsState: defaultObjectsContext,
   tableColumns: defaultTableColumnsContext,
+  pagination: defaultPaginationContext,
 };
 
 export const GlobalContext = React.createContext<

pwa/src/context/pagination.ts

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { GlobalContext } from "./global";
+
+const DEFAULT_CURRENT_PAGE = 1;
+const DEFAULT_PER_PAGE = 10;
+
+export type TPerPageOptions = 5 | 10 | 20 | 50 | 100 | 500 | 1000 | 2000 | 5000 | 10000;
+
+type TPaginationData = {
+  currentPage: number;
+  perPage: TPerPageOptions;
+};
+
+export interface IPaginationContext {
+  [key: string]: TPaginationData;
+}
+
+export const defaultPaginationContext: IPaginationContext = {};
+
+export const usePaginationContext = () => {
+  const [globalContext, setGlobalContext] = React.useContext(GlobalContext);
+
+  const getPagination = (key: string): TPaginationData => {
+    if (!globalContext.pagination[key]) {
+      setPagination({ currentPage: DEFAULT_CURRENT_PAGE, perPage: DEFAULT_PER_PAGE }, key);
+    }
+
+    return globalContext.pagination[key];
+  };
+
+  const setPagination = (pagination: TPaginationData, key: string) => {
+    setGlobalContext((context) => ({ ...context, pagination: { ...globalContext.pagination, [key]: pagination } }));
+  };
+
+  const setCurrentPage = (newCurrentPage: number, key: string) => {
+    setGlobalContext((context) => ({
+      ...context,
+      pagination: {
+        ...globalContext.pagination,
+        [key]: { ...globalContext.pagination[key], currentPage: newCurrentPage },
+      },
+    }));
+  };
+
+  const setPerPage = (newPerPage: TPerPageOptions, key: string) => {
+    setGlobalContext((context) => ({
+      ...context,
+      pagination: {
+        ...globalContext.pagination,
+        [key]: { currentPage: 1, perPage: newPerPage }, // also reset currentPage to 1 when modifying perPage
+      },
+    }));
+  };
+
+  const getCurrentPage = (key: string): number => {
+    return globalContext.pagination[key]?.currentPage ?? DEFAULT_CURRENT_PAGE;
+  };
+
+  const getPerPage = (key: string): number => {
+    return globalContext.pagination[key]?.perPage ?? DEFAULT_PER_PAGE;
+  };
+
+  return { setCurrentPage, setPerPage, getPagination, getCurrentPage, getPerPage };
+};

pwa/src/hooks/object.ts

@@ -13,7 +13,7 @@ export const useObject = () => {
 
   const getAll = (currentPage: number, order: string, limit?: number, searchQuery?: string) =>
     useQuery<any, Error>(
-      ["objects", order, currentPage, searchQuery],
+      ["objects", order, currentPage, limit, searchQuery],
       () => API.Object.getAll(currentPage, order, limit, searchQuery),
       {
         onError: (error) => {

pwa/src/hooks/usePagination.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
 import { Paginate } from "../components/paginate/Paginate";
 import { PaginationLocationIndicatorComponent } from "../components/paginationLocationIndicatorComponent/PaginationLocationIndicatorComponent";
+import { TPerPageOptions, usePaginationContext } from "../context/pagination";
+import { useForm } from "react-hook-form";
+import { SelectSingle } from "@conduction/components";
 
 export interface PaginationDataProps {
   count: number;
@@ -17,13 +20,22 @@ interface PaginationLocationIndicator {
   layoutClassName?: string;
 }
 
-export const usePagination = (
-  data: PaginationDataProps,
-  currentPage: number,
-  setCurrentPage: React.Dispatch<React.SetStateAction<number>>,
-) => {
+export const usePagination = (data: PaginationDataProps, key: string) => {
+  const { getPagination, setCurrentPage, setPerPage, getPerPage } = usePaginationContext();
+
+  const pagination = getPagination(key);
+
   const Pagination: React.FC<PaginationProps> = ({ layoutClassName }) => (
-    <Paginate totalPages={data.pages} {...{ currentPage, setCurrentPage, layoutClassName }} />
+    <div style={{ display: "flex", justifyContent: "space-between" }}>
+      <Paginate
+        totalPages={data.pages}
+        currentPage={pagination.currentPage}
+        setCurrentPage={(newPage) => setCurrentPage(newPage, key)}
+        {...{ layoutClassName }}
+      />
+
+      <PaginationLimitSelect />
+    </div>
   );
 
   const PaginationLocationIndicator: React.FC<PaginationLocationIndicator> = ({ layoutClassName }) => (
@@ -35,5 +47,47 @@ export const usePagination = (
     />
   );
 
+  const PaginationLimitSelect: React.FC = () => {
+    const {
+      watch,
+      register,
+      control,
+      formState: { errors },
+    } = useForm();
+
+    const watchLimit = watch("limit");
+
+    React.useEffect(() => {
+      if (!watchLimit || watchLimit.value === getPerPage(key).toString()) return;
+
+      setPerPage(parseInt(watchLimit.value) as TPerPageOptions, key);
+    }, [watchLimit]);
+
+    return (
+      <div>
+        <SelectSingle
+          {...{ register, errors, control }}
+          name="limit"
+          options={limitSelectOptions}
+          menuPlacement="auto"
+          defaultValue={limitSelectOptions.find((option) => option.value === getPerPage(key).toString())}
+        />
+      </div>
+    );
+  };
+
+  const limitSelectOptions = [
+    { label: "5 per page", value: "5" },
+    { label: "10 per page", value: "10" },
+    { label: "20 per page", value: "20" },
+    { label: "50 per page", value: "50" },
+    { label: "100 per page", value: "100" },
+    { label: "500 per page", value: "500" },
+    { label: "1.000 per page", value: "1000" },
+    { label: "2.000 per page", value: "2000" },
+    { label: "5.000 per page", value: "5000" },
+    { label: "10.000 per page", value: "10000" },
+  ];
+
   return { Pagination, PaginationLocationIndicator };
 };

pwa/src/templates/objectDetailTemplate/ObjectDetailTemplate.tsx

@@ -28,10 +28,9 @@ interface ObjectDetailTemplateProps {
 export const ObjectDetailTemplate: React.FC<ObjectDetailTemplateProps> = ({ objectId }) => {
   const { t, i18n } = useTranslation();
   const { currentTabs, setCurrentTabs } = useCurrentTabContext();
-  const [currentPage, setCurrentPage] = React.useState<number>(1);
   const [currentLogsPage, setCurrentLogsPage] = React.useState<number>(1);
   const [searchQuery, setSearchQuery] = React.useState<string>("");
-  const [objectJsonData, setObjectJsonData] = React.useState<string>("");
+  const [_, setObjectJsonData] = React.useState<string>("");
 
   const queryClient = useQueryClient();
   const _useObject = useObject();
@@ -240,14 +239,7 @@ export const ObjectDetailTemplate: React.FC<ObjectDetailTemplateProps> = ({ obje
           </TabPanel>
 
           <TabPanel className={styles.tabPanel} value="4">
-            <ObjectsTable
-              objectsQuery={getObject}
-              pagination={{
-                currentPage,
-                setCurrentPage,
-              }}
-              search={{ searchQuery, setSearchQuery }}
-            />
+            <ObjectsTable objectsQuery={getObject} paginationKey={objectId} search={{ searchQuery, setSearchQuery }} />
           </TabPanel>
         </TabContext>
       </div>

pwa/src/templates/objectTemplate/ObjectTemplate.tsx

@@ -9,14 +9,23 @@ import { OverviewPageHeaderTemplate } from "../templateParts/overviewPageHeader/
 import { ObjectsTable } from "../templateParts/objectsTable/ObjectsTable";
 import { useObject } from "../../hooks/object";
 import { useObjectsStateContext } from "../../context/objects";
+import { usePaginationContext } from "../../context/pagination";
+
+const PAGINATION_KEY = "objects";
 
 export const ObjectTemplate: React.FC = () => {
   const { t } = useTranslation();
   const { objectsState } = useObjectsStateContext();
   const [searchQuery, setSearchQuery] = React.useState<string>("");
-  const [currentPage, setCurrentPage] = React.useState<number>(1);
 
-  const getObjects = useObject().getAll(currentPage, objectsState.order, undefined, searchQuery);
+  const { getCurrentPage, getPerPage } = usePaginationContext();
+
+  const getObjects = useObject().getAll(
+    getCurrentPage(PAGINATION_KEY),
+    objectsState.order,
+    getPerPage(PAGINATION_KEY),
+    searchQuery,
+  );
 
   return (
     <Container layoutClassName={styles.container}>
@@ -27,14 +36,7 @@ export const ObjectTemplate: React.FC = () => {
         }
       />
 
-      <ObjectsTable
-        objectsQuery={getObjects}
-        pagination={{
-          currentPage,
-          setCurrentPage,
-        }}
-        search={{ searchQuery, setSearchQuery }}
-      />
+      <ObjectsTable objectsQuery={getObjects} search={{ searchQuery, setSearchQuery }} paginationKey={PAGINATION_KEY} />
     </Container>
   );
 };

pwa/src/templates/schemasDetailTemplate/SchemasDetailTemplate.tsx

@@ -22,6 +22,7 @@ import { LogsTableTemplate } from "../templateParts/logsTable/LogsTableTemplate"
 import { FormHeaderTemplate } from "../templateParts/formHeader/FormHeaderTemplate";
 import { CHANNEL_LOG_LIMIT } from "../../apiService/resources/log";
 import { useObject } from "../../hooks/object";
+import { usePaginationContext } from "../../context/pagination";
 
 interface SchemasDetailPageProps {
   schemaId: string;
@@ -33,15 +34,16 @@ export const SchemasDetailTemplate: React.FC<SchemasDetailPageProps> = ({ schema
   const { currentTabs, setCurrentTabs } = useCurrentTabContext();
   const { setIsLoading, isLoading } = useIsLoadingContext();
   const [currentLogsPage, setCurrentLogsPage] = React.useState<number>(1);
-  const [currentPage, setCurrentPage] = React.useState<number>(1);
   const [searchQuery, setSearchQuery] = React.useState<string>("");
 
   const queryClient = useQueryClient();
   const _useSchema = useSchema(queryClient);
   const getSchema = _useSchema.getOne(schemaId);
   const deleteSchema = _useSchema.remove();
 
-  const getAllObjectsFromEntity = useObject().getAllFromEntity(schemaId, currentPage, searchQuery);
+  const { getCurrentPage } = usePaginationContext();
+
+  const getAllObjectsFromEntity = useObject().getAllFromEntity(schemaId, getCurrentPage(schemaId), searchQuery);
 
   const getSchemaSchema = _useSchema.getSchema(schemaId);
 
@@ -105,10 +107,7 @@ export const SchemasDetailTemplate: React.FC<SchemasDetailPageProps> = ({ schema
 
             <ObjectsTable
               objectsQuery={getAllObjectsFromEntity}
-              pagination={{
-                currentPage,
-                setCurrentPage,
-              }}
+              paginationKey={schemaId}
               search={{ searchQuery, setSearchQuery }}
             />
           </TabPanel>

pwa/src/templates/templateParts/objectsTable/ObjectsTable.tsx

@@ -21,31 +21,24 @@ import Skeleton from "react-loading-skeleton";
 
 interface ObjectsTableProps {
   objectsQuery: UseQueryResult<any, Error>;
-  pagination: {
-    currentPage: number;
-    setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
-  };
   search: {
     setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
     searchQuery: string;
   };
+  paginationKey: string;
 }
 
 export const ObjectsTable: React.FC<ObjectsTableProps> = ({
   objectsQuery,
-  pagination,
   search: { searchQuery, setSearchQuery },
+  paginationKey,
 }) => {
   const {
     columns: { objectColumns },
     setColumns,
   } = useTableColumnsContext();
   const { toggleOrder, objectsState, setObjectsState } = useObjectsStateContext();
-  const { Pagination, PaginationLocationIndicator } = usePagination(
-    { ...objectsQuery.data },
-    pagination.currentPage,
-    pagination.setCurrentPage,
-  );
+  const { Pagination, PaginationLocationIndicator } = usePagination({ ...objectsQuery.data }, paginationKey);
   const searchQueryTimeout = React.useRef<NodeJS.Timeout | null>(null);
   const { t } = useTranslation();