Add pagination with Apollo

frontend/package.json

@@ -12,7 +12,7 @@
     "compile": "lingui compile"
   },
   "dependencies": {
-    "@apollo/client": "^3.0.1",
+    "@apollo/client": "^3.1.0",
     "@babel/runtime": "^7.10.4",
     "@chakra-ui/core": "^0.8.0",
     "@emotion/core": "^10.0.28",

frontend/src/Organizations.js

@@ -1,50 +1,49 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
+import { number } from 'prop-types'
 import { useQuery } from '@apollo/client'
 import { Trans } from '@lingui/macro'
 import { Layout } from './Layout'
 import { ListOf } from './ListOf'
-import { Heading, Stack, useToast, Box, Divider } from '@chakra-ui/core'
-import { ORGANIZATIONS } from './graphql/queries'
+import { Button, Heading, Stack, useToast, Box, Divider } from '@chakra-ui/core'
+import {
+  PAGINATED_ORGANIZATIONS,
+  REVERSE_PAGINATED_ORGANIZATIONS,
+} from './graphql/queries'
 import { useUserState } from './UserState'
 import { Organization } from './Organization'
-import { PaginationButtons } from './PaginationButtons'
 
-export default function Organisations() {
+export default function Organisations({ orgsPerPage = 10 }) {
   const { currentUser } = useUserState()
-  const [orgs, setOrgs] = useState([])
-  const [currentPage, setCurrentPage] = useState(1)
-  const [orgsPerPage, setOrgsPerPage] = useState(10)
   const toast = useToast()
 
-  // This query is currently requesting the first 10 orgs
-  const { loading, _error, data } = useQuery(ORGANIZATIONS, {
-    context: {
-      headers: {
-        authorization: currentUser.jwt,
+  const { loading, error, data, fetchMore } = useQuery(
+    PAGINATED_ORGANIZATIONS,
+    {
+      variables: { after: '', first: orgsPerPage },
+      context: {
+        headers: {
+          authorization: currentUser.jwt,
+        },
+      },
+      onError: error => {
+        const [_, message] = error.message.split(': ')
+        toast({
+          title: 'Error',
+          description: message,
+          status: 'failure',
+          duration: 9000,
+          isClosable: true,
+        })
       },
     },
-    onError: (error) => {
-      const [_, message] = error.message.split(': ')
-      toast({
-        title: 'Error',
-        description: message,
-        status: 'failure',
-        duration: 9000,
-        isClosable: true,
-      })
-    },
-  })
+  )
 
-  useEffect(() => {
-    const fetchOrgs = async () => {
-      let organizations = []
-      if (data && data.organizations.edges) {
-        organizations = data.organizations.edges.map((e) => e.node)
-        setOrgs(organizations)
-      }
-    }
-    fetchOrgs()
-  }, [data])
+  if (error)
+    return (
+      <p>
+        <Trans>error {error.message}</Trans>
+      </p>
+    )
 
   if (loading)
     return (
@@ -53,14 +52,6 @@ export default function Organisations() {
       </p>
     )
 
-  // Get current orgs
-  const indexOfLastOrg = currentPage * orgsPerPage
-  const indexOfFirstOrg = indexOfLastOrg - orgsPerPage
-  const currentOrgs = orgs.slice(indexOfFirstOrg, indexOfLastOrg)
-
-  // Change page
-  const paginate = (pageNumber) => setCurrentPage(pageNumber)
-
   return (
     <Layout>
       <Stack spacing={10} shouldWrapChildren>
@@ -70,7 +61,7 @@ export default function Organisations() {
         <Stack direction="row" spacing={4}>
           <Stack spacing={4} flexWrap="wrap">
             <ListOf
-              elements={currentOrgs}
+              elements={data.organizations.edges.map(e => e.node)}
               ifEmpty={() => <Trans>No Organizations</Trans>}
             >
               {({ name, slug, domainCount }, index) => (
@@ -86,15 +77,40 @@ export default function Organisations() {
             </ListOf>
           </Stack>
         </Stack>
-        <PaginationButtons
-          perPage={orgsPerPage}
-          total={orgs.length}
-          paginate={paginate}
-          currentPage={currentPage}
-          setPerPage={setOrgsPerPage}
-        />
+        <Stack isInline align="center">
+          <Button
+            onClick={() =>
+              fetchMore({
+                query: REVERSE_PAGINATED_ORGANIZATIONS,
+                variables: {
+                  before: data.organizations.pageInfo.startCursor,
+                  last: orgsPerPage,
+                },
+              })
+            }
+            aria-label="Previous page"
+          >
+            <Trans>Previous</Trans>
+          </Button>
+
+          <Button
+            onClick={() =>
+              fetchMore({
+                variables: {
+                  after: data.organizations.pageInfo.endCursor,
+                  first: orgsPerPage,
+                },
+              })
+            }
+            disable={data.organizations.pageInfo.hasNextPage}
+            aria-label="Next page"
+          >
+            <Trans>Next</Trans>
+          </Button>
+        </Stack>
       </Stack>
-      <Divider />
     </Layout>
   )
 }
+
+Organisations.propTypes = { orgsPerPage: number }

frontend/src/SummaryGroup.js

@@ -26,6 +26,10 @@ export function SummaryGroup() {
     },
   })
 
+  if (error) {
+    return <p>{String(error)}</p>
+  }
+
   if (loading) {
     return (
       <p>
@@ -34,10 +38,6 @@ export function SummaryGroup() {
     )
   }
 
-  if (error) {
-    return <p>{String(error)}</p>
-  }
-
   return (
     <SimpleGrid
       columns={[1, 1, 1, 2]}

frontend/src/__tests__/Organizations.pagination.next.test.js

@@ -0,0 +1,165 @@
+import React from 'react'
+import { createMemoryHistory } from 'history'
+import { ThemeProvider, theme } from '@chakra-ui/core'
+import { Router, Route, Switch } from 'react-router-dom'
+import { render, waitFor, fireEvent } from '@testing-library/react'
+import { MockedProvider } from '@apollo/client/testing'
+import Organizations from '../Organizations'
+import {
+  PAGINATED_ORGANIZATIONS,
+  REVERSE_PAGINATED_ORGANIZATIONS,
+} from '../graphql/queries'
+import { I18nProvider } from '@lingui/react'
+import { setupI18n } from '@lingui/core'
+import { UserStateProvider } from '../UserState'
+import { createCache } from '../client'
+
+describe('<Organisations />', () => {
+  describe('pagination', () => {
+    const cache = createCache()
+    cache.writeQuery({
+      query: PAGINATED_ORGANIZATIONS,
+      variables: { after: '', first: 1 },
+      data: {
+        organizations: {
+          edges: [
+            {
+              cursor: 'YXJyYXljb25uZWN0aW9uOjA=',
+              node: {
+                id: 'T3JnYW5pemF0aW9uczoyCg==',
+                acronym: 'ORG1',
+                name: 'organization one',
+                slug: 'organization-one',
+                domainCount: 5,
+                __typename: 'Organizations',
+              },
+              __typename: 'OrganizationsEdge',
+            },
+          ],
+          pageInfo: {
+            hasNextPage: true,
+            endCursor: 'YXJyYXljb25uZWN0aW9uOjA=',
+            hasPreviousPage: false,
+            startCursor: 'YXJyYXljb25uZWN0aW9uOjA=',
+            __typename: 'PageInfo',
+          },
+          __typename: 'OrganizationsConnection',
+        },
+      },
+    })
+    describe(`when the "next" button is clicked`, () => {
+      it('displays the next pagination result', async () => {
+        // We need two of these?
+        const mocks = [
+          {
+            request: {
+              query: PAGINATED_ORGANIZATIONS,
+              variables: { after: 'YXJyYXljb25uZWN0aW9uOjA=', first: 1 },
+            },
+            result: {
+              data: {
+                organizations: {
+                  edges: [
+                    {
+                      cursor: 'YXJyYXljb25uZWN0aW9uOjA=',
+                      node: {
+                        id: 'T3JnYW5pemF0aW9uczoxCg==',
+                        acronym: 'ORG2',
+                        name: 'organization two',
+                        slug: 'organization-two',
+                        domainCount: 5,
+                        __typename: 'Organizations',
+                      },
+                      __typename: 'OrganizationsEdge',
+                    },
+                  ],
+                  pageInfo: {
+                    hasNextPage: false,
+                    endCursor: 'YXJyYXljb25uZWN0aW9uOjA=',
+                    hasPreviousPage: true,
+                    startCursor: 'YXJyYXljb25uZWN0aW9uOjA=',
+                    __typename: 'PageInfo',
+                  },
+                  __typename: 'OrganizationsConnection',
+                },
+              },
+            },
+          },
+          {
+            request: {
+              query: PAGINATED_ORGANIZATIONS,
+              variables: { after: 'YXJyYXljb25uZWN0aW9uOjA=', first: 1 },
+            },
+            result: {
+              data: {
+                organizations: {
+                  edges: [
+                    {
+                      cursor: 'YXJyYXljb25uZWN0aW9uOjA=',
+                      node: {
+                        id: 'T3JnYW5pemF0aW9uczoxCg==',
+                        acronym: 'ORG2',
+                        name: 'organization two',
+                        slug: 'organization-two',
+                        domainCount: 5,
+                        __typename: 'Organizations',
+                      },
+                      __typename: 'OrganizationsEdge',
+                    },
+                  ],
+                  pageInfo: {
+                    hasNextPage: false,
+                    endCursor: 'YXJyYXljb25uZWN0aW9uOjA=',
+                    hasPreviousPage: true,
+                    startCursor: 'YXJyYXljb25uZWN0aW9uOjA=',
+                    __typename: 'PageInfo',
+                  },
+                  __typename: 'OrganizationsConnection',
+                },
+              },
+            },
+          },
+        ]
+        const history = createMemoryHistory({
+          initialEntries: ['/organizations'],
+          initialIndex: 0,
+        })
+
+        const { getByText } = render(
+          <UserStateProvider
+            initialState={{ userName: null, jwt: null, tfa: null }}
+          >
+            <ThemeProvider theme={theme}>
+              <I18nProvider i18n={setupI18n()}>
+                <MockedProvider mocks={mocks} cache={cache}>
+                  <Router history={history}>
+                    <Switch>
+                      <Route
+                        path="/organizations"
+                        render={() => <Organizations orgsPerPage={1} />}
+                      />
+                    </Switch>
+                  </Router>
+                </MockedProvider>
+              </I18nProvider>
+            </ThemeProvider>
+          </UserStateProvider>,
+        )
+
+        await waitFor(() =>
+          expect(getByText(/organization one/)).toBeInTheDocument(),
+        )
+
+        const next = await waitFor(() => getByText('Next'))
+
+        await waitFor(() => {
+          fireEvent.click(next)
+        })
+
+        await waitFor(() =>
+          expect(getByText(/organization two/)).toBeInTheDocument(),
+        )
+      })
+    })
+  })
+})