Add pagination and sort to teams page

Author: vgeorge

cypress/e2e/teams/index.cy.js

@@ -3,35 +3,37 @@ const {
   addZeroPadding,
 } = require('../../../src/lib/utils')
 
-const team1Members = generateSequenceArray(25, 1).map((i) => ({
-  id: i,
-  name: `User ${addZeroPadding(i, 3)}`,
-}))
-
-const [user1] = team1Members
-
-const team1 = {
-  name: 'Team 1',
-  privacy: 'public',
+// Moderator user
+const user1 = {
+  id: 1,
 }
 
-const team2 = {
-  name: 'Team 2',
-  privacy: 'private',
-}
+// Generate teams
+const TEAMS_COUNT = 35
+const teams = generateSequenceArray(TEAMS_COUNT, 1).map((i) => ({
+  id: i,
+  name: `Team ${addZeroPadding(i, 3)}`,
+}))
 
 describe('Teams page', () => {
   before(() => {
     cy.task('db:reset')
     cy.task('db:seed:create-teams', {
-      teams: [team1, team2],
+      teams,
       moderatorId: user1.id,
     })
   })
 
   it('Teams index is public and list teams', () => {
     cy.visit('/teams')
-    cy.get('body').should('contain', 'Team 1')
-    cy.get('body').should('contain', 'Team 2')
+
+    cy.get('body').should('contain', 'Team 001')
+    cy.get("[data-cy='teams-table-pagination']").should('exist')
+    cy.get('[data-cy=teams-table-pagination]').contains('Showing 1-10 of 35')
+
+    // Perform sort by team name
+    cy.get('[data-cy=table-head-column-name]').click()
+    cy.get('[data-cy=teams-table]').contains('Team 035')
+    cy.get('[data-cy=teams-table]').contains('Team 026')
   })
 })

src/pages/teams/index.js

@@ -5,9 +5,12 @@ import Section from '../../components/section'
 import Table from '../../components/tables/table'
 import theme from '../../styles/theme'
 import join from 'url-join'
-import { pick, map } from 'ramda'
+import { pick, map, sort, descend, ascend, prop } from 'ramda'
 import { getTeams } from '../../lib/teams-api'
 import logger from '../../lib/logger'
+import { serverRuntimeConfig } from '../../../next.config.js'
+import Pagination from '../../components/pagination'
+const { DEFAULT_PAGE_SIZE } = serverRuntimeConfig
 
 const Map = dynamic(import('../../components/list-map'), {
   ssr: false,
@@ -24,6 +27,11 @@ export default class TeamList extends Component {
       teams: [],
       searchOnMapMove: false,
       mapBounds: undefined,
+      page: 1,
+      sortOptions: {
+        key: 'name',
+        direction: 'asc',
+      },
     }
   }
 
@@ -51,24 +59,50 @@ export default class TeamList extends Component {
   }
 
   renderTeams() {
-    const { teams } = this.state
+    const { teams, sortOptions, page } = this.state
     if (!teams) return null
 
-    if (teams.length === 0) {
-      return <p>No teams created</p>
-    }
+    const columns = [
+      { key: 'name', sortable: true },
+      { key: 'id', sortable: true },
+      { key: 'hashtag', sortable: true },
+    ]
+
+    let rows = sort(
+      sortOptions.direction === 'asc'
+        ? ascend(prop(sortOptions.key))
+        : descend(prop(sortOptions.key)),
+      teams
+    )
+
+    // Calculate start and end index
+    const pageStartIndex = (page - 1) * DEFAULT_PAGE_SIZE
+    const pageEndIndex = pageStartIndex + DEFAULT_PAGE_SIZE
 
     return (
-      <Table
-        rows={teams}
-        columns={[{ key: 'name' }, { key: 'id' }, { key: 'hashtag' }]}
-        onRowClick={(row) => {
-          Router.push(
-            join(URL, `/team?id=${row.id}`),
-            join(URL, `/teams/${row.id}`)
-          )
-        }}
-      />
+      <>
+        <Table
+          data-cy={`teams-table`}
+          columns={columns}
+          rows={rows.slice(pageStartIndex, pageEndIndex)}
+          onRowClick={(row) => {
+            Router.push(join(URL, `/teams/${row.id}`))
+          }}
+          emptyPlaceHolder={'No teams created yet.'}
+          showRowNumbers
+          sort={sortOptions}
+          setSort={(s) => this.setState({ sortOptions: s })}
+        />
+        <Pagination
+          data-cy={`teams-table-pagination`}
+          pagination={{
+            perPage: DEFAULT_PAGE_SIZE,
+            total: rows.length,
+            currentPage: page,
+          }}
+          setPage={(p) => this.setState({ page: p })}
+        />
+      </>
     )
   }