2-end-queries-2.0

Author: Carlos Rufo Jimenez

src/components/App.js

@@ -1,21 +1,10 @@
-import React, { Component } from 'react';
-import logo from '../logo.svg';
-import '../styles/App.css';
+import React, { Component } from 'react'
+import LinkList from './LinkList'
 
 class App extends Component {
   render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
-    );
+    return <LinkList />
   }
 }
 
-export default App;
+export default App

src/components/Link.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+
+class Link extends Component {
+  render() {
+    return (
+      <div>
+        <div>
+          {this.props.link.description} ({this.props.link.url})
+        </div>
+      </div>
+    )
+  }
+
+  _voteForLink = async () => {
+    // ... you'll implement this in chapter 6
+  }
+}
+
+export default Link

src/components/LinkList.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import Link from './Link'
+import { graphql } from 'react-apollo'
+import gql from 'graphql-tag'
+
+class LinkList extends Component {
+    render() {
+        // 1
+        if (this.props.feedQuery && this.props.feedQuery.loading) {
+          return <div>Loading</div>
+        }
+      
+        // 2
+        if (this.props.feedQuery && this.props.feedQuery.error) {
+          return <div>Error</div>
+        }
+      
+        // 3
+        const linksToRender = this.props.feedQuery.feed.links
+      
+        return (
+          <div>{linksToRender.map(link => <Link key={link.id} link={link} />)}</div>
+        )
+      }
+}
+
+// 1
+const FEED_QUERY = gql`
+  # 2
+  query FeedQuery {
+    feed {
+      links {
+        id
+        createdAt
+        url
+        description
+      }
+    }
+  }
+`
+
+// 3
+export default graphql(FEED_QUERY, { name: 'feedQuery' }) (LinkList)