1
00:00:00,150 --> 00:00:06,150
And once we have covered how the second project, the torture project, is going to look like, then

2
00:00:06,150 --> 00:00:10,620
of course we need to navigate through this sort of folder, all the doors.

3
00:00:11,040 --> 00:00:17,970
Now, if you're using the same setup as me as far as the integrated terminal, first we would need to

4
00:00:18,210 --> 00:00:21,910
leave the set of folder of the birthday, a reminder.

5
00:00:22,200 --> 00:00:27,220
So first, what I would want you type is a CD and then two dots.

6
00:00:27,600 --> 00:00:30,740
So now, of course, we are back in the birth reminder.

7
00:00:31,050 --> 00:00:35,780
Then we type one more city and we'll be back in the project.

8
00:00:36,060 --> 00:00:43,700
And of course, again, let's type three day and grab as a set of folder all of the tours project.

9
00:00:44,070 --> 00:00:48,550
So essentially that is going to be set up for every project.

10
00:00:48,660 --> 00:00:54,990
Make sure that you are in Riak projects and then of course, you can navigate to the specific set up

11
00:00:54,990 --> 00:00:55,500
folder.

12
00:00:55,760 --> 00:01:05,550
And once I'm here, I'll run NPM Install and the NPM start as well as far as this particular project.

13
00:01:06,370 --> 00:01:13,960
Again, we have industries where we import and of course, we have a jayesh where we import loading

14
00:01:14,380 --> 00:01:20,980
so loading component as well as towards component, which of course is going to be responsible for rendering

15
00:01:20,980 --> 00:01:21,730
all the doors.

16
00:01:22,060 --> 00:01:28,540
Then we have the euro, which we will use once we start watching the torc.

17
00:01:28,930 --> 00:01:33,240
And also we have a single Torx component.

18
00:01:33,520 --> 00:01:39,340
So there where it's going to work, we will watch our data that we'll pass it into the stores and then

19
00:01:39,340 --> 00:01:48,170
we'll iterate over the torchbearer and plan for every tour will display a single tour component.

20
00:01:48,490 --> 00:01:57,160
Now I think I can close the integrated terminal and let's start by just setting up some kind of state

21
00:01:57,280 --> 00:02:01,260
values as well as fetching all the stores.

22
00:02:01,540 --> 00:02:05,880
Now, I can tell you right away that I set up my own API.

23
00:02:06,220 --> 00:02:12,910
And if you want to quickly check what is going to be a response, you can just copy the string here

24
00:02:13,420 --> 00:02:19,900
and navigate, of course, to some kind of browser copy and paste, and you'll see that there's going

25
00:02:19,900 --> 00:02:22,270
to be an array of objects.

26
00:02:22,600 --> 00:02:25,480
Now, there's a couple of reasons why I'm setting up my own API.

27
00:02:25,570 --> 00:02:30,540
First, I can always make sure that the API doesn't change.

28
00:02:30,970 --> 00:02:36,870
So as I'm recording the video, the API will be the same when you are watching the video.

29
00:02:37,150 --> 00:02:42,400
So that is very, very important because of course, we know that in real world, apps do change.

30
00:02:42,820 --> 00:02:49,690
And then the second thing is I wanted to avoid, especially in the beginning, the nested structure

31
00:02:49,840 --> 00:02:53,710
that typically comes with some kind of external API.

32
00:02:54,010 --> 00:03:01,780
You'll notice that all my apps are usually going to be very simply structured where we have all the

33
00:03:01,780 --> 00:03:03,610
properties right on the object.

34
00:03:03,610 --> 00:03:04,480
Of course, don't worry.

35
00:03:04,780 --> 00:03:10,540
Later we will work with external APIs as well, but especially in the beginning, I think it's very

36
00:03:10,540 --> 00:03:14,010
important that we start with the basics.

37
00:03:14,320 --> 00:03:19,860
So this is what we'll get once we fetch the data from this URL.

38
00:03:19,870 --> 00:03:28,270
And like I said, I set up the API myself and the moment I have had to with torse project set up.

39
00:03:28,630 --> 00:03:36,470
But I think we can start by setting up some kind of state values and I'm going to have to loading and

40
00:03:36,590 --> 00:03:37,210
detours.

41
00:03:37,360 --> 00:03:39,820
So let's go with const loading.

42
00:03:39,820 --> 00:03:46,300
That is of course going to be displayed while we're loading and then set loading, set loading and that

43
00:03:46,300 --> 00:03:51,430
is equal to use state and then by default I'll set it equal to zero.

44
00:03:52,180 --> 00:03:54,160
So by default loading will be true.

45
00:03:54,500 --> 00:03:58,990
That just means that we will see the loading component.

46
00:03:59,380 --> 00:04:06,970
And then the second thing is that we're going to go with Const and TORC and of course we need to have

