Reviews subscriptions

Author: lorensr

src/components/ReviewCreatedNotification.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import { Subscription } from 'react-apollo'
+import Snackbar from '@material-ui/core/Snackbar'
+
+import { ON_REVIEW_CREATED_SUBSCRIPTION } from '../graphql/Review'
+
+class ReviewCreatedNotification extends Component {
+  state = {
+    isOpen: false
+  }
+
+  close = () => {
+    this.setState({ isOpen: false })
+  }
+
+  open = () => {
+    this.setState({ isOpen: true })
+    setTimeout(this.close, 5000)
+  }
+
+  render() {
+    return (
+      <Subscription
+        subscription={ON_REVIEW_CREATED_SUBSCRIPTION}
+        onSubscriptionData={this.open}
+      >
+        {({ data }) =>
+          data && data.reviewCreated ? (
+            <Snackbar
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+              open={this.state.isOpen}
+              onClose={this.close}
+              message={`New review from ${data.reviewCreated.author.name}: ${
+                data.reviewCreated.text
+              }`}
+            />
+          ) : null
+        }
+      </Subscription>
+    )
+  }
+}
+
+export default ReviewCreatedNotification

src/components/ReviewForm.js

@@ -163,8 +163,12 @@ const withAddReview = graphql(ADD_REVIEW_MUTATION, {
           }
 
           let data = store.readQuery(query)
-          data.reviews.unshift(newReview)
-          store.writeQuery({ ...query, data })
+
+          const alreadyHaveNewReview = data.reviews[0].id === newReview.id
+          if (!alreadyHaveNewReview) {
+            data.reviews.unshift(newReview)
+            store.writeQuery({ ...query, data })
+          }
 
           query.variables.orderBy = 'createdAt_ASC'
 

src/components/ReviewList.js

@@ -2,16 +2,24 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'react-apollo'
 import { propType } from 'graphql-anywhere'
+import reject from 'lodash/reject'
 
 import Review from './Review'
 
-import { REVIEWS_QUERY, REVIEW_ENTRY } from '../graphql/Review'
+import {
+  REVIEWS_QUERY,
+  REVIEW_ENTRY,
+  ON_REVIEW_CREATED_SUBSCRIPTION,
+  ON_REVIEW_UPDATED_SUBSCRIPTION,
+  ON_REVIEW_DELETED_SUBSCRIPTION
+} from '../graphql/Review'
 
 const FETCH_MORE = 3
 
 class ReviewList extends Component {
   componentDidMount() {
     window.addEventListener('scroll', this.handleScroll)
+    this.props.subscribeToReviewUpdates()
   }
 
   componentWillUnmount() {
@@ -60,7 +68,10 @@ const withReviews = graphql(REVIEWS_QUERY, {
     variables: { limit: 10, orderBy },
     notifyOnNetworkStatusChange: true
   }),
-  props: ({ data: { reviews, fetchMore, networkStatus } }) => ({
+  props: ({
+    data: { reviews, fetchMore, networkStatus, subscribeToMore },
+    ownProps: { orderBy }
+  }) => ({
     reviews,
     networkStatus,
     loadMoreReviews: () => {
@@ -82,6 +93,43 @@ const withReviews = graphql(REVIEWS_QUERY, {
           }
         }
       })
+    },
+    subscribeToReviewUpdates: () => {
+      subscribeToMore({
+        document: ON_REVIEW_CREATED_SUBSCRIPTION,
+        updateQuery: (prev, { subscriptionData }) => {
+          // Assuming infinite reviews, we don't need to add new reviews to
+          // Oldest list
+          if (orderBy === 'createdAt_ASC') {
+            return prev
+          }
+
+          const newReview = subscriptionData.data.reviewCreated
+          return {
+            reviews: [newReview, ...prev.reviews]
+          }
+        }
+      })
+      subscribeToMore({
+        document: ON_REVIEW_UPDATED_SUBSCRIPTION,
+        updateQuery: (prev, { subscriptionData }) => {
+          const updatedReview = subscriptionData.data.reviewUpdated
+          return {
+            reviews: prev.reviews.map(review =>
+              review.id === updatedReview.id ? updatedReview : review
+            )
+          }
+        }
+      })
+      subscribeToMore({
+        document: ON_REVIEW_DELETED_SUBSCRIPTION,
+        updateQuery: (prev, { subscriptionData }) => {
+          const deletedId = subscriptionData.data.reviewDeleted
+          return {
+            reviews: reject(prev.reviews, { id: deletedId })
+          }
+        }
+      })
     }
   })
 })

src/components/Reviews.js

@@ -12,6 +12,7 @@ import Select from 'material-ui/Select'
 import ReviewList from './ReviewList'
 import { withUser } from '../lib/withUser'
 import ReviewForm from './ReviewForm'
+import ReviewCreatedNotification from './ReviewCreatedNotification'
 
 class Reviews extends Component {
   state = {
@@ -62,6 +63,7 @@ class Reviews extends Component {
         </div>
 
         <ReviewList user={user} orderBy={this.state.orderBy} />
+        <ReviewCreatedNotification />
 
         {user && (
           <div>

src/graphql/Review.js

@@ -24,3 +24,27 @@ export const REVIEWS_QUERY = gql`
   }
   ${REVIEW_ENTRY}
 `
+
+export const ON_REVIEW_CREATED_SUBSCRIPTION = gql`
+  subscription onReviewCreated {
+    reviewCreated {
+      ...ReviewEntry
+    }
+  }
+  ${REVIEW_ENTRY}
+`
+
+export const ON_REVIEW_UPDATED_SUBSCRIPTION = gql`
+  subscription onReviewUpdated {
+    reviewUpdated {
+      ...ReviewEntry
+    }
+  }
+  ${REVIEW_ENTRY}
+`
+
+export const ON_REVIEW_DELETED_SUBSCRIPTION = gql`
+  subscription onReviewDeleted {
+    reviewDeleted
+  }
+`