1
00:00:02,000 --> 00:00:03,000
Now, let's start

2
00:00:03,000 --> 00:00:05,000
with the newsletter-registration.

3
00:00:05,000 --> 00:00:10,000
For this we have the newsletter-registration component

4
00:00:10,000 --> 00:00:11,000
in the input folder

5
00:00:11,000 --> 00:00:14,000
and there we're sending this HTTP request.

6
00:00:14,000 --> 00:00:17,000
Now I wanna show the pending notification

7
00:00:17,000 --> 00:00:21,000
whilst we are sending and waiting for the response.

8
00:00:21,000 --> 00:00:23,000
I wanna show the success notification

9
00:00:23,000 --> 00:00:25,000
if sending succeeded,

10
00:00:25,000 --> 00:00:30,000
and I wanna show the error notification if sending failed.

11
00:00:30,000 --> 00:00:32,000
Now, to make all of that happen

12
00:00:32,000 --> 00:00:35,000
in the NewsletterRegistration component

13
00:00:35,000 --> 00:00:37,000
we need to connect to context.

14
00:00:37,000 --> 00:00:41,000
And we do that with the useContext hook, as you learned.

15
00:00:41,000 --> 00:00:44,000
So here we then call useContext

16
00:00:44,000 --> 00:00:48,000
and we simply import the NotificationContext.

17
00:00:48,000 --> 00:00:52,000
So again, not the provider, but the context itself

18
00:00:52,000 --> 00:00:57,000
from our store and there to notification-context file.

19
00:00:57,000 --> 00:01:00,000
And then we establish this connection

20
00:01:00,000 --> 00:01:03,000
as we did it before a couple of minutes ago.

21
00:01:03,000 --> 00:01:06,000
So here we then have our notificationContext.

22
00:01:06,000 --> 00:01:09,000
But here I'm not interested in the notification,

23
00:01:09,000 --> 00:01:11,000
here instead, I wanna call a function

24
00:01:11,000 --> 00:01:14,000
to show the notification.

25
00:01:14,000 --> 00:01:17,000
For example, here in the registrationHandler

26
00:01:17,000 --> 00:01:19,000
when we start sending this request.

27
00:01:19,000 --> 00:01:23,000
Right before we do send it, I want to show a notification

28
00:01:23,000 --> 00:01:25,000
that is in the pending status

29
00:01:25,000 --> 00:01:29,000
that says something like signing up.

30
00:01:29,000 --> 00:01:32,000
So for this, we can use the notificationContext object

31
00:01:32,000 --> 00:01:35,000
and call showNotification

32
00:01:35,000 --> 00:01:38,000
and pass a object with the notification data.

33
00:01:38,000 --> 00:01:42,000
And here all set a title of Signing up,

34
00:01:43,000 --> 00:01:48,000
a message of Registering for newsletter, something like this

35
00:01:52,000 --> 00:01:56,000
and set the status here to pending, because we are pending.

36
00:01:58,000 --> 00:02:00,000
Now, if we are successful,

37
00:02:00,000 --> 00:02:02,000
so in this last then block here

38
00:02:02,000 --> 00:02:07,000
then I want to set the notification to success.

39
00:02:07,000 --> 00:02:11,000
So in here I'll actually call showNotification again

40
00:02:11,000 --> 00:02:14,000
but then say, "Success."

41
00:02:14,000 --> 00:02:16,000
As a title and as a text here,

42
00:02:16,000 --> 00:02:21,000
we can say, "Successfully registered for newsletter."

43
00:02:23,000 --> 00:02:25,000
Something like this.

44
00:02:25,000 --> 00:02:28,000
And the status is success instead of pending.

45
00:02:29,000 --> 00:02:31,000
Now, in case of an error

46
00:02:31,000 --> 00:02:34,000
I also wanna show the appropriate notification

47
00:02:34,000 --> 00:02:37,000
and that's why I will add a catch method here

48
00:02:37,000 --> 00:02:39,000
where we get a potential error

49
00:02:39,000 --> 00:02:42,000
and here I also wanna show a notification

50
00:02:42,000 --> 00:02:47,000
but the status will be error, the title will be Error

51
00:02:47,000 --> 00:02:50,000
and the message could be retrieved from the error.

52
00:02:50,000 --> 00:02:53,000
Here we could check if we have a message property

53
00:02:53,000 --> 00:02:54,000
which we wanna use,

54
00:02:54,000 --> 00:02:57,000
and alternatively just say, "Something went wrong."

55
00:02:57,000 --> 00:03:00,000
So we show the error message if we have it,

56
00:03:00,000 --> 00:03:01,000
or we showed us fallback

57
00:03:01,000 --> 00:03:04,000
if there is no message attached to the error.

58
00:03:06,000 --> 00:03:08,000
Now, one problem we'll have here is

59
00:03:08,000 --> 00:03:13,000
that the fetch function works such that error HTTP codes.

60
00:03:15,000 --> 00:03:18,000
So 400 and 500 status codes

61
00:03:18,000 --> 00:03:22,000
will not cost is promise to fail.

62
00:03:22,000 --> 00:03:25,000
So we will not make it into this catch block

