Add count of favorited reviews

Author: lorensr

src/components/App.js

@@ -12,11 +12,11 @@ import Profile from './Profile'
 import withAuth from '../lib/withAuth'
 import Reviews from './Reviews'
 
-const Book = () => (
+const Book = ({ user }) => (
   <div>
     <TableOfContents />
     <Switch>
-      <Route exact path="/reviews" component={Reviews} />
+      <Route exact path="/reviews" render={() => <Reviews user={user} />} />
       <Route component={Section} />
     </Switch>
   </div>
@@ -43,7 +43,7 @@ class App extends Component {
             path="/me"
             render={() => <Profile logout={logout} {...authProps} />}
           />
-          <Route component={Book} />
+          <Route render={() => <Book user={this.props.user} />} />
         </Switch>
       </div>
     )

src/components/Review.js

@@ -12,6 +12,7 @@ import StarIcon from 'material-ui-icons/Star'
 import StarBorderIcon from 'material-ui-icons/StarBorder'
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'
 import times from 'lodash/times'
+import remove from 'lodash/remove'
 import gql from 'graphql-tag'
 import { graphql } from 'react-apollo'
 
@@ -129,6 +130,16 @@ const FAVORITE_REVIEW_MUTATION = gql`
   }
 `
 
+const READ_USER_FAVORITES = gql`
+  query ReadUserFavorites {
+    currentUser {
+      favoriteReviews {
+        id
+      }
+    }
+  }
+`
+
 const withFavoriteMutation = graphql(FAVORITE_REVIEW_MUTATION, {
   props: ({ mutate }) => ({
     favorite: (id, favorite) =>
@@ -140,6 +151,17 @@ const withFavoriteMutation = graphql(FAVORITE_REVIEW_MUTATION, {
             id,
             favorited: favorite
           }
+        },
+        update: store => {
+          const data = store.readQuery({ query: READ_USER_FAVORITES })
+
+          if (favorite) {
+            data.currentUser.favoriteReviews.push({ id, __typename: 'Review' })
+          } else {
+            remove(data.currentUser.favoriteReviews, { id })
+          }
+
+          store.writeQuery({ query: READ_USER_FAVORITES, data })
         }
       })
   })

src/components/Reviews.js

@@ -2,29 +2,48 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'react-apollo'
 import gql from 'graphql-tag'
+import get from 'lodash/get'
+import FavoriteIcon from 'material-ui-icons/Favorite'
 
 import Review from './Review'
 
-const Reviews = ({ reviews, loading }) => (
-  <main className="Reviews mui-fixed">
-    <div className="Reviews-header-wrapper">
-      <header className="Reviews-header">
-        <h1>Reviews</h1>
-      </header>
-    </div>
-    <div className="Reviews-content">
-      {loading ? (
-        <div className="Spinner" />
-      ) : (
-        reviews.map(review => <Review key={review.id} review={review} />)
-      )}
-    </div>
-  </main>
-)
+const Reviews = ({ reviews, loading, user }) => {
+  const favoriteCount = get(user, 'favoriteReviews.length')
+
+  return (
+    <main className="Reviews mui-fixed">
+      <div className="Reviews-header-wrapper">
+        <header className="Reviews-header">
+          {favoriteCount ? (
+            <div className="Reviews-favorite-count">
+              <FavoriteIcon />
+              {favoriteCount}
+            </div>
+          ) : null}
+          <h1>Reviews</h1>
+        </header>
+      </div>
+      <div className="Reviews-content">
+        {loading ? (
+          <div className="Spinner" />
+        ) : (
+          reviews.map(review => <Review key={review.id} review={review} />)
+        )}
+      </div>
+    </main>
+  )
+}
 
 Reviews.propTypes = {
   reviews: PropTypes.arrayOf(PropTypes.object),
-  loading: PropTypes.bool.isRequired
+  loading: PropTypes.bool.isRequired,
+  user: PropTypes.shape({
+    favoriteReviews: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string.isRequired
+      })
+    )
+  })
 }
 
 const REVIEWS_QUERY = gql`

src/lib/withAuth.js

@@ -38,6 +38,9 @@ const USER_QUERY = gql`
       email
       photo
       hasPurchased
+      favoriteReviews {
+        id
+      }
     }
   }
 `