Use Meetup Api to fetch upcoming meetups

[peterpme]

• fetch upcoming meetup info using meetupId stored in CMS
• create upcoming react template
• display upcoming on website

Meetup has an API we can use to fetch upcoming meetups and info.

Since we're storing the meetupId, all we have to do is parse & fetch this info

https://www.meetup.com/meetup_api/docs/

[wem5637]

Is there a plan to create an express backend service to consume meetup information? This is a static project correct? We can create a separate repo for API

[peterpme]

Hey @wem5637,

Good question!

I was hoping we could try Gatsby's 3rd party plugin support:
https://www.gatsbyjs.org/docs/third-party-graphql/

[basicdays]

I'd imagine we could probably cron job that to check for anything new each day and generate new pages based on that? Even better if Meetup has an evented system that could ping us that something has changed.

[wem5637]

You can assign this to me for now. I'll see if I can muster up something today and tomorrow.

[wem5637]

I looked into @peterpme 's link above. There doesn't seem to be an easy way to connect to non graphql external apis like meetup.com. Curious to see if anyone else has had more success with this than I have.

Are we decided that this project will be serverless? A backend client would be a big help.

[peterpme]

I think you're right @wem5637, if there's no easy way to do it we should just put up an express server for now 😃

[peterpme]

Not sure if this matters or not https://www.gatsbyjs.org/blog/2018-09-25-announcing-graphql-stitching-support/

[wem5637]

Great, might already have something set up from the former project. I'll let you know when I get to this.

[wem5637]

I started this. It's located here.
https://github.com/wem5637/chijs_meetup_api

The project makes hourly requests to meetup.com and serves that info over the following routes.

Get group info - /api/groups
Get event listings of groups - /api/events

Feel free to fork and make it your own @peterpme

[peterpme]

Hey @wem5637

😍 thank you so much!!!

Would you be able to move the repo over to chicagojs under settings?

[wem5637]

Ah, I don't have permission to move/create repos in chicago.js. So believe I'm unable to.

[Alek-S]

If we want to skip the backend for now since sounds like still a work-in-progress, a faster way to get this stood up may be to just do a simple fetch client-side on the endpoint using a stateful component inside of a componentDidMount lifecycle event. Redux would be usual way for these api calls, but thinking vanilla React component is simpler for now, easier for people to jump into as well.

Seems to work in curl without credentials since upcoming events are public for these groups. Example curl to get next upcoming react chicago event:

curl 'https://api.meetup.com/React-Chicago/events?page=1' | jq

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  1823  100  1823    0     0   7401      0 --:--:-- --:--:-- --:--:--  7410
[
  {
    "created": 1538407398000,
    "duration": 7200000,
    "fee": {
      "accepts": "wepay",
      "amount": 3,
      "currency": "USD",
      "description": "",
      "label": "Price",
      "required": true
    },
    "id": "255167257",
    "name": "\"React Native Libraries for a Happy Life\" by Mitch Masia",
    "rsvp_limit": 125,
    "status": "upcoming",
    "time": 1548892800000,
    "local_date": "2019-01-30",
    "local_time": "18:00",
    "rsvp_open_offset": "PT672H",
    "rsvp_close_offset": "PT25H",
    "updated": 1544050950000,
    "utc_offset": -21600000,
    "waitlist_count": 0,
    "yes_rsvp_count": 1,
    "venue": {
      "id": 26009925,
      "name": "Cameo",
      "lat": 41.88926696777344,
      "lon": -87.65434265136719,
      "repinned": false,
      "address_1": "401 N Aberdeen St.",
      "city": "Chicago",
      "country": "us",
      "localized_country_name": "USA",
      "zip": "60642",
      "state": "il"
    },
    "group": {
      "created": 1416363838000,
      "name": "React Chicago",
      "id": 18199684,
      "join_mode": "open",
      "lat": 41.880001068115234,
      "lon": -87.63999938964844,
      "urlname": "React-Chicago",
      "who": "Members",
      "localized_location": "Chicago, IL",
      "state": "IL",
      "country": "us",
      "region": "en_US",
      "timezone": "US/Central"
    },
    "link": "https://www.meetup.com/React-Chicago/events/255167257/",
    "description": "<p>React Native is still the relatively new kid on the block. This talk addresses some common problems faced by newcomers to the platform, and the libraries experienced React Native devs use to navigate those problems.</p> <p>We'll discuss topics including Styling, Navigation, Animation, Push Notifications, Maps, Deployment, and more!</p> <p>This is a great opportunity for React Native newbies and intermediates to learn about what to expect from the platform and some industry-standard solutions.</p> <p>Mitch is an engineer and entrepreneur at Hexient Labs. He's a software junkie focused on React, React Native, and Node. He's launched 5 production React Native apps and is a frequent Meetup attendee and speaker.</p> ",
    "visibility": "public"
  }
]

[wem5637]

It's all set up, we just need to merge it into the project. We can't make a client side request directly to the endpoint because of CORS restrictions.

[wem5637]

Since I don't have permission to create repositories, someone with permission would need to fork this project to ChicagoJS.

In essence what this enables, we have an api server with which we can get meetup information. Meetup information is obtained via cron job then relayed to the front-end by any call that is made. We'd need to host this somehwere but it's totally something that a small heroku instance can do for now. I could do this myself but the instance would lack continuing support and ownership from chicagojs.

[peterpme]

Thanks @wem5637!! Forked it over to github.com/chicagojs/chicagojs.org-api and will host this for us shortly 😄

[Alek-S]

Either way I'm good with. One note with regards to CORS restriction comment, that can be bypassed by using JSONP.

Example of client-side only react-chicago meetup request: https://alek-s.github.io/jsonp_test/

[wem5637]

@Alek-S Ah great, I'm not familiar at all with jsonp. I've been wondering how people have found ways around CORS. I think there are definitely options available to whoever wants to own the meetup front end portion now.