1
00:00:00,000 --> 00:00:03,000
Now, one way of working around,

2
00:00:03,000 --> 00:00:06,000
and not the only way as you will soon see,

3
00:00:06,000 --> 00:00:10,000
would be to create a new component, a PostForm Component,

4
00:00:10,000 --> 00:00:14,000
for example, in a separate post-form.js file.

5
00:00:15,000 --> 00:00:20,000
Here, I'll create a separate PostForm Component Function.

6
00:00:21,000 --> 00:00:24,000
And the idea behind this component,

7
00:00:24,000 --> 00:00:28,000
is to have all that code that includes useFormState,

8
00:00:29,000 --> 00:00:30,000
and the rendering of this form,

9
00:00:31,000 --> 00:00:36,000
so that I grab all that code from the NewPostPage JS file

10
00:00:38,000 --> 00:00:43,000
and move that into the PostForm Component like this.

11
00:00:44,000 --> 00:00:46,000
And I need a closing bracket here.

12
00:00:47,000 --> 00:00:51,000
So now the PostForm Component has the useFormState hook

13
00:00:51,000 --> 00:00:53,000
and all the markup that renders the form.

14
00:00:55,000 --> 00:00:57,000
Now, it won't work like this.

15
00:00:57,000 --> 00:00:59,000
For example, the FormSubmit import is missing

16
00:00:59,000 --> 00:01:02,000
and the useFormState hook import is missing.

17
00:01:02,000 --> 00:01:04,000
And of course, we don't have access

18
00:01:04,000 --> 00:01:06,000
to this createPost action here,

19
00:01:06,000 --> 00:01:08,000
so we need to fix these things.

20
00:01:09,000 --> 00:01:13,000
And I'll start with the imports in page.js,

21
00:01:13,000 --> 00:01:16,000
I will actually grab the import of the useFormState hook

22
00:01:16,000 --> 00:01:18,000
and remove it from there.

23
00:01:18,000 --> 00:01:20,000
And then actually also remove

24
00:01:20,000 --> 00:01:22,000
the Use Client Directive from there,

25
00:01:22,000 --> 00:01:25,000
cut all that and add it here at the top

26
00:01:25,000 --> 00:01:27,000
of the PostForm Component file.

27
00:01:30,000 --> 00:01:33,000
And I'll also grab this FormSubmit Component import,

28
00:01:33,000 --> 00:01:36,000
cut it from the NewPostPage file

29
00:01:36,000 --> 00:01:40,000
and add that here in the PostForm JS file instead.

30
00:01:42,000 --> 00:01:46,000
Now that form and that hook here is in a separate component.

31
00:01:47,000 --> 00:01:49,000
Now that hook needs access

32
00:01:49,000 --> 00:01:51,000
to the createPost Server action though.

33
00:01:51,000 --> 00:01:53,000
And what we can do here,

34
00:01:53,000 --> 00:01:56,000
and what works is that we simply accept that as a Prop,

35
00:01:56,000 --> 00:02:00,000
because you can pass Server Actions through Props

36
00:02:00,000 --> 00:02:04,000
and you can indeed pass them from a React Server Component

37
00:02:04,000 --> 00:02:06,000
to a Client Component.

38
00:02:06,000 --> 00:02:08,000
That works and is allowed.

39
00:02:08,000 --> 00:02:12,000
You just can't define them in a Client Component file,

40
00:02:12,000 --> 00:02:16,000
but you can pass them from a Server Component

41
00:02:16,000 --> 00:02:17,000
to a Client Component.

42
00:02:17,000 --> 00:02:18,000
And that's what I'll do here.

43
00:02:19,000 --> 00:02:21,000
Now, I'll name my prop Action

44
00:02:21,000 --> 00:02:23,000
and then use that prop here

45
00:02:23,000 --> 00:02:26,000
as a value in the useFormState hook.

46
00:02:28,000 --> 00:02:32,000
And with that done back here in the page.js file,

47
00:02:32,000 --> 00:02:35,000
we can and should go down there

