1
00:00:00,000 --> 00:00:02,000
So how can we make sure

2
00:00:02,000 --> 00:00:05,000
that we give the user some feedback

3
00:00:05,000 --> 00:00:06,000
that the form is being submitted

4
00:00:06,000 --> 00:00:08,000
and that we then redirect the user

5
00:00:08,000 --> 00:00:11,000
once the form submission has been done?

6
00:00:11,000 --> 00:00:12,000
Well, I'll start with redirecting

7
00:00:12,000 --> 00:00:16,000
because that's the easier or quicker part.

8
00:00:16,000 --> 00:00:19,000
And for that we have to do two things.

9
00:00:19,000 --> 00:00:21,000
As a first step,

10
00:00:21,000 --> 00:00:25,000
we should await this store post operation,

11
00:00:25,000 --> 00:00:30,000
because in that store post function, I added a delay

12
00:00:30,000 --> 00:00:32,000
to simulate a slow server,

13
00:00:32,000 --> 00:00:34,000
and therefore this store post function

14
00:00:34,000 --> 00:00:36,000
returns a promise,

15
00:00:36,000 --> 00:00:40,000
which only resolves after one second in the end.

16
00:00:41,000 --> 00:00:44,000
Therefore, I have to await this operation.

17
00:00:44,000 --> 00:00:46,000
And then thereafter, I wanna redirect

18
00:00:46,000 --> 00:00:50,000
and we can redirect with help of the redirect function,

19
00:00:50,000 --> 00:00:52,000
which is imported from the next navigation

20
00:00:52,000 --> 00:00:54,000
package like this.

21
00:00:54,000 --> 00:00:57,000
And make sure that you are importing it from there

22
00:00:57,000 --> 00:00:58,000
and not from anywhere else.

23
00:00:59,000 --> 00:01:02,000
This redirect function can then be called

24
00:01:02,000 --> 00:01:05,000
to redirect the user to some other page,

25
00:01:05,000 --> 00:01:07,000
and you could call that directly

26
00:01:07,000 --> 00:01:11,000
from inside some component function as well.

27
00:01:11,000 --> 00:01:15,000
But here we're calling it from inside that server action.

28
00:01:15,000 --> 00:01:20,000
Redirect then simply takes a string that defines the path

29
00:01:20,000 --> 00:01:22,000
to which you wanna redirect, for example,

30
00:01:22,000 --> 00:01:24,000
to the /feed route.

31
00:01:25,000 --> 00:01:27,000
So that's the first step.

32
00:01:27,000 --> 00:01:31,000
The second step now is that I actually want

33
00:01:31,000 --> 00:01:33,000
to replace these buttons here

34
00:01:33,000 --> 00:01:36,000
with some loading text whilst we're handling

35
00:01:36,000 --> 00:01:39,000
the form submission on the server site.

36
00:01:39,000 --> 00:01:42,000
And to do that, we can use another hook

37
00:01:42,000 --> 00:01:45,000
provided by React.

38
00:01:45,000 --> 00:01:47,000
And yes, it's again, a hook

39
00:01:47,000 --> 00:01:50,000
provided by React, not NextJS.

40
00:01:50,000 --> 00:01:52,000
Specifically, it's a hook provided

41
00:01:52,000 --> 00:01:56,000
by the React dom package actually,

42
00:01:56,000 --> 00:01:58,000
the use form status hook.

43
00:01:59,000 --> 00:02:02,000
Now to use this hook, we need

44
00:02:02,000 --> 00:02:07,000
to create a separate component function,

45
00:02:07,000 --> 00:02:11,000
and I'll actually create that in a separate file,

46
00:02:11,000 --> 00:02:15,000
because it will need to become a client component.

47
00:02:15,000 --> 00:02:18,000
And I don't wanna turn this overall component

48
00:02:18,000 --> 00:02:19,000
into a client component.

49
00:02:20,000 --> 00:02:23,000
So I'll actually add a new component here

50
00:02:23,000 --> 00:02:24,000
in the Components folder.

51
00:02:24,000 --> 00:02:28,000
And I'll name it form-submit.js,

52
00:02:29,000 --> 00:02:31,000
or that's the file name.

53
00:02:31,000 --> 00:02:35,000
I'll name the component form, submit though like this.

54
00:02:36,000 --> 00:02:39,000
And then in there, I want

55
00:02:39,000 --> 00:02:42,000
to use this use form status hook.

56
00:02:42,000 --> 00:02:46,000
So you should import use form status

57
00:02:46,000 --> 00:02:50,000
from React-dom, like this.

58
00:02:52,000 --> 00:02:54,000
And then call this hook here

59
00:02:54,000 --> 00:02:57,000
in the form submit component function.

60
00:02:58,000 --> 00:03:02,000
And this hook will give you a status object

