This episode is for members only

Sign up to access "Build a Forum with Inertia and Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
12. Listing through discussion posts

Episodes

0%
Your progress
  • Total: 6h 54m
  • Played: 0m
  • Remaining: 6h 54m
Join or sign in to track your progress
01. Introduction and demo
6m 59s
0%
02. Getting set up
10m 36s
0%
03. Modifying registration for usernames
7m 15s
0%
04. Figuring out the forum layout
5m 57s
0%
05. Creating and listing topics
9m 15s
0%
06. Basic discussion listing
13m 33s
0%
07. Pinning discussions
4m 1s
0%
08. Tackling pagination in Inertia
8m 23s
0%
09. Customising pagination text in Laravel
52s
0%
10. Showing a discussion
6m 4s
0%
11. Setting up discussion posts
5m 53s
0%
12. Listing through discussion posts
5m 28s
0%
13. Adding more data to posts
8m 24s
0%
14. Adding pagination to posts
1m 35s
0%
15. Adding a post preview to discussions
4m 52s
0%
16. Adding the last reply to discussions
5m 54s
0%
17. Outputting discussion participants
8m 4s
0%
18. Limiting participants in the UI
5m 56s
0%
19. Ordering discussions by last post
4m 30s
0%
20. Handling deleted users
2m 31s
0%
21. Counting replies
8m 13s
0%
22. Building our first filter
8m 31s
0%
23. Highlighting current filters, and merging with pagination
5m 37s
0%
24. Adding auth specific filters
6m 40s
0%
25. Adding the topic filter
8m 18s
0%
26. Scaffolding the new discussion form
13m 29s
0%
27. Toggling the create discussion form
9m 2s
0%
28. Keeping form state
4m 59s
0%
29. Storing a new discussion
11m 29s
0%
30. Discussion validation and authorization
5m 1s
0%
31. Generating markdown for posts
8m 37s
0%
32. Toggling the markdown preview
7m 43s
0%
33. Fetching and displaying markdown
8m 6s
0%
34. Adding a markdown shortcut toolbar
5m 53s
0%
35. Dealing with SVG icons
7m 46s
0%
36. Creating the reply form
7m 48s
0%
37. Basic Inertia permission checking
6m 26s
0%
38. Creating replies to discussions
5m 37s
0%
39. Jumping to posts
11m 40s
0%
40. Automatically scrolling to posts
6m 18s
0%
41. Toggling post editing
7m 32s
0%
42. Editing posts
3m 36s
0%
43. Deleting posts
4m 21s
0%
44. Deleting discussions
6m 7s
0%
45. Setting up for best answers
7m 29s
0%
46. Toggling the best discussion answer
12m 14s
0%
47. Solved and unsolved filters
2m 23s
0%
48. Indexing discussions for search
8m 6s
0%
49. Searching discussions
12m 35s
0%
50. Debouncing search
2m 47s
0%
51. Adding mentionable functionality to forms
6m 32s
0%
52. Indexing users for mentioning
9m 9s
0%
53. Hooking up users for mentions
10m 10s
0%
54. Detecting and storing mentioned users
9m 54s
0%
55. Adding the mentioned filter
2m 26s
0%
56. Adding mentions to the markdown toolbar
1m 1s
0%
57. Adding mentions to the reply form
7m 21s
0%
58. Fixing up some unauthenticated state
1m 1s
0%
59. Fixing up post scrolling
1m 48s
0%
60. Reviewing SSR (Server-side rendering)
8m 20s
0%
61. Preventing parent posts from being deleted
2m 31s
0%
62. Improving solution marking
4m 9s
0%

Transcript

