Pull most recent meetup event in from Meetup API

[jkjustjoshing]

Use Meetup API, pull in most recent meetup event and show on homepage.

Would be cool to use getStaticProps or getServerSideProps to prevent exposing the API keys to the client. Documentation on those two methods here - https://nextjs.org/docs/basic-features/data-fetching

[TomFrink]

Hey @jkjustjoshing , I was playing around with Meetup API last night after Meetup. Found API method to use for Meetup events ("https://api.meetup.com/RocDev/events?page=20")

While it worked successfully in Meetup's API console I was unable to get it working during test build.

Did some digging through the docs and found this:

Do I need a Meetup Pro subscription to apply for OAuth authorization? Yes, you must be the administrator of an active Meetup Pro subscription to create new OAuth consumers. Please apply for an OAuth consumer to use Meetup's API.

Ref: https://help.meetup.com/hc/en-us/articles/360028901812-Using-Meetup-s-API

Looks like there may be a workaround using RSS Feed? Just wanted to share what I found / tried.

[jkjustjoshing]

@TomFrink thanks for doing that investigating!

I'm curious what @geowa4 is doing right now with the live site. I tried digging around that code and am pretty sure I saw some references to the Meetup API, but I didn't understand the code well enough to be certain. I was wondering if he maybe had a pro subscription to run the rocdev group.

If there's an RSS feed that definitely would be a good solution!

[jkjustjoshing]

@TomFrink and if you have any interest in pair programming on this let me know - happy to meet up and work together on it at some point

[TomFrink]

That sounds fun @jkjustjoshing ! I've never done pair programming before and interested to know more about it.

I think you're right. I think @geowa4 does have API connection configured w/ HTTPoison on existing site.

I tried using next's simple example of GetStaticProps but the build failed w/ Error occurred prerendering page "/".

I created a Meetup component in the pages folder and imported into index.js. To be honest, I'm not entirely sure if it's configured correctly or not.

Here's the component:

function Meetup({ events }) {
  return (
    <ul>
      {events.map((event) => (
        <li>{event.name}</li>
      ))}
    </ul>
  );
}
export async function getStaticProps() {

  const res = await fetch("https://api.meetup.com/RocDev/events?page=20");
  const events = await res.json();

  return {
    props: {
      events,
    },
  };
}

export default Meetup;

And this is what I added to index.js:

import Meetup from "./meetup";

....

        <div>
          <Meetup />
        </div>

[jkjustjoshing]

@TomFrink nice! If you push those changes to your fork and let me know the branch name I could take a look. Nothing you've said sounds incorrect, so I'm guessing the issue is something small.

[TomFrink]

@jkjustjoshing In trying to determine the issue, I removed the Meetup API call and called JSON placeholder instead.

I think part of the issue is props were not being passed correctly on my first go. When I created a link to the component instead, it worked.

Here is latest commit on my fork.

The other part of the issue is we want Meetup data and I don't know how to authenticate that without token

[TomFrink]

@jkjustjoshing
So I went to Meetup's API console and grabbed an example response of Meetup data, threw it in a js file and just created a component to display it. Here is a link to that commit It's hacky and weird... LOL