61
00:03:02,000 --> 00:03:05,000
that contains various information about the submission

62
00:03:05,000 --> 00:03:09,000
status of a surrounding form.

63
00:03:09,000 --> 00:03:13,000
So this component which uses this hook, must now be used

64
00:03:13,000 --> 00:03:15,000
inside of a form.

65
00:03:15,000 --> 00:03:18,000
So between those form element tag.

66
00:03:18,000 --> 00:03:19,000
That's required

67
00:03:19,000 --> 00:03:21,000
for this hook to work.

68
00:03:21,000 --> 00:03:25,000
Then here I'll simply return these buttons.

69
00:03:25,000 --> 00:03:29,000
So I'll grab these two buttons here,

70
00:03:29,000 --> 00:03:33,000
and cut them from the new post page component here.

71
00:03:34,000 --> 00:03:38,000
And instead return them here wrapped with a fragment

72
00:03:38,000 --> 00:03:40,000
since we have two sibling elements here.

73
00:03:42,000 --> 00:03:43,000
And now we can

74
00:03:43,000 --> 00:03:47,000
and should use this newly added form submit component here

75
00:03:47,000 --> 00:03:50,000
instead of these buttons.

76
00:03:50,000 --> 00:03:51,000
And as mentioned,

77
00:03:51,000 --> 00:03:55,000
this component, since it uses this use form status hook,

78
00:03:55,000 --> 00:03:59,000
must be used between form tax that's required,

79
00:03:59,000 --> 00:04:01,000
which is the case here.

80
00:04:01,000 --> 00:04:03,000
Now with that though, you would get an error

81
00:04:03,000 --> 00:04:04,000
because as I mentioned,

82
00:04:04,000 --> 00:04:08,000
this use form status hook can now only be used

83
00:04:08,000 --> 00:04:10,000
in a client component.

84
00:04:10,000 --> 00:04:11,000
So in a component

85
00:04:11,000 --> 00:04:16,000
that has this use client directive at the top of the file.

86
00:04:16,000 --> 00:04:19,000
Therefore we should go to this forum submit component

87
00:04:19,000 --> 00:04:21,000
and add use client here.

88
00:04:23,000 --> 00:04:26,000
And with that, the error will go away.

89
00:04:26,000 --> 00:04:28,000
Now, that's not all though,

90
00:04:28,000 --> 00:04:30,000
because at the moment we're not using this hook

91
00:04:30,000 --> 00:04:34,000
and this status, but that's what I'll do next,

92
00:04:34,000 --> 00:04:38,000
because this status object will actually

93
00:04:38,000 --> 00:04:41,000
have a pending prop,

94
00:04:41,000 --> 00:04:44,000
and you can cons lock the entire object to find out

95
00:04:44,000 --> 00:04:46,000
what else is in there.

96
00:04:46,000 --> 00:04:49,000
But most importantly, it has this pending property,

97
00:04:49,000 --> 00:04:52,000
which is a Boolean, so true

98
00:04:52,000 --> 00:04:55,000
or false, which tells us if the surrounding form

99
00:04:55,000 --> 00:04:58,000
is currently being submitted,

100
00:04:58,000 --> 00:05:02,000
and if the surrounding form is being submitted and pending,

101
00:05:02,000 --> 00:05:05,000
therefore is true, I wanna return a paragraph here

102
00:05:05,000 --> 00:05:09,000
where I say creating posts like this,

103
00:05:09,000 --> 00:05:12,000
and otherwise if it's not pending,

104
00:05:12,000 --> 00:05:13,000
I'll return those buttons.

105
00:05:14,000 --> 00:05:18,000
And with that, if we now save that

106
00:05:18,000 --> 00:05:22,000
and reload, we got those buttons here initially,

107
00:05:22,000 --> 00:05:26,000
but now if I, again, enter some data, pick some image,

108
00:05:26,000 --> 00:05:30,000
and click Create Post, you see I got this fallback text,

109
00:05:30,000 --> 00:05:33,000
and then we are redirected to the feed page.

110
00:05:33,000 --> 00:05:36,000
So both features work: the redirection

111
00:05:36,000 --> 00:05:41,000
and the fallback content we're showing here instead

112
00:05:41,000 --> 00:05:44,000
of the buttons, whilst the form is being submitted.

113
00:05:44,000 --> 00:05:47,000
And as you see, this feature can easily be added

114
00:05:47,000 --> 00:05:49,000
with the use form status hook.

115
00:05:49,000 --> 00:05:50,000
The only important thing here

116
00:05:50,000 --> 00:05:53,000
is that it must be in a separate component,

117
00:05:53,000 --> 00:05:55,000
which then must be used

118
00:05:55,000 --> 00:05:58,000
between form elements that's required,

119
00:05:58,000 --> 00:06:02,000
and that separate component must be a client component.