7.4-end-filtering-v2.1

Author: Carlos Rufo Jimenez

src/components/App.js

@@ -3,6 +3,7 @@ import LinkList from './LinkList'
 import CreateLink from './CreateLink'
 import Header from './Header'
 import Login from './Login'
+import Search from './Search'
 import { Switch, Route } from 'react-router-dom'
 
 class App extends Component {
@@ -12,9 +13,10 @@ class App extends Component {
         <Header />
         <div className="ph3 pv1 background-gray">
           <Switch>
-            <Route exact path="/login" component={Login} />
             <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

@@ -13,6 +13,10 @@ class Header extends Component {
           <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: '',
+  }
+
+  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>
+    )
+  }
+
+  _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)