00:00
So let's go ahead and iterate through the posts that we've just manually created over in the database here.
00:06
Now, we need to think about this because we could potentially have thousands of replies or posts within a discussion. We're going to want to paginate these for obvious reasons, but that means that we can't really include the posts on the discussion API resource. Normally, what we would do is over on the discussion resource, we would create out a relationship like this called posts.
00:29
We would use the post resource, which we haven't created yet, and then we would just output a collection here of posts. The only problem with this is we can't paginate something, at least not easily, within an API resource. So what we're actually going to do is over on the discussion show controller, we're just going to create out a separate collection of posts directly as a prop that's being passed down.
00:53
This doesn't matter because it's one extra query, but it gives us the flexibility and cleanliness of being able to paginate directly within here. So how do we do this? Well, first of all, we need a post resource. So let's create that out first of all and just output some basic data within there. So we'll create a post resource here and let's head over to that post resource and just figure out what kind of information we need here.
01:17
So probably obviously the ID, because we need to use that. So this ID and we're going to need the body of this as well. Later on, we're going to be adding markdown. So we're going to be changing this over and we can also relate this back to a user as well. But let's just leave that for now so we can work on other stuff.
01:36
So we have our posts here. We're going to use our post resource. We're going to use the collection method like we've already seen. And then into this, how do we grab all of the posts for a particular discussion? Well, we're going to set up a new query builder here, but we're going to say where belongs to and we're going to say where it belongs to that discussion.
01:57
So this will only fetch posts that we have for the discussion that we're currently looking at. Now, we're going to want to do some eager loading here as well. We will. Let's do that now. So with user and discussion.
02:13
Because we're going to need them later, we'll eager load them in first. We're going to say oldest here, because remember, the latest posts need to be at the bottom rather than the top. And then now what we can do here is paginate this so we can paginate these by 10, whatever. We'll be switching that back to one to test pagination out later.
02:33
So now that we've got these posts, what we can do is over on the forum show page, we can go down here and start to iterate through these. So let's just figure out where we are here. This is the top banner. And down here, we want to start to iterate through them.
02:49
Let's just dump them out first of all. So posts. And of course, we want to make sure that we allow our posts here to be passed in. And remember, that's going to be an object again, because we're working with the pagination.
03:02
So it's going to have both data and meta properties. OK, there we go. We have our posts in there that we've defined and we have all of our pagination links as well. So we'll go ahead and create out a simple component to house these like we did for each of our discussions.
03:17
So under components and forum, let's create post.view. We'll keep this super simple now. We will accept in the post as a prop. So we'll use define props here.
03:32
Accept the post in, which will be an object. And then in here, let's just create a wrapper and output the post ID just so we have something to work with. So now we can go ahead and pull that component in. So let's go up to the top here and pull in post.
03:48
And that's under the forum folder. And let's go down here to where our posts are. Define that post out. Iterate over these.
03:58
So post in post.data. Key this by the post ID and then pass the post in to that as a prop. So now we should have one and two out there. Great.
04:11
OK, so let's steal some styles from the discussion component because it's going to be very, very similar here. We'll just have pretty much all of this. So we'll just copy this link over. We don't need this to be a link, but let's just add that in to here.
04:26
So it's a little bit easier. Let's change this to a div. And of course, we'll get rid of the href because we're not going to need that. And let's go ahead and just end that tag down there and re-indent that.
04:37
So we now have the following. Great. So these are each of the posts in here. Once again, we'll do something similar to when we output our discussions where we wrap this in a div.
04:50
And then we set a specific space Y of three just so they're kind of more grouped together than the top here. We could even just get rid of that. And because these would look a little bit disjointed otherwise, we can set the space Y of three on there so everything sort of sits together. Because remember, this will be the first post for this discussion title.
05:10
OK, so let's go over to our post component and we're just going to output the post body in here. And as you can see, that's working nicely. And to be honest, I think for now that is everything we need to do. Let's head over to the next episode and just fill in a little bit more information like who posted this and when.
62 episodes6 hrs 54 mins

Overview

Ready to build a forum with Inertia and Laravel?

Why a forum? A forum touches a whole load of concepts that you'll use throughout your development career – particularly on the client-side, where we'll be doing most of the heavy lifting.

So, let's build a clean, modern forum with features like markdown support, code highlighting, advanced filtering, user mentions, full-text search, the ability to mark best answers, and more.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!