ADD : search functionality

prayag1740 · Oct 20, 2022 · bf0104c · bf0104c
1 parent 5cbed0b
commit bf0104c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/src/App.js b/src/App.js
@@ -18,17 +18,21 @@ export default class App extends Component {
   apiKey = process.env.REACT_APP_NEWS_API_KEY
 
 
-  state = {progress: 0}
+  state = {progress: 0, searchText: ''}
 
   setProgress = (progress) => {
     this.setState({progress: progress})
   }
 
+  setSearchText = (searchText) => {
+    this.setState({searchText: searchText})
+  }
+
   render() {
     return (
       <div>
         <Router>
-        <NavBar />
+        <NavBar searchText={this.setSearchText} />
         <LoadingBar
         color='#f11946'
         progress={this.state.progress}
@@ -43,6 +47,7 @@ export default class App extends Component {
           <Route exact path='/science' element={<News apiKey={this.apiKey} setProgress={this.setProgress} key="science" pageSize={this.pageSize} country={'in'} category={'science'} />}></Route>
           <Route exact path='/sports' element={<News apiKey={this.apiKey} setProgress={this.setProgress} key='sports' pageSize={this.pageSize} country={'in'} category={'sports'} />}></Route>
           <Route exact path='/technology' element={<News apiKey={this.apiKey} setProgress={this.setProgress} key='technology' pageSize={this.pageSize} country={'in'} category={'technology'} />}></Route>
+          <Route exact path='/search' element={<News searchText={this.state.searchText} apiKey={this.apiKey} setProgress={this.setProgress} key='search' pageSize={2} country={'in'} category={'general'} />}></Route>
         </Routes>
         </Router>
       </div>

diff --git a/src/components/NavBar.js b/src/components/NavBar.js
@@ -3,6 +3,11 @@ import {Link} from 'react-router-dom'
 
 export class NavBar extends Component {
 
+    constructor(props) {
+        super(props) ;
+        this.textInput = React.createRef() ;
+    }
+
   render() {
     return (
       <div>
@@ -24,6 +29,12 @@ export class NavBar extends Component {
         <li className="nav-item"><Link className="nav-link" to="/sports">Sports</Link></li>
         <li className="nav-item"><Link className="nav-link" to="/technology">Technology</Link></li>
       </ul>
+      <form className="d-flex" role="search">
+        <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" ref={this.textInput} />
+        <Link to="/search">
+        <button className="btn btn-outline-success" type="submit" onClick={() => this.props.searchText(this.textInput.current.value)}>Search</button>
+        </Link>
+      </form>
     </div>
   </div>
 </nav>

diff --git a/src/components/News.js b/src/components/News.js
@@ -50,12 +50,20 @@ export class News extends Component {
         this.fetchNewsData(this.state.page - 1);
     };
 
-    async fetchNewsData(page) {
-        this.props.setProgress(10) ;
+    getNewsAPIUrl(page) {
         let todayDate = this.getCurrentDate();
-        const url =
-            `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&from=${todayDate}&sortBy=publishedAt&apiKey=${this.props.apiKey}&pageSize=${this.props.pageSize}&page=` +
-            page;
+        console.log(this.props.searchText)
+        let url =
+        `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&from=${todayDate}&sortBy=publishedAt&apiKey=${this.props.apiKey}&pageSize=${this.props.pageSize}&page=` + page; 
+        if (this.props.searchText) {
+            url = url + `&q=${this.props.searchText}`
+        }
+        return url;
+    }
+
+    async fetchNewsData() {
+        this.props.setProgress(10) ;
+        let url = this.getNewsAPIUrl(this.state.page);
         console.log(url);
         this.setState({ loading: true });
         let data = await fetch(url);