Update apollo; add unsubscribe feature

Author: lorensr

.nvmrc

@@ -0,0 +1 @@
+8

package-lock.json

@@ -3,20 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/react-components": "^3.1.5",
+    "@apollo/react-hoc": "^3.1.5",
+    "@apollo/react-hooks": "^3.1.5",
     "@fortawesome/fontawesome": "^1.1.8",
     "@fortawesome/fontawesome-free-brands": "^5.0.13",
     "@fortawesome/fontawesome-free-solid": "^5.0.13",
     "@fortawesome/react-fontawesome": "0.0.20",
+    "@types/react": "^16.9.35",
     "ajv": "^6.5.0",
-    "apollo-cache-inmemory": "^1.0.0",
-    "apollo-client": "^2.2.7",
-    "apollo-link": "^1.0.7",
+    "apollo-cache-inmemory": "^1.6.6",
+    "apollo-client": "^2.6.10",
+    "apollo-link": "^1.2.14",
     "apollo-link-context": "^1.0.3",
     "apollo-link-error": "^1.0.5",
-    "apollo-link-http": "^1.0.0",
+    "apollo-link-http": "^1.5.17",
     "apollo-link-state": "^0.4.0",
     "apollo-link-ws": "^1.0.1",
-    "apollo-utilities": "^1.0.3",
+    "apollo-utilities": "^1.3.4",
     "auth0-helpers": "^0.4.2",
     "auth0-js": "^9.13.2",
     "canvas-confetti": "0.0.3",
@@ -25,17 +29,17 @@
     "cloudinary-react": "^1.0.6",
     "date-fns": "^1.29.0",
     "formik": "^0.11.11",
-    "graphql": "^0.13.2",
+    "graphql": "^14.6.0",
     "graphql-anywhere": "^4.1.1",
-    "graphql-tag": "^2.5.0",
+    "graphql-tag": "^2.10.3",
     "history": "^4.7.2",
     "lodash": "^4.17.4",
     "logrocket": "^0.6.12",
     "material-ui": "1.0.0-beta.34",
     "material-ui-icons": "1.0.0-beta.17",
-    "react": "^16.4.1",
-    "react-apollo": "^2.1.6",
-    "react-dom": "^16.4.1",
+    "react": "^16.13.1",
+    "react-apollo": "^3.1.5",
+    "react-dom": "^16.13.1",
     "react-ga": "^2.5.3",
     "react-loading-skeleton": "^0.3.2",
     "react-markdown": "^3.3.0",
@@ -50,7 +54,7 @@
     "revalidate": "^1.2.0",
     "scroll-into-view-if-needed": "^2.2.0",
     "serve": "^9.1.0",
