Send, capture, and process the most recent tasks using the REST API.
- [Instructor] Let's begin with the primary view an authenticated user sees when they are logged in, the task list. This is a literal list of the most recent tasks, and if they click on one of the tasks, they are taken either to update the task or to view the task. Getting this list of tasks from the REST API is pretty straightforward. Now that we've set up the plugin on the backend of WordPress, all we have to do is send an authenticated request to the tasks route, and this returns a list of the available tasks for this user.
The very first thing I want to do is make sure the user who is accessing this file is, in fact, logged in. So, just like I did in oauth.js, I'll set up an if statement to test token which we've inherited from oauth.js and should already be populated. If token is not equals null, meaning we actually have a token, then we'll run a new function called getTaskList. Else, we'll redirect the user back to the home page, which is the login form.
Now, technically, this last component here should be redundant, because OAuth.js should redirect the user back to the login page, but in some cases, I have noticed that doesn't work, so I'm just adding extra redundancy here to make sure everything work properly. Now we can set up the getTaskList function, which will send an ajax request to the WordPress REST API and then capture the response. Before I send the ajax request, I want to add a spinner to the page to show the user that something is happening as they wait.
And we already have the spinner graphic sitting here in the JS folder. So it's called spinner.svg, and in style-main, you'll find the CSS to go along with it that makes the graphic actually spin. So all we have to do is use jQuery to add the spinner graphic in when we are waiting and then remove it when we are done. The spinner will be displayed inside the container for the task list. So you'll remember, here we have the nav with the class task list, so I'll target that nav now, and append a new div with the class loader that contains an image and point that image to JS/spinner.svg and give that image a class of ajax loader, and then close the div.
If I save this now and go back to the browser, you'll see here we have the spinner. It's just spinning and spinning and spinning because nothing is happening and we haven't told it to go away yet, but at least it's working properly. And here's the thing. Because we set up this jQuery wrapper for JSO in oauth.js, we can now drastically simplify our ajax request. All we have to do is say jso.ajax, then say dataType json, 'cause that's what we want in return, and then URL, and here we want the RESTROUTE, which you'll remember from oauth.js is the ROOTURL plus webpage-json, plus wp/v2/tasks, which is the full task list.
Then we'll capture the done event and the object inside, and once we have that object, we'll pass the object onto another function called createTaskList. So this is the actual response from the REST API. Then if something goes wrong, so fail, we'll console.error("REST error.
Nothing returned for AJAX.") And finally, I'll set up an always condition, and here, all I want to do is remove the loader so it stops spinning once the request is completed. So I'll grab loader, which we just created up here, and just say remove.
Now that I've created a function to createTaskList, I also have to create that function, and for now, all I'm going to do in createTaskList is console.info out the objects so we can see that we actually got the information we're looking for. Save loadlist.ajax.js, go back in the browser, and here, you'll notice the spinner is gone. So I'm just going to reload this page for a second.
Spinner appears for a second and then it disappears, and if we now go to inspect and go into the console, there should be an array here with four objects, in my case. First object is the first post. Here's another task. The second object is the second post, which is this check to make sure everything works in the REST API post that we created before, and so on and so on. You can also open an incognito window and log in as a different user and see what happens here.
So again, I'll reload, make sure the spinner appears and then disappears, go to inspect, go to the console, and here, you'll see I have one object. That's because this user only has one post registered. That means we have successfully sent an authenticated request to the REST API and got the data we want. The next step is to make the data actually display in the browser instead of just in the console and make it look the way it's supposed to.
- Planning the application
- Extending WordPress with a plugin
- Setting up the standalone application
- Configuring OAuth 2 in WordPress
- Building the task list view
- Building the new task view
- Creating a new task via the REST API
- Displaying conditional content
- Visualizing data using Graph.js