fix(*): final adjustments 🚀

Author: Carlos Rufo Jimenez

src/components/App.js

@@ -2,28 +2,28 @@ import React, { Component } from 'react'
 import LinkList from './LinkList'
 import CreateLink from './CreateLink'
 import Header from './Header'
+import { Switch, Route, Redirect } from 'react-router-dom'
 import Login from './Login'
 import Search from './Search'
-import { Switch, Route, Redirect } from 'react-router-dom'
 
 class App extends Component {
   render() {
     return (
-      <div className="center w85">
+      <div className='center w85'>
         <Header />
-        <div className="ph3 pv1 background-gray">
+        <div className='ph3 pv1 background-gray'>
           <Switch>
-            <Route exact path="/" render={() => <Redirect to="/new/1" />} />
-            <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} />
+            <Route exact path='/' render={() => <Redirect to='/new/1' />} />
+            <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} />
           </Switch>
         </div>
       </div>
     )
   }
 }
 
-export default App
+export default App

src/components/CreateLink.js

@@ -11,16 +11,6 @@ const POST_MUTATION = gql`
       createdAt
       url
       description
-      postedBy {
-        id
-        name
-      }
-      votes {
-        id
-        user {
-          id
-        }
-      }
     }
   }
 `
@@ -78,4 +68,4 @@ class CreateLink extends Component {
   }
 }
 
-export default CreateLink
+export default CreateLink

src/components/Header.js

@@ -52,4 +52,4 @@ class Header extends Component {
   }
 }
 
-export default withRouter(Header)
+export default withRouter(Header)

src/components/Link.js

@@ -22,21 +22,21 @@ const VOTE_MUTATION = gql`
     }
   }
 `
