No Refresh User Favorites & A Favorites Feed | Ruby On Rails

hello the Internet my name is Dina welcome back to another Ruby on Rails tutorial today we're gonna cover setting up favorites this little user's favorite and unfavored a post as well as let us show users a list of past posts that they favorited and the times that those posts were favorited at by those users that was a mouthful let's go ahead and get started we're gonna add two gems in here we're adding the first one because we need to use the divides user account so that we can actually you know have users and the second one we're gonna use is the jQuery - rails because later we're gonna do some stuff to make sure that we don't have to refresh the page whenever we favor the post so we'll come back in to our terminal run a bundle install command once that's done we can run the rails G device : install command and I might need to edit this one out because this command has been giving me a headache all day long wow that was slow ok now we can run the rails G device user command to generate our user month now I'll do rails G scaffold post and we'll give each post a title of type string by default in the body of type text once that's done we can come over to app assets stylesheets and delete the scaffold start a CSS file now we can come into config and our route started our V file and say root 2 and posts index once all of that Sun will do a rails DB colon migrate to migrate the database and then we can do a rails s command to start the server now that we've started the server we can come in and create a new post we'll just call this first one HelloWorld and then we'll grab some hips um so that we can you know spice things up a bit and we'll highlight from the bottom because this website is all wonky lately and we'll create the post now we'll add in the favorite link below the title but above the body so we'll come into views posts and the show page and we'll just add in super be code that says link to favorite and we'll just stub this out for now because we don't actually have a path for this now that that's done we can refresh the page and we should see the favorite link and that's not really going anywhere so let's go ahead and fix that well kill the server and now we're on a rails G model command to generate a favorite model will give the favorite model a reference to the post by saying post : references and their reference to the user by saying user : references assuming I remember how to use my fingers once that's done we can do a rails DB : migrate command to migrate to database again and once that's done we can do a rails G controller favorites and just give it an update action just as a bit of a note whenever you do some sort of like join table or I'm gonna need too many Association like this you generally don't want to just name things like favorites you probably want to name it like favorite posts or user favorites or user posts or post users it's entirely up to you generally you do it in like lexicographical order but for this we're just gonna call it favorites and try and keep things simple that way those that aren't totally familiar with things they can you know kind of intuitively work out what we're actually doing so now we have the controller set up and we have the model set up we've migrated the database so hopefully if I type rails s everything will work and we're good to go so now what we need to do is come into our controller and our favorites controller and inside of the update action we need to do a couple things the first is we need to grab a reference to the favorite and we need to check if the favorite exists so going to do this is by saying favorite dot where Post is equal to the post dot find of the params and the colon post so here we're grabbing the post params which we're gonna pass in and we're calling post dot fine to find the ID that's passed in by this post params so basically for this first one because it's just an ID of one all all we're really doing is this variable will resolve to a one we're grabbing the first post which is basically the first the same thing as saying post up first and then we're just assigning that to be our first post so once we have that we then need a reference to the user which for this we can just say user : current underscore user and now that we have the current user in here we do need to actually make sure that the user is signed in whenever we do this we're going to skip that for now though and we're just going to check if this is equal to an empty array the reason for this is quite simple whenever you do a dot wear query you're going to either get back in array of the records that you were searching for or you're just going to get an empty array which looks like this so the way to check if the favorite exists is well first with an if statement and then inside of here we're going to grab our favorite variable and then we're going to say does this favorite variable equal the empty array if it doesn't we'll do this other block of code but for now we'll just say if this equals the empty array then the favorite does not exist so for this we need to say create the favorite come down to the else statement and for this one we need to delete the favorite and if for some reason this favorite has more than one we'll just want to destroy all of them so we'll just do this I don't really see that happening but you never know so let's start by creating the favorite we'll say favorite dot create we'll say post is equal to the post dot find with the params of the post and the user is the current user once that's done we can come into the else statement and say favorite well I guess favorite lowercase F dot destroy all now we can do a respond to do format and and we'll say a format dot HTML and we'll just pass in some empty stuff and then we'll say format J s and we'll pass in some more empty stuff now ideally we would like to be able to check if the favorite exists from other areas so in order to accomplish this we'll just do a quick variable assignment inside of the if statement so we'll say if the favorite doesn't exist will create the favorite and then the favorite will exist so we'll say at favorite underscore exists equals true so the favorite has been created so this variable that we're creating right here is now assigned to true and inside of the else statement we'll say at favorite underscore exists is equal to false because we just destroyed it and because one of these two will always run will always have this variable assigned to either true or false once that's done we can come into the show page and for our link here we can change the to be the favorites underscore update underscore path we can now come back to our post and refresh and see what it's giving us so for this it's telling us localhost colon 3000 slash favorites slash update if we click that it tells us couldn't find post without an ID the reason for this is if we type in params into the console we don't actually have a post params how do we do that well quick solution for that is to just say post is equal to add post well refresh and we'll see what this is what the URL is now so now it's saying slash favorites / update question mark post equals 1 which is giving us our actual post now we don't want to redirect to that page so we want to come to our favorites folder and instead of having this be in update dot HTML dot RB we're going to rename this to be update jst RB we'll get rid of this HTML here and we need to come back into our show page real quick and give this link an ID so for this we'll say I D : favorites underscore link we'll copy that and then we'll come into the update jst RB and we'll grab that by the ID which is why we have the hash inside the quotes and then we'll say dot txt and at this point I'm going to change this to be the JavaScript syntax highlighting so now inside of this we would like to be able to figure out if the favorite exists so we're going to come into our application controller and we're gonna create a helper method so we'll call this favorite underscore text and end and then inside of the favorite text we want to say if the at favorite underscore exists is equal to true so if the favorite currently exists then we want this link to say unfavorite because we want to remove the favor if it exists now what we could do is write the if statement right now less than right and but you can also do this with a ternary operator and that's how we're going to do it so we're going to say return at favorite exists so remember this is a boolean so if the favorite exists this condition right here will be true if it doesn't exist then this condition will be false so then we do the question mark after the question mark this is the case where it's true so if the favorite exists then we want to return unfavorite else the favorite does not exist and then the text that it returns should be favorite so now we can come into the update a STR B and inside of the string we can just throw in a little bit of Ruby code and we can call a favorite text but this won't work because we haven't actually defined this as a helper method yet so the way to do that is just say helper underscore method and then call in favorite text once that's done we can call the favorite text from inside that the update jst or B file but we also need to come into our shell page and instead of just leaving this as linked to favorite because that's just going to statically force this to always say favorite we need to also call the favorite text method from in here once we've called the favorite text method from in here we need to then come into our post controller and our show page and say any time that we go to the show page we need to say at favorite underscore exists and we need to check if the favorite exists so at favorite underscore exists is equal to favorite dot where and don't forget because we're inside of this show page we do have access to the @ post variable and then we'll say user is equal to current underscore user so if this exists and it's equal to the empty then we know that the favorite does not exist so if the favorite does not exist then this favorite exists should be false right else this should be true if the favorite does not exist and then the favorite does not exist else it does exist sorry it's been a long day so now let's come over to this page and refresh and see how things are looking so we have the favorite link with a post parameter being passed to it we're not currently signed in so let's make sure that we have a before underscore action that says authenticate underscore user accept and we'll just exclude the index page for now so this is a bit of a lazy way to do it ideally you would have a check inside of your show page to see if the current user exists otherwise do this but this will force us to have to sign in which saves me from having a type 1 link type password and we're good to go so now I'll click this favorite link and see what happens so we have a favorite being created here and then the favorites controller update action is missing a template for this request format in variant it's attempting to access a text slash HTML file but all we have if you'll remember is this update that jsd RB so the way to fix this is to come into this link all the way at the end we'll add something else and we'll say method is art not method remote colon is true will refresh the page and we'll come to the root page will show this one and we'll hit favorite and we'll see what happens so the favorite ran it created the favorite it's deleting the favorite but this text isn't updating and if we come into our council maybe we can see that the question ok so we didn't add the jQuery to the application that Jas that's an easy enough fix so we'll come in here we'll say require jQuery underscore UJS and we'll save that well refresh and our unfavorite text is now displaying because the last action we did was we created a favorite so hit unfavorite it deletes the favorite the favorite link has changed again and we can do this all day long and every time this will properly be changed without LePage having to reload so the last thing that we can do here is we can close some of these windows and we can come into our posts index page and I guess we could probably just do this above the actual posts so above this entire thing will do a h1 tag oops h1 h1 will save users or your favorite posts maybe your favorite posts and we'll just throw them in here so for this all we have to do is grab the current user current underscore user dot favorites dot each do favorite and then we can close this at the end of it and then for each of these all we'll do is we'll just say because we can do the you favorited this post and then we'll just add on the link right here and let's say link to favorite dot post title and favorite dot post and we'll save that undefined method so current underscore user dot favorites doesn't have a reference to the favorites so we need to come into our user dot RB and we need to say that the user has many favorites and we need to refresh this page so now we can see that we have favorited this post hello world if we click on that we go to the full world page we can go back let's create a second post second post more words here you can favorite this one and go back to the all post page and let's actually throw in a break statement right here so that every time this runs we'll do a br and there you go so now we can also do something like this so we have the favorite post title text and instead of just saying you favorited this post we can add in some brackets right here and inside of that we'll say favorite dot created at strf time and it will search for strf time net and we'll grab the 12 hours we'll say 12 hours : minutes and we'll grab a MPM like that let's maybe put a space in here so we'll grab this and we'll paste it inside of this strf and we'll come back to our page and refresh so now we're saying at 5:30 a.m. of course you need to change the time zone if you're doing this to whatever you're using but at at this time you favored at this post and that just about does it for this video it was a bit of a impromptu video that I just decided to record so that's why some of the things kind of went out of order but I hope this helps someone you know if it did remember to like this video if it didn't remember to dislike it so other people know not to watch it but thank you for watching and I'll see you in the next video [Music]

Channel: Deanin

Views: 3,446

Keywords: deanin, Rails Favorites, Rails Favorites Feed, Favorites Feed, Rails Create Favorites, Rails Many To Many, Devise Favorites, Favorites Rails, Rails favorites list, Rails Ajax Favorite, Rails No Refresh, Rails No Refresh Favorite, No Refresh Favorite, Rails Many To Many Relationship, rails many to many association, Many To Many Relationship Rails, Many To Many Association Rails, Rails favorite button, Ruby, Rails, Rails 5.2, Rails 5.2 Tutorial, Rails 5, Ruby on Rails 5, Ruby 5

Id: QtjMrnQBKXw

Length: 16min 49sec (1009 seconds)

Published: Sat Jun 09 2018