From b27f69756eb64d2c7009bd29f2370bfeded67caf Mon Sep 17 00:00:00 2001 From: gearnode Date: Wed, 19 Feb 2025 11:32:21 +0100 Subject: [PATCH] Migrate pagination from page to scroll one Signed-off-by: gearnode --- apps/console/src/pages/VendorListPage.tsx | 84 ++++-- .../VendorListPagePaginationQuery.graphql.ts | 258 ++++++++++++++++++ .../VendorListPage_vendors.graphql.ts | 208 ++++++++++++++ 3 files changed, 532 insertions(+), 18 deletions(-) create mode 100644 apps/console/src/pages/__generated__/VendorListPagePaginationQuery.graphql.ts create mode 100644 apps/console/src/pages/__generated__/VendorListPage_vendors.graphql.ts diff --git a/apps/console/src/pages/VendorListPage.tsx b/apps/console/src/pages/VendorListPage.tsx index da1441f0b..7d08f2c33 100644 --- a/apps/console/src/pages/VendorListPage.tsx +++ b/apps/console/src/pages/VendorListPage.tsx @@ -21,7 +21,7 @@ import { VendorListPageCreateVendorMutation } from "./__generated__/VendorListPa import { VendorListPageDeleteVendorMutation } from "./__generated__/VendorListPageDeleteVendorMutation.graphql"; import { toast } from "@/hooks/use-toast"; -const ITEMS_PER_PAGE = 20; +const ITEMS_PER_PAGE = 25; const vendorListPageQuery = graphql` query VendorListPageQuery( @@ -102,6 +102,58 @@ const vendorsList = [ { id: "17", name: "CircleCI", createdAt: new Date().toISOString() }, ]; +function LoadAboveButton({ + pageInfo, + isPending, + onPageChange, +}: { + pageInfo: { + hasNextPage: boolean; + hasPreviousPage: boolean; + } | null | undefined; + isPending: boolean; + onPageChange: (direction: "prev") => void; +}) { + return ( +
+ +
+ ); +} + +function LoadBelowButton({ + pageInfo, + isPending, + onPageChange, +}: { + pageInfo: { + hasNextPage: boolean; + hasPreviousPage: boolean; + } | null | undefined; + isPending: boolean; + onPageChange: (direction: "next") => void; +}) { + return ( +
+ +
+ ); +} + function VendorListContent({ queryRef, onPageChange, @@ -245,6 +297,13 @@ function VendorListContent({ + + handlePageChange("prev")} + /> +
{vendors.map((vendor) => (
))} - -
- - -
+ + handlePageChange("next")} + /> ); } diff --git a/apps/console/src/pages/__generated__/VendorListPagePaginationQuery.graphql.ts b/apps/console/src/pages/__generated__/VendorListPagePaginationQuery.graphql.ts new file mode 100644 index 000000000..2d4ae47c5 --- /dev/null +++ b/apps/console/src/pages/__generated__/VendorListPagePaginationQuery.graphql.ts @@ -0,0 +1,258 @@ +/** + * @generated SignedSource<<87314e850c396bef91d3fa31ec8a04b8>> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { ConcreteRequest } from 'relay-runtime'; +import { FragmentRefs } from "relay-runtime"; +export type VendorListPagePaginationQuery$variables = { + after?: any | null | undefined; + first?: number | null | undefined; + id: string; +}; +export type VendorListPagePaginationQuery$data = { + readonly node: { + readonly " $fragmentSpreads": FragmentRefs<"VendorListPage_vendors">; + }; +}; +export type VendorListPagePaginationQuery = { + response: VendorListPagePaginationQuery$data; + variables: VendorListPagePaginationQuery$variables; +}; + +const node: ConcreteRequest = (function(){ +var v0 = [ + { + "defaultValue": null, + "kind": "LocalArgument", + "name": "after" + }, + { + "defaultValue": null, + "kind": "LocalArgument", + "name": "first" + }, + { + "defaultValue": null, + "kind": "LocalArgument", + "name": "id" + } +], +v1 = [ + { + "kind": "Variable", + "name": "id", + "variableName": "id" + } +], +v2 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "__typename", + "storageKey": null +}, +v3 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "id", + "storageKey": null +}, +v4 = [ + { + "kind": "Variable", + "name": "after", + "variableName": "after" + }, + { + "kind": "Variable", + "name": "first", + "variableName": "first" + } +]; +return { + "fragment": { + "argumentDefinitions": (v0/*: any*/), + "kind": "Fragment", + "metadata": null, + "name": "VendorListPagePaginationQuery", + "selections": [ + { + "alias": null, + "args": (v1/*: any*/), + "concreteType": null, + "kind": "LinkedField", + "name": "node", + "plural": false, + "selections": [ + { + "args": null, + "kind": "FragmentSpread", + "name": "VendorListPage_vendors" + } + ], + "storageKey": null + } + ], + "type": "Query", + "abstractKey": null + }, + "kind": "Request", + "operation": { + "argumentDefinitions": (v0/*: any*/), + "kind": "Operation", + "name": "VendorListPagePaginationQuery", + "selections": [ + { + "alias": null, + "args": (v1/*: any*/), + "concreteType": null, + "kind": "LinkedField", + "name": "node", + "plural": false, + "selections": [ + (v2/*: any*/), + (v3/*: any*/), + { + "kind": "InlineFragment", + "selections": [ + { + "alias": null, + "args": (v4/*: any*/), + "concreteType": "VendorConnection", + "kind": "LinkedField", + "name": "vendors", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "VendorEdge", + "kind": "LinkedField", + "name": "edges", + "plural": true, + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "Vendor", + "kind": "LinkedField", + "name": "node", + "plural": false, + "selections": [ + (v3/*: any*/), + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "name", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "createdAt", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "updatedAt", + "storageKey": null + }, + (v2/*: any*/) + ], + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "cursor", + "storageKey": null + } + ], + "storageKey": null + }, + { + "alias": null, + "args": null, + "concreteType": "PageInfo", + "kind": "LinkedField", + "name": "pageInfo", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "hasNextPage", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "hasPreviousPage", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "startCursor", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "endCursor", + "storageKey": null + } + ], + "storageKey": null + } + ], + "storageKey": null + }, + { + "alias": null, + "args": (v4/*: any*/), + "filters": null, + "handle": "connection", + "key": "VendorListPage_vendors", + "kind": "LinkedHandle", + "name": "vendors" + } + ], + "type": "Organization", + "abstractKey": null + } + ], + "storageKey": null + } + ] + }, + "params": { + "cacheID": "73f269ef13a930c0629d857caae56a34", + "id": null, + "metadata": {}, + "name": "VendorListPagePaginationQuery", + "operationKind": "query", + "text": "query VendorListPagePaginationQuery(\n $after: CursorKey\n $first: Int\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...VendorListPage_vendors\n id\n }\n}\n\nfragment VendorListPage_vendors on Organization {\n vendors(first: $first, after: $after) {\n edges {\n node {\n id\n name\n createdAt\n updatedAt\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n id\n}\n" + } +}; +})(); + +(node as any).hash = "753e6b32cc21645852de27cf6f23c769"; + +export default node; diff --git a/apps/console/src/pages/__generated__/VendorListPage_vendors.graphql.ts b/apps/console/src/pages/__generated__/VendorListPage_vendors.graphql.ts new file mode 100644 index 000000000..91fac6f73 --- /dev/null +++ b/apps/console/src/pages/__generated__/VendorListPage_vendors.graphql.ts @@ -0,0 +1,208 @@ +/** + * @generated SignedSource<<048f9d727dd07032be161da7019c6ebe>> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { ReaderFragment } from 'relay-runtime'; +import { FragmentRefs } from "relay-runtime"; +export type VendorListPage_vendors$data = { + readonly id: string; + readonly vendors: { + readonly edges: ReadonlyArray<{ + readonly node: { + readonly createdAt: any; + readonly id: string; + readonly name: string; + readonly updatedAt: any; + }; + }>; + readonly pageInfo: { + readonly endCursor: any | null | undefined; + readonly hasNextPage: boolean; + readonly hasPreviousPage: boolean; + readonly startCursor: any | null | undefined; + }; + }; + readonly " $fragmentType": "VendorListPage_vendors"; +}; +export type VendorListPage_vendors$key = { + readonly " $data"?: VendorListPage_vendors$data; + readonly " $fragmentSpreads": FragmentRefs<"VendorListPage_vendors">; +}; + +const node: ReaderFragment = (function(){ +var v0 = [ + "vendors" +], +v1 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "id", + "storageKey": null +}; +return { + "argumentDefinitions": [ + { + "kind": "RootArgument", + "name": "after" + }, + { + "kind": "RootArgument", + "name": "first" + } + ], + "kind": "Fragment", + "metadata": { + "connection": [ + { + "count": "first", + "cursor": "after", + "direction": "forward", + "path": (v0/*: any*/) + } + ], + "refetch": { + "connection": { + "forward": { + "count": "first", + "cursor": "after" + }, + "backward": null, + "path": (v0/*: any*/) + }, + "fragmentPathInResult": [ + "node" + ], + "operation": require('./VendorListPagePaginationQuery.graphql'), + "identifierInfo": { + "identifierField": "id", + "identifierQueryVariableName": "id" + } + } + }, + "name": "VendorListPage_vendors", + "selections": [ + { + "alias": "vendors", + "args": null, + "concreteType": "VendorConnection", + "kind": "LinkedField", + "name": "__VendorListPage_vendors_connection", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "VendorEdge", + "kind": "LinkedField", + "name": "edges", + "plural": true, + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "Vendor", + "kind": "LinkedField", + "name": "node", + "plural": false, + "selections": [ + (v1/*: any*/), + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "name", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "createdAt", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "updatedAt", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "__typename", + "storageKey": null + } + ], + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "cursor", + "storageKey": null + } + ], + "storageKey": null + }, + { + "alias": null, + "args": null, + "concreteType": "PageInfo", + "kind": "LinkedField", + "name": "pageInfo", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "hasNextPage", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "hasPreviousPage", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "startCursor", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "endCursor", + "storageKey": null + } + ], + "storageKey": null + } + ], + "storageKey": null + }, + (v1/*: any*/) + ], + "type": "Organization", + "abstractKey": null +}; +})(); + +(node as any).hash = "753e6b32cc21645852de27cf6f23c769"; + +export default node;