Allow accessing MeetUps in the future

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/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/past_meetups/SpeakerVideoBlock.jsx → app/javascript/components/meetup/SpeakerVideoBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import VideoBlock from 'components/past_meetups/VideoBlock';
+import VideoBlock from 'components/meetup/VideoBlock';
 
 export default function SpeakerVideoBlock({ speaker, eventSpeaker }) {
     const { id, image_url: imageUrl, name, tagline } = speaker;

app/javascript/components/pages/PastMeetup.jsx → app/javascript/components/pages/Meetup.jsx

@@ -1,94 +1,34 @@
 import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
-import PropTypes from 'prop-types';
-import { getPastMeetup } from '../../datasources';
+import { getMeetup } from '../../datasources';
 import SharedLayout from 'components/layout/SharedLayout';
-import PageTitleWithContainer from 'components/PageTitle';
-import SpeakersList from '../SpeakersList';
-import Microphone from '../icons/Microphone';
-import LoadingSpinner from 'components/LoadingSpinner';
-import 'stylesheets/page';
-import 'stylesheets/meetup';
-
-const 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,
-};
-
-const 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>
-    );
-};
+import PageTitleWithContainer from 'components/PageTitleWithContainer';
+import SpeakersList from 'components/SpeakersList';
+import LoadingSpinner from 'components/LoadingSpinner';
 
-SpeakerBiosBlock.propTypes = {
-    speakers: PropTypes.arrayOf(PropTypes.object),
-};
+import SpeakerVideoBlock from 'components/meetup/SpeakerVideoBlock';
+import SpeakerBiosBlock from 'components/meetup/SpeakerBiosBlock';
+import VideoBlock from 'components/meetup/VideoBlock';
 
-const 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>
-        </>
-    );
-};
+import 'stylesheets/page';
+import 'stylesheets/meetup';
 
-SpeakerVideoBlock.propTypes = {
-    speaker: PropTypes.object,
-    eventSpeaker: PropTypes.object,
-};
+const Meetup = () => {
+    const id_event = window.id_event;
 
-const PastMeetup = () => {
-    const year = window.year;
-    const month = window.month;
-    const day = window.day;
     const [loading, setLoading] = useState(true);
     const [meetup, setMeetup] = useState({});
 
     useEffect(() => {
         const fetchData = async () => {
-            const data = await getPastMeetup(year, month, day);
+            const data = await getMeetup(id_event);
             setMeetup(data);
             setLoading(false);
         };
 
         fetchData();
-    }, [year, month, day]);
+    }, [id_event]);
 
     const {
         title,
@@ -97,15 +37,14 @@ const PastMeetup = () => {
         event_speakers: eventSpeakers,
         panel_video_link: panelVideoUrl,
     } = meetup;
+
     return (
         <>
             <Helmet>
                 <title>{`${title} | WNB.rb`}</title>
             </Helmet>
             <SharedLayout>
-                <div className="max-w-[73rem] px-10 md:px-0 mx-auto my-10 sm:my-20">
-                    <PageTitleWithContainer text={title} />
-                </div>
+                <PageTitleWithContainer text={`${title} Meetup`} />
                 <div className="container flex mx-auto md:max-w-[50rem] lg:max-w-[73rem]">
                     {loading ? (
                         <LoadingSpinner />
@@ -136,7 +75,7 @@ const PastMeetup = () => {
                                     })}
                                 </>
                             )}
-                            <div className="flex flex-col items-center bg-gray-100">
+                            <div className="flex flex-col items-center bg-gray-100 mb-12">
                                 <SpeakerBiosBlock speakers={speakers} />
                             </div>
                         </div>
@@ -147,4 +86,4 @@ const PastMeetup = () => {
     );
 };
 
-export default PastMeetup;
+export default Meetup;

app/javascript/components/pages/Meetups.jsx

@@ -1,98 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
-import PropTypes from 'prop-types';
+
 import { getPastMeetups } from '../../datasources';
 import SharedLayout from 'components/layout/SharedLayout';
 import LoadingSpinner from 'components/LoadingSpinner';
 import PageTitleWithContainer from 'components/PageTitleWithContainer';
-import 'stylesheets/page';
-import 'stylesheets/meetup';
-
-const YearSection = ({ children, year }) => (
-    <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,
-};
-
-const MonthSection = ({ children, month }) => (
-    <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,
-};
+import MonthSection from 'components/meetups/MonthSection';
+import YearSection from 'components/meetups/YearSection';
+import MeetupCard from 'components/meetups/MeetupCard';
 
-const Meetup = ({ speakers, title = '', event_speakers, year, month, day }) => {
-    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/${year}/${month}/${day}`}>
-                        <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>
-    );
-};
-
-Meetup.propTypes = {
-    speakers: PropTypes.array,
-    title: PropTypes.string,
-    event_speakers: PropTypes.array,
-    year: PropTypes.string,
-    month: PropTypes.string,
-    day: PropTypes.string,
-};
+import 'stylesheets/page';
+import 'stylesheets/meetup';
 
 const Meetups = () => {
     const [loading, setLoading] = useState(true);
@@ -110,10 +29,10 @@ const Meetups = () => {
     return (
         <>
             <Helmet>
-                <title>Past Meetups | WNB.rb</title>
+                <title>Meetups | WNB.rb</title>
             </Helmet>
             <SharedLayout>
-                <PageTitleWithContainer text="Past Meetups" />
+                <PageTitleWithContainer text="Meetups" />
                 {loading ? (
                     <LoadingSpinner />
                 ) : (
@@ -139,8 +58,9 @@ const Meetups = () => {
                                                                   let [year, month, day] =
                                                                       dateString.split('-');
                                                                   return (
-                                                                      <Meetup
+                                                                      <MeetupCard
                                                                           key={id}
+                                                                          id_event={id}
                                                                           speakers={speakers}
                                                                           title={title}
                                                                           event_speakers={