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
10. Showing a discussion

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
The goal for this episode is to be able to click through on any of these discussions that we have here and go through to the discussion show page, which will, of course, just show the discussion. And to start with, we'll just show the title at the top and then we'll add more like posts a bit later. So we're going to head over and create our new controller for this.
00:17
So let's make a controller in here called discussion show controller. And let's go ahead and create our route for this, first of all. So we really only have two routes for what we're seeing. So for this, we want to get the discussion.
00:35
Of course, you can add a prefix to this if you want, like discussions, but we'll just keep this super clean and just pass the discussion in. And let's reference the discussion show controller. And of course, we'll change the name over this to discussions and show. Great.
00:51
OK, so now that we've got the discussion show controller, let's just scaffold out a really basic inertia page for this. So let's use inertia the helper to render out a page. And let's just remind ourselves what we did over on the forum index controller. We put this in a forum folder so we can do the same thing, but just show.
01:12
OK, so let's create that page out down here and we'll do that under forum show dot view. And let's create our really basic template with show just so we know this works. OK, so when we are passing down the discussion, we don't want this referenced by ID. We want this referenced by slug.
01:32
So really importantly, we're just going to add slug into there so we can pass the slug in instead. So let's choose one of these topics. So let's say need help with Laravel. And let's just go over and verify that this is working.
01:44
And sure enough, we see the page. Now, before we go on to that page, let's link through for each of these discussions and have that click over. So on the discussion component, what we're going to do is change this overall component to a link component, which means we can click any area of this and we'll create an href here through.
02:05
And we'll use the root helper, which comes from Ziggy to go to discussions and show. Now, of course, we need to actually pass the discussion in. But with Ziggy, what we can do is just pass the discussion straight in. If you're not aware what Ziggy is, it basically shares the routes from Laravel to your client side so you can reference them by their name rather than having to rely on using the entire URL.
02:30
So now we don't see anything because we haven't pulled in the link component from Inertia. Let's do that now. So from Inertia view three, and we should now see each of our discussions. Now, we've got a few styling issues here, but that's fine.
02:44
We'll fix that up in a minute. But we can now at least click through onto each of these discussions to see them. So let's fix this up here. We are just going to set this to a block and we're done.
02:56
So we can click anywhere in this area here to view a discussion, which is a lot more convenient. OK, so for the page itself, for the actual discussion, it's going to be very similar to the index because we already have this forum layout which we've created. So what I'm actually going to do is copy this entire page over to that show page and then we'll just delete what we don't need. So to delete what we don't need, we don't need the select here.
03:23
We need the pagination. We don't need the discussion and we don't need an input label, at least not for yet. So for the head, let's fix that up first. For the title, we're going to bind this in instead.
03:36
That's going to be the discussion title, which we want. And let's look at the rest of this. We don't need the top bit here. That's going to become our discussion title.
03:48
So we can just dump that out here for now. And we don't need to iterate through over our discussions because that's going to be our posts. And the side is going to be just similar, so we're going to add the navigation component to that a little bit later. So we don't even have a discussion passed down to this just yet.
04:09
So let's change this to discussion because from the discussion show controller, we're going to pass the discussion we get through here with root model binding. So let's pull the discussion in here and then let's pass that down, not forgetting to make this an API resource. So we'll say discussion resource make and we'll pass the discussion down. Let's go over and click through.
04:34
And there we go. We've got the discussion. The title is being set here as well, which is really helpful. And then, of course, we can iterate through all the posts a little bit later.
04:42
So we're going to go ahead and just start this section up here. First of all, we're going to be a little bit lazy because we don't have any specific components for our topic yet or any of that kind of stuff. We can tidy that up later. So over on the discussion component, let's grab what we need, like the topic title, whether it's pinned and a discussion title.
05:02
So I'm pretty much going to grab all of this in here and I'm going to copy that over to our show component just up here. So let's just paste this in. Go ahead and re-indent this. And let's just take a look.
05:21
OK, so the problem here at the moment, if we just actually look at the console, is we don't have a title for the topic. That's because that is not being loaded in. So over on the discussion controller, show controller, we're going to say discussion, load, and we're going to load that topic in. Normally, we wouldn't need to do that, but because over in the discussion resource we've used when loaded, this won't appear until we've specifically asked for it.
05:48
So now we see Laravel, we get that pinned functionality, and of course, we see the title. There's a little bit of duplication going on here, but it doesn't matter too much. We can always move this over to a separate component later. So if we change something like pinned, we can just change it in one place.
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!

Comments

No comments, yet. Be the first to leave a comment.