1
00:00:00,180 --> 00:00:00,560
All right.

2
00:00:00,620 --> 00:00:04,019
And the first approach I want to showcase is the manual approach.

3
00:00:04,140 --> 00:00:09,750
And notice how in the update user, they're going to be no actions, nothing of that sort, because

4
00:00:09,750 --> 00:00:12,570
again, we'll focus only Axios first.

5
00:00:12,900 --> 00:00:18,120
And then once I show you multiple approaches and then once we settle on the one that we're going to

6
00:00:18,120 --> 00:00:21,570
use throughout the project, then we'll implement the actions as well.

7
00:00:21,900 --> 00:00:25,650
And the manual approach is going to look something like this when we go with Axios.

8
00:00:25,950 --> 00:00:32,640
Now we need to go with Patch because remember, we're updating here and the URL is API version one off

9
00:00:32,640 --> 00:00:35,400
and blah blah blah, then current user.

10
00:00:35,640 --> 00:00:39,450
So that's the data that we're passing and just like with a post request.

11
00:00:39,900 --> 00:00:45,300
And as a third argument, we can actually pass in the options and not in the options.

12
00:00:45,300 --> 00:00:46,980
There's a ERRORES property.

13
00:00:47,370 --> 00:00:50,490
And surprise, surprise, we go with authorization.

14
00:00:50,820 --> 00:00:51,570
Now what is the value?

15
00:00:51,600 --> 00:00:59,400
Well, again, we go with this syntax bearer, event space, and then we need to set up the token and

16
00:00:59,400 --> 00:01:02,550
where the token is located while it's located in a state correct.

17
00:01:02,560 --> 00:01:05,519
So we're going to state that and then token.

18
00:01:05,970 --> 00:01:09,900
And for the time being, I just want to showcase the data that we're going to be getting back.

19
00:01:10,260 --> 00:01:12,030
I mean, we already saw that an endorsement.

20
00:01:12,420 --> 00:01:15,420
I just want to make sure that we are all on the same page.

21
00:01:15,780 --> 00:01:17,220
I'm not as far as the error.

22
00:01:17,610 --> 00:01:23,520
Well, for now, let's just log it and remember it is in the error, dot and response.

23
00:01:23,910 --> 00:01:25,050
So let's get cracking.

24
00:01:25,110 --> 00:01:31,650
We want to go to you app context first and learn where we have update user think.

25
00:01:31,800 --> 00:01:36,210
We're going to remove that log and then what's set up to try and catch chaos.

26
00:01:36,840 --> 00:01:43,430
And then let's go at concert data and then that one is equal to await acts here or instance.

27
00:01:43,500 --> 00:01:44,310
And then patch.

28
00:01:44,580 --> 00:01:53,070
Now let's set up the URL where it's going to be API version one and then off and then update user.

29
00:01:53,700 --> 00:01:55,590
And let's pass in the current user.

30
00:01:55,800 --> 00:01:59,550
And also, let's set up the options where we're going to go with headers.

31
00:02:00,370 --> 00:02:02,370
I'm not like I said, it's going to be an object.

32
00:02:02,370 --> 00:02:07,590
And then the header we want to set up is the Authorization Act.

33
00:02:07,630 --> 00:02:13,770
So hopefully I spelled it correctly then why there's going to be a bug and then we want to set up the

34
00:02:13,770 --> 00:02:16,950
bearer and I'm using template string since.

35
00:02:16,980 --> 00:02:19,640
Now I want to access the value, correct?

36
00:02:19,650 --> 00:02:22,800
So let's just scroll up and let's go one more time.

37
00:02:23,490 --> 00:02:26,370
This is our state and this is our initial state.

38
00:02:26,760 --> 00:02:31,950
So we set up here the state as a default equal to initial state.

39
00:02:32,310 --> 00:02:36,810
And then if I want to access something, I go with state dot and token and difference.

40
00:02:37,140 --> 00:02:41,680
When we have users, there is the fact that I'm not updating the state directly.

41
00:02:42,090 --> 00:02:45,270
So that's where we use the actions in this patch and all that.

42
00:02:45,630 --> 00:02:48,750
But as far as accessing, yeah, we don't know what state not.

43
00:02:48,750 --> 00:02:52,680
And then whatever is the value in our case, that is our token.

44
00:02:53,400 --> 00:02:59,370
So let's go here and let's say state and not token, then I do want to lock the data like I said.

45
00:02:59,660 --> 00:03:00,630
So let's go with data.

46
00:03:00,990 --> 00:03:05,550
And then also, let's do the same thing with error and line response.

47
00:03:06,210 --> 00:03:08,820
It's navigate to a browser window and once this start out.

48
00:03:09,390 --> 00:03:15,900
So at the moment, I have the beta because I believe I changed it in one of the post many videos.

49
00:03:16,260 --> 00:03:17,700
So now let's go back to John.

50
00:03:18,030 --> 00:03:20,220
So I'm going to set it up here as John.

