1
00:00:00,000 --> 00:00:02,000
So now that we're able to save meals,

2
00:00:02,000 --> 00:00:06,000
it's time to further enhance the user experience here.

3
00:00:06,000 --> 00:00:08,000
And for example, as you saw before,

4
00:00:08,000 --> 00:00:12,000
it takes quite some time until we are redirected

5
00:00:12,000 --> 00:00:14,000
after adding our data.

6
00:00:14,000 --> 00:00:17,000
Now that will typically be a bit faster in production,

7
00:00:17,000 --> 00:00:20,000
but still, it would be nice to get some feedback

8
00:00:20,000 --> 00:00:24,000
as a user whilst the data is being submitted to see

9
00:00:24,000 --> 00:00:28,000
that everything's fine and a request is on its way.

10
00:00:28,000 --> 00:00:29,000
So it would be nice to, for example,

11
00:00:29,000 --> 00:00:32,000
update this button once we clicked it to tell us

12
00:00:32,000 --> 00:00:34,000
that the request is on its way.

13
00:00:36,000 --> 00:00:40,000
And to do that, we can use another hook provided by React.

14
00:00:40,000 --> 00:00:41,000
Yes, React,

15
00:00:41,000 --> 00:00:46,000
but again, a feature that really only works when using Next.

16
00:00:47,000 --> 00:00:50,000
For that, I'll go back to my share page here

17
00:00:50,000 --> 00:00:53,000
where I have that form.

18
00:00:53,000 --> 00:00:57,000
And here I want to conditionally update this button

19
00:00:57,000 --> 00:00:58,000
and for example,

20
00:00:58,000 --> 00:01:02,000
show the text submitting when the request is on its way.

21
00:01:03,000 --> 00:01:06,000
And we can achieve this by using another special hook

22
00:01:06,000 --> 00:01:09,000
called useFormStatus.

23
00:01:11,000 --> 00:01:14,000
And this hook must be imported,

24
00:01:14,000 --> 00:01:19,000
useFormStatus from react-dom,

25
00:01:19,000 --> 00:01:24,000
so not from React, not from NextJS, but from react-dom.

26
00:01:26,000 --> 00:01:29,000
And this then gives you a status object,

27
00:01:29,000 --> 00:01:32,000
which, for example, has a pending property,

28
00:01:32,000 --> 00:01:35,000
which is true if there is an ongoing request

29
00:01:35,000 --> 00:01:37,000
and false otherwise.

30
00:01:39,000 --> 00:01:41,000
However, if you add that hook,

31
00:01:41,000 --> 00:01:43,000
you'll see that you'll get an error

32
00:01:43,000 --> 00:01:46,000
because this hook requires a client component

33
00:01:46,000 --> 00:01:49,000
in order to work, which makes sense

34
00:01:49,000 --> 00:01:53,000
because it is about updating the client side UI

35
00:01:53,000 --> 00:01:55,000
based on any ongoing requests.

36
00:01:57,000 --> 00:02:01,000
Now therefore, we would have to add use client here

37
00:02:01,000 --> 00:02:04,000
and we could do that, wouldn't be a problem,

38
00:02:04,000 --> 00:02:06,000
everything would work.

39
00:02:07,000 --> 00:02:10,000
But we also might not want

40
00:02:10,000 --> 00:02:13,000
to turn this entire page into a client component

41
00:02:13,000 --> 00:02:16,000
just because we want to conditionally update this button.

42
00:02:18,000 --> 00:02:21,000
In addition, this hook here will actually

43
00:02:21,000 --> 00:02:24,000
only give us the status of a form

44
00:02:24,000 --> 00:02:26,000
if it's inside of that form

45
00:02:26,000 --> 00:02:29,000
for which it should give us the status.

46
00:02:29,000 --> 00:02:32,000
So it must be inside of this form here if we want

47
00:02:32,000 --> 00:02:36,000
to get the submission status of that form,

