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

59. Fixing up post scrolling

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 a little bit earlier when we implemented scrolling to the post that we want to,

00:04

we went ahead and uncommented on updated. Just remind ourselves of the problem that we saw when this was in action. So if I come over here and I reply to this discussion, I'm just going to do this a few times and write some more replies in here.

00:20

You can see that this scrolling functionality is working nicely. Now, as long as we've got the post ID in here, what's going to happen is whenever we perform any other action that updates this page component, it's going to go ahead and scroll down to what we have in the query string.

00:36

For example, if I edit this post here and I hit edit, you can see we get scroll down right to the bottom. That's not the behavior we want. We want it to keep focus on the thing that we're on.

00:46

So what we're going to do is swap this out for a watcher instead and explicitly watch the post ID. So let's go up to the top here where we're importing stuff from view and let's import watch instead. We're going to go ahead and get rid of on updated and just make sure it works for this first of all. And we're going to watch the props or from the props, the post ID.

01:07

Now, the callback for this is just going to go ahead and scroll down to that post. And the post that we use is props to post ID, or we can just go ahead and accept this into the closure here, which will have the new value for the post ID.

01:21

So now that we have commented out on updated again and we've reintroduced some other solution, what this is now going to do is scroll down to the top of the page. You can see that works because we've still got our unmounted hook. But if I now go ahead and edit something, notice that the post ID doesn't change.

01:38

So this is staying in the same place. And this is still going to work for everything else. So, for example, if we reply to this discussion, we know that we're going to get redirected and put down to the bottom here.

Episode summary

In this episode, we circle back to perfecting the post scrolling feature we implemented earlier. You'll see a demo of the current behavior, where replying to a thread scrolls nicely to the target post. However, a bug crops up—that same scrolling triggers even when you edit a post, snapping you to the bottom no matter what. Not ideal!

To fix this, we swap out the onUpdated lifecycle hook for a Vue watcher that listens specifically for changes to the post ID. This way, scrolling only happens when it should—right when a new post ID appears (like after a new reply is added).

We walk through updating the import, removing the call from onUpdated, and setting up a watcher that smoothly scrolls to the correct post whenever postId changes. After implementing the fix, we test to make sure editing and replying both behave as intended. Scrolling is now much smarter, keeping the user's place when editing while still jumping to new replies as needed!

If you want to see a practical use of Vue's watchers for UX polish, this episode's for you.

Episode discussion

No comments, yet. Be the first!