React Pt: 2

Part 2.. I wanted to take a break from the PieCharts and take a look at something a little different, so I started taking a stab at this issue-34.

In hind-sight, I believe this is actually a really easy issue, but I think there’s a bunch of things wrong with the whole app in general, but what do I know? It’s my first time playing with React.

I was working off of the assumption that the login work flow through GitHub was completed, so I figured I just needed to verify the user was authenticated and logged in. I dug around for a while and could only find the following line in regards to logging in:
'https://github.com/login/oauth/authroize?client_id=${CLIENT_ID}&scope=user&redirect_uri=${REDIRECT_URI}' 
For a while, I thought I was just missing something, so I kept digging. In the end, I realized that the code itself was just incomplete. After reading some GitHub developer stuff I found we stopped here.

So basically, only the first step for identifying a user was completed, took a while to realize, but no biggy. Let’s hit step 2.

Step 2 for GitHub User Identification

I realized that after logging in through the welcome page, my URL has the code parameter that I need, but the 2 other required parameters, I do not have access to. It was late at the time, so I didn’t expect anyone to help me out with it. I decided to just create a developer account to get my own client_id and client_secret .

So playing around, throwing my new information inside my local copy, the next step was to grab the code parameter from the URL. I knew that there should have been away that I could get it without being cheesy using React stuff, but I couldn’t get it to work. Apparently, the router redirects and passes some information over, but I wasn’t able to access it. A lot of the stackoverflow stuff I read said it should be found within the this.props , but I couldn’t get to it and ended up cheesing.

I would have tried help and fix/figure out how to pass the information, but I guess I’m a tad too green since I just got started, I figured I could get something working and some cleanup can be done later. So my cheese: windows.href.split("=")[1] I stole the code after the = sign just to use.

Next, I got to send a Post request to the server and my access_token . I created a getToken() Post request call within the api class and gave it a shot, but I kept getting errors. Gave it a try through PostMan and got my access token, but couldn’t figure out why it worked there and not in the app.

After some research, I found that this isn’t a new problem, a lot of people are having issues with this. For some reason, the cors and no-cors method for the POST request doesn’t work. At the bottom of that link though suggests a chrome extension, so I gave that a shot. Using a chrome exntesion for Allow-Control-Allow-Origin: '*' I managed to get a different error — 404 not found.

Not sure why this worked for others and not for me, but I believe the next step to make some progress is to host the application on a server and continue tests then. I posted my Pull request and now I’m waiting for more information/input!


Now back to the Pie Charts. I have a pie chart with hard coded data printing out — nice. The next step is to get actual data. I jumped into the LanguageList page which had the following:

Language List page

So that data I want already exists, I just need to pass it along. I had no idea how to do this at first, but it’s really easy, just needed to pass in the data in the element like you would for an attribute:
 <PieChart data={this.state.langs}/> But then I hit another hurdle. First off, I was just passing in an array of hard coded ints, that was my first issue. I changed the array of ints to an array of objects that have a name and count like this: hardCoded data [{'name':'', 'count':0},{'name':'', 'count':0}] .

Once I got that working, I tried again and my information wasn’t showing up. I set it up within the constructor, print out the props.. but nothing. Well not nothing, if I printed out console.log(this.props) I would see the data, but it would be empty. If I printed out console.log(this) it’s all there. Weird.. After some googling, I found out the state wasn’t set by the time I try to access the information so I needed to check if it existed before continuing.

if(pieData.length > 0) once this condition was met, I had the info I wanted printing! Now I need to get to the legend I forgot. Throw in a Legend element with the array of objects within the initial PieChart and create the class. Loop through the array in the Legend class and push into an array the elements with a tiny bit of css. It wasn’t stacking properly so I had to throw in some additional column css classes to get it to look right and here’s the final output:

Final PieChart

All done~ first time working with React, and it’s pretty interesting, but I still got a long way to go. Should probably get into best practices before I develop any habits if I continue using this, haha.