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
15. Adding a post preview to discussions

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 back over to the forum index, we're going to add a bit of text down here, which is going to be the preview of the first post, just so we can get a little bit more context about what this discussion is as we're browsing the list.
00:12
So to start with, we're going to head over to our discussion resource and we're going to add a body preview to this. So let's do this just here, body preview. And for this, it's just going to be the body.
00:26
So the plain text body, no mark down here at all. But we're going to use Laravel string helper. Let's just pull this in. Here under illuminate support, and it's going to limit this string,
00:39
so we can just limit this by any amount, it doesn't really matter for now. What we're going to do with this, we just make that an integer, is use Tailwind's line clamp so it doesn't interfere with the size of what we're doing inside of the component.
00:54
We'll see that in a second. OK, so we've got our body preview. Let's go over to our discussion component and let's add this in. So let's see where we are.
01:04
This is the discussion title. Down here will be the body preview. So discussion body preview. And let's head over.
01:16
And yeah, what we've actually done here is added this to the discussion resource, which, of course, is not right. What we want to do is add this to the post resource itself because this is where we actually have the body.
01:27
So you probably spotted that. But let's go and just switch that over. Now, if we look at our discussion resource, we don't actually have the first post in here, but we do have the relationship
01:39
set up for this. Remember, we have this post relationship down here, which is the first post. So with this, what we can do is add in another relationship to this post, post resource and when loaded post.
01:56
So let's just check over on our forum index controller that we've loaded this. We haven't. So let's go ahead and load in the first post and we should be good. We should now be able to via the discussion and the first post access the body preview, which will now be post body preview.
02:14
And yeah, it doesn't work. So let's have a look. And yeah, it doesn't look like it is in there. So let's have a look here.
02:21
Discussion resource post when loaded post. And let's go ahead and dump this out and just see what we've got. So discussion and we will just get rid of this for now. And let's have a look in there.
02:37
So we've got the post in there and we should have the body preview. Now, for this one, we don't. That is the problem, because for the second discussion, we don't have any posts. Now, I'm not sure there's too much point
02:52
in protecting this because we should always have posts in there. But let's just create out a post for this other discussion just to make this work. So here is a post. We'll have that for my user and the discussion here will be this one.
03:12
The parent ID won't exist because that's the first post and let's switch up the created and updated update. If you ever find yourself not having posts within the discussion, you can just come in here and add some if
03:24
statements to make this work, so let's bring back the body preview. And now that should work for both of these. And we now have a preview of each of these in here, which is great. To finish up, let's just style this up.
03:34
So it looks a little bit better. So we're going to go ahead and mute the text on here because it's not hugely important, set the text to small, set a margin on the top. And we'll look at the line clamp in just a second.
03:46
So there we go. I think that looks OK. Now, what I'm going to do is just add a little bit more data to this. So let's just copy and paste this a few times just to fill this up, because, of course, a post body, at least the first one, could have quite a lot of data.
04:02
You can see this wraps down a couple of lines. Now we have over in our post resource the string limit on this body preview. So it's never going to go above 200 characters. However, that doesn't mean that we're
04:15
going to keep consistency on the long line. Different letters have different widths, so on. So what we can actually do within Tailwind is we can set a line clamp. So line clamp one will basically just keep this to a single line,
04:28
but have an ellipsis at the end with a cut off content. And of course, you can bump this up as well if you want to, to two lines. It really is up to you. But the fact we can do this within CSS,
04:40
not have any kind of complex logic to handle this in the back end makes a lot of sense. So there we go. We have a really nice cut off first line with a little bit of context about each of these discussions.
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!