51
00:03:20,640 --> 00:03:23,490
That's the name in the input value.

52
00:03:23,760 --> 00:03:24,720
Let's save it.

53
00:03:25,140 --> 00:03:27,630
And now let's take a look at our response.

54
00:03:28,080 --> 00:03:33,060
So notice here how I have update user unless it's 200.

55
00:03:33,420 --> 00:03:34,770
So let me click on this one.

56
00:03:35,110 --> 00:03:38,310
And now let's take a look at what we're getting back over here.

57
00:03:38,730 --> 00:03:41,700
So first of all, we can see that with a request.

58
00:03:42,300 --> 00:03:44,130
This was our bare token.

59
00:03:44,280 --> 00:03:47,970
That's what we are sending when we are making this request.

60
00:03:48,240 --> 00:03:48,960
That's number one.

61
00:03:49,260 --> 00:03:54,190
And then as far as the response, well, first of all, I guess let's go with preview.

62
00:03:54,500 --> 00:03:56,550
Now this is what we'll be getting back.

63
00:03:57,000 --> 00:04:00,960
So again, we have location token as well as the user.

64
00:04:01,650 --> 00:04:02,910
So hopefully this makes sense.

65
00:04:03,300 --> 00:04:09,960
And if, for example, I go with the empty value, in this case, maybe you look mirrored the name.

66
00:04:10,290 --> 00:04:15,330
And since we're not checking that on the front end, we should get back the error response.

67
00:04:15,360 --> 00:04:16,230
So once we send.

68
00:04:16,500 --> 00:04:21,490
Now I have that user and the message is please provide all of ours.

69
00:04:21,870 --> 00:04:29,130
So hopefully we're clear on this one because this is a very important first step where again, we have

70
00:04:29,430 --> 00:04:35,780
the endpoint on the server and then on the front end, which we simply doing, we have these forms and

71
00:04:35,790 --> 00:04:39,840
then we just grab the input values and then we send it off to a server.

72
00:04:40,080 --> 00:04:43,830
And then on a server, we check browser provided awesome.

73
00:04:44,040 --> 00:04:49,800
Then we update everything and eventually will update the state here as well as well as these values.

74
00:04:50,040 --> 00:04:51,000
But that is coming up.

75
00:04:51,300 --> 00:04:54,900
And if there is an error, then of course we send back the error response.

76
00:04:55,230 --> 00:04:59,940
So hopefully we are clear on this and all this talk about the downside on.

77
00:05:00,030 --> 00:05:04,740
Of such approach, because as you're looking at here, like, OK, so where's the issue?

78
00:05:04,980 --> 00:05:06,720
Let's just start setting everything up.

79
00:05:07,080 --> 00:05:10,380
Let's go with actions and then let's complete the application.

80
00:05:10,890 --> 00:05:17,490
Now the thing is, yeah, I mean, you can set up your entire application in such manner, but first

81
00:05:17,490 --> 00:05:20,850
of all, you copy and paste a bunch of stuff.

82
00:05:21,300 --> 00:05:26,490
So essentially, with every request, you'll have to go again with Hatter's authorization and there.

83
00:05:26,880 --> 00:05:34,380
And then there's another thing where eventually I want to check for four or one responses, meaning

84
00:05:34,380 --> 00:05:38,820
the authorization error responses as the requests are coming back.

85
00:05:39,390 --> 00:05:45,400
Because if that's what I'm getting, then we need to talk about what is going to be our response on

86
00:05:45,400 --> 00:05:45,930
the front then.

87
00:05:45,960 --> 00:05:48,120
And I know I'm skipping a little bit of head.

88
00:05:48,540 --> 00:05:53,010
So probably in the upcoming videos, I'll keep repeating that.

89
00:05:53,430 --> 00:05:59,610
And actually we'll have the set up only at the very end of the actual videos where we actually can check

90
00:05:59,610 --> 00:06:00,480
for those four ones.

91
00:06:00,870 --> 00:06:04,140
But that's also something that we're not doing at the moment.

92
00:06:04,740 --> 00:06:11,670
So if you want to just focus on one thing that essentially we want to go with different set up because

93
00:06:11,820 --> 00:06:17,400
there's quite a bit of repetition if we're individually setting up our bare tokens in such a way.

94
00:06:17,700 --> 00:06:21,090
Now, if you have some one off request, that's definitely an option.

95
00:06:21,480 --> 00:06:25,800
Again, the syntax is you go with whatever method than you set up the URL.

96
00:06:25,800 --> 00:06:30,390
You pass in the data you want to send to the server room and you just need to include the headers in

97
00:06:30,390 --> 00:06:31,430
this case authorization.

98
00:06:31,440 --> 00:06:38,160
But if you have multiple requests, which is going to be our case, keep in mind our job, all job stats.

99
00:06:38,400 --> 00:06:40,560
Now, all of them will use this approach.

100
00:06:40,950 --> 00:06:45,810
So we might as well take a look at our other options when it comes to actions.