48
00:02:35,000 --> 00:02:39,000
and now simply return that PostForm

49
00:02:39,000 --> 00:02:41,000
and set this action prop

50
00:02:41,000 --> 00:02:45,000
to the createPost Server action function like this.

51
00:02:47,000 --> 00:02:49,000
And with that, we're now defining

52
00:02:49,000 --> 00:02:52,000
that Server Action in a Server Component,

53
00:02:52,000 --> 00:02:54,000
which is how it should be.

54
00:02:54,000 --> 00:02:57,000
And we're then passing it to a Client Component,

55
00:02:57,000 --> 00:02:58,000
which will work.

56
00:02:59,000 --> 00:03:03,000
And now with that, if we do that, you see the error is gone

57
00:03:03,000 --> 00:03:07,000
and this New Post Page reloads successfully.

58
00:03:07,000 --> 00:03:11,000
You will also see however, that if I now click Create Post,

59
00:03:11,000 --> 00:03:12,000
I'm getting some error.

60
00:03:12,000 --> 00:03:14,000
I'm getting some error

61
00:03:14,000 --> 00:03:17,000
that formData.get is not a function.

62
00:03:17,000 --> 00:03:21,000
So that code in my formAction suddenly fails.

63
00:03:21,000 --> 00:03:24,000
And previously, it of course, worked fine.

64
00:03:24,000 --> 00:03:25,000
Why is that the case?

65
00:03:26,000 --> 00:03:31,000
Well, the code in this formAction is now failing,

66
00:03:31,000 --> 00:03:35,000
because now, we no longer get formData

67
00:03:35,000 --> 00:03:38,000
as a first argument in that Server Action.

68
00:03:38,000 --> 00:03:40,000
And we're no longer getting that,

69
00:03:40,000 --> 00:03:44,000
because we're funneling this Server Action

70
00:03:44,000 --> 00:03:47,000
through the useFormState hook.

71
00:03:47,000 --> 00:03:51,000
We're passing it as a first argument to useFormState.

72
00:03:51,000 --> 00:03:53,000
Now, I mentioned that we get back a new formAction,

73
00:03:53,000 --> 00:03:55,000
which we can set on the form,

74
00:03:55,000 --> 00:03:59,000
but React will actually not just listen to the submission

75
00:03:59,000 --> 00:04:01,000
of the form and update that state,

76
00:04:01,000 --> 00:04:04,000
but it will also change the way the formAction,

77
00:04:05,000 --> 00:04:08,000
the server action we're passing to useFormState

78
00:04:08,000 --> 00:04:09,000
will be called.

79
00:04:11,000 --> 00:04:13,000
It will still give us access to the formData,

80
00:04:13,000 --> 00:04:18,000
but it will no longer do so as a first argument.

81
00:04:18,000 --> 00:04:21,000
Instead, the first argument will be the previous

82
00:04:21,000 --> 00:04:24,000
form state now and the second argument

83
00:04:24,000 --> 00:04:25,000
will be the submitted formData.

84
00:04:27,000 --> 00:04:31,000
So if we had more complex logic in our Server Action,

85
00:04:31,000 --> 00:04:35,000
where we might want to return a new form state

86
00:04:35,000 --> 00:04:37,000
based on the previous form state,

87
00:04:37,000 --> 00:04:41,000
we could do that with help of that prevState object,

88
00:04:41,000 --> 00:04:43,000
which we get automatically,

89
00:04:43,000 --> 00:04:47,000
because we're passing this Server Action

90
00:04:47,000 --> 00:04:49,000
to the useFormState hook.

91
00:04:49,000 --> 00:04:52,000
And in our case that, for example, would give us

92
00:04:52,000 --> 00:04:54,000
that initial state object.

93
00:04:54,000 --> 00:04:57,000
That's what we could retrieve from prevState.

94
00:04:58,000 --> 00:04:59,000
Here, I don't need it,

95
00:04:59,000 --> 00:05:01,000
but still this is how we now need

96
00:05:01,000 --> 00:05:04,000
to write this Server Action,

