Merge pull request #59 from UnBArqDsw2024-1/feat/show-articles

Feat/show articles

frontend/src/App.tsx

@@ -6,6 +6,8 @@ import SignIn from "./pages/SignIn/SignIn";
 import Show from "./pages/Show/Show";
 import Podcasts from "./pages/Podcasts/Podcasts";
 import PodcastDetail from "./components/Podcast/PodcastDetail/PodcastDetail";
+import SingleArticle from "./pages/Articles/SingleArticle/SingleArticle";
+import Articles from "./pages/Articles/Articles";
 
 const App = () => {
   return (
@@ -17,10 +19,12 @@ const App = () => {
         <Route path="/show/:showName" element={<Show />} />
         <Route path="/sign-in" element={<SignIn />} />
         <Route path="/podcast/:id" element={<PodcastDetail />} />
+        <Route path="/articles" element={<Articles />} />
+        <Route path="/article/:id" element={<SingleArticle />} />
       </Routes>
       <Footer />
     </>
   );
 };
 
-export default App;
+export default App;

frontend/src/components/Article/ArticleCard/ArticleCard.tsx

@@ -1,27 +1,28 @@
 import { RiFilePaper2Line } from "react-icons/ri";
 import { IArticle } from "../../../utils/article-helper";
+import { Link } from "react-router-dom";
 
 const ArticleCard = (article: IArticle) => {
   return (
     <div className="w-[300px] lg:w-full h-full md:min-h-[300px] border border-gray-300 border-solid rounded-md flex flex-col lg:flex-row justify-start items-center gap-5 shadow-md transform transition-transform duration-300 hover:scale-105 cursor-pointer">
-        <img
-            className="w-full lg:w-[300px] h-full min-h-[300px] object-cover" 
-            src={article.img.src} 
-            alt={article.img.alt} 
-        />
+      <img
+        className="w-full lg:w-[300px] h-full min-h-[300px] object-cover"
+        src={article.img.src}
+        alt={article.img.alt}
+      />
 
-        <div className="flex flex-col justify-start items-start gap-5 p-5">
-            <h3 className="text-black font-semibold text-xl">{article.title}</h3>
-            <div className="flex flex-col justify-start items-start gap-1">
-              <h6 className="text-black font-semibold">{article.author}</h6>
-              <p className="text-black text-sm font-medium text-start">Publicado em: {article.create_at}</p>
-            </div>
-            <p className="text-black text-sm font-medium text-start line-clamp-3">{article.description}</p>
-            <button className="border-blue-600 border hover:bg-blue-600 p-2 font-bold text-blue-600 hover:text-white rounded-md flex justify-center items-center gap-2">
-              <RiFilePaper2Line />
-              Continuar lendo
-            </button>
+      <div className="flex flex-col justify-start items-start gap-5 p-5">
+        <h3 className="text-black font-semibold text-xl">{article.title}</h3>
+        <div className="flex flex-col justify-start items-start gap-1">
+          <h6 className="text-black font-semibold">{article.author}</h6>
+          <p className="text-black text-sm font-medium text-start">Publicado em: {article.create_at}</p>
         </div>
+        <p className="text-black text-sm font-medium text-start line-clamp-3">{article.description}</p>
+        <Link to={`/article/${article.id}`} className="border-blue-600 border hover:bg-blue-600 p-2 font-bold text-blue-600 hover:text-white rounded-md flex justify-center items-center gap-2">
+          <RiFilePaper2Line />
+          Continuar lendo
+        </Link>
+      </div>
     </div>
   )
 }

frontend/src/components/Article/ArticleGrid/ArticleGrid.tsx

@@ -1,14 +1,14 @@
-import { articles, IArticle } from "../../../utils/article-helper"
+import { IArticle } from "../../../utils/article-helper"
 import ArticleCard from "../ArticleCard/ArticleCard"
 
-const ArticleGrid = () => {
+const ArticleGrid = ({ articles }: { articles: IArticle[] }) => {
   return (
     <div className="w-full max-w-[1250px] mx-auto">
-        <div className="w-full flex flex-wrap justify-center md:justify-between items-center gap-10">
-            {articles.map((article: IArticle, index:number) => (
-                <ArticleCard key={index} {...article} />
-            ))}
-        </div>
+      <div className="w-full flex flex-wrap justify-center md:justify-between items-center gap-10">
+        {articles.map((article: IArticle, index: number) => (
+          <ArticleCard key={index} {...article} />
+        ))}
+      </div>
     </div>
   )
 }

frontend/src/components/Article/ArticleSection/ArticleSection.tsx

@@ -1,19 +1,26 @@
-import { Link } from "../../../../node_modules/react-router-dom/dist/index";
+import { useEffect, useState } from "react";
 import ArticleGrid from "../ArticleGrid/ArticleGrid";
+import { articles, IArticle } from "../../../utils/article-helper";
+import { Link } from "react-router-dom";
 
 const ArticleSection = () => {
+  const [articlesData, setArticles] = useState<IArticle[]>([]);
+
+  useEffect(() => {
+    setArticles(articles);
+  }, [articlesData])
+
   return (
     <section id="article" className="w-full h-full px-5">
       <div className="w-full flex flex-col justify-center items-center gap-3 p-5">
         <h3 className="text-black font-bold text-4xl">Artigos</h3>
         <p className="text-medium text-xl text-center">Veja os últimos artigos postados</p>
       </div>
 
-      <ArticleGrid />
+      <ArticleGrid articles={articlesData.slice(0, 6)} />
 
       <div className="w-full py-5 flex justify-center items-center">
-        <Link
-          to="/articles"
+        <Link to="/articles"
           className="bg-blue-600 hover:bg-blue-700 py-4 px-5 font-bold text-white rounded-md w-[200px] text-center"
         >
           Ver mais

frontend/src/components/Navbar/Navbar.tsx

@@ -1,27 +1,27 @@
-import { Link } from 'react-scroll';
 import { LuMenu } from "react-icons/lu";
 import { useState } from 'react';
-import { Link as RouterLink } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { Link as LinkAnimation } from "react-scroll";
 
 const Navbar = () => {
     const [menu, setMenu] = useState(false);
 
     const handleChange = () => {
         setMenu(!menu);
-    }
+    };
 
     return (
         <header>
-            <div className='bg-white z-50 md:w-full md:fixed md:top-0 flex flex-row justify-between p-5 md:px-32 bg-white shadow-[0_3px_10px_rgb(0,0,0,0.2)]'>
+            <div className='bg-white z-50 md:w-full md:fixed md:top-0 flex flex-row justify-between p-5 md:px-32 shadow-[0_3px_10px_rgb(0,0,0,0.2)]'>
                 <div>
-                    <RouterLink to="/" className='font-semibold text-2xl p-1 cursor-pointer text-brightGreen'>Mundo Podcast</RouterLink>
+                    <Link to="/" className='font-semibold text-2xl p-1 cursor-pointer text-brightGreen'>Mundo Podcast</Link>
                 </div>
                 <nav className='hidden md:flex gap-5 font-medium p-1 cursor-pointer'>
-                    <Link to="home" spy={true} smooth={true} duration={500} className='hover:text-brightGreen transition-all cursor-pointer'>Home</Link>
-                    <RouterLink to="/podcasts" className='hover:text-brightGreen transition-all cursor-pointer'>Podcasts</RouterLink>
-                    <Link to="article" spy={true} smooth={true} duration={500} className='hover:text-brightGreen transition-all cursor-pointer'>Artigos</Link>
-                    <Link to="tutorial" spy={true} smooth={true} duration={500} className='hover:text-brightGreen transition-all cursor-pointer'>Tutoriais</Link>
-                    <Link to="about" spy={true} smooth={true} duration={500} className='hover:text-brightGreen transition-all cursor-pointer'>Sobre</Link>
+                    <Link to="/" className='hover:text-brightGreen transition-all cursor-pointer'>Home</Link>
+                    <Link to="/podcasts" className='hover:text-brightGreen transition-all cursor-pointer'>Podcasts</Link>
+                    <Link to="/articles" className='hover:text-brightGreen transition-all cursor-pointer'>Artigos</Link>
+                    <LinkAnimation to="tutorial" spy={true} smooth={true} duration={500} className='hover:text-brightGreen transition-all cursor-pointer'>Tutoriais</LinkAnimation>
+                    <LinkAnimation to="about" spy={true} smooth={true} duration={500} className='hover:text-brightGreen transition-all cursor-pointer'>Sobre</LinkAnimation>
                 </nav>
 
                 <div className='flex md:hidden' onClick={handleChange}>
@@ -30,12 +30,12 @@ const Navbar = () => {
                     </div>
                 </div>
 
-                <nav className={`${menu ? "translate-x-0" : "-translate-x-full"} z-20 h-screen bg-white md:hidden flex flex-col absolute bg-white left-0 top-20 font-medium text-2xl text-center pt-8 pb-4 gap-8 w-full h-fit transition-transform duration-200 ease-in-out`}>
-                    <Link to="home" spy={true} smooth={true} duration={500} onClick={handleChange} className='hover:text-brightGreen transition-all cursor-pointer'>Home</Link>
-                    <RouterLink to="/podcasts" className='hover:text-brightGreen transition-all cursor-pointer' onClick={handleChange}>Podcasts</RouterLink>
-                    <Link to="article" spy={true} smooth={true} duration={500} onClick={handleChange} className='hover:text-brightGreen transition-all cursor-pointer'>Artigos</Link>
-                    <Link to="tutorial" spy={true} smooth={true} duration={500} onClick={handleChange} className='hover:text-brightGreen transition-all cursor-pointer'>Tutoriais</Link>
-                    <Link to="about" spy={true} smooth={true} duration={500} onClick={handleChange} className='hover:text-brightGreen transition-all cursor-pointer'>Sobre</Link>
+                <nav className={`${menu ? "translate-x-0" : "-translate-x-full"} z-20 h-screen bg-white md:hidden flex flex-col absolute left-0 top-20 font-medium text-2xl text-center pt-8 pb-4 gap-8 w-full transition-transform duration-200 ease-in-out`}>
+                    <Link to="/" onClick={handleChange} className='hover:text-brightGreen transition-all cursor-pointer'>Home</Link>
+                    <Link to="/podcasts" className='hover:text-brightGreen transition-all cursor-pointer' onClick={handleChange}>Podcasts</Link>
+                    <Link to="/articles" onClick={handleChange} className='hover:text-brightGreen transition-all cursor-pointer'>Artigos</Link>
+                    <LinkAnimation to="tutorial" spy={true} smooth={true} duration={500} onClick={handleChange} className='hover:text-brightGreen transition-all cursor-pointer'>Tutoriais</LinkAnimation >
+                    <LinkAnimation to="about" spy={true} smooth={true} duration={500} onClick={handleChange} className='hover:text-brightGreen transition-all cursor-pointer'>Sobre</LinkAnimation >
                 </nav>
             </div>
         </header>

frontend/src/components/Podcast/PodcastSection/PodcastSection.tsx

@@ -13,7 +13,7 @@ const PodcastSection = () => {
 
       <div className="w-full py-5 flex justify-center items-center">
         <Link
-          to="/podcast"
+          to="/podcasts"
           className="bg-blue-600 hover:bg-blue-700 py-4 px-5 font-bold text-white rounded-md w-[200px] text-center"
         >
           Ver mais

frontend/src/pages/Articles/Articles.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { articles, IArticle } from "../../utils/article-helper";
+import ArticleGrid from "../../components/Article/ArticleGrid/ArticleGrid";
+
+const Articles = () => {
+    const [articlesData, setArticles] = useState<IArticle[]>([]);
+
+    useEffect(() => {
+        setArticles(articles);
+    }, [articlesData]);
+
+    return (
+        <main className="w-full max-w-[1250px] mx-auto h-full h-min-screen p-5 lg:mt-20">
+            <div className="w-full flex flex-col justify-center items-center gap-3 p-5">
+                <h3 className="text-black font-bold text-4xl">Artigos</h3>
+                <p className="text-medium text-xl text-center">Aproveite toda nossa biblioteca de artigos</p>
+            </div>
+
+            <ArticleGrid articles={articlesData} />
+        </main>
+    )
+}
+
+export default Articles

frontend/src/pages/Articles/SingleArticle/SingleArticle.tsx

@@ -0,0 +1,26 @@
+import { useParams } from "react-router-dom"
+import { articles } from "../../../utils/article-helper"
+
+const SingleArticle = () => {
+    const { id } = useParams<{ id: string }>();
+    const article = articles.find((article) => article.id === Number(id));
+
+    if (!article) {
+        return <div>Artigo não encontrado</div>;
+    }
+
+    return (
+        <section className="w-full h-full min-h-screen max-w-4xl mx-auto p-5 lg:mt-20">
+            <img
+                src={article.img.src}
+                alt={article.img.alt}
+                className="w-full h-auto mb-4"
+            />
+            <h1 className="text-3xl font-bold mb-2">{article.title}</h1>
+            <h2 className="text-xl font-medium mb-4">por {article.author}</h2>
+            <p className="text-base">{article.description}</p>
+        </section>
+    )
+}
+
+export default SingleArticle

frontend/src/utils/article-helper.ts

@@ -1,4 +1,5 @@
 export interface IArticle {
+    id: number;
     img: {
         alt: string;
         src: string;
@@ -11,6 +12,7 @@ export interface IArticle {
 
 export const articles: IArticle[] = [
     {
+        id: 1,
         img: {
             alt: 'article 01',
             src: '/article/article_01.jpg'
@@ -21,6 +23,7 @@ export const articles: IArticle[] = [
         description: 'This article explores how artificial intelligence is becoming an integral part of our everyday lives.',
     },
     {
+        id: 2,
         img: {
             alt: 'article 02',
             src: '/article/article_02.jpg'
@@ -31,6 +34,7 @@ export const articles: IArticle[] = [
         description: 'An in-depth look at the latest discoveries from the uncharted territories of the deep ocean.',
     },
     {
+        id: 3,
         img: {
             alt: 'article 03',
             src: '/article/article_03.jpg'
@@ -41,6 +45,7 @@ export const articles: IArticle[] = [
         description: 'A comprehensive guide to adopting a more sustainable and eco-friendly lifestyle.',
     },
     {
+        id: 4,
         img: {
             alt: 'article 04',
             src: '/article/article_04.jpg'
@@ -51,6 +56,7 @@ export const articles: IArticle[] = [
         description: 'An article discussing the advancements in space travel and what the future might hold for humanity beyond Earth.',
     },
     {
+        id: 5,
         img: {
             alt: 'article 05',
             src: '/article/article_05.jpg'
@@ -61,6 +67,7 @@ export const articles: IArticle[] = [
         description: 'An analysis of how social media is shaping our society and influencing personal relationships.',
     },
     {
+        id: 6,
         img: {
             alt: 'article 06',
             src: '/article/article_06.jpg'

frontend/src/utils/tutorial-helper.ts

@@ -1,4 +1,5 @@
 export interface ITutorial {
+    id: number;
     img: {
         alt: string;
         src: string;
@@ -11,6 +12,7 @@ export interface ITutorial {
 
 export const tutorials: ITutorial[] = [
     {
+        id: 1,
         img: {
             alt: 'tutorial 01',
             src: '/tutorial/tutorial_01.jpeg'
@@ -21,6 +23,7 @@ export const tutorials: ITutorial[] = [
         description: 'This tutorial walks you through the essentials of starting a podcast, from choosing the right equipment to recording and editing your first episode. Perfect for beginners who want to dive into the world of podcasting.',
     },
     {
+        id: 2,
         img: {
             alt: 'tutorial 02',
             src: '/tutorial/tutorial_02.jpeg'
@@ -31,6 +34,7 @@ export const tutorials: ITutorial[] = [
         description: 'Learn effective strategies to promote your podcast and grow your audience. This tutorial covers social media marketing, networking with other podcasters, and using SEO to increase your visibility on podcast platforms.',
     },
     {
+        id: 3,
         img: {
             alt: 'tutorial 03',
             src: '/tutorial/tutorial_03.png'
@@ -41,6 +45,7 @@ export const tutorials: ITutorial[] = [
         description: 'In this tutorial, you will explore various ways to monetize your podcast, including sponsorships, affiliate marketing, and listener support platforms. Discover the best methods to turn your passion into profit.',
     },
     {
+        id: 4,
         img: {
             alt: 'tutorial 04',
             src: '/tutorial/tutorial_04.png'