47
00:04:06,970 --> 00:04:07,840
our function as well.

48
00:04:08,170 --> 00:04:15,580
So set towards and that is equal to a used state and the default value will be an empty right now.

49
00:04:15,580 --> 00:04:21,430
Before we fetch anything, why don't we also right away work on the returns?

50
00:04:21,760 --> 00:04:23,600
Because at the moment we just have to having to.

51
00:04:23,710 --> 00:04:31,430
But since I already introduce the state value of loading and we have covered before that, of course

52
00:04:31,450 --> 00:04:33,250
we can have multiple returns.

53
00:04:33,610 --> 00:04:39,870
Why don't we have one return for loading and one return when we're not loading?

54
00:04:40,000 --> 00:04:47,080
So essentially, once we've got the data back and as far as loading first, of course, we would need

55
00:04:47,080 --> 00:04:48,250
to set up our condition.

56
00:04:48,550 --> 00:04:57,070
And I'm going to say, if loading is true, then I would want to return and I'll wrap my loading component

57
00:04:57,490 --> 00:04:59,860
in the main package.

58
00:05:00,190 --> 00:05:02,770
So say here loading like Shell.

59
00:05:02,980 --> 00:05:06,060
And then of course, ST's loading is true.

60
00:05:06,310 --> 00:05:08,050
That's why you can see this on the screen.

61
00:05:08,530 --> 00:05:15,400
Now, I took the liberty and already worked on the loading jars and essentially there's not much there.

62
00:05:15,580 --> 00:05:16,750
So we have the component.

63
00:05:16,750 --> 00:05:20,650
We have the day off with a class of loading and then we have the heading one.

64
00:05:21,160 --> 00:05:26,530
I think at this point you are familiar of what is happening here and a component.

65
00:05:26,770 --> 00:05:29,950
So this is what we're seeing on the screen.

66
00:05:30,130 --> 00:05:33,760
So that's my loading jayesh component.

67
00:05:34,210 --> 00:05:38,080
And then, of course, I would also need to have some kind of return.

68
00:05:38,350 --> 00:05:44,950
Well, if I'm not loading correct that the moment loading is true, but eventually, of course, we

69
00:05:44,950 --> 00:05:48,160
will have our data show here as a default.

70
00:05:48,400 --> 00:05:55,660
I can just say that our turn main element, again, that is for my styling purposes, by the way, I

71
00:05:55,660 --> 00:06:01,630
need to fix it here and then I'll return my towards component inside there.

72
00:06:02,020 --> 00:06:05,920
So say the worst component, Azerrad.

73
00:06:06,260 --> 00:06:14,130
And just so you can see that everything works by default was once I say, of course, I have to ask.

74
00:06:14,750 --> 00:06:18,640
So this is where we'll have the list of.

75
00:06:19,040 --> 00:06:23,150
Now, I'm going to go back to try to save it.

76
00:06:23,420 --> 00:06:26,840
And, of course, let's work on fudging the data.

77
00:06:27,200 --> 00:06:29,240
I'm going to set up my function.

78
00:06:29,750 --> 00:06:37,730
So right above the condition of if I'm going to go with CONSED, I'll call this Fetch the worst and

79
00:06:37,730 --> 00:06:38,780
it's going to be a sink.

80
00:06:39,020 --> 00:06:42,020
So right away set up myosin keyboard.

81
00:06:42,350 --> 00:06:46,970
That is my function and I'll use the built in the fetch API.

82
00:06:47,390 --> 00:06:55,160
And just in case maybe you have set set loading to be false, I'll just showcase that self-loading.

83
00:06:55,550 --> 00:06:57,310
We would set up Astrue.

84
00:06:57,740 --> 00:07:00,820
So just in case you would start as default as false.

85
00:07:01,190 --> 00:07:05,870
Well you always when you start watching you can say I loading for sure to be true.

86
00:07:05,900 --> 00:07:12,200
Now of course in our case we already have true here, but this could work as an extra precaution when

87
00:07:12,200 --> 00:07:14,300
we say, yeah, you know what, when we fetch loading.

88
00:07:14,300 --> 00:07:14,810
For sure.

89
00:07:14,810 --> 00:07:15,200
For sure.

90
00:07:15,200 --> 00:07:15,740
For sure.

91
00:07:15,950 --> 00:07:17,520
Set loading the truck.

92
00:07:18,260 --> 00:07:24,340
So then, of course, we're displaying to the user that we're watching the data and now we want you

93
00:07:24,560 --> 00:07:26,810
fetch, of course, minotaurs.

94
00:07:27,110 --> 00:07:34,450
So we're going to go here with CONSED and I'll name this a response like so not as equal to weight then.