97
00:05:04,000 --> 00:05:06,000
because the formData will now actually be

98
00:05:06,000 --> 00:05:08,000
the second argument.

99
00:05:09,000 --> 00:05:11,000
So with that though, we will be able

100
00:05:11,000 --> 00:05:14,000
to click Create Post without getting an error.

101
00:05:14,000 --> 00:05:17,000
But of course, we now don't get any feedback here.

102
00:05:17,000 --> 00:05:21,000
We don't see those error messages we're creating

103
00:05:21,000 --> 00:05:22,000
in our server side code.

104
00:05:24,000 --> 00:05:25,000
And the reason for that simply

105
00:05:25,000 --> 00:05:28,000
is that we're not using this state yet.

106
00:05:28,000 --> 00:05:33,000
And keep in mind that this state will be that object

107
00:05:33,000 --> 00:05:35,000
that has this errors property,

108
00:05:35,000 --> 00:05:38,000
which stores this errors array.

109
00:05:38,000 --> 00:05:39,000
But we're not using that.

110
00:05:39,000 --> 00:05:43,000
Hence of course, we're not showing it on the screen.

111
00:05:43,000 --> 00:05:47,000
But we can now simply use it here in the PostForm Component

112
00:05:47,000 --> 00:05:49,000
to output those error messages.

113
00:05:51,000 --> 00:05:53,000
For example, by going to the bottom of this form,

114
00:05:53,000 --> 00:05:58,000
and then here we can output those error messages dynamically

115
00:05:58,000 --> 00:06:02,000
by checking if state.errors is defined.

116
00:06:02,000 --> 00:06:06,000
So if we have an errors property in the state object,

117
00:06:08,000 --> 00:06:09,000
and if that's the case,

118
00:06:09,000 --> 00:06:11,000
I wanna output an unordered list here,

119
00:06:11,000 --> 00:06:16,000
which I'll give a className of form-errors.

120
00:06:17,000 --> 00:06:21,000
And then here inside of that unordered list,

121
00:06:21,000 --> 00:06:24,000
I wanna map my errors.

122
00:06:24,000 --> 00:06:29,000
So my error messages, which are strings, to list items.

123
00:06:30,000 --> 00:06:32,000
Now every list item will receive a key,

124
00:06:32,000 --> 00:06:34,000
which is simply the error message,

125
00:06:34,000 --> 00:06:37,000
and then I'll output the error message

126
00:06:37,000 --> 00:06:38,000
between those list item tags.

127
00:06:41,000 --> 00:06:43,000
Well, and with that, if you saved it,

128
00:06:43,000 --> 00:06:48,000
you should now see those error messages down there,

129
00:06:48,000 --> 00:06:50,000
if you're not submitting any data.

130
00:06:50,000 --> 00:06:53,000
Now as you see, I don't get any error regarding the image,

131
00:06:53,000 --> 00:06:58,000
even though I haven't added any image here,

132
00:06:58,000 --> 00:07:01,000
because indeed image will always be an object,

133
00:07:01,000 --> 00:07:03,000
even if nothing was submitted.

134
00:07:03,000 --> 00:07:06,000
And therefore, I actually wanna add an extra check here

135
00:07:06,000 --> 00:07:11,000
and check if image.size is equal to zero,

136
00:07:11,000 --> 00:07:14,000
which means it's an invalid image file.

137
00:07:14,000 --> 00:07:16,000
With this extra check added,

138
00:07:16,000 --> 00:07:19,000
now, I also get this image error message,

139
00:07:19,000 --> 00:07:21,000
if no image file was chosen.

140
00:07:22,000 --> 00:07:24,000
And with that, we now made sure

141
00:07:24,000 --> 00:07:27,000
that we don't just give the users some feedback

142
00:07:27,000 --> 00:07:30,000
regarding whether the form is being submitted or not,

143
00:07:30,000 --> 00:07:33,000
but that we also provide some validation to the user,

144
00:07:33,000 --> 00:07:35,000
some server side validation,

145
00:07:35,000 --> 00:07:38,000
around which the user can't work.