Merge pull request #7 from TheCoderAdi/feat/add-popular-tech-news

Add a trending News Section

Author: devleo10

.gitignore

@@ -1 +1,2 @@
 node_modules/
+.vscode/

src/App.css

@@ -100,7 +100,7 @@ input {
 
 
 
-.pagination-btn {
+.pagination-btn, .popular-btn {
   width: 100%;
   display: flex;
   justify-content: center;
@@ -166,3 +166,56 @@ button {
   font-weight: 200;
   font-style: normal;
 }
+
+.popular-news-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 15px;
+  border-radius: 8px;
+}
+
+.popular-news-section h2 {
+  font-size: 2.5rem;
+  color: #110c0a;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.popular-news-section ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.popular-news-section li {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: white;
+  margin: 10px 0;
+  padding: 2rem;
+  border-radius: 5px;
+  transition: 0.3s;
+  font-size: 1.2rem;
+}
+
+.popular-news-section li:hover {
+  background: #eee;
+}
+
+.popular-news-section a {
+  text-decoration: none;
+  font-weight: bold;
+  color: #333;
+  width: 70%;
+  font-size: 1.7rem;
+}
+
+.badge {
+  background: #ff5722;
+  color: white;
+  padding: 1rem;
+  border-radius: 10px;
+  font-size: 1.2rem;
+}

src/App.js

@@ -4,19 +4,22 @@ import Stories from './Stories';
 import Pagination from './Pagination';
 
 import './App.css';
+import { useGlobalContext } from './Context';
+import PopularNews from './PopularNews';
 
 
 
 export const App = () => {
-
+  const { showPopularNews } = useGlobalContext();
   return (
 
     <>
 
     <Search/>
     <Pagination/>
-    <Stories/>
-   
+    {
+      showPopularNews ? <PopularNews /> : <Stories/>
+    }
     </>
 
   )

src/Context.js

@@ -1,4 +1,4 @@
-import React, { useEffect,useContext,useReducer } from 'react';
+import React, { useEffect,useContext,useReducer, useState } from 'react';
 import reducer from './reducer';
  // Context created
 let API="https://hn.algolia.com/api/v1/search?";
@@ -9,12 +9,13 @@ const initialState =  {
     nbPages:0,
     page:0,
     hits:[],
+    popularNews:[],
 };
 const AppContext = React.createContext();
 // Now the provider function
 const AppProvider = ({ children }) => {
-    const [state,dispatch]=useReducer(reducer,initialState)
-     
+    const [state,dispatch]=useReducer(reducer,initialState);
+    const [showPopularNews, setShowPopularNews] = useState(false);
 
 
     const fetchApiData= async (url)=>{
@@ -36,6 +37,26 @@ const AppProvider = ({ children }) => {
              console.log(error);
           }
     };
+    const fetchPopularNews = async () => {
+        try {
+            dispatch({type:"SET_LOADING"});
+            const res = await fetch(`${API}query=technology&tags=story`);
+            const data = await res.json();
+
+            const sortedNews = data.hits
+                .filter((item) => item.num_comments) 
+                .sort((a, b) => (b.num_comments || 0) - (a.num_comments || 0));
+
+            dispatch({
+                type: "GET_POPULAR_NEWS",
+                payload: sortedNews.slice(0, 7),
+            });
+
+        } catch (error) {
+            console.log(error);
+        }
+    };
+
 
     const searchFn= (searchQuery) =>{
         dispatch({type:"SEARCH_QUERY",
@@ -57,10 +78,13 @@ const AppProvider = ({ children }) => {
         fetchApiData(`${API}query=${state.query}&{state.page}`);
     },[state.query,state.page]);
 
+    useEffect(() => {
+        fetchPopularNews(); 
+    }, []);
 
 
     return (
-        <AppContext.Provider value={{...state,searchFn,getNextPage,getPrevPage}}>
+        <AppContext.Provider value={{...state,searchFn,getNextPage,getPrevPage,showPopularNews,setShowPopularNews}}>
             {children}
         </AppContext.Provider>
     );

src/Pagination.js

@@ -2,13 +2,25 @@ import React from 'react'
 import { useGlobalContext } from './Context'
 
 const Pagination = () => {
-    const {page,nbPages,getPrevPage,getNextPage}=useGlobalContext();
+    const {page,nbPages,getPrevPage,getNextPage,setShowPopularNews,showPopularNews}=useGlobalContext();
   return (
     <>
-    <div className='pagination-btn'>
-    <button onClick={()=>getPrevPage()}>Prev</button>
-    <p>{page+1} of {nbPages}</p>
-    <button onClick={()=>getNextPage()}>Next</button>
+    {
+      !showPopularNews &&
+      <div className='pagination-btn'>
+          <button onClick={()=>getPrevPage()}>Prev</button>
+          <p>{page+1} of {nbPages}</p>
+          <button onClick={()=>getNextPage()}>Next</button>
+      </div>
+    }
+    <div className='popular-btn'>
+      <button onClick={()=>setShowPopularNews(!showPopularNews)} style={{ margin : '2rem'}}>
+      {
+        !showPopularNews
+          ? 'Trending Tech News'
+          : 'Back to Home'
+      }
+      </button>
     </div>
     </>
   )

src/PopularNews.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useGlobalContext } from './Context';
+
+const PopularNews = () => {
+    const { isLoading,popularNews } = useGlobalContext();
+
+    if (isLoading) {
+        return <p>Loading popular news...</p>;
+    }
+
+    return (
+        <div className='popular-news-section'>
+            <h2>🔥 Trending Tech News</h2>
+            {popularNews.length > 0 && (
+                <ul>
+                    {popularNews.map((news) => (
+                        <li key={news.objectID}>
+                            <a href={news.url} target="_blank" rel="noopener noreferrer">
+                                {news.title}
+                            </a>
+                            <span className="badge">💬 {news.num_comments || 0} comments</span>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+};
+
+export default PopularNews;

src/Search.js

@@ -3,7 +3,7 @@ import{useGlobalContext} from './Context'
 
 
 const Search = () => {
-   const {query,searchFn}=useGlobalContext();
+   const {query,searchFn,showPopularNews}=useGlobalContext();
   return (
     <>
     <h1 style={{ 
@@ -16,7 +16,7 @@ const Search = () => {
   <span style={{ fontSize: '42px' }}>P</span>ulse
 </h1>
 
-
+  {!showPopularNews &&
     <form>
       <div>
         <input type="text" placeholder="search here"
@@ -25,6 +25,7 @@ const Search = () => {
         />
       </div>
     </form>
+  }
     </>
 
 

src/reducer.js

@@ -12,6 +12,12 @@ const reducer = (state, action) => {
                 hits: action.payload.hits,
                 nbPages: action.payload.nbPages,
             };
+        case "GET_POPULAR_NEWS":
+            return {
+                ...state,
+                popularNews: action.payload,
+                isLoading: false,
+            };
         case "SEARCH_QUERY":
             return {
                 ...state,