9.4-end-pagination-v2.1

Author: Carlos Rufo Jimenez

src/components/App.js

@@ -4,7 +4,7 @@ import CreateLink from './CreateLink'
 import Header from './Header'
 import Login from './Login'
 import Search from './Search'
-import { Switch, Route } from 'react-router-dom'
+import { Switch, Route, Redirect } from 'react-router-dom'
 
 class App extends Component {
   render() {
@@ -13,10 +13,12 @@ class App extends Component {
         <Header />
         <div className="ph3 pv1 background-gray">
           <Switch>
-            <Route exact path="/" component={LinkList} />
-            <Route exact path="/create" component={CreateLink} />
+            <Route exact path="/" render={() => <Redirect to="/new/1" />} />
             <Route exact path="/login" component={Login} />
+            <Route exact path="/create" component={CreateLink} />
             <Route exact path="/search" component={Search} />
+            <Route exact path="/top" component={LinkList} />
+            <Route exact path="/new/:page" component={LinkList} />
           </Switch>
         </div>
       </div>

src/components/CreateLink.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { Mutation } from 'react-apollo'
 import gql from 'graphql-tag'
 import { FEED_QUERY } from './LinkList'
+import { LINKS_PER_PAGE } from '../constants'
 
 // 1
 const POST_MUTATION = gql`
@@ -56,17 +57,27 @@ class CreateLink extends Component {
           mutation={POST_MUTATION}
           variables={{ description, url }}
           update={(cache, { data: { post } }) => {
-            const data = cache.readQuery({ query: FEED_QUERY })
+            const first = LINKS_PER_PAGE
+            const skip = 0
+            const orderBy = 'createdAt_DESC'
+            const data = cache.readQuery({
+              query: FEED_QUERY,
+              variables: { first, skip, orderBy },
+            })
             data.feed.links.splice(0, 0, post)
+            data.feed.links.pop()
             cache.writeQuery({
               query: FEED_QUERY,
               data,
+              variables: { first, skip, orderBy },
             })
           }}
         >
           {postMutation => (
             <button
-              onClick={() => postMutation() && this.props.history.push('/')}
+              onClick={() =>
+                postMutation() && this.props.history.push(`/new/1`)
+              }
             >
               Submit
             </button>

src/components/Header.js

@@ -14,6 +14,10 @@ class Header extends Component {
             new
           </Link>
           <div className="ml1">|</div>
+          <Link to="/top" className="ml1 no-underline black">
+            top
+          </Link>
+          <div className="ml1">|</div>
           <Link to="/search" className="ml1 no-underline black">
             search
           </Link>

src/components/LinkList.js

@@ -2,12 +2,12 @@ import React, { Component } from 'react'
 import Link from './Link'
 import { Query } from 'react-apollo'
 import gql from 'graphql-tag'
+import { LINKS_PER_PAGE } from '../constants'
 
-// 1
 export const FEED_QUERY = gql`
-  # 2
-  query FeedQuery {
-    feed {
+  query FeedQuery($first: Int, $skip: Int, $orderBy: LinkOrderByInput) {
+    feed(first: $first, skip: $skip, orderBy: $orderBy) {
+      count
       links {
         id
         createdAt
@@ -24,6 +24,7 @@ export const FEED_QUERY = gql`
           }
         }
       }
+      count
     }
   }
 `
@@ -109,15 +110,27 @@ class LinkList extends Component {
     )
   }
 
+  getQueryVariables = () => {
+    const page = parseInt(this.props.match.params.page, 10)
+    const isNewPage = this.props.location.pathname.includes('new')
+    const skip = isNewPage ? (page - 1) * LINKS_PER_PAGE : 0
+    const first = isNewPage ? LINKS_PER_PAGE : 100
+    const orderBy = isNewPage ? 'createdAt_DESC' : null
+    return { first, skip, orderBy }
+  }
+
   render() {
     return (
-      <Query query={FEED_QUERY}>
+      <Query query={FEED_QUERY} variables={this.getQueryVariables()}>
         {result => {
           if (result.loading) return <div>Loading</div>
           if (result.error) return <div>Error</div>
 
           const { data, subscribeToMore } = result
-          const linksToRender = data.feed.links
+
+          const isNewPage = this.props.location.pathname.includes('new')
+          const linksToRender = this._getLinksToRender(isNewPage, data)
+          const page = parseInt(this.props.match.params.page, 10)
 
           return (
             <div>
@@ -139,6 +152,19 @@ class LinkList extends Component {
                   link={link}
                 />
               ))}
+              {isNewPage && (
+                <div className="flex ml4 mv3 gray">
+                  <div
+                    className="pointer mr2"
+                    onClick={() => this._previousPage()}
+                  >
+                    Previous
+                  </div>
+                  <div className="pointer" onClick={() => this._nextPage(data)}>
+                    Next
+                  </div>
+                </div>
+              )}
             </div>
           )
         }}
@@ -147,14 +173,18 @@ class LinkList extends Component {
   }
 
   _updateCacheAfterVote = (store, createVote, linkId) => {
-    // 1
-    const data = store.readQuery({ query: FEED_QUERY })
+    const isNewPage = this.props.location.pathname.includes('new')
+    const page = parseInt(this.props.match.params.page, 10)
+    const skip = isNewPage ? (page - 1) * LINKS_PER_PAGE : 0
+    const first = isNewPage ? LINKS_PER_PAGE : 100
+    const orderBy = isNewPage ? 'createdAt_DESC' : null
+    const data = store.readQuery({
+      query: FEED_QUERY,
+      variables: { first, skip, orderBy },
+    })
 
-    // 2
     const votedLink = data.feed.links.find(link => link.id === linkId)
     votedLink.votes = createVote.link.votes
-
-    // 3
     store.writeQuery({ query: FEED_QUERY, data })
   }
 
@@ -186,6 +216,31 @@ class LinkList extends Component {
       document: NEW_VOTES_SUBSCRIPTION,
     })
   }
+
+  _getLinksToRender = (isNewPage, data) => {
+    if (isNewPage) {
+      return data.feed.links
+    }
+    const rankedLinks = data.feed.links.slice()
+    rankedLinks.sort((l1, l2) => l2.votes.length - l1.votes.length)
+    return rankedLinks
+  }
+
+  _nextPage = data => {
+    const page = parseInt(this.props.match.params.page, 10)
+    if (page <= data.feed.count / LINKS_PER_PAGE) {
+      const nextPage = page + 1
+      this.props.history.push(`/new/${nextPage}`)
+    }
+  }
+
+  _previousPage = () => {
+    const page = parseInt(this.props.match.params.page, 10)
+    if (page > 1) {
+      const previousPage = page - 1
+      this.props.history.push(`/new/${previousPage}`)
+    }
+  }
 }
 
 export default LinkList

src/constants.js

@@ -1 +1,2 @@
 export const AUTH_TOKEN = 'auth-token'
+export const LINKS_PER_PAGE = 5