Merge pull request #112 from PyConColombia/issue-107

Issue 107

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

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

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

@@ -0,0 +1,58 @@
+import Link from 'next/link';
+import React from 'react';
+import { Col, Row } from 'react-bootstrap';
+
+const Event = ({ talk, event, type, size, lang }) => {
+  return (
+    <Col xs={12} md={type !== 'talk' ? 12 : size} className="event">
+      <Row>
+        <Col xs={12}>
+          <div className="event-title">
+            {type === 'keynote' ? (
+              <Link href={`/${lang}/keynotes/${event.id}`}>{event.title}</Link>
+            ) : (
+              event.title
+            )}
+          </div>
+        </Col>
+        {talk?.tags && (
+          <Col xs={12} className="talk-card">
+            {(talk?.tags || []).map((tag) => (
+              <Link key={tag} href={`/${lang}/talks/tags/${tag}`}>
+                <span className={`badge default ${tag}`}>{tag}</span>
+              </Link>
+            ))}
+          </Col>
+        )}
+
+        <Col xs={12}>
+          {talk.title && (
+            <div className="event-title">
+              <Link href={`/${lang}/talks/${talk.id}`}>{talk.title[lang]}</Link>
+            </div>
+          )}
+        </Col>
+        {talk.title && (
+          <Col xs={12}>
+            <div className="event-title">
+              <Link href={`/${lang}/talks/${talk.id}`}>{talk.title[lang]}</Link>
+            </div>
+          </Col>
+        )}
+
+        {talk?.spoken_language && event?.room && (
+          <>
+            <Col xs={12} md={6} className="event-description right">
+              {talk?.spoken_language}
+            </Col>
+            <Col xs={12} md={6} className="event-description left">
+              <span>{event?.room || ''}</span>
+            </Col>
+          </>
+        )}
+      </Row>
+    </Col>
+  );
+};
+
+export default Event;

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Event from './Event';
+
+const Events = ({ order, lang, talksList }) => {
+  const getTalkById = (id) => {
+    return talksList.find((talk) => talk.id === id);
+  };
+
+  return (
+    <Row className="justify-content-center">
+      <Col xs={12}>
+        {order.map((order, index) => {
+          return (
+            <Row key={index}>
+              <Col
+                xs={12}
+                md={order.events.length > 1 ? 12 : 6}
+                className={`event-container ${order.type}`}>
+                <h3 className="event-hour">{order.hour}</h3>
+                <Row>
+                  {order.events.map((event) => {
+                    const talk = getTalkById(event.event_id) || {};
+
+                    return (
+                      <Event
+                        key={event.event_id}
+                        talk={talk}
+                        event={event}
+                        type={order.type}
+                        size={event.title ? '6' : '4'}
+                        lang={lang}
+                      />
+                    );
+                  })}
+                </Row>
+              </Col>
+            </Row>
+          );
+        })}
+      </Col>
+    </Row>
+  );
+};
+
+Events.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 Events;

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

@@ -3,69 +3,76 @@
 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 Events from '@/app/[lang]/schedule/components/Events';
+import Title from '@/app/[lang]/schedule/components/Title';
 
 import { useI18n } from '@/contexts/I18nContext';
 
-const Schedule = ({ lang, talksList, defaultTag, allTags }) => {
+const Schedule = ({ lang, scheduleData, talksList }) => {
   const i18nDictionary = useI18n();
-  const [tagFilter, setTagFilter] = useState(defaultTag || 'all');
-  const [talks, setSchedule] = useState(talksList);
+  const [currentDate, setCurrentDate] = useState('');
+  const [currentOrder, setCurrentOrder] = useState([]);
+  const [nextDate, setNextDate] = useState('');
+  const [previousDate, setPreviousDate] = useState('');
 
   useEffect(() => {
-    if (tagFilter === 'all') {
-      setSchedule(talksList);
-    } else {
-      setSchedule(talksList.filter((talk) => talk.tags.includes(tagFilter)));
+    const strDate = scheduleData.length > 0 ? scheduleData[0].date : '';
+
+    if (strDate) {
+      setCurrentDate(scheduleData[0].date);
+      setCurrentOrder(scheduleData[0].order || []);
+    }
+  }, [scheduleData]);
+
+  useEffect(() => {
+    if (currentDate) {
+      const currentData = scheduleData.find((data) => data.date === currentDate);
+
+      if (currentData) {
+        setNextDate(currentData.next_date);
+        setPreviousDate(currentData.previous_date);
+        setCurrentOrder(currentData.order || []);
+      }
     }
-  }, [tagFilter, talksList]);
+  }, [currentDate, scheduleData]);
+
+  const onClickPrevious = () => {
+    setCurrentDate(previousDate);
+  };
+
+  const onClickNext = () => {
+    setCurrentDate(nextDate);
+  };
 
   return (
     <section id="keynotes">
       <div className="keynotes-bg">
-        <Title content={i18nDictionary?.sections?.talks} counter={talks.length} />
+        <Title content={i18nDictionary?.sections?.schedule} />
         <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}>
+            <Col xs={12} md={10} className="schedule-container">
+              <Row>
+                <Col>
+                  <h2>
+                    {new Date(currentDate).toLocaleString('en-US', {
+                      month: 'long',
+                      day: 'numeric',
+                      zone: 'UTC-5'
+                    })}
+                  </h2>
+                </Col>
+                <Col className="d-flex justify-content-end">
+                  {previousDate && <button onClick={onClickPrevious}>Previous</button>}
+                  {nextDate && <button onClick={onClickNext}>Next</button>}
+                </Col>
+              </Row>
               <Row>
-                {talks.map((talk, index) => (
-                  <Col xs={12} md={6} key={talk.id}>
-                    <Card
-                      talkData={talk}
-                      index={index}
-                      lang={lang}
-                      langMapping={i18nDictionary?.languages}
-                    />
-                  </Col>
-                ))}
+                <Col>
+                  <Events order={currentOrder} lang={lang} talksList={talksList} />
+                </Col>
               </Row>
             </Col>
           </Row>

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

@@ -4,7 +4,7 @@ import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 
-const Title = ({ content, counter }) => {
+const Title = ({ content }) => {
   return (
     <div className="welcome">
       <div className="welcome-bg">
@@ -13,9 +13,7 @@ const Title = ({ content, counter }) => {
             <Col xs={10} md={6}>
               <div className="title-container">
                 <h2 className="title">
-                  <span className="bold">
-                    {content?.title} ({counter})
-                  </span>
+                  <span className="bold">{content?.title}</span>
                 </h2>
               </div>
             </Col>

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

@@ -3,6 +3,7 @@ import propTypes from 'prop-types';
 import Schedule from './components/Schedule';
 
 import talksList from '@/data/talks.json';
+import scheduleData from '@/data/schedule.json';
 
 import en from '@/data/dictionaries/en.json';
 import es from '@/data/dictionaries/es.json';
@@ -17,21 +18,8 @@ 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 <Schedule lang={lang} talksList={talksList} allTags={getAllTags()} />;
+  return <Schedule lang={lang} scheduleData={scheduleData} talksList={talksList} />;
 };
 
 Page.propTypes = {