Skip to content

Commit

Permalink
Allow accessing MeetUps in the future
Browse files Browse the repository at this point in the history
  • Loading branch information
@luciagirasoles
luciagirasoles committed Dec 26, 2022
1 parent b7fd5a1 commit 8995536
Show file tree
Hide file tree
Showing 19 changed files with 204 additions and 214 deletions.
27 changes: 19 additions & 8 deletions app/controllers/api/events_controller.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
event_date = DateTime.new(params[:year].to_i, params[:month].to_i)
event = Event.where(date: event_date..event_date.end_of_month).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 }
Expand Down
4 changes: 2 additions & 2 deletions app/controllers/site_controller.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@ def jobs; end
def jobs_authenticate; end

def donate; end
def past_meetup; end

def meetup; end
end
2 changes: 1 addition & 1 deletion app/javascript/components/PageTitleWithContainer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion app/javascript/components/layout/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const Footer = () => (
Job Board
</a>
<a className="footer-col-item" href="/meetups">
Past Meetups
Meetups
</a>
</div>
</div>
Expand Down
7 changes: 4 additions & 3 deletions app/javascript/components/layout/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
96 changes: 17 additions & 79 deletions ...avascript/components/pages/PastMeetup.jsx → app/javascript/components/pages/Meetup.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,95 +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/past_meetups/SpeakerVideoBlock';
import SpeakerBiosBlock from 'components/past_meetups/SpeakerBiosBlock';
import VideoBlock from 'components/past_meetups/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 eventDate = new Date(year, Number(month - 1));
const monthName = eventDate.toLocaleDateString('en-US', { month: 'long' });
const [loading, setLoading] = useState(true);
const [meetup, setMeetup] = useState({});

useEffect(() => {
const fetchData = async () => {
const data = await getPastMeetup(year, month);
const data = await getMeetup(id_event);
setMeetup(data);
setLoading(false);
};

fetchData();
}, [year, month]);
}, [id_event]);

const {
title,
Expand All @@ -98,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={`${monthName} ${year} Meetup`} />
</div>
<PageTitleWithContainer text={`${title} Meetup`} />
<div className="container flex mx-auto md:max-w-[50rem] lg:max-w-[73rem]">
{loading ? (
<LoadingSpinner />
Expand Down Expand Up @@ -137,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>
Expand All @@ -148,4 +86,4 @@ const PastMeetup = () => {
);
};

export default PastMeetup;
export default Meetup;
99 changes: 10 additions & 89 deletions app/javascript/components/pages/Meetups.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,97 +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 }) => {
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}`}>
<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,
};
import 'stylesheets/page';
import 'stylesheets/meetup';

const Meetups = () => {
const [loading, setLoading] = useState(true);
Expand All @@ -109,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 />
) : (
Expand All @@ -136,8 +56,9 @@ const Meetups = () => {
const numericMonth =
new Date(date).getMonth() + 1;
return (
<Meetup
<MeetupCard
key={id}
id_event={id}
speakers={speakers}
title={title}
event_speakers={
Expand Down
Loading

0 comments on commit 8995536

Please sign in to comment.