diff --git a/packages/web/src/components/AppFlows/index.tsx b/packages/web/src/components/AppFlows/index.tsx
index 6dd533d6..5e312a14 100644
--- a/packages/web/src/components/AppFlows/index.tsx
+++ b/packages/web/src/components/AppFlows/index.tsx
@@ -1,5 +1,8 @@
import { useQuery } from '@apollo/client';
+import { Link, useSearchParams } from 'react-router-dom';
import { GET_FLOWS } from 'graphql/queries/get-flows';
+import Pagination from '@mui/material/Pagination';
+import PaginationItem from '@mui/material/PaginationItem';
import AppFlowRow from 'components/AppFlowRow';
import type { IFlow } from '@automatisch/types';
@@ -8,11 +11,20 @@ type AppFlowsProps = {
appKey: string;
}
+const FLOW_PER_PAGE = 10;
+
+const getLimitAndOffset = (page: number) => ({
+ limit: FLOW_PER_PAGE,
+ offset: (page - 1) * FLOW_PER_PAGE,
+});
+
export default function AppFlows(props: AppFlowsProps): React.ReactElement {
const { appKey } = props;
- const { data } = useQuery(GET_FLOWS, { variables: { appKey, limit: 100, offset: 0 }});
+ const [searchParams, setSearchParams] = useSearchParams();
+ const page = parseInt(searchParams.get('page') || '', 10) || 1;
+ const { data } = useQuery(GET_FLOWS, { variables: { appKey, ...getLimitAndOffset(page) }});
const getFlows = data?.getFlows || {};
- const { edges } = getFlows;
+ const { pageInfo, edges } = getFlows;
const appFlows: IFlow[] = edges?.map(({ node }: { node: IFlow }) => node);
@@ -21,6 +33,20 @@ export default function AppFlows(props: AppFlowsProps): React.ReactElement {
{appFlows?.map((appFlow: IFlow) => (
))}
+
+ {pageInfo && pageInfo.totalPages > 1 && setSearchParams({ page: page.toString() })}
+ renderItem={(item) => (
+
+ )}
+ />}
>
)
};