#97 Agregar filtro de tags

PyConColombia · May 12, 2024 · 3afb3ce · 3afb3ce
1 parent e5390ed
commit 3afb3ce
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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,16 +12,47 @@ 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">
       <div className="keynotes-bg">
         <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
@@ -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
@@ -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 = {