From 8ce8e695cca2845d08a961c31e3c5a4a81cab66b Mon Sep 17 00:00:00 2001
From: Mehreen Mansur <mehreen.mansur@gmail.com>
Date: Mon, 9 Apr 2018 03:05:13 +0600
Subject: [PATCH] implemented cric news feature

---
 app/javascript/packs/components/App.jsx       |  5 +-
 app/javascript/packs/components/CricNews.jsx  | 56 ++++++++++++++++
 .../packs/components/CricNewsSearch.jsx       | 64 +++++++++++++++++++
 app/javascript/packs/components/Header.jsx    |  1 +
 4 files changed, 125 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/packs/components/CricNews.jsx
 create mode 100644 app/javascript/packs/components/CricNewsSearch.jsx

diff --git a/app/javascript/packs/components/App.jsx b/app/javascript/packs/components/App.jsx
index 55efd01..bbca5fe 100644
--- a/app/javascript/packs/components/App.jsx
+++ b/app/javascript/packs/components/App.jsx
@@ -8,6 +8,8 @@ import UserDetails from './UserDetails';
 import Game from './Game';
 import Diamond from './Diamond';
 import DiamondSearch from './DiamondSearch';
+import CricNews from './CricNews';
+import CricNewsSearch from './CricNewsSearch';
 import NotFound from './NotFound';
 
 class App extends React.Component {
@@ -16,7 +18,6 @@ class App extends React.Component {
       <Router>
         <div>
           <Header />
-
           <Switch>
             <Route exact path="/" component={Root} />
             <Route exact path="/users" component={User} />
@@ -24,6 +25,8 @@ class App extends React.Component {
             <Route exact path="/games" component={Game} />
             <Route exact path="/diamonds" component={Diamond} />
             <Route exact path="/diamonds/:shape/:color/:clarity/:lab/:polish" component={DiamondSearch} />
+            <Route exact path="/cric" component={CricNews} />
+            <Route exact path="/news_search/:tag" component={CricNewsSearch} />
             <Route component={NotFound} />
           </Switch>
         </div>
diff --git a/app/javascript/packs/components/CricNews.jsx b/app/javascript/packs/components/CricNews.jsx
new file mode 100644
index 0000000..4149c73
--- /dev/null
+++ b/app/javascript/packs/components/CricNews.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+class CricNews extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { articles: [] };
+    }
+    componentDidMount() {
+        const api_key = 'cf3ecb1578544f908ae84946643000f4';
+        fetch(`https://newsapi.org/v2/top-headlines?sources=espn-cric-info&apiKey=${api_key}`, { method: 'GET' })
+            .then((Response) => Response.json())
+            .then((response) => {
+                this.setState({
+                    articles: response.articles,
+                });
+            });
+    }
+     click_tag (event, search_tag){
+        window.location='/news_search/' + search_tag;
+    }
+    render() {
+        const rows = this.state.articles.map((article, i) => (
+            <tr key={i}>
+                <td>{i+1}</td>
+                <td><a href={article.url}>{article.title}</a></td>
+                <td>{article.description}</td>
+            </tr>
+        ));
+        return (
+            <div>
+                <div className="col-sm-offset-10">
+                    <h5>Favourite Tags</h5>
+                </div>
+                <button className="pull-right" onClick={(e) => this.click_tag(e, 'World Cup')}>World Cup</button>
+                <button className="pull-right" onClick={(e) => this.click_tag(e, 'Bangladesh')}>Bangladesh</button>
+                <button className="pull-right" onClick={(e) => this.click_tag(e, 'Premier League')}>Premier League</button>
+                <button className="pull-right" onClick={(e) => this.click_tag(e, 'IPL')}>IPL</button>
+                <h3>Top Headlines</h3>
+                <table className="table">
+                    <thead>
+                    <tr>
+                        <th>#</th>
+                        <th>Title</th>
+                        <th>Description</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {rows}
+                    </tbody>
+                </table>
+            </div>
+        );
+    }
+}
+
+export default CricNews;
\ No newline at end of file
diff --git a/app/javascript/packs/components/CricNewsSearch.jsx b/app/javascript/packs/components/CricNewsSearch.jsx
new file mode 100644
index 0000000..a8f6c2e
--- /dev/null
+++ b/app/javascript/packs/components/CricNewsSearch.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+class CricNewsSearch extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { articles: [] };
+    }
+    componentDidMount() {
+        const api_key = 'cf3ecb1578544f908ae84946643000f4';
+        fetch(`https://newsapi.org/v2/everything?sources=espn-cric-info&apiKey=${api_key}`, { method: 'GET' })
+            .then((Response) => Response.json())
+            .then((response) => {
+                this.setState({
+                    articles: response.articles,
+                });
+            });
+    }
+    click_tag (event, search_tag){
+        window.location='/news_search/' + search_tag;
+    }
+     render() {
+        const search_word = `${this.props.match.params.tag}`;
+        // var btnStyle = {
+        //     backgroundColor: 'skyblue'
+        // };
+         var count = 0;
+         const rows = this.state.articles.map((article, i) => {
+             if(article.title.includes(search_word) || article.description.includes(search_word)){
+                 count++;
+                 return (<tr key={i}>
+                     <td>{count}</td>
+                     <td><a href={article.url}>{article.title}</a></td>
+                     <td>{article.description}</td>
+                 </tr>)
+             }
+         });
+        return (
+            <div>
+                <div className="col-sm-offset-10">
+                    <h5>Favourite Tags</h5>
+                </div>
+                <button className="pull-right" style={search_word ==='World Cup' ? {backgroundColor: 'skyblue'} : {} } onClick={(e) => this.click_tag(e, 'World Cup')}>World Cup</button>
+                <button className="pull-right" style={search_word ==='Bangladesh' ? {backgroundColor: 'skyblue'} : {} } onClick={(e) => this.click_tag(e, 'Bangladesh')}>Bangladesh</button>
+                <button className="pull-right" style={search_word ==='Premier League' ? {backgroundColor: 'skyblue'} : {} } onClick={(e) => this.click_tag(e, 'Premier League')}>Premier League</button>
+                <button className="pull-right" style={search_word ==='IPL' ? { backgroundColor: 'skyblue' } : {} } onClick={(e) => this.click_tag(e, 'IPL')}>IPL</button>
+                <h3>{this.props.match.params.tag} News</h3>
+                <table className="table">
+                    <thead>
+                    <tr>
+                        <th>#</th>
+                        <th>Title</th>
+                        <th>Description</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {rows}
+                    </tbody>
+                </table>
+            </div>
+        );
+    }
+}
+
+export default CricNewsSearch;
\ No newline at end of file
diff --git a/app/javascript/packs/components/Header.jsx b/app/javascript/packs/components/Header.jsx
index 7a88c13..b977d5a 100644
--- a/app/javascript/packs/components/Header.jsx
+++ b/app/javascript/packs/components/Header.jsx
@@ -18,6 +18,7 @@ const Header = () => (
           <li><Link to="/users" href>Users</Link></li>
           <li><Link to="/diamonds" href>Diamonds</Link></li>
           <li><Link to="/games" href>Game</Link></li>
+          <li><Link to="/cric" href>Cric News</Link></li>
         </ul>
       </div>
     </div>