9.4-end-pagination-v2.1

Author: Carlos Rufo Jimenez

src/components/App.js

@@ -2,7 +2,7 @@ import React from 'react'
 import LinkList from './LinkList'
 import CreateLink from './CreateLink'
 import Header from './Header'
-import { Switch, Route } from 'react-router-dom'
+import { Switch, Route, Redirect } from 'react-router-dom'
 import Login from './Login'
 import Search from './Search'
 
@@ -11,10 +11,12 @@ export default () => (
     <Header />
     <div className="ph3 pv1 background-gray">
       <Switch>
-        <Route exact path="/" component={LinkList} />
+        <Route exact path="/" render={() => <Redirect to="/new/1" />} />
         <Route exact path="/create" component={CreateLink} />
         <Route exact path="/login" component={Login} />
         <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'
 
 const POST_MUTATION = gql`
   mutation PostMutation($description: String!, $url: String!) {
@@ -53,13 +54,21 @@ class CreateLink extends Component {
         <Mutation
           mutation={POST_MUTATION}
           variables={{ description, url }}
-          onCompleted={() => this.props.history.push('/')}
+          onCompleted={() => this.props.history.push('/new/1')}
           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
+              data,
+              variables: { first, skip, orderBy }
             })
           }}
         >

src/components/Header.js

@@ -13,6 +13,10 @@ const Header = props => {
           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

@@ -3,10 +3,11 @@ import Link from './Link'
 import { Query } from 'react-apollo'
 import gql from 'graphql-tag'
 import LinkListSubscriptions from './LinkListSubscriptions'
+import { LINKS_PER_PAGE } from '../constants'
 
 export const FEED_QUERY = gql`
-  {
-    feed {
+  query FeedQuery($first: Int, $skip: Int, $orderBy: LinkOrderByInput) {
+    feed(first: $first, skip: $skip, orderBy: $orderBy) {
       links {
         id
         createdAt
@@ -23,27 +24,65 @@ export const FEED_QUERY = gql`
           }
         }
       }
+      count
     }
   }
 `
 
-const updateCacheAfterVote = (store, createVote, linkId) => {
-  const data = store.readQuery({ query: FEED_QUERY })
+const updateCacheAfterVote = (page, isNewPage, cache, createVote, linkId) => {
+  const skip = isNewPage ? (page - 1) * LINKS_PER_PAGE : 0
+  const first = isNewPage ? LINKS_PER_PAGE : 100
+  const orderBy = isNewPage ? 'createdAt_DESC' : null
+  const data = cache.readQuery({
+    query: FEED_QUERY,
+    variables: { first, skip, orderBy }
+  })
 
   const votedLink = data.feed.links.find(link => link.id === linkId)
   votedLink.votes = createVote.link.votes
+  cache.writeQuery({ query: FEED_QUERY, data })
+}
+
+const getQueryVariables = (page, isNewPage) => {
+  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 }
+}
+
+const 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
+}
 
-  store.writeQuery({ query: FEED_QUERY, data })
+const nextPage = (page, data, history) => {
+  if (page <= data.feed.count / LINKS_PER_PAGE) {
+    const nextPage = page + 1
+    history.push(`/new/${nextPage}`)
+  }
+}
+
+const previousPage = (page, history) => {
+  if (page > 1) {
+    const previousPage = page - 1
+    history.push(`/new/${previousPage}`)
+  }
 }
 
-export default () => {
+export default ({ match, location, history }) => {
+  const isNewPage = location.pathname.includes('new')
+  const page = parseInt(match.params.page, 10)
   return (
-    <Query query={FEED_QUERY}>
+    <Query query={FEED_QUERY} variables={getQueryVariables(page, isNewPage)}>
       {({ loading, error, data, subscribeToMore }) => {
         if (loading) return <div>Fetching</div>
         if (error) return <div>Error</div>
 
-        const linksToRender = data.feed.links
+        const linksToRender = getLinksToRender(isNewPage, data)
 
         return (
           <LinkListSubscriptions subscribeToMore={subscribeToMore}>
@@ -52,9 +91,29 @@ export default () => {
                 key={link.id}
                 link={link}
                 index={index}
-                updateStoreAfterVote={updateCacheAfterVote}
+                updateStoreAfterVote={updateCacheAfterVote.bind(
+                  this,
+                  page,
+                  isNewPage
+                )}
               />
             ))}
+            {isNewPage && (
+              <div className="flex ml4 mv3 gray">
+                <div
+                  className="pointer mr2"
+                  onClick={() => previousPage(page, history)}
+                >
+                  Previous
+                </div>
+                <div
+                  className="pointer"
+                  onClick={() => nextPage(page, data, history)}
+                >
+                  Next
+                </div>
+              </div>
+            )}
           </LinkListSubscriptions>
         )
       }}

src/constants.js

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