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
13. Adding more data to 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 work on filling in some more information for each of these posts. The first thing I want to do is just tidy up some of this, because we don't really need this within two components or two elements.
00:11
So let's go ahead and get rid of that. And there are some things in here that we're just not going to need, like space x6. And I think that should just look about the same. So that just gives us the opportunity to remove some markup, which is great.
00:25
OK, so we need over on the post resource to grab the user who posted this. Now, we don't have a resource for the user at the moment. It's always a good idea when you're building something like that shows public information about a user to create a separate resource for your user that
00:42
contains only public information. We could create a generic user resource. But then if we start adding things like email addresses to that for our internal use or authenticated use, everyone could then potentially see that.
00:56
Remember, all data that you're passing through from your back end to view is public. So let's go ahead and create out a new resource in here. And we'll call this public user resource, which will contain only information that we're happy to be shown publicly.
01:11
So over on this public user resource, let's just choose what we want to reveal about this user. So we could output the ID. That doesn't really matter too much. But really importantly, we want the username output here as well, like so.
01:29
And we also want the user's avatar URL, which we don't have at the moment. We'll just implement that in a second. But we'll add that in there so we can reference it within our component. OK, so now we've got this public user resource.
01:42
We can add the user to our post resource. So user resource or public user resource make. And once again, when loaded, so when this relationship has been loaded, we want to go ahead and use that.
01:56
So if we head over and give that a refresh, it works. Because remember, over on the discussion show controller, we've already ecoloded in the user for each of these posts. OK, so let's work on the design of this now.
02:08
For this, we want the user avatar on the left hand side. And then next to that, we want the user username. So we'll just put username and then when it was posted. So basically the created that day.
02:24
So at the moment, it's all just sort of in one line because we have the flex on this. But the avatar is going to sit here and then that detail, those details will sit next to it. So let's just go ahead and make a start on this. So for the avatar, we want a width of seven.
02:38
I'm going to set a flex shrink to zero. That means that this content can't push this smaller and make the avatar really small. So for the avatar, of course, we're going to use an image. And the source is going to be from the post and the user and then the avatar URL.
02:56
We'll get rid of the alt for now, but you can add that back in. But let's add a couple of classes to this. We'll set a width of seven, a height of seven, and we'll set this to fully rounded. So let's go over and there we go.
03:09
We have an image in there. Of course, it doesn't display just yet, but we'll fill that in in just a second. So down here, we're going to have the post stuff. So this container will also have the body of the post down here as well.
03:23
But for the username and created at, let's create our separate container here to house these. So we're going to have the username in here. So post user and username. And then just underneath it, we're going to have when it was posted.
03:38
So posted X minutes ago or whatever it's going to say. So there we go. Looking a little bit better. Now, we need to space these things out.
03:47
So let's go ahead and say space X three. And there we go. So it's a little bit more space between them two things. So we'll go ahead and work on the user avatar.
03:57
We're basically just going to add an image from Gravatar. So I'm going to come down here, create our method called avatar URL. And we're just going to return a Gravatar URL in here. What we need to do for this is grab the Gravatar URL.
04:15
And then on the end of this, MD5 hash the user's email like so. And we should be good. I think we can also add on the JPEG extension. So with this, this is just an avatar service, if you've never come across it before, where you can register.
04:32
And based on your email, upload an avatar. But we can always change that around later. OK, so with this avatar URL, let's head over to the public user resource. And we can now reference that.
04:43
So this avatar URL. And of course, we can now come over to our post. And this should work. So if we just give that a refresh, there we go.
04:52
There is my avatar. Now, at the moment, we've got the flex set to item center, which means this avatar is always going to be in the middle of any of the content here, which is not what we want. So let's set this to item start instead. And you can see that bumps up to the top.
05:08
OK, so now we're going to work on when this was posted. Now, for this, what we can do is over on the post resource, we could say created at and this created at. Now, because that is a carbon instance, we could say something like diff for humans like so. And let's output that on the post.
05:30
So we can say posted post. And created out. Like so, and that does work, so 42 minutes from now, just because the time difference between the app and my database, but what if we also want the actual date and time that this was posted? Well, then what happens is we start doing things like created at date time, created at human, and it makes it really difficult to change.
05:58
Specifically, if you have these dates and times formatted all over your application. So for this, we're actually going to scrap this entirely and we're actually going to create an API resource which gives us a consistently formatted created at or updated at date. So let's see how this works. We're going to go ahead and create out a resource again, and we're going to call this date time resource.
06:24
Now, this might seem a little bit odd, but bear with me and I'll show you how this will help. So date time resource will take in a carbon instance rather than a Laravel model, and it will allow us to do things like this human, for example. So we don't need to prefix that with created out because the date time resource will always already be under that key. And we can say this diff for humans, and let's just fix that casing, and then we could do another one called date time and say to date time string.
07:00
And now what we can do with this resource is say created out because that's specifically what it relates to. But we can now use that date time resource to grab the created at date, and let's see what we get by doing this. So over in the post, I'm just going to dump down here post created at and let's see this now. OK, so to date time string does not exist.
07:26
Of course, let's say to date time string. And there we go. So now any dates and times that we have that are carbon instances we have in this exact format. If we need to add more later, we just have one place to head over to this date time resource and we can just add more or modify them as we need.
07:48
So now what we can do is say post created at and human. And there we go. It works exactly how we did before, but now it's a lot more flexible. OK, so for this, let's just add in some styles.
08:03
We'll start with the text being small and we'll go ahead and just dial down the text a little bit to grey 500 and we should be good. There we go. Now for the post body, that's going to sit directly under this here. So we can maybe add a margin on the top here of three and then down here will be the post body like so.
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!