95
00:07:34,730 --> 00:07:37,790
Watch now of course we just need to pass in the euro.

96
00:07:38,300 --> 00:07:44,600
Now I know that I'll have to run the injection since we would need to pass it.

97
00:07:44,810 --> 00:07:53,610
So we're going to go and that horse is equal to again wait and we'll go with Futch and Jason and then

98
00:07:53,630 --> 00:07:54,230
invoke it.

99
00:07:54,530 --> 00:07:57,320
So this should give us a list afterwards.

100
00:07:57,680 --> 00:08:00,320
And for starters, we can just lock the doors.

101
00:08:00,800 --> 00:08:08,870
And of course, we need to use my usufruct where I'm going to invoke the French doors, wants the component,

102
00:08:08,920 --> 00:08:11,320
renders my app component in here.

103
00:08:11,330 --> 00:08:12,870
I'm going to go with years of fact.

104
00:08:14,210 --> 00:08:21,230
Then I'll make sure that it only runs once, once the component renders on the initial render, and

105
00:08:21,230 --> 00:08:29,720
then we go here we futch and minotaurs and then of course we invoke it and we should see in the console

106
00:08:30,050 --> 00:08:30,800
the torch.

107
00:08:31,100 --> 00:08:38,810
Now, prejudice is not a function and of course, it is a response dress on my apologies response,

108
00:08:38,810 --> 00:08:39,280
Jason.

109
00:08:39,620 --> 00:08:40,760
So I want to invoke it.

110
00:08:41,090 --> 00:08:44,960
We should see in the console the aura that we're getting back.

111
00:08:44,970 --> 00:08:45,950
And of course there is.

112
00:08:46,290 --> 00:08:56,660
Those are my five doors now before we set up the torch with set torch function equal to the torch that

113
00:08:56,660 --> 00:09:01,010
we just watch, we can also place this and try and clutch.

114
00:09:01,310 --> 00:09:06,080
So that way, if there is some kind of error, at least we can display it again.

115
00:09:06,350 --> 00:09:09,200
Keep in mind that we have built in fetch.

116
00:09:09,560 --> 00:09:13,300
We're just talking about the night workers and Turrill.

117
00:09:13,310 --> 00:09:19,280
We talked about how we can actually look for different hours if we ever wanted to.

118
00:09:19,700 --> 00:09:23,000
And since I don't want to repeat myself, I'm not going to go over that.

119
00:09:23,010 --> 00:09:29,450
But as far as these network errors, if we would want to catch them, we can just go and try catch block

120
00:09:29,870 --> 00:09:36,020
and let's set up our own weights and the tri block like show.

121
00:09:36,320 --> 00:09:44,160
And let's also set up right away loading as far as an hour towards value, the one that is an empty

122
00:09:44,160 --> 00:09:46,520
array to whatever tours we're getting back.

123
00:09:46,880 --> 00:09:52,880
So here, let's go set loading to force and of course, we'll flip what we are displaying on the screen.

124
00:09:53,150 --> 00:10:01,010
And as far as the torch, we're going to go set the horse and also we'll pass in the torch that we just

125
00:10:01,370 --> 00:10:10,190
watched from the API and then in the block, we still need to set loading to force even if we have the

126
00:10:10,190 --> 00:10:10,550
error.

127
00:10:10,940 --> 00:10:13,540
So say here, false and line.

128
00:10:13,550 --> 00:10:17,030
As far as the error, I would just want your control log.

129
00:10:17,450 --> 00:10:20,090
So I'm going to go here with console log error.

130
00:10:20,480 --> 00:10:27,350
So we start with loading and then eventually, once we've got back to TORC and of course we set loading

131
00:10:27,350 --> 00:10:32,660
to force in both cases, whether we're successful or there is an error.

132
00:10:32,870 --> 00:10:39,500
And as far as our state value, well, we should see the aurora of five items.

133
00:10:39,710 --> 00:10:45,890
So now let me navigate back to my bigger browser window and now let's see.

134
00:10:46,910 --> 00:10:53,230
As far as the Iraq death tolls, if I navigate two components, notice in the beginning, this is false,

135
00:10:53,240 --> 00:10:56,630
but if I refresh, then of course loading will be true.

136
00:10:56,910 --> 00:11:00,530
Then once I've got the data, then of course it is going to be false.

137
00:11:00,800 --> 00:11:05,950
And as far as the stated value for my thoughts, initially it was an empty array.

138
00:11:06,200 --> 00:11:14,720
And then once we successfully fetch our torc beautiful, we have an array of five items since we set

139
00:11:14,720 --> 00:11:15,620
up the use of fact.

140
00:11:15,870 --> 00:11:22,460
Of course we're doing that on the initial render because we also had a dependency array and we left

141
00:11:22,460 --> 00:11:23,060
it empty.