From 3afb3ce1421aaf86f75d7f21c8beb40642113205 Mon Sep 17 00:00:00 2001
From: "Alejandro E. Rendon" <alejandro@rendon.co>
Date: Sun, 12 May 2024 16:55:48 -0500
Subject: [PATCH] #97 Agregar filtro de tags

---
 src/app/[lang]/talks/[uniquepage]/Talk.js     |  6 +--
 src/app/[lang]/talks/components/Card.js       |  6 +--
 src/app/[lang]/talks/components/Talks.js      | 38 +++++++++++++++++--
 src/app/[lang]/talks/page.js                  | 15 +++++++-
 .../[lang]/talks/tags/[uniquepage]/page.js    |  2 +-
 5 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/src/app/[lang]/talks/[uniquepage]/Talk.js b/src/app/[lang]/talks/[uniquepage]/Talk.js
index 2082c03..13551b6 100644
--- a/src/app/[lang]/talks/[uniquepage]/Talk.js
+++ b/src/app/[lang]/talks/[uniquepage]/Talk.js
@@ -33,9 +33,9 @@ const Talk = ({ talk, lang }) => {
             </Col>
             <Col xs={12}>
               {talk.tags.map((tag) => (
-                <span key={tag} className={`badge default ${tag}`}>
-                  {tag}
-                </span>
+                <Link key={tag} href={`/${lang}/talks/tags/${tag}`}>
+                  <span className={`badge default ${tag}`}>{tag}</span>
+                </Link>
               ))}
             </Col>
           </Row>
diff --git a/src/app/[lang]/talks/components/Card.js b/src/app/[lang]/talks/components/Card.js
index c41770a..c7a4bba 100644
--- a/src/app/[lang]/talks/components/Card.js
+++ b/src/app/[lang]/talks/components/Card.js
@@ -25,9 +25,9 @@ const Card = ({ talkData, index, lang, langMapping }) => {
       </Col>
       <Col xs={12}>
         {talkData.tags.map((tag) => (
-          <span key={tag} className={`badge default ${tag}`}>
-            {tag}
-          </span>
+          <Link key={tag} href={`/${lang}/talks/tags/${tag}`}>
+            <span className={`badge default ${tag}`}>{tag}</span>
+          </Link>
         ))}
       </Col>
       <Col xs={12}>
diff --git a/src/app/[lang]/talks/components/Talks.js b/src/app/[lang]/talks/components/Talks.js
index f3190bf..4b9627b 100644
--- a/src/app/[lang]/talks/components/Talks.js
+++ b/src/app/[lang]/talks/components/Talks.js
@@ -1,8 +1,9 @@
 'use client';
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import propTypes from 'prop-types';
 import Container from 'react-bootstrap/Container';
+import Form from 'react-bootstrap/Form';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 
@@ -11,8 +12,18 @@ import Title from '@/app/[lang]/talks/components/Title';
 
 import { useI18n } from '@/contexts/I18nContext';
 
-const Talks = ({ lang, talksList }) => {
+const Talks = ({ lang, talksList, defaultTag, allTags }) => {
   const i18nDictionary = useI18n();
+  const [tagFilter, setTagFilter] = useState(defaultTag || 'all');
+  const [talks, setTalks] = useState(talksList);
+
+  useEffect(() => {
+    if (tagFilter === 'all') {
+      setTalks(talksList);
+    } else {
+      setTalks(talksList.filter((talk) => talk.tags.includes(tagFilter)));
+    }
+  }, [tagFilter, talksList]);
 
   return (
     <section id="keynotes">
@@ -20,7 +31,28 @@ const Talks = ({ lang, talksList }) => {
         <Title content={i18nDictionary?.sections?.talks} />
         <Container>
           <Row className="justify-content-center">
-            {talksList.map((talk, index) => (
+            <Col xs={12} md={4}>
+              <Form.Group controlId="formBasicSelect">
+                <Form.Label>Filter</Form.Label>
+                <Form.Control
+                  as="select"
+                  value={tagFilter}
+                  onChange={(e) => {
+                    setTagFilter(e.target.value);
+                  }}>
+                  <option value="all">All</option>
+                  {allTags &&
+                    allTags.map((tag) => (
+                      <option key={tag} value={tag}>
+                        {tag}
+                      </option>
+                    ))}
+                </Form.Control>
+              </Form.Group>
+            </Col>
+          </Row>
+          <Row className="justify-content-center">
+            {talks.map((talk, index) => (
               <Col xs={12} md={6} key={talk.id}>
                 <Card
                   talkData={talk}
diff --git a/src/app/[lang]/talks/page.js b/src/app/[lang]/talks/page.js
index 8e76ee0..fa15ff8 100644
--- a/src/app/[lang]/talks/page.js
+++ b/src/app/[lang]/talks/page.js
@@ -17,8 +17,21 @@ export async function generateMetadata({ params: { lang } }, parent) {
   };
 }
 
+const getAllTags = () => {
+  const tags = [];
+
+  talksList.forEach((talk) => {
+    talk.tags.forEach((tag) => {
+      if (!tags.includes(tag)) {
+        tags.push(tag);
+      }
+    });
+  });
+  return tags;
+};
+
 const Page = ({ params: { lang } }) => {
-  return <Talks lang={lang} talksList={talksList} />;
+  return <Talks lang={lang} talksList={talksList} allTags={getAllTags()} />;
 };
 
 Page.propTypes = {
diff --git a/src/app/[lang]/talks/tags/[uniquepage]/page.js b/src/app/[lang]/talks/tags/[uniquepage]/page.js
index 2570100..6a78454 100644
--- a/src/app/[lang]/talks/tags/[uniquepage]/page.js
+++ b/src/app/[lang]/talks/tags/[uniquepage]/page.js
@@ -22,7 +22,7 @@ const UniquePage = ({ params: { uniquepage, lang } }) => {
     notFound();
   }
 
-  return <Talks talksList={talks} lang={lang} />;
+  return <Talks talksList={talks} lang={lang} defaultTag={uniquepage} />;
 };
 
 UniquePage.propTypes = {