Ember 2.x Exercise 4 Solution, Part 1

Transcript from the "Exercise 4 Solution, Part 1" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Michael: We're gonna go through my solution to this challenge, at a high level what we're trying to do is get away from hard coded data. Let's do some real stuff. And I'm actually gonna go to my slide deck. And you can do this if you're doing it at home as well.

[00:00:21] And I'm just gonna copy some useful end points here just so I have them available to me as I'm building this app. So this top one is how to get an organization, the list of repos, get information about a repo, get issues on a repo and get the list of contributors on a repo.

[00:00:41] So this is the form of what I want to ask GitHub for and it all starts with api.github.com. All right, so let's jump in. The first thing I want to do is get into the, I want to start with the org actually. So I'm going to go to the org route, org.js.

[00:01:08] And here I am going to, in the model hook, I am going to put a debugger in here just so we can see what params look like and the reason it didn't stop is cuz I am not in this route yet, but I am gonna drill in and it will freeze.

[00:01:26] And what I'm aiming to see here is that I've got this ID ember.js in here. And what I want to do is ask GitHub for that.
>> Michael: And I'm actually gonna use a ES6 string here and params.id. Fantastic.
>> Michael: So the whole class is trying to do that so we got, are greatly limited on our ip.

[00:02:13] I'm just going to add this private access token which is a way to authenticate me to GitHub. And you can make one of these on your own in your settings if you wanted to. But the idea here is I can make an authenticated request and we can see we got a content security policy error here.

[00:02:33] But if we look at the network tab, come on.
>> Michael: If we look at network and XHR, and give ourselves a little more room here.
>> Michael: Come on. An API request was sent out to get information about the ember-cli org. And here is all of this information. Now I mentioned that we wanna kind of be consistent even, we're using an opinionated framework with conventions, we want to have sort of conventions of our own and keep things in alignment.

[00:03:11] And in this case, I wanna treat this as the ID of this repo and not use this numeric id. And the reason is, I want my URLs to look nice and I wanna just be able to pass this object directly into the link to helper and have it extract out what I'm looking to extract.

[00:03:29] So, I'm going to use the nice chaining aspect of promises and to the end of my get method, I'm gonna add a then callback. And I'm gonna just call this rawRepo, no sorry, rawOrg. An arrow function. And I'm going to alter this object.
>> Michael: So I'm backing up the id in case I need it later.

[00:04:09]
>> Michael: And I just need to return rawOrg. And, effectively, I've made the API request and then before the model hook is done, I massage it. I make this change and then, ultimately, return that. And so this modified object is what we're gonna end up with in the org template, and we can start to put it to use.

[00:04:32] So instead of Facebook here, I'm gonna use that log helper and handle bars.
>> Michael: And we'll look at our console.
>> Michael: All right, we're logging null here. We look at why? [CROSSTALK] Good catch! I have to return, return the promise itself.
>> Speaker 2: Should that [CROSSTALK] Should that be a .name instead of .login?

[00:05:16]
>> Michael: I'm using this login here. I wonder if it has a name. Let's see.
>> Speaker 2: I thought.
>> Michael: Events, Members, Name. Let's use name. There it is, it looks like it's identical in this case. Fine with me. And then in our template we can do.
>> Michael: And voila, we don't have a hard coded Org name anymore.

[00:05:43] And we could even do something like this.
>> Michael: That's an interesting URL.
>> Michael: So created a link GitHub that's also, I guess that's taking me to the API here. There must be a more interesting URL.
>> Michael: That might also be an API end point. Well the point here is that we can start to consume more on this object than we initially set out to look at.

[00:06:43] Avatar, that's more interesting here, sweet. This'll be fun.
>> Michael: So, image, source is,
>> Michael: And.
>> Michael: There we go, we've got.
>> Michael: We've got little icons and we go back we can look at Microsoft, we can go back, this is starting to look interesting. So we've just bound some data that came back in our model to this attribute of source.

[00:07:25] And everything kinda works nicely, all right.
>> Speaker 2: Can you go back to the org.js file, just for?
>> Michael: Sure, so, here I'm.
>> Michael: Numeric ID and.
>> Michael: Make sense?
>> Speaker 2: I need some more on that perspective. Just API slab dot com slash orgs, and then params, okay I missed that part.

[00:08:08]
>> Michael: And I'm able to use this in here because this is the new ES6 string language feature that we can use. All right, so, I'm gonna keep moving here. Now, we're gonna move to the list of repos within the org. And that is here. So we're in this repos.js file in routes/org.

[00:08:37]
>> Michael: Same thing.
>> Michael: Drill in, and let's look at what prams are. Nothing, and the reason is that this particular route does not have a dynamic segment in its path. Additionally, we have to go and get, we need this in order to build the correct url. Right, we need the org id.

[00:09:03] And I'm just gonna copy this cuz it will be similar.
>> Michael: So org ID which I'll fill in later and close the arrow function.
>> Michael: I'm going to put a debugger inside of the dot then callback and then we need an org id, so.
>> Michael: We are going to use model four org.

[00:09:40] And then I'm gonna actually use ember get. It is similar to this .get which you can use on an Ember object except this will also do what you expect on a plain JavaScript object. So what we have now, it doesn't matter if we have, this will handle both dot id or dot get id.

[00:10:07] It insulates us from which flavor of object this could be. So, now if we look at raw.
>> Michael: I don't know what the name of this function is with the property. Params, I think we're still stuck.
>> Michael: Okay we got not found and I probably have the wrong form of URL.

[00:10:36] Okay so here's where we're running into a little trouble. You can see that in the URL here I'm using the human-readable name, right? I don't want capital Ember.js, I want to use,
>> Michael: login.
>> Michael: And now we're at our little break point. Let me try to stretch this out.

[00:11:08]
>> Michael: Come on. And so we've got raw org, this is really not raw org anymore, it's the list of repos, but you can see we've got the ember resolver so we're in the ember CLI org here. So I wanna change this to raw repos and then we're gonna have to transform this array cuz each item in it.

[00:11:43]
>> Michael: So this is the first one here, you see we've got the numeric ID again and we're gonna basically have to do the same transformation. So I'm gonna just return the array,
>> Michael: Map.
>> Michael: Sorry, name should work in this case.
>> Michael: Make doubly sure.
>> Michael: Yep that should be fine, and then return raw repo.

[00:12:23] So this is very similar to what we had before except in this case we're mapping over the array to transform each item instead of just transforming the one. All right, so now I just have to actually iterate over it.
>> Michael: Because we're still hard coded here.
>> Michael: Close the each.

[00:13:00]
>> Michael: And we'll do repo name.
>> Michael: Repo name.
>> Michael: And these are all of the repositories in the Ember CLI GitHub org.