Switch to after for pagination, add orderBy

Author: lorensr

src/components/Review.js

@@ -247,13 +247,21 @@ const withDeleteMutation = graphql(DELETE_REVIEW_MUTATION, {
         update: store => {
           const query = {
             query: REVIEWS_QUERY,
-            variables: { skip: 0, limit: 10 }
+            variables: { limit: 10, orderBy: 'createdAt_DESC' }
           }
 
           let data = store.readQuery(query)
           remove(data.reviews, { id })
           store.writeQuery({ ...query, data })
 
+          query.variables.orderBy = 'createdAt_ASC'
+
+          try {
+            data = store.readQuery(query)
+            remove(data.reviews, { id })
+            store.writeQuery({ ...query, data })
+          } catch (e) {}
+
           data = store.readQuery({ query: READ_USER_FAVORITES })
           remove(data.currentUser.favoriteReviews, { id })
           store.writeQuery({ query: READ_USER_FAVORITES, data })

src/components/ReviewForm.js

@@ -157,7 +157,7 @@ const withAddReview = graphql(ADD_REVIEW_MUTATION, {
         update: (store, { data: { createReview: newReview } }) => {
           const query = {
             query: REVIEWS_QUERY,
-            variables: { skip: 0, limit: 10 }
+            variables: { limit: 10, orderBy: 'createdAt_DESC' }
           }
 
           const data = store.readQuery(query)

src/components/ReviewList.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'react-apollo'
 import { propType } from 'graphql-anywhere'
-import find from 'lodash/find'
 
 import Review from './Review'
 
@@ -51,33 +50,35 @@ class ReviewList extends Component {
 
 ReviewList.propTypes = {
   reviews: PropTypes.arrayOf(propType(REVIEW_ENTRY)),
-  user: PropTypes.object
+  user: PropTypes.object,
+  orderBy: PropTypes.string.isRequired
 }
 
 const withReviews = graphql(REVIEWS_QUERY, {
-  options: {
+  options: ({ orderBy }) => ({
     errorPolicy: 'all',
-    variables: { skip: 0, limit: 10 },
+    variables: { limit: 10, orderBy },
     notifyOnNetworkStatusChange: true
-  },
+  }),
   props: ({ data: { reviews, fetchMore, networkStatus } }) => ({
     reviews,
     networkStatus,
     loadMoreReviews: () => {
+      if (!reviews) {
+        return
+      }
+
+      const lastId = reviews[reviews.length - 1].id
       return fetchMore({
-        variables: { skip: reviews.length - 5, limit: 15 },
+        variables: { after: lastId },
         updateQuery: (previousResult, { fetchMoreResult }) => {
           if (!fetchMoreResult.reviews) {
             return previousResult
           }
 
-          const newReviews = fetchMoreResult.reviews.filter(
-            ({ id }) => !find(previousResult.reviews, { id })
-          )
-
           return {
             ...previousResult,
-            reviews: [...previousResult.reviews, ...newReviews]
+            reviews: [...previousResult.reviews, ...fetchMoreResult.reviews]
           }
         }
       })

src/components/Reviews.js

@@ -5,13 +5,21 @@ import FavoriteIcon from 'material-ui-icons/Favorite'
 import Button from 'material-ui/Button'
 import AddIcon from 'material-ui-icons/Add'
 import Modal from 'material-ui/Modal'
+import { MenuItem } from 'material-ui/Menu'
+import { FormControl } from 'material-ui/Form'
+import Select from 'material-ui/Select'
 
 import ReviewList from './ReviewList'
 import ReviewForm from './ReviewForm'
 
 class Reviews extends Component {
   state = {
-    addingReview: false
+    addingReview: false,
+    orderBy: 'createdAt_DESC'
+  }
+
+  handleOrderByChange = event => {
+    this.setState({ orderBy: event.target.value })
   }
 
   addReview = () => {
@@ -36,11 +44,23 @@ class Reviews extends Component {
                 {favoriteCount}
               </div>
             ) : null}
+
             <h1>Reviews</h1>
+
+            <FormControl>
+              <Select
+                value={this.state.orderBy}
+                onChange={this.handleOrderByChange}
+                displayEmpty
+              >
+                <MenuItem value="createdAt_DESC">Newest</MenuItem>
+                <MenuItem value="createdAt_ASC">Oldest</MenuItem>
+              </Select>
+            </FormControl>
           </header>
         </div>
 
-        <ReviewList user={user} />
+        <ReviewList user={user} orderBy={this.state.orderBy} />
 
         {user && (
           <div>

src/graphql/Review.js

@@ -17,8 +17,8 @@ export const REVIEW_ENTRY = gql`
 `
 
 export const REVIEWS_QUERY = gql`
-  query ReviewsQuery($skip: Int, $limit: Int) {
-    reviews(skip: $skip, limit: $limit) {
+  query ReviewsQuery($after: ObjID, $limit: Int, $orderBy: ReviewOrderBy) {
+    reviews(after: $after, limit: $limit, orderBy: $orderBy) {
       ...ReviewEntry
     }
   }