feat(search): add pagination links, get limit, offset, total from query

opencollective · Apr 30, 2018 · e9fa4fe · e9fa4fe
1 parent 915abab
commit e9fa4fe
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 24 deletions.
diff --git a/src/graphql/queries.js b/src/graphql/queries.js
@@ -658,29 +658,34 @@ export const getSubscriptionsQuery = gql`
 `;
 
 export const searchCollectivesQuery = gql`
-  query search($term: String!) {
-    search(term: $term) {
-      id
-      isActive
-      type
-      slug
-      path
-      name
-      company
-      image
-      backgroundImage
-      description
-      longDescription
-      website
-      currency
-      stats {
+  query search($term: String!, $limit: Int, $offset: Int) {
+    search(term: $term, limit: $limit, offset: $offset) {
+      collectives {
         id
-        balance
-        yearlyBudget
-        backers {
-          all
+        isActive
+        type
+        slug
+        path
+        name
+        company
+        image
+        backgroundImage
+        description
+        longDescription
+        website
+        currency
+        stats {
+          id
+          balance
+          yearlyBudget
+          backers {
+            all
+          }
         }
       }
+      limit
+      offset
+      total
     }
   }
 `;

diff --git a/src/pages/search.js b/src/pages/search.js
@@ -8,6 +8,7 @@ import {
   Row,
 } from 'react-bootstrap';
 import Router from 'next/router';
+import classNames from 'classnames';
 
 import withData from '../lib/withData'
 import withIntl from '../lib/withIntl';
@@ -20,12 +21,17 @@ import ErrorPage from '../components/ErrorPage';
 import Footer from '../components/Footer';
 import Header from '../components/Header';
 import LoadingGrid from '../components/LoadingGrid';
+import { Link } from '../server/pages';
 
 import colors from '../constants/colors';
 
 class SearchPage extends React.Component {
   static getInitialProps({ query = {} }) {
-    return { term: query.q };
+    return {
+      limit: query.limit || 20,
+      offset: query.offset || 0,
+      term: query.q,
+    };
   }
 
   refetch = (event) => {
@@ -41,6 +47,13 @@ class SearchPage extends React.Component {
   render() {
     const { data: { error, loading, search }, term } = this.props;
 
+    const {
+      collectives,
+      limit,
+      offset,
+      total,
+    } = search || {};
+
     if (error) {
       return <ErrorPage {...error} />;
     }
@@ -89,6 +102,10 @@ class SearchPage extends React.Component {
             text-align: center;
             width: 100%;
           }
+
+          .pagination {
+            margin: 2rem auto;
+          }
         `}</style>
         <Header />
         <Body>
@@ -113,12 +130,31 @@ class SearchPage extends React.Component {
                 </div>
               )}
               { /* TODO: add suggested collectives when the result is empty */ } 
-              {!!search && !loading && search.map(collective => (
-                <Col className="col">
+              {!!collectives && !loading && collectives.map(collective => (
+                <Col className="col" key={collective.slug}>
                   <CollectiveCard collective={collective} />
                 </Col>
               ))}
-              { /* TODO: add "See More" button to paginate results */ }
+            </Row>
+            <Row>
+              <ul className="pagination">
+                { Array(Math.ceil(total / limit)).fill(1).map((n, i) => (
+                  <li className={classNames({ active: (i * limit) === offset })}>
+                    <Link
+                      href={{
+                        query: {
+                          limit,
+                          offset: i * limit,
+                          q: term,
+                        }
+                      }}
+                      key={i * limit}
+                    >
+                      {`${n + i}`}
+                    </Link>
+                  </li>
+                )) }
+              </ul>
             </Row>
           </Grid>
         </Body>