-    "subscriptions-transport-ws": "^0.9.7",
+    "subscriptions-transport-ws": "^0.9.16",
     "typed.js": "^2.0.6"
   },
   "scripts": {

package.json

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types'
 
 import Landing from './landing/Landing'
 import Paypal from './landing/Paypal'
+import Unsubscribe from './Unsubscribe'
 import Terms from './landing/Terms'
 import Privacy from './landing/Privacy'
 import Tshirt from './landing/Tshirt'
@@ -41,6 +42,7 @@ class App extends Component {
             path="/paypal/:package?"
             render={() => <Paypal {...authProps} />}
           />
+          <Route path="/unsubscribe/:token" render={() => <Unsubscribe />} />
           <Route
             exact
             path="/welcome"
@@ -71,8 +73,8 @@ class App extends Component {
                     path="/team/:token"
                     render={({
                       match: {
-                        params: { token }
-                      }
+                        params: { token },
+                      },
                     }) => <Team {...authProps} urlToken={token} />}
                   />
                   <Route
@@ -95,7 +97,7 @@ App.propTypes = {
   user: PropTypes.object,
   login: PropTypes.func.isRequired,
   logout: PropTypes.func.isRequired,
-  loading: PropTypes.bool.isRequired
+  loading: PropTypes.bool.isRequired,
 }
 
 export default withAuth(App)

src/components/App.js

@@ -15,13 +15,14 @@ import times from 'lodash/times'
 import remove from 'lodash/remove'
 import find from 'lodash/find'
 import gql from 'graphql-tag'
-import { graphql, compose } from 'react-apollo'
+import { graphql } from 'react-apollo'
+import compose from 'recompose/compose'
 import { propType } from 'graphql-anywhere'
 import Dialog, {
   DialogActions,
   DialogContent,
   DialogContentText,
-  DialogTitle
+  DialogTitle,
 } from 'material-ui/Dialog'
 import Button from 'material-ui/Button'
 import Modal from 'material-ui/Modal'
@@ -32,19 +33,23 @@ import { REVIEW_ENTRY, REVIEWS_QUERY } from '../graphql/Review'
 
 const StarRating = ({ rating }) => (
   <div>
-    {times(rating, i => <StarIcon key={i} />)}
-    {times(5 - rating, i => <StarBorderIcon key={i} />)}
+    {times(rating, (i) => (
+      <StarIcon key={i} />
+    ))}
+    {times(5 - rating, (i) => (
+      <StarBorderIcon key={i} />
+    ))}
   </div>
 )
 
 class Review extends Component {
   state = {
     anchorEl: null,
     deleteConfirmationOpen: false,
-    editing: false
+    editing: false,
   }
 
-  openMenu = event => {
+  openMenu = (event) => {
     this.setState({ anchorEl: event.currentTarget })
   }
 
@@ -72,7 +77,7 @@ class Review extends Component {
 
   delete = () => {
     this.closeDeleteConfirmation()
-    this.props.delete(this.props.review.id).catch(e => {
+    this.props.delete(this.props.review.id).catch((e) => {
       if (find(e.graphQLErrors, { message: 'unauthorized' })) {
         alert('👮‍♀️✋ You can only delete your own reviews!')
       }
@@ -81,18 +86,18 @@ class Review extends Component {
 
   toggleFavorite = () => {
     const {
-      review: { id, favorited }
+      review: { id, favorited },
     } = this.props
     this.props.favorite(id, !favorited)
   }
 
   render() {
     const {
       review: { text, stars, createdAt, favorited, author },
-      user
+      user,
     } = this.props
 
-    const linkToProfile = child => (
+    const linkToProfile = (child) => (
       <a
         href={`https://github.com/${author.username}`}
         target="_blank"
@@ -181,7 +186,7 @@ class Review extends Component {
 Review.propTypes = {
   review: propType(REVIEW_ENTRY).isRequired,
   favorite: PropTypes.func.isRequired,
-  user: PropTypes.object
+  user: PropTypes.object,
 }
 
 const FAVORITE_REVIEW_MUTATION = gql`
@@ -213,10 +218,10 @@ const withFavoriteMutation = graphql(FAVORITE_REVIEW_MUTATION, {
           favoriteReview: {
             __typename: 'Review',
             id,
-            favorited: favorite
-          }
+            favorited: favorite,
+          },
         },
-        update: store => {
+        update: (store) => {
           const data = store.readQuery({ query: READ_USER_FAVORITES })
 
           if (favorite) {
@@ -226,9 +231,9 @@ const withFavoriteMutation = graphql(FAVORITE_REVIEW_MUTATION, {
           }
 
           store.writeQuery({ query: READ_USER_FAVORITES, data })
-        }
-      })
-  })
+        },
+      }),
+  }),
 })
 
 const DELETE_REVIEW_MUTATION = gql`
@@ -239,16 +244,16 @@ const DELETE_REVIEW_MUTATION = gql`
 
 const withDeleteMutation = graphql(DELETE_REVIEW_MUTATION, {
   props: ({ mutate }) => ({
-    delete: id =>
+    delete: (id) =>
       mutate({
         variables: { id },
         optimisticResponse: {
-          removeReview: true
+          removeReview: true,
         },
-        update: store => {
+        update: (store) => {
           const query = {
             query: REVIEWS_QUERY,
-            variables: { limit: 10, orderBy: 'createdAt_DESC' }
+            variables: { limit: 10, orderBy: 'createdAt_DESC' },
           }
 
           let data = store.readQuery(query)
@@ -266,9 +271,9 @@ const withDeleteMutation = graphql(DELETE_REVIEW_MUTATION, {
           data = store.readQuery({ query: READ_USER_FAVORITES })
           remove(data.currentUser.favoriteReviews, { id })
           store.writeQuery({ query: READ_USER_FAVORITES, data })
-        }
-      })
-  })
+        },
+      }),
+  }),
 })
 
 export default compose(withFavoriteMutation, withDeleteMutation)(Review)

src/components/Review.js

@@ -6,7 +6,8 @@ import TextField from 'material-ui/TextField'
 import StarIcon from 'material-ui-icons/Star'
 import StarBorderIcon from 'material-ui-icons/StarBorder'
 import gql from 'graphql-tag'
-import { graphql, compose } from 'react-apollo'
+import { graphql } from 'react-apollo'
+import compose from 'recompose/compose'
 import classNames from 'classnames'
 import pick from 'lodash/pick'
 
@@ -26,19 +27,19 @@ class ReviewForm extends Component {
     this.state = {
       text: review ? review.text : '',
       stars: review ? review.stars : null,
-      errorText: null
+      errorText: null,
     }
   }
 
-  updateText = event => {
+  updateText = (event) => {
     this.setState({ text: event.target.value })
   }
 
-  updateStars = stars => {
+  updateStars = (stars) => {
     this.setState({ stars })
   }
 
-  handleSubmit = event => {
+  handleSubmit = (event) => {
     event.preventDefault()
     const { text, stars } = this.state
 
@@ -112,15 +113,15 @@ ReviewForm.propTypes = {
   user: PropTypes.shape({
     name: PropTypes.string.isRequired,
     photo: PropTypes.string.isRequired,
-    username: PropTypes.string.isRequired
+    username: PropTypes.string.isRequired,
   }),
   addReview: PropTypes.func.isRequired,
   editReview: PropTypes.func.isRequired,
   review: PropTypes.shape({
     id: PropTypes.string.isRequired,
     text: PropTypes.string,
-    stars: PropTypes.number
-  })
+    stars: PropTypes.number,
+  }),
 }
 
 const ADD_REVIEW_MUTATION = gql`
@@ -137,7 +138,7 @@ const withAddReview = graphql(ADD_REVIEW_MUTATION, {
     addReview: (text, stars) => {
       mutate({
         variables: {
-          input: { text, stars }
+          input: { text, stars },
         },
         optimisticResponse: {
           createReview: {
@@ -152,23 +153,23 @@ const withAddReview = graphql(ADD_REVIEW_MUTATION, {
               'id',
               'name',
               'photo',
-              'username'
-            ])
-          }
+              'username',
+            ]),
+          },
         },
         update: (store, { data: { createReview: newReview } }) => {
           const query = {
             query: REVIEWS_QUERY,
-            variables: { limit: 10, orderBy: 'createdAt_DESC' }
+            variables: { limit: 10, orderBy: 'createdAt_DESC' },
           }
 
           const data = store.readQuery(query)
           data.reviews.unshift(newReview)
           store.writeQuery({ ...query, data })
-        }
+        },
       })
-    }
-  })
+    },
+  }),
 })
 
 const EDIT_REVIEW_MUTATION = gql`
@@ -187,23 +188,20 @@ const withEditReview = graphql(EDIT_REVIEW_MUTATION, {
       mutate({
         variables: {
           id,
-          input: { text, stars }
+          input: { text, stars },
         },
         optimisticResponse: {
           updateReview: {
             __typename: 'Review',
             id,
             text,
             stars,
-            favorite: true
-          }
-        }
+            favorite: true,
+          },
+        },
       })
-    }
-  })
+    },
+  }),
 })
 
-export default compose(
-  withAddReview,
-  withEditReview
-)(ReviewForm)
+export default compose(withAddReview, withEditReview)(ReviewForm)