Integrate Meetup API to show upcoming events #8
Description
Following up from today's meetup discussing the Jamstack with @schalkventer and @justinslack, Opening up an issue to discuss integrating the Meetup APIs into https://fedsa.org/ so that it always shows the upcoming and/or most recent meetups. From this discussion I'll try and implement the new feature and open a PR.
First solution that comes to mind
One solution that comes to mind is leveraging a client side fetch() request (https://www.meetup.com/meetup_api/docs/:urlname/#get) after all the page assets are rendered, and displaying the meeting information in a block underneath the "become a partner" button so as not to cause a weird jump in the layout.
e.g. this basic fetch request returns a good amount of information
fetch('https://api.meetup.com/fedsa-community?fields=event_sample')
.then(res=>res.json())
.then(parsed=>/* do something with the parsed JSON response */ )Among the JSON output is the field next_event which would always be up to date with whatever is posted on https://www.meetup.com/fedsa-community/. There also seems to be a good amount of other assets available from this request to build out the meetup integration further. The main perk of going this direction is you will not need to worry about securing any API keys, the main downfall is that this puts the workload on your site's visitors, and it won't be pre-rendered so no SEO benefits.
Fetch output
{
id: 5568472,
name: "Front-end Development South Africa (FEDSA)",
status: "active",
link: "https://www.meetup.com/fedsa-community/",
urlname: "fedsa-community",
description: "<p><span>Front-end Development South Africa (https://fedsa.org) is a registered non-profit orga...",
created: 1351246477000,
city: "Cape Town",
untranslated_city: "Cape Town",
country: "ZA",
localized_country_name: "South Africa",
localized_location: "Cape Town, South Africa",
region2: "",
state: "",
join_mode: "open",
visibility: "public",
lat: -33.93,
lon: 18.46,
members: 3158,
member_pay_fee: false,
wepay_fee_deprecated: true,
organizer: {
id: 67546382,
name: "Justin S.",
bio: "",
photo: {
id: 245752229,
highres_link: "https://secure.meetupstatic.com/photos/member/c/c/0/5/highres_245752229.jpeg",
photo_link: "https://secure.meetupstatic.com/photos/member/c/c/0/5/member_245752229.jpeg",
thumb_link: "https://secure.meetupstatic.com/photos/member/c/c/0/5/thumb_245752229.jpeg",
type: "member",
base_url: "https://secure.meetupstatic.com"
}
},
who: "members",
lang: "en_US",
group_photo: {
id: 490351676,
highres_link: "https://secure.meetupstatic.com/photos/event/7/b/b/c/highres_490351676.jpeg",
photo_link: "https://secure.meetupstatic.com/photos/event/7/b/b/c/600_490351676.jpeg",
thumb_link: "https://secure.meetupstatic.com/photos/event/7/b/b/c/thumb_490351676.jpeg",
type: "event",
base_url: "https://secure.meetupstatic.com"
},
key_photo: {
id: 490351681,
highres_link: "https://secure.meetupstatic.com/photos/event/7/b/c/1/highres_490351681.jpeg",
photo_link: "https://secure.meetupstatic.com/photos/event/7/b/c/1/600_490351681.jpeg",
thumb_link: "https://secure.meetupstatic.com/photos/event/7/b/c/1/thumb_490351681.jpeg",
type: "event",
base_url: "https://secure.meetupstatic.com"
},
timezone: "Africa/Johannesburg",
next_event: {
id: "278915013",
name: "Introduction to the Jamstack",
yes_rsvp_count: 74,
time: 1625070600000,
utc_offset: 7200000
},
category: { id: 34, name: "Tech", shortname: "tech", sort_name: "Tech" },
event_sample: [
{
created: 1547978512000,
duration: 18000000,
id: "258235473",
name: "Free Full-day GraphQL Workshop",
date_in_series_pattern: false,
status: "past",
time: 1550912400000,
local_date: "2019-02-23",
local_time: "11:00",
updated: 1550933293000,
utc_offset: 7200000,
waitlist_count: 0,
yes_rsvp_count: 98,
venue: {
id: 16384722,
name: "CodeBridge",
lat: -33.97644805908203,
lon: 18.466297149658203,
repinned: true,
address_1: "Campground Road, Claremont, ZA. (-33.976559,18.466614)",
city: "Cape Town",
country: "za",
localized_country_name: "South Africa"
},
photo_album: {
id: 29725473,
title: "Free Full-day GraphQL Workshop",
photo_count: 1,
photo_sample: [Array]
},
is_online_event: false
},
{
created: 1538920313000,
duration: 9000000,
id: "255339174",
name: "Web Scraping with JavaScript",
rsvp_limit: 100,
date_in_series_pattern: false,
status: "past",
time: 1542213000000,
local_date: "2018-11-14",
local_time: "18:30",
updated: 1542225890000,
utc_offset: 7200000,
waitlist_count: 0,
yes_rsvp_count: 61,
venue: {
id: 16384722,
name: "CodeBridge",
lat: -33.97650909423828,
lon: 18.466236114501953,
repinned: true,
address_1: "Campground Road, Claremont, ZA. (-33.976559,18.466614)",
city: "Cape Town",
country: "za",
localized_country_name: "South Africa"
},
photo_album: {
id: 29442609,
title: "Web Scraping with JavaScript",
photo_count: 1,
photo_sample: [Array]
},
is_online_event: false
},
{
created: 1537431447000,
duration: 9000000,
id: "254844498",
name: "Introduction to TypeScript",
rsvp_limit: 70,
date_in_series_pattern: false,
status: "past",
time: 1538584200000,
local_date: "2018-10-03",
local_time: "18:30",
updated: 1538619513000,
utc_offset: 7200000,
waitlist_count: 0,
yes_rsvp_count: 55,
venue: {
id: 16384722,
name: "CodeBridge",
lat: -33.95126724243164,
lon: 18.480281829833984,
repinned: true,
address_1: "Campground Road, Claremont, ZA. (-33.976559,18.466614)",
city: "Cape Town",
country: "za",
localized_country_name: "South Africa"
},
photo_album: {
id: 29274553,
title: "Introduction to TypeScript",
photo_count: 1,
photo_sample: [Array]
},
is_online_event: false
}
],
meta_category: {
id: 292,
shortname: "tech",
name: "Tech",
sort_name: "Tech",
photo: {
id: 450131949,
highres_link: "https://secure.meetupstatic.com/photos/event/2/e/a/d/highres_450131949.jpeg",
photo_link: "https://secure.meetupstatic.com/photos/event/2/e/a/d/600_450131949.jpeg",
thumb_link: "https://secure.meetupstatic.com/photos/event/2/e/a/d/thumb_450131949.jpeg",
type: "event",
base_url: "https://secure.meetupstatic.com"
},
category_ids: [ 34 ]
}
}