Skip to content

Commit

Permalink
show meetups by id instead of month
Browse files Browse the repository at this point in the history
  • Loading branch information
@luciagirasoles
luciagirasoles committed Dec 5, 2022
1 parent 1f04ddf commit 8f2be6e
Show file tree
Hide file tree
Showing 15 changed files with 87 additions and 204 deletions.
11 changes: 11 additions & 0 deletions app/controllers/api/events_controller.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,17 @@

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_by_date =
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
4 changes: 2 additions & 2 deletions app/javascript/datasources/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@ const productionDonationAmounts = [
{ value: 1000, link: 'https://buy.stripe.com/8wMeVAbl710mdEY009' },
];

export const getPastMeetup = async (year, month) => {
const result = await fetch(`${API_ROOT}/events/${year}/${month}`);
export const getMeetup = async (id) => {
const result = await fetch(`${API_ROOT}/events/${id}`);
const json = await result.json();
return json.data;
};
4 changes: 2 additions & 2 deletions app/javascript/packs/past_meetup.jsx → app/javascript/packs/meetup.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom';
import PastMeetup from '../components/pages/PastMeetup';
import Meetup from '../components/pages/Meetup';

document.addEventListener('DOMContentLoaded', () => {
const body = document.createElement('div');
body.style = 'min-height: 100vh';

ReactDOM.render(<PastMeetup />, document.body.appendChild(body));
ReactDOM.render(<Meetup />, document.body.appendChild(body));
});
6 changes: 6 additions & 0 deletions app/javascript/stylesheets/header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,12 @@ header {
}
}

&.highlight {
a {
color: #f56960
}
}

&.is-active {
a {
@apply text-gray-500 font-bold md:font-normal;
Expand Down
Loading

0 comments on commit 8f2be6e

Please sign in to comment.