Build meet up page

app/controllers/api/events_controller.rb

@@ -2,30 +2,41 @@
 
 module Api
   class EventsController < ApplicationController
+
+    def show
+      event = Event.find(params[:id])
+
+      if event.present?
+        render status: 200, json: { data: event.as_json(include: %i[event_speakers speakers]) }
+      else
+        render status: 404, json: { data: 'No event found' }
+      end
+    end
+
     def past
-      events = Event.where('date < ?', DateTime.current).order(date: :desc)
+      events = Event.includes([:speakers]).by_event_date.where('date < ?', DateTime.current)
       events_by_date =
         events
           .group_by { |event| event.date.year }
           .transform_values do |events_by_year|
             events_by_year.group_by { |event| event.date.strftime('%B') } # group by month name
           end
 
-      render status: 200, json: { data: events_by_date.as_json(include: [:event_speakers, :speakers]) }
+      render status: 200, json: { data: events_by_date.as_json(include: %i[event_speakers speakers]) }
     end
 
-    def past_by_month_day
-      event_date = DateTime.new(params[:year].to_i, params[:month].to_i, params[:day].to_i)
-      event = Event.where(date: event_date..event_date.end_of_day).first
-      if event.present?
-        render status: 200, json: { data: event.as_json(include: [:event_speakers, :speakers]) }
+    def by_month
+      events_by_month = Event.includes([:speakers]).by_event_date.by_month_year(params[:month].to_i, params[:year].to_i)
+
+      if events_by_month.present?
+        render status: 200, json: { data: events_by_month.as_json(include: %i[event_speakers speakers]) }
       else
         render status: 404, json: { data: 'No events found' }
       end
     end
 
     def upcoming
-      events = Event.where('date > ?', DateTime.current).order(date: :asc)
+      events = Event.includes([:speakers]).by_event_date.where('date > ?', DateTime.current)
       events_by_date =
         events
           .group_by { |event| event.date.year }

app/controllers/site_controller.rb

@@ -12,6 +12,6 @@ def jobs; end
   def jobs_authenticate; end
 
   def donate; end
-  
-  def past_meetup; end
+
+  def meetup; end
 end

app/javascript/components/PageTitleWithContainer.jsx

@@ -4,7 +4,7 @@ import PageTitle from 'components/PageTitle';
 
 const PageTitleWithContainer = ({ text }) => {
     return (
-        <div className="max-w-[73rem] px-10 md:px-0 mx-auto my-10 sm:my-20">
+        <div className="max-w-[73rem] px-10 md:px-8 xxl:px-0 mx-auto my-10 sm:my-20">
             <PageTitle text={text} />
         </div>
     );

app/javascript/components/PodcastTile.jsx

@@ -24,7 +24,15 @@ const PodcastTile = ({ podcasts }) => (
 );
 
 PodcastTile.propTypes = {
-    podcasts: PropTypes.arrayOf(PropTypes.object),
+    podcasts: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.number,
+            tile_image: PropTypes.string,
+            tile_image_alt: PropTypes.string,
+            title: PropTypes.string,
+            url: PropTypes.string,
+        }),
+    ),
 };
 
 export default PodcastTile;

app/javascript/components/layout/Footer.jsx

