Remove deprected and refactor with-apollo-auth (#4070)

* Remove deprected use of apollo-client-preset, and refactor

Changes
* Remove deprected use of apollo-client-preset in favor of apollo-boost
* Refactor for usage of react-apollo@2.1

* Use standard

Just ran standard --fix

examples/with-apollo-auth/components/RegisterBox.js

@@ -0,0 +1,62 @@
+import { Mutation, withApollo } from 'react-apollo'
+import gql from 'graphql-tag'
+import cookie from 'cookie'
+import redirect from '../lib/redirect'
+
+const CREATE_USER = gql`
+    mutation Create($name: String!, $email: String!, $password: String!) {
+        createUser(name: $name, authProvider: { email: { email: $email, password: $password }}) {
+            id
+        }
+        signinUser(email: { email: $email, password: $password }) {
+            token
+    }
+}
+`
+
+const RegisterBox = (props) => {
+  let name, email, password
+
+  return (
+    <Mutation mutation={CREATE_USER} onCompleted={(data) => {
+      // Store the token in cookie
+      document.cookie = cookie.serialize('token', data.signinUser.token, {
+        maxAge: 30 * 24 * 60 * 60 // 30 days
+      })
+      // Force a reload of all the current queries now that the user is
+      // logged in
+      props.client.resetStore().then(() => {
+        redirect({}, '/')
+      })
+    }} onError={(error) => {
+      // If you want to send error to external service?
+      console.log(error)
+    }}>
+      {(create, { data, error }) => (
+        <div>
+          <form onSubmit={e => {
+            e.preventDefault()
+            e.stopPropagation()
+
+            create({ variables: {
+              name: name.value,
+              email: email.value,
+              password: password.value
+            }})
+
+            name.value = email.value = password.value = ''
+          }}>
+            { error && <p>Issue occured while registering :(</p> }
+            <input name='name' placeholder='Name' ref={node => { name = node }} /><br />
+            <input name='email' placeholder='Email' ref={node => { email = node }} /><br />
+            <input name='password' placeholder='Password' ref={node => { password = node }} type='password' /><br />
+            <button>Register</button>
+          </form>
+        </div>
+      )}
+
+    </Mutation>
+  )
+}
+
+export default withApollo(RegisterBox)

examples/with-apollo-auth/components/SigninBox.js

@@ -0,0 +1,57 @@
+import { Mutation, withApollo } from 'react-apollo'
+import gql from 'graphql-tag'
+import cookie from 'cookie'
+import redirect from '../lib/redirect'
+
+const SIGN_IN = gql`
+    mutation Signin($email: String!, $password: String!) {
+        signinUser(email: { email: $email, password: $password}) {
+            token
+        }
+    }
+`
+
+// TODO: Find a better name for component.
+const SigninBox = (props) => {
+  let email, password
+
+  return (
+    <Mutation mutation={SIGN_IN} onCompleted={(data) => {
+      // Store the token in cookie
+      document.cookie = cookie.serialize('token', data.signinUser.token, {
+        maxAge: 30 * 24 * 60 * 60 // 30 days
+      })
+      // Force a reload of all the current queries now that the user is
+      // logged in
+      props.client.resetStore().then(() => {
+        redirect({}, '/')
+      })
+    }} onError={(error) => {
+      // If you want to send error to external service?
+      console.log(error)
+    }}>
+      {(signinUser, { data, error }) => (
+        <div>
+          <form onSubmit={e => {
+            e.preventDefault()
+            e.stopPropagation()
+
+            signinUser({ variables: {
+              email: email.value,
+              password: password.value
+            }})
+
+            email.value = password.value = ''
+          }}>
+            { error && <p>No user found with that information.</p> }
+            <input name='email' placeholder='Email' ref={node => { email = node }} /><br />
+            <input name='password' placeholder='Password' ref={node => { password = node }} type='password' /><br />
+            <button>Sign in</button>
+          </form>
+        </div>
+      )}
+    </Mutation>
+  )
+}
+
+export default withApollo(SigninBox)

examples/with-apollo-auth/lib/initApollo.js

@@ -1,6 +1,5 @@
-import { ApolloClient } from 'apollo-client'
+import { ApolloClient, InMemoryCache } from 'apollo-boost'
 import { createHttpLink } from 'apollo-link-http'
-import { InMemoryCache } from 'apollo-cache-inmemory'
 import { setContext } from 'apollo-link-context'
 import fetch from 'isomorphic-unfetch'
 
@@ -48,4 +47,4 @@ export default function initApollo (initialState, options) {
   }
 
   return apolloClient
-}
+}