48
00:02:36,000 --> 00:02:40,000
and with inside this forum, I mean inside of some component

49
00:02:40,000 --> 00:02:42,000
that's inside of that forum.

50
00:02:43,000 --> 00:02:45,000
So it wouldn't work here anyways.

51
00:02:46,000 --> 00:02:49,000
And therefore, I will not add it here,

52
00:02:49,000 --> 00:02:51,000
and therefore remove it,

53
00:02:51,000 --> 00:02:54,000
and instead add a new component,

54
00:02:54,000 --> 00:02:57,000
a new component here in the meals folder

55
00:02:57,000 --> 00:02:59,000
in the components folder,

56
00:02:59,000 --> 00:03:04,000
let's say that could be named meals-form-submit,

57
00:03:05,000 --> 00:03:06,000
or anything like this.

58
00:03:08,000 --> 00:03:13,000
And I'll export a component function here,

59
00:03:13,000 --> 00:03:15,000
which I'll name MealsFormSubmit.

60
00:03:18,000 --> 00:03:23,000
In this file, I'll then import this useFormStatus hook,

61
00:03:23,000 --> 00:03:26,000
and I'll add that client directive,

62
00:03:28,000 --> 00:03:30,000
and then we can get our status here

63
00:03:30,000 --> 00:03:32,000
by calling useFormStatus like this.

64
00:03:34,000 --> 00:03:38,000
Now as mentioned, this status thing here is an object

65
00:03:38,000 --> 00:03:40,000
with various properties,

66
00:03:40,000 --> 00:03:43,000
and therefore, we can actually use object destructuring here

67
00:03:43,000 --> 00:03:48,000
to pull out that one property I am interested in here.

68
00:03:48,000 --> 00:03:50,000
And that's the pending property.

69
00:03:52,000 --> 00:03:56,000
Well and then meals-form-submit should return a button

70
00:03:58,000 --> 00:04:02,000
which says Share Meal.

71
00:04:02,000 --> 00:04:04,000
So what I had on this button here before as well,

72
00:04:07,000 --> 00:04:10,000
but actually it shouldn't always say that.

73
00:04:10,000 --> 00:04:13,000
Instead, I wanna output some conditional content here

74
00:04:13,000 --> 00:04:17,000
and check if pending is truthy, in which case I want

75
00:04:17,000 --> 00:04:19,000
to output the text Submitting,

76
00:04:19,000 --> 00:04:23,000
and otherwise I'll output the text Share Meal.

77
00:04:24,000 --> 00:04:27,000
In addition, I want to disable the button

78
00:04:27,000 --> 00:04:29,000
if we are submitting.

79
00:04:29,000 --> 00:04:33,000
So I'll set the disabled prop to pending,

80
00:04:33,000 --> 00:04:36,000
so that we do disable the button if the surrounding form

81
00:04:36,000 --> 00:04:40,000
is being submitted and we enable it, if that's not the case.

82
00:04:42,000 --> 00:04:45,000
And with that, we can go back to our form

83
00:04:45,000 --> 00:04:48,000
and replace this vanilla button here

84
00:04:48,000 --> 00:04:51,000
with our meals-form-submit button,

85
00:04:51,000 --> 00:04:53,000
this component we just worked on.

86
00:04:56,000 --> 00:05:00,000
With that done, if I reload this page,

87
00:05:01,000 --> 00:05:03,000
I can again enter some data here.

88
00:05:12,000 --> 00:05:15,000
Like this and pick the same image as before.

89
00:05:16,000 --> 00:05:20,000
And if I click Share Meal, you now see this button changes,

90
00:05:20,000 --> 00:05:22,000
and therefore we get a better feedback,

91
00:05:22,000 --> 00:05:24,000
and then after a while, we're redirected,

92
00:05:24,000 --> 00:05:26,000
and we see our new meal here.

93
00:05:27,000 --> 00:05:28,000
So that's better.