Build a Forum with Inertia and Laravel

Sign in Get started

This episode is for members only

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

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

02. Getting set up

03. Modifying registration for usernames

04. Figuring out the forum layout

05. Creating and listing topics

06. Basic discussion listing

07. Pinning discussions

08. Tackling pagination in Inertia

09. Customising pagination text in Laravel

10. Showing a discussion

11. Setting up discussion posts

12. Listing through discussion posts

13. Adding more data to posts

14. Adding pagination to posts

15. Adding a post preview to discussions

16. Adding the last reply to discussions

17. Outputting discussion participants

18. Limiting participants in the UI

19. Ordering discussions by last post

20. Handling deleted users

21. Counting replies

22. Building our first filter

23. Highlighting current filters, and merging with pagination

24. Adding auth specific filters

25. Adding the topic filter

26. Scaffolding the new discussion form

27. Toggling the create discussion form

28. Keeping form state

29. Storing a new discussion

30. Discussion validation and authorization

31. Generating markdown for posts

32. Toggling the markdown preview

33. Fetching and displaying markdown

34. Adding a markdown shortcut toolbar

35. Dealing with SVG icons

36. Creating the reply form

37. Basic Inertia permission checking

38. Creating replies to discussions

39. Jumping to posts

40. Automatically scrolling to posts

41. Toggling post editing

42. Editing posts

43. Deleting posts

44. Deleting discussions

45. Setting up for best answers

46. Toggling the best discussion answer

47. Solved and unsolved filters

48. Indexing discussions for search

49. Searching discussions

50. Debouncing search

51. Adding mentionable functionality to forms

52. Indexing users for mentioning

53. Hooking up users for mentions

54. Detecting and storing mentioned users

55. Adding the mentioned filter

56. Adding mentions to the markdown toolbar

57. Adding mentions to the reply form

58. Fixing up some unauthenticated state

59. Fixing up post scrolling

60. Reviewing SSR (Server-side rendering)

61. Preventing parent posts from being deleted

62. Improving solution marking

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.

Episode summary

In this episode, we improve our post display by adding more relevant user data and tidying up our frontend code.

First, we clean up some of the unnecessary markup in our components to keep things neat. Then, we tackle the problem of how to safely expose public user information with each post—without accidentally leaking anything private, like email addresses. For this, we create a new PublicUserResource that only includes safe fields like the user ID, username, and (soon) their avatar URL.

Next, we go ahead and implement an avatar by leveraging Gravatar, generating the avatar URL from the user's email (hashed, of course). This way, each post can display a little user icon next to the username.

From a UI perspective, we arrange things to show the avatar on the left, the username and the post's created time next to it, and then the actual post content underneath.

Another nice improvement is around formatting timestamps. Instead of scattering date formatting logic all over the place, we create a DateTimeResource to consistently format timestamps (like '5 minutes ago' and full datetime strings) in one reusable spot, just passing Carbon instances through it.

By the end of the episode, each post shows the avatar, username, a nicely formatted posted time, and the post body—all with cleaner code and better organization!

Episode discussion

No comments, yet. Be the first!