6.4-end-store-v2.1

Author: Carlos Rufo Jimenez

src/components/CreateLink.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { Mutation } from 'react-apollo'
 import gql from 'graphql-tag'
+import { FEED_QUERY } from './LinkList'
 
 // 1
 const POST_MUTATION = gql`
@@ -11,6 +12,16 @@ const POST_MUTATION = gql`
       createdAt
       url
       description
+      postedBy {
+        id
+        name
+      }
+      votes {
+        id
+        user {
+          id
+        }
+      }
     }
   }
 `
@@ -41,13 +52,30 @@ class CreateLink extends Component {
             placeholder="The URL for the link"
           />
         </div>
-        <Mutation mutation={POST_MUTATION} variables={{ description, url }}>
-          {postMutation => <button onClick={() => postMutation() && this.props.history.push('/')}>Submit</button>}
+        <Mutation
+          mutation={POST_MUTATION}
+          variables={{ description, url }}
+          update={(cache, { data: { post } }) => {
+            const data = cache.readQuery({ query: FEED_QUERY })
+            data.feed.links.splice(0, 0, post)
+            cache.writeQuery({
+              query: FEED_QUERY,
+              data,
+            })
+          }}
+        >
+          {postMutation => (
+            <button
+              onClick={() => postMutation() && this.props.history.push('/')}
+            >
+              Submit
+            </button>
+          )}
         </Mutation>
       </div>
     )
   }
 }
 
 // 3
-export default CreateLink;
+export default CreateLink

src/components/Link.js

@@ -1,11 +1,72 @@
 import React, { Component } from 'react'
+import { AUTH_TOKEN } from '../constants'
+import { timeDifferenceForDate } from '../utils'
+import { Mutation } from 'react-apollo'
+import gql from 'graphql-tag'
+import { FEED_QUERY } from './LinkList'
+
+const VOTE_MUTATION = gql`
+  mutation VoteMutation($linkId: ID!) {
+    vote(linkId: $linkId) {
+      id
+      link {
+        votes {
+          id
+          user {
+            id
+          }
+        }
+      }
+      user {
+        id
+      }
+    }
+  }
+`
 
 class Link extends Component {
   render() {
+    const authToken = localStorage.getItem(AUTH_TOKEN)
+    const { link: { id: linkId } } = this.props
     return (
-      <div>
-        <div>
-          {this.props.link.description} ({this.props.link.url})
+      <div className="flex mt2 items-start">
+        <div className="flex items-center">
+          <span className="gray">{this.props.index + 1}.</span>
+          {authToken && (
+            <Mutation
+              mutation={VOTE_MUTATION}
+              variables={{ linkId }}
+              update={(cache, { data: { vote: createVote } }) => {
+                // 1
+                const data = cache.readQuery({ query: FEED_QUERY })
+                // 2
+                const votedLink = data.feed.links.find(
+                  link => link.id === linkId
+                )
+                votedLink.votes = createVote.link.votes
+                // 3
+                cache.writeQuery({ query: FEED_QUERY, data })
+              }}
+            >
+              {voteMutation => (
+                <div className="ml1 gray f11" onClick={voteMutation}>
+                  ▲
+                </div>
+              )}
+            </Mutation>
+          )}
+        </div>
+        <div className="ml1">
+          <div>
+            {this.props.link.description} ({this.props.link.url})
+          </div>
+          <div className="f6 lh-copy gray">
+            {this.props.link.votes.length} votes | by{' '}
+            {this.props.link.postedBy
+              ? this.props.link.postedBy.name
+              : 'Unknown'}{' '}
+            {timeDifferenceForDate(this.props.link.createdAt)}
+          </div>
         </div>
       </div>
     )
@@ -16,4 +77,4 @@ class Link extends Component {
   }
 }
 
-export default Link
+export default Link

src/components/LinkList.js

@@ -4,7 +4,7 @@ import { Query } from 'react-apollo'
 import gql from 'graphql-tag'
 
 // 1
-const FEED_QUERY = gql`
+export const FEED_QUERY = gql`
   # 2
   query FeedQuery {
     feed {
@@ -13,27 +13,43 @@ const FEED_QUERY = gql`
         createdAt
         url
         description
+        postedBy {
+          id
+          name
+        }
+        votes {
+          id
+          user {
+            id
+          }
+        }
       }
     }
   }
-`;
+`
 
 class LinkList extends Component {
-    render() {
-        return (
-            <Query query={FEED_QUERY}>
-                {(result) => {
-                    if (result.loading) return <div>Loading</div>;
-                    if (result.error) return <div>Error</div>;
-                    
-                    const { data } = result;
-                    const linksToRender = data.feed.links;
-                    
-                    return <div>{linksToRender.map(link => <Link key={link.id} link={link} />)}</div>;
-                }}
-            </Query>
-        )
-    }
+  render() {
+    return (
+      <Query query={FEED_QUERY}>
+        {result => {
+          if (result.loading) return <div>Loading</div>
+          if (result.error) return <div>Error</div>
+
+          const { data } = result
+          const linksToRender = data.feed.links
+
+          return (
+            <div>
+              {linksToRender.map((link, index) => (
+                <Link key={link.id} index={index} link={link} />
+              ))}
+            </div>
+          )
+        }}
+      </Query>
+    )
+  }
 }
 
-export default LinkList;
+export default LinkList

src/components/Login.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { AUTH_TOKEN } from '../constants'
-import { compose, Mutation } from 'react-apollo'
+import { Mutation } from 'react-apollo'
 import gql from 'graphql-tag'
 
 const SIGNUP_MUTATION = gql`

src/utils.js

@@ -0,0 +1,33 @@
+function timeDifference(current, previous) {
+  const milliSecondsPerMinute = 60 * 1000
+  const milliSecondsPerHour = milliSecondsPerMinute * 60
+  const milliSecondsPerDay = milliSecondsPerHour * 24
+  const milliSecondsPerMonth = milliSecondsPerDay * 30
+  const milliSecondsPerYear = milliSecondsPerDay * 365
+
+  const elapsed = current - previous
+
+  if (elapsed < milliSecondsPerMinute / 3) {
+    return 'just now'
+  }
+
+  if (elapsed < milliSecondsPerMinute) {
+    return 'less than 1 min ago'
+  } else if (elapsed < milliSecondsPerHour) {
+    return Math.round(elapsed / milliSecondsPerMinute) + ' min ago'
+  } else if (elapsed < milliSecondsPerDay) {
+    return Math.round(elapsed / milliSecondsPerHour) + ' h ago'
+  } else if (elapsed < milliSecondsPerMonth) {
+    return Math.round(elapsed / milliSecondsPerDay) + ' days ago'
+  } else if (elapsed < milliSecondsPerYear) {
+    return Math.round(elapsed / milliSecondsPerMonth) + ' mo ago'
+  } else {
+    return Math.round(elapsed / milliSecondsPerYear) + ' years ago'
+  }
+}
+
+export function timeDifferenceForDate(date) {
+  const now = new Date().getTime()
+  const updated = new Date(date).getTime()
+  return timeDifference(now, updated)
+}