Up And Running with Pest
Playing
35. The feed

Episodes

0%
Your progress
  • Total: 4h 19m
  • Played: 0m
  • Remaining: 4h 19m
Join or sign in to track your progress

Transcript

00:00
Okay so let's go ahead and work on the actual feed now that we know we can get books from our friends. So the first thing I'm going to do is just head over to our base template and update
00:09
the link here so we can click through to our feed, of course at the moment this doesn't exist, and we'll just go ahead and create the controller out and all that kind of stuff now and then we'll just write some tests to verify that we can see everything on the page. So let's go ahead and make a controller in here and of course just call this
00:26
feed controller or more appropriately feed index controller and let's go over to our web routes and hook this up. So we want a get route in here over to slash feed and that's going to be the feed index controller and we're done. So let's go over to our feed index controller first of all add in our invoke magic method and just do nothing in here. We're going to start
00:52
to write a test out for this now so let's go and make a test let's of course call this feed index test or just feed test and let's pass our pest flag in. So under feed index test what do we want to do? Well pretty much want to make sure that we are authenticated before we access this so we can grab any of our other tests like bookstore test and just go ahead and grab
01:20
what we have here and let's just copy all of this so we get our refresh database stuff in here as well and we can just get rid of this before each hook. Okay so only allows authenticated users let's leave it at that and let's go over to feed and we can get rid of this because by default remember that is get. Okay let's go ahead and just run this and we want to expect to be redirected
01:43
for not oh yeah we do want expect guests to be redirected for so let's go ahead and run pest in here tests and feature and feed index test and of course at the moment it fails because we get 200 here because we don't have our middleware in here. Let's add our middleware in so this middleware and of course we need the user to be authenticated. Let's run our test and we get green. Okay so the
02:11
next thing is just making sure that we see on this page a list of books from our friends so it shows books of friends. We already know that the relationship works nicely so we can pretty much follow what we did in our kind of unit test earlier but we'll just make this a little bit more simple. So let's go ahead and say user factory create and we'll create a couple of friends in
02:36
here so let's create friend one and friend two. Let's make sure we pull that user model in and then down here we want to attach a book for friend one so again friend one books attach and we'll call this book one because we want to make sure we can actually see this in the list so let's assign this at the same time as creating it and this is where our statuses actually now do
03:04
make sense in our unit test it didn't but we're going to say reading here and for our friend two let's create book two and let's say wants to read now one of these we want to be at the top so for book one let's put this at the bottom by adding in the updated at status to sub day like we did before and then we can pretty much just add these
03:34
friends and start to hit this end point now for this we could go ahead and say add friend and accept friend or we could go ahead and just say friends of mine and attach let's do it the way that we've set this up so let's say add friend friend one and friend one is going to accept that user and then let's do this in the reverse again so we have a two-way so friend two adds the
04:02
user and the user accepts friend two you know should be just about enough for now okay so now of course acting as that user that base user we want to go ahead and get that feed page and what do we want to see well we want to see these in order remember because we have ordered these within our relationship although we already
04:27
know that works in our relationship we want to make sure that these are being output in order as well so assert see in order and then we can just create an array out here and pretty much now just make up what we want to see on the page so what we want to see is slightly different to what we've already got when we have our books here with these we've got reading read
04:49
and want to read but this is going to be slightly different for when we look at our feed because it's going to be in the context of a user so what we want to see is friend one name wants to read so it's going to be slightly different it's not going to be want to read so we can't really transform that in the way that we've already seen and book one title so
05:11
that should be at the top because book one uh oh no it should be book two first of all so let's change this to friend two and just make sure we've got the right one yeah friend two wants to read book two title and then after that we should see friend one and let's just check what status reading so this is now going to be something like is reading so we're going to need to take this
05:36
into account in our template book one title okay so i think that's pretty much it for now let's go ahead and just run this test just to make sure so let's rerun that and of course we don't see anything because we have nothing on the page so let's go over to our views let's close this off and let's create out a view for this so under views let's just pop this in a folder called
06:00
feed and let's create index.blade.php and let's just say feed in here for now okay back over to our feed index controller let's go ahead and return a view in here feed.index and we may as well just start to pass this data down while we're here so from the user we'll just call this book so you call it books of friends but from that user we want to get books of friends so that's the
06:30
relationship that we're passing down so let's go and just run our test again really quickly and of course we see feed contains because we've just put feed on the page okay so over to our index page let's just map this out now to get it working how we want to see it so let's go over to maybe the home template and just grab this in fact we could just grab we'll grab it all and tidy it
06:59
up so let's put it all in here we don't need any of this auth stuff here we don't need this guest directive we do want our header which we're just going to call feed and this is where we're going to iterate through so let's just start to iterate through this so books as book and then we'll end the for each there and then let's just put a div in here for now we are going to show the book in
07:22
here in a minute but let's output the friend name first of all so why don't we just dump out the book first of all come over to our feed and have a look now i don't think we have any friends at the moment so let's go ahead and add mabel in here now i don't have mabel open in another window so i'm going to go ahead and manually set this to true there we go now if we come over to our feed
07:52
there we go so these are the books that belong to mabel and we can go ahead and extract the user from this i don't think we actually added in the relationship here no we didn't so let's go ahead and create out a user relationship for these books and this is just going to be this belongs to many and user class and of course we want to go ahead and say with status or with pivot sorry
08:17
and status like so okay great now the way that we've set this up at the moment is that we have this book user in here which means technically any of these books could be owned by other users as well we're not doing that necessarily within the application so what we're going to have to do with this relationship is just grab out the book user if we just dump this on the page you can see
08:41
we get an array here for each of these because of course this book could be owned by lots of different users so what we're going to do is we're just going to say book user and first and that's going to return us the first user because in our case we're not allowing other people to reuse books but if we did we would have to change this up because otherwise this would return a user of
09:04
course who you may not be friends with so we're going to say name and now in here we want to say is reading wants to read something like that now we don't have that if we just head over to our book user pivot we've got want to read reading and read but we don't have wants to read is reading or any of that stuff in here so what we could do is just create a really simple action attribute that the
09:27
thing that they're currently doing so we can do that within a pivot as well so let's say get action attribute and that's going to allow us to access this like action so it's a little bit more convenient and let's go ahead and use maybe a match in here within php grab the status from that pivot column and what we can do is say if it's want to read the action is going to be
09:53
want to read and we can just do the same thing for each of these so let's say reading and we can make this however we want so is reading and then read we could say something like has finished reading or has read it's really up to you what you want to do okay so now that we've got this in here we can go ahead and output the action so we can say book pivot and action
10:20
let's go over and yeah sorry not the pivot we need to specifically say book user which gets returned that relationship and there we go mabel has read is reading or whatever now in our case that's two of the same so if we come over to our book user table let's find mabel user and let's say wants to read and we should see that updated we could create a separate test for this getter
10:48
as well actually and want yeah okay so wants to read is that what we called it maybe we call it want to read yeah there we go wants to read let's just verify that really quickly because we need to make sure it's the same yeah want to read okay so that's fine okay so we know that this is outputting properly now now we just want to output the book title which is pretty
11:13
straightforward so let's go and output the book title and we should now see that so our test should now pass because we've pretty much satisfied what we want to see in the correct order so let's run our test and yeah it doesn't quite work so let's see what's happening here it's probably because we've in our test if we just come over to our feed index test
11:40
said wants to read and it should be want to read okay let's try this again and there we go great so we know that we can see a list of the users and we could expand on this test make it a little bit more uh thorough in terms of what we're outputting if we wanted to but let's just finish up by styling out the ui and we can always add to it a little bit later okay so in here we're going to have a
12:03
margin top of eight and we're going to have a space y of six to separate out each of these two things just to give it a little bit of breathing space and then within here we're going to add the book in so let's add a space y of two and then let's use our book component that we created earlier and we'll pass down the book just into here let's go over give this a refresh and there we go
12:23
now that space isn't working at the moment so let's wrap this in a div we should have a little bit of extra breathing room great so there we go mabel has read book four mabel wants to read another book now if we just head over i've just logged in as mabel here uh let's just verify this and mabel has read book four mabel wants to read another book so let's change this wants to read
12:44
over to reading and edit that and if we come over now that should bump to the top change to is reading and of course it shows us the book information as well just for the sake of clarity we have written tests for this but i'm going to go ahead and create another user in the database that we can use for this so let's create tabby out in here and create another email
13:04
address spelling that properly and let's go ahead and log in as tabby and add some friends and see what we get in here so let's register sorry oh no we've already registered so let's say tabby at codecourse.com and let's go ahead and add a friend we'll add to mabel at codecourse.com
13:29
and alex at codecourse.com there we go and let's come over now to alex in fact we'll do this in the database just so we don't have to mess around too much so let's set these both to one now that these have been accepted over in tabby's feed we can see we've got all of the books that we should have in here now what i'm going to do is for alex on book three update this or for reading this one
13:54
down here update this so if i come back over to my account and let's just pick one of these so let's choose book three let's set this to wants to read okay that's been changed so if we come over here now you can see that this is now at the top so everything is nicely merging in together so that pretty much concludes our feed of all of our users books and their statuses

Episode summary

In this episode, we're building out the "feed" feature! Now that our app lets users get books from their friends, we're creating the page where you can actually see all these books in one place.

We start by updating our main template so there's a link to the feed, then build a FeedIndexController, hook up the route, and write some feature tests. The tests check authentication and make sure that the feed lists only your friends' books, sorted correctly based on their status (like "wants to read" or "is reading").

We set up the relationships so each book shows who it belongs to, and create a little helper on the pivot to nicely display human-readable statuses (e.g., "Mabel is reading Book 4"). All this gets output in the view, and we clean up the markup and styling for a neat UI. Along the way, we add some realistic data, double-check the ordering, and make sure everything works when simulating different users.

By the end, we have a working friend book feed that shows your friends' reading activity, updated live as statuses change. It's a solid step in making a more social, interactive app!

Episode discussion

No comments, yet. Be the first!