7.4-end-filtering-v2.1

Author: Carlos Rufo Jimenez

src/components/App.js

@@ -4,6 +4,7 @@ import CreateLink from './CreateLink'
 import Header from './Header'
 import { Switch, Route } from 'react-router-dom'
 import Login from './Login'
+import Search from './Search'
 
 export default () => (
   <div className="center w85">
@@ -13,6 +14,7 @@ export default () => (
         <Route exact path="/" component={LinkList} />
         <Route exact path="/create" component={CreateLink} />
         <Route exact path="/login" component={Login} />
+        <Route exact path="/search" component={Search} />
       </Switch>
     </div>
   </div>

src/components/Header.js

@@ -12,6 +12,10 @@ const Header = props => {
         <Link to="/" className="ml1 no-underline black">
           new
         </Link>
+        <div className="ml1">|</div>
+        <Link to="/search" className="ml1 no-underline black">
+          search
+        </Link>
         {authToken && (
           <div className="flex">
             <div className="ml1">|</div>

src/components/Search.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react'
+import { withApollo } from 'react-apollo'
+import gql from 'graphql-tag'
+import Link from './Link'
+
+const FEED_SEARCH_QUERY = gql`
+  query FeedSearchQuery($filter: String!) {
+    feed(filter: $filter) {
+      links {
+        id
+        url
+        description
+        createdAt
+        postedBy {
+          id
+          name
+        }
+        votes {
+          id
+          user {
+            id
+          }
+        }
+      }
+    }
+  }
+`
+
+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"
+            onChange={e => this.setState({ filter: e.target.value })}
+          />
+          <button onClick={() => this._executeSearch()}>OK</button>
+        </div>
+        {this.state.links.map((link, index) => (
+          <Link key={link.id} link={link} index={index} />
+        ))}
+      </div>
+    )
+  }
+}
+
+export default withApollo(Search)