+
 class Link extends Component {
   render() {
-    const { link, index, updateStoreAfterVote } = this.props
     const authToken = localStorage.getItem(AUTH_TOKEN)
-
+    
     return (
       <div className="flex mt2 items-start">
         <div className="flex items-center">
-          <span className="gray">{index + 1}.</span>
+          <span className="gray">{this.props.index + 1}.</span>
           {authToken && (
             <Mutation
               mutation={VOTE_MUTATION}
-              variables={{ linkId: link.id }}
+              variables={{ linkId: this.props.link.id }}
               update={(store, { data: { vote } }) =>
-                updateStoreAfterVote(store, vote, link.id)
+                this.props.updateStoreAfterVote(store, vote, this.props.link.id)
               }
             >
               {voteMutation => (
@@ -49,17 +49,19 @@ class Link extends Component {
         </div>
         <div className="ml1">
           <div>
-            {link.description} ({link.url})
+            {this.props.link.description} ({this.props.link.url})
           </div>
           <div className="f6 lh-copy gray">
-            {`${link.votes.length} votes | by
-          ${link.postedBy ? link.postedBy.name : 'Unknown'}
-          ${timeDifferenceForDate(link.createdAt)}`}
+            {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>
     )
   }
 }
 
-export default Link
+export default Link

src/components/LinkList.js

@@ -84,24 +84,48 @@ class LinkList extends Component {
   _updateCacheAfterVote = (store, createVote, linkId) => {
     const isNewPage = this.props.location.pathname.includes('new')
     const page = parseInt(this.props.match.params.page, 10)
-
+  
     const skip = isNewPage ? (page - 1) * LINKS_PER_PAGE : 0
     const first = isNewPage ? LINKS_PER_PAGE : 100
     const orderBy = isNewPage ? 'createdAt_DESC' : null
     const data = store.readQuery({
       query: FEED_QUERY,
       variables: { first, skip, orderBy }
     })
-
+  
     const votedLink = data.feed.links.find(link => link.id === linkId)
     votedLink.votes = createVote.link.votes
     store.writeQuery({ query: FEED_QUERY, data })
   }
 
+  _subscribeToNewLinks = subscribeToMore => {
+    subscribeToMore({
+      document: NEW_LINKS_SUBSCRIPTION,
+      updateQuery: (prev, { subscriptionData }) => {
+        if (!subscriptionData.data) return prev
+        const newLink = subscriptionData.data.newLink.node
+  
+        return Object.assign({}, prev, {
+          feed: {
+            links: [newLink, ...prev.feed.links],
+            count: prev.feed.links.length + 1,
+            __typename: prev.feed.__typename
+          }
+        })
+      }
+    })
+  }
+
+  _subscribeToNewVotes = subscribeToMore => {
+    subscribeToMore({
+      document: NEW_VOTES_SUBSCRIPTION
+    })
+  }
+
   _getQueryVariables = () => {
     const isNewPage = this.props.location.pathname.includes('new')
     const page = parseInt(this.props.match.params.page, 10)
-
+  
     const skip = isNewPage ? (page - 1) * LINKS_PER_PAGE : 0
     const first = isNewPage ? LINKS_PER_PAGE : 100
     const orderBy = isNewPage ? 'createdAt_DESC' : null
@@ -125,7 +149,7 @@ class LinkList extends Component {
       this.props.history.push(`/new/${nextPage}`)
     }
   }
-
+  
   _previousPage = () => {
     const page = parseInt(this.props.match.params.page, 10)
     if (page > 1) {
@@ -134,46 +158,22 @@ class LinkList extends Component {
     }
   }
 
-  _subscribeToNewLinks = subscribeToMore => {
-    subscribeToMore({
-      document: NEW_LINKS_SUBSCRIPTION,
-      updateQuery: (prev, { subscriptionData }) => {
-        if (!subscriptionData.data) return prev
-        const newLink = subscriptionData.data.newLink.node
-
-        return Object.assign({}, prev, {
-          feed: {
-            links: [newLink, ...prev.feed.links],
-            count: prev.feed.links.length + 1,
-            __typename: prev.feed.__typename
-          }
-        })
-      }
-    })
-  }
-
-  _subscribeToNewVotes = subscribeToMore => {
-    subscribeToMore({
-      document: NEW_VOTES_SUBSCRIPTION
-    })
-  }
-
   render() {
     return (
       <Query query={FEED_QUERY} variables={this._getQueryVariables()}>
         {({ loading, error, data, subscribeToMore }) => {
           if (loading) return <div>Fetching</div>
           if (error) return <div>Error</div>
-
+  
           this._subscribeToNewLinks(subscribeToMore)
           this._subscribeToNewVotes(subscribeToMore)
-
+  
           const linksToRender = this._getLinksToRender(data)
           const isNewPage = this.props.location.pathname.includes('new')
           const pageIndex = this.props.match.params.page
             ? (this.props.match.params.page - 1) * LINKS_PER_PAGE
             : 0
-
+  
           return (
             <Fragment>
               {linksToRender.map((link, index) => (
@@ -189,10 +189,7 @@ class LinkList extends Component {
                   <div className="pointer mr2" onClick={this._previousPage}>
                     Previous
                   </div>
-                  <div
-                    className="pointer"
-                    onClick={this._nextPage.bind(this, data)}
-                  >
+                  <div className="pointer" onClick={() => this._nextPage(data)}>
                     Next
                   </div>
                 </div>
@@ -205,4 +202,4 @@ class LinkList extends Component {
   }
 }
 
-export default LinkList
+export default LinkList

src/components/Login.js

@@ -88,4 +88,4 @@ class Login extends Component {
   }
 }
 
-export default Login
+export default Login

src/components/Search.js

@@ -27,28 +27,19 @@ const FEED_SEARCH_QUERY = gql`
 `
 
 class Search extends Component {
+
   state = {
     links: [],
     filter: ''
   }
 
-  _executeSearch = async () => {
-    const { filter } = this.state
-    const result = await this.props.client.query({
-      query: FEED_SEARCH_QUERY,
-      variables: { filter }
-    })
-    const links = result.data.feed.links
-    this.setState({ links })
-  }
-
   render() {
     return (
       <div>
         <div>
           Search
           <input
-            type="text"
+            type='text'
             onChange={e => this.setState({ filter: e.target.value })}
           />
           <button onClick={() => this._executeSearch()}>OK</button>
@@ -59,6 +50,16 @@ class Search extends Component {
       </div>
     )
   }
+
+  _executeSearch = async () => {
+    const { filter } = this.state
+    const result = await this.props.client.query({
+      query: FEED_SEARCH_QUERY,
+      variables: { filter },
+    })
+    const links = result.data.feed.links
+    this.setState({ links })
+  }
 }
 
-export default withApollo(Search)
+export default withApollo(Search)