How to Build a Real-Time News App with the Mediastack API (React Tutorial)

				
					import './App.css';
import { useState } from 'react';


const CATEGORIES = [
 'General',
 'Business',
 'Entertainment',
 'Health',
 'Science',
 'Sports',
 'Technology'
]


function App() {


 const [keywords, setKeywords] = useState('');
 const [categories, setCategories] = useState('');
 const [articles, setArticles] = useState([]);
 const [loading, setLoading] = useState(false);


 const updateCategories = (e) => {
   let categoryString = '';
   const selectedCategory = e.target.value.toLowerCase();
   // see if the selected category already appears in the string
   // (will return -1 if not)
   const index = categories.indexOf(selectedCategory);


   if ( index !== -1) {
     // the selected category appears in the string
     // remove it (and the comma that follows it)
     categoryString = categories.substring(0, index) + categories.substring(index + selectedCategory.length + 1, categories.length);
   } else {
     // the selected category was not found in the string
     // add it (first check if we need a comma)
     categoryString = categories.length ? categories + ',' + selectedCategory : selectedCategory;
   }
   // update the state with the new string
   setCategories(categoryString);
 }


 const searchAPI = async () => {
   const API_URL = '/api';
   const constants = '&languages=en&countries=us';
   const queryParams = `?categories=${categories}&keywords=${keywords}`;


   try {
     setLoading(true);
     const response = await fetch(API_URL + queryParams + constants);
     const json = await response.json();
     const data = json.data;
     setArticles(data);
     setLoading(false);
   } catch(error) {
     console.error(error);
     setLoading(false);
   }
 }


 return (
   <div className="App">
     <header className="App-header">
       <h1><span class="ez-toc-section" id="Search_Todays_Headlines-2"></span>Search Today's Headlines<span class="ez-toc-section-end"></span></h1>
       <h2><span class="ez-toc-section" id="News_for_new_DatetoDateString-2"></span>News for {new Date().toDateString()}<span class="ez-toc-section-end"></span></h2>
       <div className='container'>
         <div className='box'>
           <p className='title'>Categories</p>
           <fieldset>
             <legend>Choose multiple:</legend>
             {
               CATEGORIES.map((category) => {
                 return (
                   <div>
                     <input type="checkbox" id={category} name={category} value={category} onChange={updateCategories} />
                     <label for={category}>{category}</label>
                 </div>
                 )
               })
             }
           </fieldset>
         </div>
         <div className='box'>
           <p className='title'>Keywords</p>
           <fieldset id='keywords'>
             <label for='keywords'>Enter keywords as a comma-separated list.</label>
             <input type='text' placeholder='i.e. tennis,dogs,politics' onChange={(e) => {setKeywords(e.target.value)}} id='textbox'/>
           </fieldset>
         <button className='button' onClick={searchAPI}>{loading ? "Loading" : "Search"}</button>
         </div>
       </div>
       <div>
           <ul>
           {articles.map((article, i) => {
             return (
               <li key={i} id='article'>
                 <h4>{article.title}</h4>
                 <i id='description'>{article.description}</i>
                 &nbsp;<a href={article.url} id='link'>Read More</a>
               </li>
             )
           })}
         </ul>
       </div>
     </header>
   </div>
 );
}


export default App;