Merge pull request #95 from UOWD-Tech-Club/render-news-articles

Implemented techClubNews Rendering
UOWD-Tech-Club · Feb 24, 2025 · 0161833 · 0161833
2 parents 66058ad + 6e55017
commit 0161833
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 36 deletions.
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -14,6 +14,7 @@ function App() {
       <Routes>
         <Route path="/" element={<Homepage />} />
         <Route path="/events/:eventId" element={<EventsPage />} />
+        <Route path="/news/:newsID" element={<NewsArticle />} />
         <Route path="/projects" element={<ProjectsPage />} />
         <Route path="/newsletter" element={<NewsPage />} />
         <Route path="/newsarticle" element={<NewsArticle />} />

diff --git a/client/src/pages/NewsArticle.jsx b/client/src/pages/NewsArticle.jsx
@@ -1,52 +1,60 @@
 import { format } from 'date-fns';
 import styles from './NewsArticle.module.css';
-import newsletterBg from '../assets/newsletter-bg.png';
 import PageLayout from '../layout/PageLayout';
+import { useLocation } from 'react-router-dom';
 
 function NewsArticle() {
-  // Sample article data - replace with actual data
-  const article = {
-    title: 'A Very Interesting Title For Some Very Interesting News',
-    author: 'Jeff',
-    date: new Date(),
-    image: newsletterBg,
-    content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean purus tortor, auctor in tempus nec, congue in odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec ullamcorper tellus. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
-    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    
-    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean purus tortor, auctor in tempus nec, congue in odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec ullamcorper tellus. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
-    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    
-    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean purus tortor, auctor in tempus nec, congue in odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec ullamcorper tellus. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
-    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    
-    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.`,
-  };
+  const location = useLocation();
+  const { article } = location.state || {};
+  console.log(article);
+
+  if (!article) {
+    return <p>No news data available.</p>;
+  }
+
+  // // Sample article data - replace with actual data
+  // const article = {
+  //   title: 'A Very Interesting Title For Some Very Interesting News',
+  //   author: 'Jeff',
+  //   date: new Date(),
+  //   image: newsletterBg,
+  //   content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean purus tortor, auctor in tempus nec, congue in odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec ullamcorper tellus. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+  //   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+  //   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+  //   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean purus tortor, auctor in tempus nec, congue in odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec ullamcorper tellus. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+  //   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+  //   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+  //   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean purus tortor, auctor in tempus nec, congue in odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec ullamcorper tellus. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+  //   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+  //   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.`,
+  // };
 
   return (
     <PageLayout>
       <div className={styles.articleContainer}>
         <div className={styles.heroImage}>
-          <img src={article.image} alt={article.title} />
+          <img src={article.news_img} alt={article.news_title} />
           <div className={styles.gradient}></div>
         </div>
 
         <div className={styles.content}>
-          <h1>{article.title}</h1>
+          <h1>{article.news_title}</h1>
 
           <div className={styles.meta}>
             <span className={styles.date}>
-              {format(article.date, 'd MMMM, yyyy')}
+              {format(article.news_pubdate, 'd MMMM, yyyy')}
             </span>
-            <span className={styles.author}>• by {article.author}</span>
+            <span className={styles.author}>• by {article.news_source}</span>
           </div>
 
           <div className={styles.articleText}>
-            {article.content.split('\n\n').map((paragraph, index) => (
+            {article.news_description.split('\n\n').map((paragraph, index) => (
               <p key={index}>{paragraph}</p>
             ))}
           </div>

diff --git a/client/src/pages/NewsPage.jsx b/client/src/pages/NewsPage.jsx
@@ -2,13 +2,16 @@ import PageLayout from '../layout/PageLayout';
 import styles from './NewsPage.module.css';
 import { format } from 'date-fns';
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 function NewsPage() {
   const [newsItems, setNewsItems] = useState([]);
   const [filter, setFilter] = useState('dailyNews');
   const [latestNews, setLatestNews] = useState([]); // Initialize as empty array instead of null
   const [isLoading, setIsLoading] = useState(true); // Add loading state
 
+  const navigate = useNavigate();
+
   const fetchNews = async () => {
     try {
       setIsLoading(true);
@@ -48,6 +51,14 @@ function NewsPage() {
     fetchNews();
   }, [filter]); // Add filter as dependency
 
+  const handleArticleClick = (article, filter) => {
+    if (filter === 'techClubNews') {
+      navigate(`/news/${article.news_id}`, { state: { article } });
+    } else {
+      window.open(article.news_url, '_blank');
+    }
+  };
+
   return (
     <PageLayout>
       <div className={styles.newsContainer}>
@@ -75,18 +86,21 @@ function NewsPage() {
             {/* Featured News Section */}
             <a
               key={latestNews.news_id}
-              href={latestNews.news_url}
               className={styles.featuredNews}
-              target="_blank"
-              rel="noopener noreferrer"
+              onClick={() => handleArticleClick(latestNews, filter)}
             >
               <div className={styles.imageWrapper}>
                 <img
                   src={latestNews.news_img}
                   alt={latestNews.news_title}
                   className={styles.featuredImage}
                 />
-                <div className={styles.readMore}>Read More</div>
+                <div
+                  className={styles.readMore}
+                  onClick={() => handleArticleClick(latestNews, filter)}
+                >
+                  Read More
+                </div>
               </div>
               <div className={styles.featuredContent}>
                 <span className={styles.tag}>
@@ -116,18 +130,21 @@ function NewsPage() {
               {newsItems.map((news) => (
                 <a
                   key={news.news_id}
-                  href={news.news_url}
                   className={styles.newsCard}
-                  target="_blank"
-                  rel="noopener noreferrer"
+                  onClick={() => handleArticleClick(news, filter)}
                 >
                   <div className={styles.imageWrapper}>
                     <img
                       src={news.news_img}
                       alt={news.news_title}
                       className={styles.newsImage}
                     />
-                    <div className={styles.readMore}>Read More</div>
+                    <div
+                      className={styles.readMore}
+                      onClick={() => handleArticleClick(latestNews, filter)}
+                    >
+                      Read More
+                    </div>
                   </div>
                   <div className={styles.newsContent}>
                     <span className={styles.tag}>