Check out a free preview of the full JavaScript for WordPress course:
The "Challenge 8: Solution" Lesson is part of the full, JavaScript for WordPress course featured in this preview video. Here's what you'd learn in this lesson:

Zac walkthroughs the solution to Challenge 8.

Get Unlimited Access Now

Transcript from the "Challenge 8: Solution" Lesson

[00:00:00]
>> Zac Gordon: Folks are still coding but I'm just gonna walk through this example so that we can get list posts working. So if I open up the read me here, we can see first, we're just gonna get familiar with the app. o I do encourage you to open all of these files and just check them out because If you had done that, then you know the configuration for my URL is here.

[00:00:21] I'm not using vagrant.local, that's weird, maybe I need to change that, figuring out what that is. So, just to walk you through again, config is just an object with properties that are either DOM elements or hardcoded URLs that we need. Helpers is going to grow as we build our app, and we've been using Helpers.

[00:00:37] These are just gonna be small things that help us with our app, clear the post for example. And notice that we have to import our config and then anytime were referring to stuff in the config, we gotta do config, whatever. Then index is the root of ours, index is only going to init and call posts, noticing that it's importing posts and then finally in our posts one is where we will make the actual http request.

[00:01:05] So, the first thing we need to do is import axios, otherwise, we won't be able to make that work. So I'll say import axios and then let's see export default. This is all good. The next thing we need to do is come down a little bit into where we actually make our axios.get call.

[00:01:25] Now this is a shorthand version for Axios. We've been doing the longhand version before. This gets us to the base of our URL, this gets us to our posts. So the downside to working with something like Access, is we're always going to be hard coding in this. And this is where the benefit of a client is really helpful cuz you just do .Posts and it knows.

[00:01:49] Then we're passing in params. I'm just gonna change this to three so we're only uploading three posts.
>> Zac Gordon: And then down here, where we say, for each post inside of POSTS, we can't actually do POSTS. We have to use response.data. So I'm going to copy that in.
>> Zac Gordon: And the reason we're copying this stuff here and then change the post to post itself because this is posts.

[00:02:22] We're renaming individual post to post. So when it comes to rendering an individual one, we could do it here and this is the kind of stuff that's gonna be consistent, site to site. So that's why we're going through the practice of copy and pasting, and doing all of that again.

[00:02:37] So when we actually render the post and build everything out, the reason we're changing this stuff. So post.slug title.rendered, I'm sorry, post.title.rendered
>> Zac Gordon: And then post.except.rendered. And then down here. We're gonna build this app a little bit differently. When you click on a list of posts and you load an individual post on the page, what we're gonna do is actually fire off a new request and get the full content for it and then load that page again.

[00:03:30] So, in order to make any requests to the API, the easiest way do that is by having the ID. So, this is a place if you've ever used html5 data attributes, where it's data dash ID. We're just sticking the ID in there. So we could say, post dot ID.

[00:03:45] Let's come back to the read me, check out where we are.
>> Zac Gordon: So we've got our loading posts. Step 2 is pretty much done. We've done all that. Step 3, we've run npm start. Although you'll also need to npm install. And then we open up our site and three posts should load on the page.

[00:04:07] So let's go to local host. I'm sorry. Let me come in and I have to run npm install and start.
>> Zac Gordon: Let's go back.
>> Zac Gordon: Computer's been super slow. Looks like Webpack is testing the limits of what MacBook can do? Okay, so now I can cd into my 6.1

[00:04:52]
>> Zac Gordon: And I'll tab to complete.
>> Zac Gordon: And now I'm just gonna run npm install and npm start. Give it a minute to run all of that and then once that's done we could load up our page and everything should be working. So we'll just take a moment to do that.

[00:05:15]
>> Zac Gordon: Okay, so that's finally done, now I could run npm start.
>> Zac Gordon: And that should boost everything up at https.
>> Zac Gordon: Okay and something is obviously not right here. Okay, looks like I have an error, I have a period after my rendered Let's fix that real quick.
>> Zac Gordon: Right there, okay.

[00:06:10] Save it and it should automatically refresh.
>> Zac Gordon: Okay, so now we've got it working. Although these are not going to load the post, so that is the next step. And let's just go to that one real quick. And then I'll keep on going into authentication directly from there.

