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'
 
 const POST_MUTATION = gql`
   mutation PostMutation($description: String!, $url: String!) {
@@ -43,6 +44,14 @@ class CreateLink extends Component {
           mutation={POST_MUTATION}
           variables={{ description, url }}
           onCompleted={() => this.props.history.push('/')}
+          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}>Submit</button>}
         </Mutation>

src/components/Link.js

@@ -1,7 +1,60 @@
 import React from 'react'
+import { AUTH_TOKEN } from '../constants'
+import { timeDifferenceForDate } from '../utils'
+import { Mutation } from 'react-apollo'
+import gql from 'graphql-tag'
 
-export default ({ link }) => (
-  <div>
-    {link.description} ({link.url})
-  </div>
-)
+const VOTE_MUTATION = gql`
+  mutation VoteMutation($linkId: ID!) {
+    vote(linkId: $linkId) {
+      id
+      link {
+        votes {
+          id
+          user {
+            id
+          }
+        }
+      }
+      user {
+        id
+      }
+    }
+  }
+`
+
+export default ({ link, index, updateStoreAfterVote }) => {
+  const authToken = localStorage.getItem(AUTH_TOKEN)
+  return (
+    <div className="flex mt2 items-start">
+      <div className="flex items-center">
+        <span className="gray">{index + 1}.</span>
+        {authToken && (
+          <Mutation
+            mutation={VOTE_MUTATION}
+            variables={{ linkId: link.id }}
+            update={(cache, { data: { vote } }) =>
+              updateStoreAfterVote(cache, vote, link.id)
+            }
+          >
+            {voteMutation => (
+              <div className="ml1 gray f11" onClick={voteMutation}>
+                ▲
+              </div>
+            )}
+          </Mutation>
+        )}
+      </div>
+      <div className="ml1">
+        <div>
+          {link.description} ({link.url})
+        </div>
+        <div className="f6 lh-copy gray">
+          {`${link.votes.length} votes | by
+          ${link.postedBy ? link.postedBy.name : 'Unknown'}
+          ${timeDifferenceForDate(link.createdAt)}`}
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/LinkList.js

@@ -3,33 +3,39 @@ import Link from './Link'
 import { Query } from 'react-apollo'
 import gql from 'graphql-tag'
 
-const FEED_QUERY = gql`
+export const FEED_QUERY = gql`
   {
     feed {
       links {
         id
         createdAt
         url
         description
+        postedBy {
+          id
+          name
+        }
+        votes {
+          id
+          user {
+            id
+          }
+        }
       }
     }
   }
 `
 
-export default () => {
-  const linksToRender = [
-    {
-      id: '1',
-      description: 'Prisma turns your database into a GraphQL API 😎',
-      url: 'https://www.prismagraphql.com'
-    },
-    {
-      id: '2',
-      description: 'The best GraphQL client',
-      url: 'https://www.apollographql.com/docs/react/'
-    }
-  ]
+const updateCacheAfterVote = (store, createVote, linkId) => {
+  const data = store.readQuery({ query: FEED_QUERY })
+
+  const votedLink = data.feed.links.find(link => link.id === linkId)
+  votedLink.votes = createVote.link.votes
 
+  store.writeQuery({ query: FEED_QUERY, data })
+}
+
+export default () => {
   return (
     <Query query={FEED_QUERY}>
       {({ loading, error, data }) => {
@@ -40,7 +46,14 @@ export default () => {
 
         return (
           <div>
-            {linksToRender.map(link => <Link key={link.id} link={link} />)}
+            {linksToRender.map((link, index) => (
+              <Link
+                key={link.id}
+                link={link}
+                index={index}
+                updateStoreAfterVote={updateCacheAfterVote}
+              />
+            ))}
           </div>
         )
       }}

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)
+}