Enhance schedule and speakers (#228)

* Enhance schedule and speakers

* Fix M Aswin Kishore speaker name typo

components/button.js

@@ -9,7 +9,7 @@ const Button = (props) => {
       className={props.anchorClassName}
       style={{ pointerEvents: props.disabled ? "none" : "auto" }}
       onClick={props.onClickEvent}
-      rel={props.openInNewTab && 'noreferrer'}
+      rel={props.openInNewTab ? "noreferrer" : undefined}
     >
       <button
         className={props.buttonClassName}
@@ -18,7 +18,7 @@ const Button = (props) => {
         {props.buttonLabel}
         {props.icon && props.icon}
       </button>
-    </Link> 
+    </Link>
   );
 };
 

components/schedule.js

@@ -1,11 +1,11 @@
+import Image from "next/image";
+import React, { useState } from "react";
 import { Accordion, Badge, Card, Stack } from "react-bootstrap";
-import ScheduleData from "../data/schedule.yml";
+
 import SpeakerDetail from "components/speakerDetail";
-import React, { useState } from "react";
-import Link from "next/link";
-import Image from "next/image";
 import CustomModal from "./customModal";
-import IconComponent from "@components/icons";
+import Button from "./button";
+import ScheduleData from "data/schedule.yml";
 
 // group by array using a condition, param 1 -> array, param 2 -> function for filtering and grouping
 const groupBy = (a, f) => a.reduce((x, c) => (x[f(c)] ??= []).push(c) && x, {});
@@ -39,8 +39,8 @@ const ConferenceSchedule = () => {
       <div className="container-fluid pb-3 p-md-4">
         <div className="row pt-5 pb-5">
           <div className="col-md-12">
-            <div className="row pb-2 align-items-center">
-              <div className="col-auto">
+            <div className="row align-items-center">
+              <div className="col-auto py-2">
                 <h2
                   className="com-head"
                   data-aos="fade-down"
@@ -54,26 +54,16 @@ const ConferenceSchedule = () => {
                   />
                 </h2>
               </div>
-              <div className="col">
-                <Link
-                  className="text-decoration-none text-light p-0"
-                  href="https://drive.google.com/file/d/1v2D2epgFrvH4E_Kr7qbFxNdSctAnjATQ/view"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  <button class="custom-button green-btn p-2">
-                    Download Schedule
-                    <IconComponent
-                      className="ms-2"
-                      name="arrowRight"
-                      padding={0}
-                      size={20}
-                    />
-                  </button>
-                </Link>
+              <div className="col py-2">
+                <Button
+                  buttonHyperLink="https://drive.google.com/file/d/1v2D2epgFrvH4E_Kr7qbFxNdSctAnjATQ/view"
+                  openInNewTab={true}
+                  anchorClassName="text-decoration-none text-light"
+                  buttonClassName="custom-button green-btn"
+                  buttonLabel="Download Schedule"
+                />
               </div>
             </div>
-
             <ul
               className="nav nav-pills mb-3 pt-5"
               id="pills-tab"
@@ -82,9 +72,8 @@ const ConferenceSchedule = () => {
               {ScheduleData.map((item, index) => (
                 <li className="nav-item" role="presentation" key={index}>
                   <button
-                    className={`nav-link ${
-                      index === selectedTab ? "active" : "nav-link-inactive"
-                    }`}
+                    className={`nav-link ${index === selectedTab ? "active" : "nav-link-inactive"
+                      }`}
                     id={`pills-tab-${index}`}
                     data-bs-toggle="pill"
                     data-bs-target={`#pills-${index}`}
@@ -107,16 +96,20 @@ const ConferenceSchedule = () => {
                 className="tab-pane fade show active"
                 id="pills-home"
                 role="tabpanel"
-                aria-labelledby="pills-home-tab"
+                aria-labelledby="pills-tab"
               >
                 <div className="row">
                   {currentSchedule.schedule.map((scheduleItem, idx) => {
-                    return <ScheduleCard {...scheduleItem} key={idx} />;
+                    return (
+                      <ScheduleCard
+                        {...scheduleItem}
+                        date={currentSchedule.date}
+                        scheduleIdx={idx}
+                        key={`${currentSchedule.date}-${idx}`} />);
                   })}
                 </div>
               </div>
             </div>
-
             {/* Mobile Accordion  */}
             {ScheduleData.map((item, idx) => {
               return (
@@ -137,7 +130,7 @@ const ConferenceSchedule = () => {
   );
 };
 
-function ScheduleCard({ time, talks }) {
+function ScheduleCard({ time, date, talks, scheduleIdx }) {
   return (
     <div className="row bg-white align-items-center pt-4 pb-4 m-2 shadow-sm">
       <div className="col-md-2">
@@ -154,7 +147,7 @@ function ScheduleCard({ time, talks }) {
               <ScheduleTalk
                 {...talk}
                 size={Math.floor(12 / talkLength)}
-                key={`scheduleCard-${id}`}
+                key={`${date}-${scheduleIdx}-${id}`}
               />
             );
           })}
@@ -176,20 +169,19 @@ function ScheduleTalk({ title, speakers, track, size, proposalLink }) {
   return (
     <>
       <div
-        className={`row talk-card align-items-center p-2 pb-2 ${
-          size > 1 || "border-bottom"
-        }`}
+        className={`row talk-card align-items-center p-2 pb-2 ${size > 1 || "border-bottom"
+          }`}
         style={{ marginBottom: "0.8rem" }}
       >
         <div className="col-4">
           <div className="row">
             <div className="col-12">
               {speakers &&
-                speakers.map((speaker, idx) => {
+                speakers.map((speaker) => {
                   return (
-                    <>
+                    <div
+                      key={speaker.id}>
                       <div
-                        key={`speaker-info-${idx}`}
                         className="speaker-card p-1"
                         tabIndex={0}
                         onClick={() => handleOpenSpeakerModal(speaker.id)}
@@ -202,41 +194,38 @@ function ScheduleTalk({ title, speakers, track, size, proposalLink }) {
                           className="rounded-pill me-2"
                           width={64}
                           height={64}
-                          alt={speaker.fullName}
-                          title={speaker.fullName}
+                          alt={`Circular avatar containing an image of ${speaker.fullName}`}
                           loading="lazy"
                         />
                         <span
-                          key={speaker.id}
                           className="ft-weight talk-speaker talk-speaker-title"
                         >
                           {speaker.fullName}
                         </span>
                       </div>
                       <CustomModal
-                        // key={`speaker-modal-${idx}`}
                         showModal={selectedSpeakerId == speaker.id}
                         handleClose={handleCloseSpeakerModal}
                       >
                         <SpeakerDetail speaker={speaker} showHyperLink={true} />
                       </CustomModal>
-                    </>
+                    </div>
                   );
                 })}
             </div>
           </div>
         </div>
         <div className="col-8">
-          <p className="mb-0 date-content">
-            <a
-              className="talk-title"
-              href={proposalLink}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+          <a
+            className="talk-title"
+            href={proposalLink}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <p className="mb-0 date-content">
               {title}
-            </a>
-          </p>
+            </p>
+          </a>
           {track && (
             <Stack>
               <Badge bg="success" tabIndex={0}>
@@ -264,12 +253,12 @@ function ScheduleAccordion({ date, currentSchedule, id, handleTabClick }) {
       <Accordion.Item eventKey={id} onClick={() => handleTabClick(id)}>
         <Accordion.Header>{date}</Accordion.Header>
         <Accordion.Body style={{ padding: "1rem 0rem" }}>
-          {currentSchedule.schedule.map((scheduleItem) => {
+          {currentSchedule.schedule.map((scheduleItem, scheduleIdx) => {
             return scheduleItem.talks.map((talk, idx) => {
               return (
                 <Card
                   style={{ margin: "0.8rem 0" }}
-                  key={`accordion-card-${idx}`}
+                  key={`${date}-${scheduleIdx}-${idx}`}
                 >
                   {talk.title.indexOf("Keynote") > -1 && (
                     <Card.Header className="bg-warning">Keynote</Card.Header>
@@ -295,24 +284,26 @@ function ScheduleAccordion({ date, currentSchedule, id, handleTabClick }) {
                         </Badge>
                       </Stack>
                     )}
-                    <Card.Text className="pt-1">
+                    <Card.Body className="pt-1">
                       {/* {talk.speakersPlaceHolder ? (
                         <span>By {talk.speakersPlaceHolder}</span>
                       ) : (
                         talk.speakers && <span>{"By "}</span>
                       )} */}
                       {talk.speakers &&
-                        talk.speakers.map((speaker, index) => (
-                          <>
+                        talk.speakers.map((speaker) => (
+                          <div
+                            key={`${speaker.id}`}
+                          >
                             <div
-                              key={`speaker-info-${index}`}
                               className="col pt-2 mt-2"
                               onClick={() => handleOpenSpeakerModal(speaker.id)}
                               tabIndex={0}
                             >
                               <Image
                                 className="rounded-pill me-2"
                                 src={speaker.profilePicture}
+                                alt={`Circular avatar containing an image of ${speaker.fullName}`}
                                 width={48}
                                 height={48}
                               />
@@ -321,7 +312,6 @@ function ScheduleAccordion({ date, currentSchedule, id, handleTabClick }) {
                               </span>
                             </div>
                             <CustomModal
-                              key={`accordio-modal-${index}`}
                               showModal={selectedSpeakerId == speaker.id}
                               handleClose={handleCloseSpeakerModal}
                             >
@@ -330,9 +320,9 @@ function ScheduleAccordion({ date, currentSchedule, id, handleTabClick }) {
                                 showHyperLink={true}
                               />
                             </CustomModal>
-                          </>
+                          </div>
                         ))}
-                    </Card.Text>
+                    </Card.Body>
                   </Card.Body>
                 </Card>
               );

data/schedule.yml

@@ -501,9 +501,9 @@
                 Aby also has experience in resolving various business problems by combining purpose-led research and digital technology innovation with rapid prototyping.
               social:
             - id: FS-77
-              fullName: M Ashwin Kishore
+              fullName: M Aswin Kishore
               title:
-              profilePicture: /2023/images/speakers/featured/m_ashwin_kishore.jpg
+              profilePicture: /2023/images/speakers/featured/m-aswin-kishore.jpg
               proposalTitle: Metaprogramming In Python
               about:
                 M Aswin Kishore is a community-oriented developer with a knack for leveraging technology to tackle real-world problems. He is currently working as a Product Engineer at UST in the travel domain, specializing in Python microservices and the GraphQL ecosystem.
@@ -705,7 +705,7 @@
             - id: TS-01
               fullName: Anitha Raman
               title: Founder & CEO codePannu
-              profilePicture: /2023/images/speakers/tinkeringSpace/anitha_raman.png
+              profilePicture: /2023/images/speakers/tinkeringSpace/anitha-raman.jpg
               about:
                 With a decade of experience in building and scaling teams in data science and another 5 yrs as an
                 independent consultant with tech enabled startups, Anitha Raman has now initiated this mission to provide easy and application-based Tech education for kids across the globe.
@@ -717,7 +717,7 @@
                   link: https://instagram.com/anitha__raman
             - id: TS-02
               fullName: Manav Sethi
-              profilePicture: /2023/images/speakers/tinkeringSpace/manav.png
+              profilePicture: /2023/images/speakers/tinkeringSpace/manav-sethi.jpg
               about: Manav Sethi is a Backend and Machine Learning Engineer at Olvyhq, Beyond this he loves to tinker with electronics, build robots with a great interest in democratizing robots . As a result he has also co-founded A.T.O.M Robotics Lab which is an open robotics lab based out of Delhi which works on ROS and other open source robotics stacks building industrial robots for education.
               social:
                 - platform: linkedin
@@ -733,7 +733,7 @@
             - id: YLW-01
               fullName: Harsh Mittal
               title:
-              profilePicture: /2023/images/speakers/ylw/harsh_mittal.jpg
+              profilePicture: /2023/images/speakers/ylw/harsh-mittal.jpg
               about: Harsh Mittal is a Robotics Software Developer with over 3 years of experience and is currently working in Brane Enterprises on creating Autonomous Swarm Drones and Quadraped. He has completed is Bachelors from LNMIIT in Electronics and Communication. Harsh is passionate about Robotics, Software Development, IoT and AI. He likes to share his knowledge via Youtube Tutorials and Blogs. Harsh has also given talks in PyCon India, PyCon Sweden and also have published paper in IEEE Osaka Japan.
               social:
                 - platform: youtube

pages/404.tsx

@@ -54,7 +54,7 @@ const NotFoundPage = () => {
             anchorClassName="text-decoration-none"
             buttonLabel="Go to Home"
             openInNewTab={false}
-            buttonHyperLink="/2023/"
+            buttonHyperLink="/"
           />
         </div>
       </div>