Merge pull request #110 from PyConColombia/issue-107

Issue 107

src/app/[lang]/components/NavbarCustom.js

@@ -43,6 +43,9 @@ const NavbarCustom = ({ lang }) => {
             <NavDropdown
               title={i18nDictionary?.navbar?.schedule}
               id="collapsible-nav-dropdown-schedule">
+              {/* <NavDropdown.Item as={Link} href={`/${lang}/schedule`}>
+                {i18nDictionary?.navbar?.schedule}
+              </NavDropdown.Item> */}
               <NavDropdown.Item as={Link} href={`/${lang}/keynotes`}>
                 {i18nDictionary?.navbar?.keynotes}
               </NavDropdown.Item>

src/app/[lang]/schedule/components/Card.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import Link from 'next/link';
+import propTypes from 'prop-types';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Image from 'next/image';
+
+import speakerList from '@/data/speakers.json';
+
+const Card = ({ talkData, index, lang, langMapping }) => {
+  const colorBorderSpeaker = ['border-pink', 'border-yellow', 'border-purple', 'border-blue'];
+
+  const getSpeakerData = (id) => {
+    return speakerList.find((speaker) => speaker.id === id);
+  };
+
+  return (
+    <Row className="keynote-card talk-card justify-content-center">
+      <Col xs={12}>
+        <Link href={`/${lang}/talks/${talkData.id}`}>
+          <h4>
+            {talkData.title[lang]} ({langMapping && langMapping[talkData?.spoken_language]})
+          </h4>
+        </Link>
+      </Col>
+      <Col xs={12}>
+        {talkData.tags.map((tag) => (
+          <Link key={tag} href={`/${lang}/talks/tags/${tag}`}>
+            <span className={`badge default ${tag}`}>{tag}</span>
+          </Link>
+        ))}
+      </Col>
+      <Col xs={12}>
+        {talkData.speakers.map((speaker) => {
+          const speakerData = getSpeakerData(speaker);
+
+          return (
+            <Link
+              key={`${talkData.id}-${speakerData.id}`}
+              href={`/${lang}/${speakerData.type}s/${speakerData.id}`}>
+              <Image
+                className={`img-keynote img-speaker-talk ${colorBorderSpeaker[(index + 1) % colorBorderSpeaker.length]}`}
+                src={`/images/${speakerData.type}/${speakerData.photo}`}
+                alt="Speaker Image"
+                width={300}
+                height={300}
+              />
+            </Link>
+          );
+        })}
+      </Col>
+    </Row>
+  );
+};
+
+Card.propTypes = {
+  talkData: propTypes.shape({
+    id: propTypes.number,
+    first_name: propTypes.string,
+    last_name: propTypes.string,
+    biography: propTypes.shape({}),
+    photo: propTypes.string,
+    type: propTypes.string,
+    country_origin: propTypes.string,
+    facebook: propTypes.string,
+    twitter: propTypes.string,
+    linkedin: propTypes.string,
+    github: propTypes.string,
+    website: propTypes.string
+  }),
+  reverse: propTypes.bool,
+  index: propTypes.number,
+  lang: propTypes.string
+};
+
+export default Card;

src/app/[lang]/schedule/components/Schedule.js

@@ -0,0 +1,82 @@
+'use client';
+
+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';
+
+import Card from '@/app/[lang]/talks/components/Card';
+import Title from '@/app/[lang]/talks/components/Title';
+
+import { useI18n } from '@/contexts/I18nContext';
+
+const Schedule = ({ lang, talksList, defaultTag, allTags }) => {
+  const i18nDictionary = useI18n();
+  const [tagFilter, setTagFilter] = useState(defaultTag || 'all');
+  const [talks, setSchedule] = useState(talksList);
+
+  useEffect(() => {
+    if (tagFilter === 'all') {
+      setSchedule(talksList);
+    } else {
+      setSchedule(talksList.filter((talk) => talk.tags.includes(tagFilter)));
+    }
+  }, [tagFilter, talksList]);
+
+  return (
+    <section id="keynotes">
+      <div className="keynotes-bg">
+        <Title content={i18nDictionary?.sections?.talks} counter={talks.length} />
+        <Container>
+          <Row className="justify-content-center">
+            <Col xs={12} md={4}>
+              <div className="filter-container">
+                <Form.Group controlId="formBasicSelect">
+                  <Form.Label>{i18nDictionary?.sections?.talks?.filter}</Form.Label>
+                  <Form.Control
+                    as="select"
+                    value={tagFilter}
+                    onChange={(e) => {
+                      setTagFilter(e.target.value);
+                    }}>
+                    <option value="all">{i18nDictionary?.sections?.talks?.tags?.all}</option>
+                    {allTags &&
+                      allTags.map((tag) => (
+                        <option key={tag} value={tag}>
+                          {i18nDictionary?.sections?.talks?.tags?.[tag] || tag}
+                        </option>
+                      ))}
+                  </Form.Control>
+                </Form.Group>
+              </div>
+            </Col>
+          </Row>
+          <Row className="justify-content-center">
+            <Col xs={12} md={10}>
+              <Row>
+                {talks.map((talk, index) => (
+                  <Col xs={12} md={6} key={talk.id}>
+                    <Card
+                      talkData={talk}
+                      index={index}
+                      lang={lang}
+                      langMapping={i18nDictionary?.languages}
+                    />
+                  </Col>
+                ))}
+              </Row>
+            </Col>
+          </Row>
+        </Container>
+      </div>
+    </section>
+  );
+};
+
+Schedule.propTypes = {
+  lang: propTypes.string
+};
+
+export default Schedule;

src/app/[lang]/schedule/components/Title.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+const Title = ({ content, counter }) => {
+  return (
+    <div className="welcome">
+      <div className="welcome-bg">
+        <Container>
+          <Row className="justify-content-center">
+            <Col xs={10} md={6}>
+              <div className="title-container">
+                <h2 className="title">
+                  <span className="bold">
+                    {content?.title} ({counter})
+                  </span>
+                </h2>
+              </div>
+            </Col>
+          </Row>
+        </Container>
+      </div>
+    </div>
+  );
+};
+
+Title.propTypes = {
+  content: propTypes.object
+};
+
+export default Title;

src/app/[lang]/schedule/page.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import Schedule from './components/Schedule';
+
+import talksList from '@/data/talks.json';
+
+import en from '@/data/dictionaries/en.json';
+import es from '@/data/dictionaries/es.json';
+
+export async function generateMetadata({ params: { lang } }, parent) {
+  const dataLang = lang === 'en' ? en : es;
+  const dataSection = dataLang?.sections;
+  const scheduleData = dataSection.schedule;
+
+  return {
+    title: scheduleData.title
+  };
+}
+
+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 <Schedule lang={lang} talksList={talksList} allTags={getAllTags()} />;
+};
+
+Page.propTypes = {
+  params: propTypes.shape({
+    lang: propTypes.string
+  })
+};
+
+export default Page;