examples/with-apollo-auth/package.json

@@ -10,16 +10,16 @@
     "test": "NODE_ENV=test ava"
   },
   "dependencies": {
-    "apollo-client-preset": "1.0.2",
-    "apollo-link-context": "1.0.0",
+    "apollo-boost": "^0.1.4",
+    "apollo-link-context": "^1.0.7",
     "cookie": "^0.3.1",
-    "graphql": "0.11.7",
+    "graphql": "^0.13.2",
     "isomorphic-unfetch": "^2.0.0",
     "next": "latest",
-    "prop-types": "^15.5.10",
-    "react": "^16.0.0",
-    "react-apollo": "2.0.0",
-    "react-dom": "^16.0.0"
+    "prop-types": "^15.6.1",
+    "react": "^16.2.0",
+    "react-apollo": "^2.1.1",
+    "react-dom": "^16.2.0"
   },
   "devDependencies": {
     "ava": "^0.19.1",

examples/with-apollo-auth/pages/create-account.js

@@ -1,13 +1,13 @@
 import React from 'react'
-import { graphql, withApollo, compose } from 'react-apollo'
-import cookie from 'cookie'
+import { compose } from 'react-apollo'
 import Link from 'next/link'
-import gql from 'graphql-tag'
 
 import withData from '../lib/withData'
 import redirect from '../lib/redirect'
 import checkLoggedIn from '../lib/checkLoggedIn'
 
+import RegisterBox from '../components/RegisterBox'
+
 class CreateAccount extends React.Component {
   static async getInitialProps (context, apolloClient) {
     const { loggedInUser } = await checkLoggedIn(context, apolloClient)
@@ -24,81 +24,16 @@ class CreateAccount extends React.Component {
   render () {
     return (
       <div>
-        {/* this.props.create is the mutation function provided by apollo below */}
-        <form onSubmit={this.props.create}>
-          <input type='text' placeholder='Your Name' name='name' /><br />
-          <input type='email' placeholder='Email' name='email' /><br />
-          <input type='password' placeholder='Password' name='password' /><br />
-          <button>Create account</button>
-        </form>
+        {/* RegisterBox handles all register logic. */}
+        <RegisterBox client={this.props.client} />
         <hr />
         Already have an account? <Link prefetch href='/signin'><a>Sign in</a></Link>
       </div>
     )
   }
 };
 
-export default compose(
+export default compose( // TODO: Maybe remove the usage of compose?
   // withData gives us server-side graphql queries before rendering
-  withData,
-  // withApollo exposes `this.props.client` used when logging out
-  withApollo,
-  graphql(
-    // The `createUser` & `signinUser` mutations are provided by graph.cool by
-    // default.
-    // Multiple mutations are executed by graphql sequentially
-    gql`
-      mutation Create($name: String!, $email: String!, $password: String!) {
-        createUser(name: $name, authProvider: { email: { email: $email, password: $password }}) {
-          id
-        }
-        signinUser(email: { email: $email, password: $password }) {
-          token
-        }
-      }
-    `,
-    {
-      // Use an unambiguous name for use in the `props` section below
-      name: 'createWithEmail',
-      // Apollo's way of injecting new props which are passed to the component
-      props: ({
-        createWithEmail,
-        // `client` is provided by the `withApollo` HOC
-        ownProps: { client }
-      }) => ({
-        // `create` is the name of the prop passed to the component
-        create: (event) => {
-          /* global FormData */
-          const data = new FormData(event.target)
-
-          event.preventDefault()
-          event.stopPropagation()
-
-          createWithEmail({
-            variables: {
-              email: data.get('email'),
-              password: data.get('password'),
-              name: data.get('name')
-            }
-          }).then(({ data: { signinUser: { token } } }) => {
-            // Store the token in cookie
-            document.cookie = cookie.serialize('token', token, {
-              maxAge: 30 * 24 * 60 * 60 // 30 days
-            })
-
-            // Force a reload of all the current queries now that the user is
-            // logged in
-            client.resetStore().then(() => {
-              // Now redirect to the homepage
-              redirect({}, '/')
-            })
-          }).catch((error) => {
-            // Something went wrong, such as incorrect password, or no network
-            // available, etc.
-            console.error(error)
-          })
-        }
-      })
-    }
-  )
+  withData
 )(CreateAccount)

examples/with-apollo-auth/pages/signin.js

@@ -1,13 +1,13 @@
 import React from 'react'
-import { graphql, withApollo, compose } from 'react-apollo'
-import cookie from 'cookie'
+import { compose } from 'react-apollo'
 import Link from 'next/link'
-import gql from 'graphql-tag'
 
 import withData from '../lib/withData'
 import redirect from '../lib/redirect'
 import checkLoggedIn from '../lib/checkLoggedIn'
 
+import SigninBox from '../components/SigninBox'
+
 class Signin extends React.Component {
   static async getInitialProps (context, apolloClient) {
     const { loggedInUser } = await checkLoggedIn(context, apolloClient)
@@ -24,74 +24,16 @@ class Signin extends React.Component {
   render () {
     return (
       <div>
-        {/* this.props.signin is the mutation function provided by apollo below */}
-        <form onSubmit={this.props.signin}>
-          <input type='email' placeholder='Email' name='email' /><br />
-          <input type='password' placeholder='Password' name='password' /><br />
-          <button>Sign in</button>
-        </form>
+        {/* SigninBox handles all login logic. */}
+        <SigninBox client={this.props.client} />
         <hr />
         New? <Link prefetch href='/create-account'><a>Create account</a></Link>
       </div>
     )
   }
 };
 
-export default compose(
+export default compose( // TODO: Maybe remove the usage of compose?
   // withData gives us server-side graphql queries before rendering
-  withData,
-  // withApollo exposes `this.props.client` used when logging out
-  withApollo,
-  graphql(
-    // The `signinUser` mutation is provided by graph.cool by default
-    gql`
-      mutation Signin($email: String!, $password: String!) {
-        signinUser(email: { email: $email, password: $password }) {
-          token
-        }
-      }
-    `,
-    {
-      // Use an unambiguous name for use in the `props` section below
-      name: 'signinWithEmail',
-      // Apollo's way of injecting new props which are passed to the component
-      props: ({
-        signinWithEmail,
-        // `client` is provided by the `withApollo` HOC
-        ownProps: { client }
-      }) => ({
-        // `signin` is the name of the prop passed to the component
-        signin: (event) => {
-          /* global FormData */
-          const data = new FormData(event.target)
-
-          event.preventDefault()
-          event.stopPropagation()
-
-          signinWithEmail({
-            variables: {
-              email: data.get('email'),
-              password: data.get('password')
-            }
-          }).then(({ data: { signinUser: { token } } }) => {
-            // Store the token in cookie
-            document.cookie = cookie.serialize('token', token, {
-              maxAge: 30 * 24 * 60 * 60 // 30 days
-            })
-
-            // Force a reload of all the current queries now that the user is
-            // logged in
-            client.resetStore().then(() => {
-              // Now redirect to the homepage
-              redirect({}, '/')
-            })
-          }).catch((error) => {
-            // Something went wrong, such as incorrect password, or no network
-            // available, etc.
-            console.error(error)
-          })
-        }
-      })
-    }
-  )
+  withData
 )(Signin)