🚀

Author: Carlos Rufo Jimenez

package.json

@@ -4,11 +4,12 @@
   "private": true,
   "dependencies": {
     "apollo-client-preset": "^1.0.8",
+    "apollo-link-context": "^1.0.7",
     "apollo-link-ws": "^1.0.7",
     "graphql": "^0.13.1",
     "graphql-tag": "^2.8.0",
     "react": "^16.2.0",
-    "react-apollo": "^2.1.0-beta.3",
+    "react-apollo": "^2.1.0",
     "react-dom": "^16.2.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",

src/components/App.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import LinkList from './LinkList'
 import CreateLink from './CreateLink'
 import Header from './Header'
@@ -12,8 +12,8 @@ export default () => (
     <div className="ph3 pv1 background-gray">
       <Switch>
         <Route exact path="/" render={() => <Redirect to="/new/1" />} />
-        <Route exact path="/login" component={Login} />
         <Route exact path="/create" component={CreateLink} />
+        <Route exact path="/login" component={Login} />
         <Route exact path="/search" component={Search} />
         <Route exact path="/top" component={LinkList} />
         <Route exact path="/new/:page" component={LinkList} />

src/components/CreateLink.js

@@ -28,7 +28,7 @@ const POST_MUTATION = gql`
 class CreateLink extends Component {
   state = {
     description: '',
-    url: '',
+    url: ''
   }
 
   render() {
@@ -54,32 +54,25 @@ class CreateLink extends Component {
         <Mutation
           mutation={POST_MUTATION}
           variables={{ description, url }}
+          onCompleted={() => this.props.history.push('/new/1')}
           update={(cache, { data: { post } }) => {
             const first = LINKS_PER_PAGE
             const skip = 0
             const orderBy = 'createdAt_DESC'
             const data = cache.readQuery({
               query: FEED_QUERY,
-              variables: { first, skip, orderBy },
+              variables: { first, skip, orderBy }
             })
-            data.feed.links.splice(0, 0, post)
+            data.feed.links.unshift(post)
             data.feed.links.pop()
             cache.writeQuery({
               query: FEED_QUERY,
               data,
-              variables: { first, skip, orderBy },
+              variables: { first, skip, orderBy }
             })
           }}
         >
-          {postMutation => (
-            <button
-              onClick={() =>
-                postMutation() && this.props.history.push(`/new/1`)
-              }
-            >
-              Submit
-            </button>
-          )}
+          {postMutation => <button onClick={postMutation}>Submit</button>}
         </Mutation>
       </div>
     )

src/components/Header.js

@@ -1,9 +1,9 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Link } from 'react-router-dom'
 import { withRouter } from 'react-router'
 import { AUTH_TOKEN } from '../constants'
 
-const Header = () => {
+const Header = props => {
   const authToken = localStorage.getItem(AUTH_TOKEN)
   return (
     <div className="flex pa1 justify-between nowrap orange">
@@ -35,7 +35,7 @@ const Header = () => {
             className="ml1 pointer black"
             onClick={() => {
               localStorage.removeItem(AUTH_TOKEN)
-              this.props.history.push(`/`)
+              props.history.push(`/`)
             }}
           >
             logout

src/components/Link.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { AUTH_TOKEN } from '../constants'
 import { timeDifferenceForDate } from '../utils'
 import { Mutation } from 'react-apollo'
@@ -23,21 +23,18 @@ const VOTE_MUTATION = gql`
   }
 `
 
-export default props => {
+export default ({ link, index, updateStoreAfterVote }) => {
   const authToken = localStorage.getItem(AUTH_TOKEN)
-  const {
-    link: { id: linkId, description, url, votes, postedBy, createdAt },
-  } = props
   return (
     <div className="flex mt2 items-start">
       <div className="flex items-center">
-        <span className="gray">{props.index + 1}.</span>
+        <span className="gray">{index + 1}.</span>
         {authToken && (
           <Mutation
             mutation={VOTE_MUTATION}
-            variables={{ linkId }}
+            variables={{ linkId: link.id }}
             update={(cache, { data: { vote } }) =>
-              props.updateStoreAfterVote(cache, vote, linkId)
+              updateStoreAfterVote(cache, vote, link.id)
             }
           >
             {voteMutation => (
@@ -50,11 +47,12 @@ export default props => {
       </div>
       <div className="ml1">
         <div>
-          {description} ({url})
+          {link.description} ({link.url})
         </div>
         <div className="f6 lh-copy gray">
-          {votes.length} votes | by {postedBy ? postedBy.name : 'Unknown'}
-          {timeDifferenceForDate(createdAt)}
+          {`${link.votes.length} votes | by
+          ${link.postedBy ? link.postedBy.name : 'Unknown'}
+          ${timeDifferenceForDate(link.createdAt)}`}
         </div>
       </div>
     </div>