7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.3 Adding Feeds

Now that we can fetch our feeds, we need to be able to add to those feeds so that we can actually see that everything is kind of working. So this is going to be relatively simple on the server side just like in the previous lesson, because saving information is going to be very simple for us. Most of the work is going to be done wiring up everything on the client and making it work there. So we are going to take the get route for Feeds. Lets take that, lets copy and paste and lets change the method name to post, because this is going to be a post request. Now we do want to make sure that we have the data that we need. So I'm going to copy some of the code from a one of the routes in our auth file. Because we want to make sure that we have a name and that we have a URL. So we just need to make the necessary changes here. So, we will have a name which we will get from the body, we also need to check that we have a name. The same thing for the URL, so we will make those changes. And if we don't have either one of those then we will still return a 422 and we will say Please supply a name and URL. So that's going to be fine there. And if we have that information then this is very simple. Let's first of all go ahead and retrieve our user because this is going to make it a little bit easier. Even though that we have easy access to it, we're going to use it a couple of times here. So after we check if we have the name and URL, we are going to use our user object, we're going to access the feeds. And then we are going to push our data into that so that we will have the name and the URL. Then all we have to do then is save it. So we will call user save. There we go. It is that simple. And I guess it would be a good idea to after we save that information that we just go ahead and return with our feeds, so that we can just completely reload our feed list. I like that idea. So with that done, I mean, that's the easy part. Now we just need to make all of that work inside of the client. So we are going to primarily be working with the settings as well as our data store, because everything else should be fine. And let's start with our settings view. Now one thing we didn't do is add a required attribute to our form fields. So I'm gonna go ahead and do that just so that we cover all the bases there. Now, we just need to do something with this ad feed. We are dispatching the ad feed and let's do this. Let's just go ahead and change this so that we are going to pass in an object. And we will have the name and the URL. So the name will of course be the feedName, the URL will be the feedUrl. And then we want to check to see if we have an error, because if we do, then we don't want to really do anything, then do we. So we will simply check if we have an error and if so we will alert that error. And then we will just stop processing otherwise, then we will set the feedName and feedUrl to an empty string so that we can just add another feed if we wanted to do that. And so that should work there. Let's go to our Vue x store. And we want to change this because we did change how we are calling this. So we're just gonna call that data and we of course want to Return, then we want to call our postJson function. Our URL is going to be /feeds. And then the data is going to be our data object that we have. So that's gonna make that very easy. And then we want to work with this data. Because if we do have data then we want to go ahead and update our Vuex store we want to change the state. So we're going to check to see if we have our feeds. And if so, then we are going to commit the zdd feed. Although in this particular case, I don't think we need to add feed anymore. I think we want to use our set feeds and then we will simply pass in our feeds, because now we are just getting all of our feeds as a response. And that should be fine. So that should simplify this a little bit because we no longer need add feeds, so we can get rid of that. And everything else should be okay, I think. Let's go and get rid of these hard coded feeds, because we don't need those anymore. And let's see if this is going to work. So let's do a hard refresh. Let's go to our Settings view. And we want to add a feed, this is gonna be the Tuts+ Code feed. And I'm going to grab that URL, which is this right here. We will add feed. And well we got the URL, we didn't get the name. So that's kind of interesting. But let's go and look at the database. Let's do a refresh here, and let's see what was actually stored here. And hopefully, everything is going to be there. And it's just an issue that we have with the UI for not properly loading something. So we have our feeds and we now have an object in there. We have the URL, yeah, we didn't add the name, did we? No, we did not. We need to go back to our model. And we need to modify our user model so that we have the name there as well. All we have to do is just add that property, say what type of value that property is. And now this should work. Let's go back. Let's say that this is going to be Tuts + Code 2, and we will add the feed. And there we go. Now we can see that we have the name and thee URL but I did notice that we are not resetting the values of our fields. So I've missed something somewhere. Let's go back to our settings. Actually, I think this is probably going to be inside of our action. Because all I'm doing is checking to see if we have feeds, we're not doing anything after that. So we want to return our data there and that will reset the fields because then the callback will work inside of our vue. So there we go, we now have the ability to not only display our feeds which will just delete that when we have the functionality to do that, which we will implement in the next lesson, but we also have our other feed as well. So in the next lesson, we need to add the functionality to delete a feed

Back to the top