src/app/[lang]/speakers/[uniquepage]/Speakers.js

@@ -148,7 +148,7 @@ const Speakers = ({ speaker, talks, lang }) => {
                 </span>
                 {talks.map((talk) => (
                   <div key={talk.id} className="talk-wrapper">
-                    <Link href={`/talks/${talk.id}`} locale={lang}>
+                    <Link href={`/${lang}/talks/${talk.id}`} locale={lang}>
                       <h4>{talk.title[lang]}</h4>
                     </Link>
                   </div>

src/data/dictionaries/en.json

@@ -50,6 +50,9 @@
     "sponsors": {
       "title": "Sponsors",
       "description": "PyCon Colombia can be your platform to gain brand recognition, take leads and recruit from an audience of highly skilled professionals!"
+    },
+    "schedule": {
+      "title": "Schedule"
     }
   },
   "languages": {

src/data/dictionaries/es.json

@@ -50,6 +50,9 @@
     "sponsors": {
       "title": "Patrocinadores",
       "description": "PyCon Colombia can be your platform to gain brand recognition, take leads and recruit from an audience of highly skilled professionals!"
+    },
+    "schedule": {
+      "title": "Cronograma"
     }
   },
   "languages": {

src/data/schedule.json

@@ -0,0 +1,59 @@
+[
+  {
+    "date": "2024-06-07",
+    "order": [
+      {
+        "hour": "08:00",
+        "events": [
+          {
+            "title": "Attenders Arrival - Kits Delivery"
+          }
+        ]
+      },
+      {
+        "hour": "08:30",
+        "events": [
+          {
+            "room": "main",
+            "title": "Opening (Organizers)"
+          }
+        ]
+      },
+      {
+        "hour": "08:45",
+        "events": [
+          {
+            "room": "main",
+            "title": "EAFIT Opening"
+          }
+        ]
+      },
+      {
+        "hour": "09:00",
+        "events": [
+          {
+            "room": "main",
+            "title": "Quimisha Goss"
+          }
+        ]
+      },
+      {
+        "hour": "10:30",
+        "events": [
+          {
+            "room": "main",
+            "event_id": 39
+          },
+          {
+            "room": "aux_1",
+            "event_id": 4
+          },
+          {
+            "room": "aux_2",
+            "event_id": 22
+          }
+        ]
+      }
+    ]
+  }
+]