63
00:03:25,000 --> 00:03:27,000
if we have an error status code.

64
00:03:27,000 --> 00:03:29,000
And I would like to make it

65
00:03:29,000 --> 00:03:32,000
into this catch block if that's case.

66
00:03:32,000 --> 00:03:35,000
So to make sure that this is how everything works

67
00:03:35,000 --> 00:03:38,000
I will actually dive into this then block

68
00:03:38,000 --> 00:03:42,000
and check if response.ok.

69
00:03:42,000 --> 00:03:47,000
This is the extra field with this response object has.

70
00:03:47,000 --> 00:03:48,000
And if that's the case

71
00:03:48,000 --> 00:03:51,000
I know that we have a success status code.

72
00:03:51,000 --> 00:03:54,000
Then I wanna return response.jason.

73
00:03:55,000 --> 00:03:59,000
If that's not okay, though, if we make it past this if check

74
00:03:59,000 --> 00:04:01,000
then I know that we have an error.

75
00:04:01,000 --> 00:04:05,000
In this case, I also wanna get my response data

76
00:04:05,000 --> 00:04:09,000
but I also want to throw an error.

77
00:04:09,000 --> 00:04:13,000
I wanna reject that promise by throwing an error

78
00:04:13,000 --> 00:04:15,000
inside of the then block.

79
00:04:15,000 --> 00:04:18,000
And for data here, when using then catch

80
00:04:18,000 --> 00:04:22,000
instead of async await, we'll need a nest that promise

81
00:04:22,000 --> 00:04:25,000
because I'll need to get access to the response object

82
00:04:25,000 --> 00:04:26,000
while it's getting access

83
00:04:26,000 --> 00:04:29,000
to the past data at the same time.

84
00:04:29,000 --> 00:04:32,000
So here all then called response.jason as well

85
00:04:32,000 --> 00:04:33,000
but I'll not return it.

86
00:04:33,000 --> 00:04:37,000
But instead here in the then block,

87
00:04:37,000 --> 00:04:39,000
I noted we're already in the error case

88
00:04:39,000 --> 00:04:41,000
because we're past this if check,

89
00:04:41,000 --> 00:04:46,000
here I will then throw a new Error with a message

90
00:04:47,000 --> 00:04:48,000
which I get from my data.

91
00:04:48,000 --> 00:04:52,000
Here I'll check if I got a message in my response

92
00:04:52,000 --> 00:04:54,000
which I got back from the server

93
00:04:54,000 --> 00:04:57,000
and I'll use stat as an error message if I have one

94
00:04:57,000 --> 00:05:00,000
otherwise I'll set up fallback here as well,

95
00:05:00,000 --> 00:05:02,000
"Something went wrong."

96
00:05:03,000 --> 00:05:05,000
And now you're all returned,

97
00:05:05,000 --> 00:05:09,000
this promise chain, this nest of promise chain

98
00:05:09,000 --> 00:05:13,000
which will throw an error if things go wrong.

99
00:05:13,000 --> 00:05:16,000
And this will then cause the outer promise chain,

100
00:05:16,000 --> 00:05:20,000
the main promise chain started by fetch to reject as well

101
00:05:20,000 --> 00:05:23,000
with that error passed along so that'd be make it

102
00:05:23,000 --> 00:05:25,000
into this catch block if we do have an error.

103
00:05:27,000 --> 00:05:30,000
So with all that implemented, we can try if this works.

104
00:05:30,000 --> 00:05:34,000
If we save everything and I reload,

105
00:05:34,000 --> 00:05:39,000
if I sign up for my newsletter here and I click register

106
00:05:39,000 --> 00:05:41,000
we see the signing up notification

107
00:05:41,000 --> 00:05:44,000
and it changes to success.

108
00:05:44,000 --> 00:05:46,000
It never disappears, we'll work on this later,

109
00:05:46,000 --> 00:05:49,000
for the moment it's always there.

110
00:05:49,000 --> 00:05:51,000
Now let's test it with an error,

111
00:05:51,000 --> 00:05:56,000
and for this all dive into my db-util.js file

112
00:05:56,000 --> 00:05:59,000
and break my mongodb credentials again,

113
00:05:59,000 --> 00:06:01,000
so that connecting to the database

114
00:06:01,000 --> 00:06:03,000
and inserting data will fail.

115
00:06:03,000 --> 00:06:06,000
If I do that and I try the same request again

116
00:06:06,000 --> 00:06:10,000
we start with pending, but then we go to the error case

117
00:06:10,000 --> 00:06:13,000
and we see that error message at the bottom.

118
00:06:13,000 --> 00:06:14,000
Now it's of course up to you

119
00:06:14,000 --> 00:06:18,000
if you wanna show that error message here, I'm doing it

120
00:06:18,000 --> 00:06:21,000
and everything works the way it should work here.

121
00:06:21,000 --> 00:06:24,000
And with that all change the credentials back

122
00:06:24,000 --> 00:06:27,000
to work and credentials and we're good.

123
00:06:27,000 --> 00:06:28,000
Now of course it would also be good

124
00:06:28,000 --> 00:06:31,000
if the notification could be removed

125
00:06:31,000 --> 00:06:33,000
and if it would disappear eventually.