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
28. Keeping form state
Episodes
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
We've already spoken about state with our visible ref just inside of our use create discussion composable. But what we can also add into here is the inertia form itself within here.
00:13
So what we're going to do is go ahead and import in use form, which, by the way, is a composable itself, use form from inertia. And we can actually create the form out in here and expose that as well. That will then keep the state between any of the page reloads that we do in terms of re-requesting data. And that means that we can close off the start a discussion form and still keep that form state.
00:39
We can browse to different pages and still keep all of the form data in there just to avoid losing it. So we're going to go ahead and create our use form composable. Set the topic ID, which we need, set the title, which we need, and of course, set the body that we need. Now, what we can do with this form is expose it down here and extract that out anywhere we need to have access to it.
01:03
So if we go over to our create discussion form, let's get on to the title here. Just going to set a placeholder on this really quickly. And this will be discussion title. And we can hook this up with the form or the model, sorry, to form and title.
01:22
And we can do the same thing for the topic, topic ID. What we're actually going to do is switch the value over here to ID because that kind of makes sense rather than passing in a slug. And we can do the same thing for the text area as well. So formed up body. Now, while we're here, we'll just add a couple of extra bits in.
01:41
So we want an input label for the select here. That's going to be the topic. And we'll say topic and again, screen reader only. We'll do the same thing for our text area.
01:53
That's for the body. We'll set that to body and screen reader only. And we'll also add our errors in now as well. So if we just reference on the login page how this looks and we look for the email, for example, we have this message prop that we can pass down to here.
02:12
So this is going to be the title. The input error for the select here is going to be the topic ID. And the input error for the body is going to be body. OK, so we've got all of that stuff in there now, and that should now be hooked up to a form.
02:30
Now, it's not quite working at the moment, so let's head over to our console. And we've got reading title here. OK, so that is just because inside of here we are not pulling in the form. So it doesn't know where to find this.
02:44
But now we should be good. OK, great. So what we're going to do to demo this is we're just going to dump the form out somewhere so we can see the fact that this state stays the same throughout any page changes.
02:58
So on our create discussion form, let's go to the header section and just dump the form out here. And you can see we've got a topic ID, title and body. Let's fill these in. So need help. We'll choose a topic and we'll figure that out in a second.
03:15
Let's just add the body in here as well. So need help body. And let's go ahead and switch over to a new page. So you can see that the state has stayed the same.
03:25
We can go back again and it stays there. We can close this off and reopen it. And the state is the same. So we have all of the data in here that we would expect to see.
03:35
Now, at the moment, it looks like the topic ID isn't getting hooked up. Let's just see why that might be. Let's open up our select component and have a look at this. Let's just have a look and bring in our script here because we might need to add something to this.
03:50
Let's give this a refresh and have a look. OK, so it's not being hooked up. Let's go over and have a look here. Topic ID over here.
04:01
We should have our topic ID in. And yeah, I think this is just because we've got a component for this, but it is not picking up the model event. Now for now, just so we don't let this get in the way. Let's go ahead and just switch this over to a normal select with the same class in and we'll stick in a note to change this over later.
04:24
So let's just type something in here, type something in here, choose a topic. And yeah, that's now being hooked up. So we'll fix that up later. But for now, it's not too much of an issue that we are duplicating this code over.
04:35
OK, so now hopefully you can see that this form is now staying within this state because we've added it to a composable. And this now remains for any page changes or this visibility change that we've seen. So we can now come over to the create discussion form, get rid of that. And now we have a form that is all hooked up and ready to be sent through to actually create a discussion.
62 episodes•6 hrs 54 mins•1 year ago
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
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.