@@ -50,7 +50,7 @@ const Footer = () => (
                     Job Board
                 </a>
                 <a className="footer-col-item" href="/meetups">
-                    Past Meetups
+                    Meetups
                 </a>
             </div>
         </div>

app/javascript/components/layout/Header.jsx

@@ -57,12 +57,13 @@ const Header = () => {
                                 <li>
                                     <a href="/jobs">Job Board</a>
                                 </li>
-                                <li>
-                                    <a href="/meetups">Past Meetups</a>
-                                </li>
+
                                 <li>
                                     <a href="/sponsor-us"> Sponsor Us</a>
                                 </li>
+                                <li className="highlight">
+                                    <a href="/meetups">Meetups</a>
+                                </li>
                             </ul>
                         </div>
                         <div className="user">

app/javascript/components/meetup/SpeakerBiosBlock.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Microphone from '../icons/Microphone';
+
+export default function SpeakerBiosBlock({ speakers }) {
+    return (
+        <div className="container max-w-2xl my-8 mx-3 p-4 flex flex-col">
+            <div className="inline-flex items-center gap-2 align-center mb-5">
+                <Microphone />
+                <h4 className="text-xl font-bold text-gray md:text-2xl">About the speakers</h4>
+            </div>
+            <div className="flex flex-wrap items-center gap-5">
+                {speakers?.map(({ id, bio }) => (
+                    <div key={id}>{bio}</div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+SpeakerBiosBlock.propTypes = {
+    speakers: PropTypes.arrayOf(PropTypes.object),
+};

app/javascript/components/meetup/SpeakerVideoBlock.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import VideoBlock from 'components/meetup/VideoBlock';
+
+export default function SpeakerVideoBlock({ speaker, eventSpeaker }) {
+    const { id, image_url: imageUrl, name, tagline } = speaker;
+    const {
+        talk_title: title,
+        talk_description: description,
+        talk_video_link: videoLink,
+    } = eventSpeaker;
+    return (
+        <>
+            <VideoBlock videoUrl={videoLink} title={title} />
+            <div key={id} className="flex content-center mb-8 text-lg mt-8">
+                <img className="object-cover w-14 h-14 mr-4 rounded-full" src={imageUrl} alt="" />
+                <div>
+                    <p className="font-bold text-gray md:text-lg">{name}</p>
+                    <p className="text-sm text-gray md:text-lg">{tagline}</p>
+                </div>
+            </div>
+            <p className="pb-14">{description}</p>
+        </>
+    );
+}
+
+SpeakerVideoBlock.propTypes = {
+    speaker: PropTypes.object,
+    eventSpeaker: PropTypes.object,
+};

app/javascript/components/meetup/VideoBlock.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function VideoBlock({ videoUrl, title }) {
+    if (!videoUrl) {
+        return null;
+    }
+    return (
+        <div className="card-container flex flex-wrap justify-center aspect-w-16 aspect-h-9">
+            <iframe src={videoUrl} title={title} frameBorder="0"></iframe>;
+        </div>
+    );
+}
+
+VideoBlock.propTypes = {
+    videoUrl: PropTypes.string,
+    title: PropTypes.string,
+};

app/javascript/components/meetups/MeetupCard.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function MeetupCard({ id_event, speakers, title = '', event_speakers }) {
+    const eventWithSpeaker = event_speakers.map((talk) => {
+        const speaker = speakers.find((speak) => speak.id === talk.speaker_id);
+        return { ...talk, speaker };
+    });
+    return (
+        <li className="w-full">
+            <div className="meetups__card flex flex-col pb-12 max-w-[40rem]">
+                <div className="w-full rounded shadow-lg border-t p-10 border-gray-100 overflow-hidden">
+                    <h4 className="mb-4 text-xl font-bold text-gray md:text-2xl">{title}</h4>
+                    {eventWithSpeaker.length > 0 &&
+                        eventWithSpeaker.map(({ id, talk_title, speaker }) => (
+                            <div key={id}>
+                                <h5 className="mb-4 text-xl font-bold text-gray md:text-xl">
+                                    {talk_title}
+                                </h5>
+                                <div className="flex content-center mb-8 text-lg">
+                                    <img
+                                        className="object-cover w-14 h-14 mr-4 rounded-full"
+                                        src={speaker.image_url}
+                                        alt=""
+                                    />
+                                    <div>
+                                        <p className="font-bold text-gray md:text-lg">
+                                            {speaker.name}
+                                        </p>
+                                        <p className="text-sm text-gray md:text-lg">
+                                            {speaker.tagline}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                </div>
+                <div className="bg-gray-200 shadow-lg text-right">
+                    <a href={`/meetups/${id_event}`}>
+                        <button className="my-4 mr-6 py-4 px-8 bg-gray-600 rounded text-white text-lg md:text-xl">
+                            View
+                        </button>
+                    </a>
+                </div>
+            </div>
+        </li>
+    );
+}
+
+MeetupCard.propTypes = {
+    id_event: PropTypes.number,
+    speakers: PropTypes.array,
+    title: PropTypes.string,
+    event_speakers: PropTypes.array,
+    year: PropTypes.string,
+    month: PropTypes.string,
+};

app/javascript/components/meetups/MonthSection.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+export default function MonthSection({ children, month }) {
+    return (
+        <li key={month} className="meetups__month flex flex-col items-start md:flex-row">
+            <div className="meetups__month--name w-32">
+                <h3 className="py-1 px-2 mb-4 w-min border-2 border-red-400 rounded uppercase text-md text-red-400 md:ml-auto">
+                    {month}
+                </h3>
+            </div>
+            <div className="meetups__card--border hidden w-px self-stretch mx-6 border-l border-gray-200 md:block" />
+            <ul className="p-4 flex flex-col gap-y-10 md:pt-2 md:p-12 md:gap-y-14 w-full">
+                {children}
+            </ul>
+        </li>
+    );
+}
+
+MonthSection.propTypes = {
+    month: PropTypes.string,
+    children: PropTypes.node,
+};

app/javascript/components/meetups/YearSection.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function YearSection({ children, year }) {
+    return (
+        <section key={year} className="p-10">
+            <h2 className="mb-8 text-4xl font-bold">{year}</h2>
+            <ul className="flex flex-col">{children}</ul>
+        </section>
+    );
+}
+
+YearSection.propTypes = {
+    year: PropTypes.string,
+    children: PropTypes.node,
+};