[00:06:35] So let's just look at the steps.
>> Zac Gordon: Single posts.
>> Zac Gordon: So you know what, it does not have any other dependencies. From the original one, so actually it's gonna be a little bit faster I think if I just go into my 6.1 and copy my node modules over to my 6.2.

[00:06:59] So I'm gonna do it that way, may still take a moment.
>> Zac Gordon: Let's move forward with this one, let's come into check me out the read me first.
>> Zac Gordon: Okay so we want to open our posts. No, I can't use mouse pase. Going to open our posts, find the single post.

[00:07:24] I need to change ID to getting the ID which I'll talk about. Find the axial stuff, append the ID, we have some singular slash, if it's singular page or not stuff to work on and then we have to load all the posts properly. So let's come into our source posts.

[00:07:57]
>> Zac Gordon: So this is our previous function that should be all, man I can't use my, okay. So here is the first one that we have and if we ever played around but straight DOM/ g manipulation had a high level this should make sense basically were getting an event,

[00:08:21]
>> Zac Gordon: When we load single post and we want to get the ID and remember how we restoring the ID up in the article itself. So, what I'm doing is, I'm saying go ahead from the link that I just clicked over from the link I clicked on in the post.

[00:08:37] So, starting the post that I click on and then go up from there once, to the H element, the H2 element and then go up to the article element itself and then get me the ID off that article element. So again it's saying start at, this is all the link that we clicked on the title of the post.

[00:08:58] This is gonna be the h2, this is gonna be the article, and then this is the ID. So we grab that and then once we have this ID, we can't just do a get request for a single post here because this is gonna get us all of the posts.

[00:09:14] So we will append this like this, and we'll say get me this specific post that I had saved on the page that I'm working with, and then change post to response data
>> Zac Gordon: And now before render post only took one argument but we've customized it now so that we can have the same function work whether we're displaying a post in a list format or in a single format.

[00:09:41] And we'll see the differences there in a second. So IS_SINGLE in this case is gonna be set to true, because this is the handler, handling, loading a single post. So if we look at renderPost now,
>> Zac Gordon: Notice that by default It is setting single to false. So if we just call render post in a single post, it's gonna assume that we're in a post listing and it'll do certain things a certain way.

[00:10:10] So, is single, we're gonna change to true equal to single. So if it's a single page we have to display this link to go back to all the other posts. We have to display stuff in an h1, because we don't want an h2 if we're on a single post, cuz we want it to be the main header for the page.

[00:10:30] And then, content here, well, that's a markup, that's gonna render the content. So if we're on a listing page, which means that we want a bunch of posts listed with excerpt and a link to get more. Then we're going to do an h2 and put in an anchor tag with the post.slug in it.

[00:10:51] And then we'll pull in our excerpt. So notice that if it's a single page we're pulling it in h1 in the content. And if it's not a single page then we're creating an h2 with a link and then pulling in the excerpt. So this is more JavaScript, this isn't necessarily WordPress specific, so we'll keep going.

[00:11:11]
>> Zac Gordon: We make sure that we take that post id and we throw it up into the article so that if we need it later. It's saved to the page and then we'll save this again. And the reason we need to do this twice is because up here, we can't attach an event listener to this link because at this point this is technically, only a string.

[00:11:34] It isn't until this line right here, where we take our markup and we assign it as n or html, and then it becomes valid dom nodes. So at that point, then we could attach event listeners down below, which is what we're going to do. So load posts is going to call load.posts.

[00:11:57] So this is, if it's a single one, it's just going to attach to that back to posts link. And then if it's not a single one, meaning that if we're in a list of posts mode, then we're going to the header of that tag. Go ahead and say, load the single post.

[00:12:15] And that will tie it all together. So let's go ahead and save that.
>> Zac Gordon: And now when we click on the post we should see it display there And all right, we are working. And notice that the front page is just the excerpts and this is the actual content.

[00:12:37] And what we've done behind the scenes is, originally we get all the posts but when someone clicks on a link we're grabbing the ID for that which is again, saved in the article.
>> Zac Gordon: So see right here, data equal to 134? So when we click on this link, we're gonna say grab 134.

[00:13:05] And in the back end come down to our load single post. And that id that we get right here. So all this crazy code is going from the link, getting the id and then we get a single code. You could potentially do this slightly differently but I just wanted to show you what happens when you wanna do another call once you click on a link.

[00:13:27] Which is a pretty common scenario.