github-calendar in react.js

[maifeeulasad]

I'm trying to implement this module in my react.js application.

Here is my code.

It gives me error, can you help me resolving it?

[IonicaBizau]

Please ask the questions on Stack Overflow.

[lopezdp]

@maifeeulasad did you ever figure that out?

[maifeeulasad]

yes @lopezdp

[lopezdp]

yes @lopezdp

its cool I just figured it out, thanks for the response. On to the next task! :)

[karloluis]

@lopezdp @maifeeulasad Care to share your findings?

[maifeeulasad]

@karloluis it will take some time to find out the final react.js solution.

But here is the life saver code : https://github.com/maifeeulasad/maifeeulasad.github.io/blob/74ef95b73d9c117bb0d14d134aa967eae853d7fd/showcase/index.html#L43

And here is what it looks like : https://maifeeulasad.github.io/showcase/

[lopezdp]

@lopezdp @maifeeulasad Care to share your findings?

I created an export in a js file I called githubEventList.js that looks like this:

// NOTE: https://api.github.com/users/lopezdp/events

// NOTE: https://api.github.com/users/lopezdp/events

// FIXME: Make this fetch from github

const id = "id-id";
const secret = "secret-secret";

export function eventList(usr) {
    return fetch(
        `https://api.github.com/users/${usr}/events?client_id=${id}&client_secret=${secret}`,
        {
            mode: "cors",
            //credentials: "include",
            method: "GET"
        }
    );
}

Then in my implementation file I imported it as such:

import { eventList } from "../libs/githubEventList";

and implemented it as such:

    constructor(props) {
        super(props);

        this.state = {
            isLoading: false,
            eventLists: [],
            usr: "lopezdp",
        };
    }

    componentDidMount() {
        eventList(this.state.usr)
            .then((response) => response.json())
            .then((res) => {
                this.setState({
                    eventLists: res,
                });
                console.log("YoOOOO: ", res);
            })
            .catch((error) =>
                console.log("Authorization failed : " + error.message)
            );
    }

then in my render function I implemented the component as such:

<div className="gh-activity-feed">
    <GitHubFeed 
        className="gh-window" 
        fullName={"David P. Lopez"} // Provide Full Name as displayed on GitHub
        userName={"LopezDP"} // Provide User Name as displayed on Guthub
        avatarUrl={
            "https://avatars1.githubusercontent.com/u/user_id_here?s=460&v=4"
        } // Provide the avatar url of your github profile
        events={ this.state.eventLists } // provide array of events using the users '/events' endpoint of github api
    />
</div>