1
00:00:00,270 --> 00:00:06,870
So knowing this video will finish up the the all the left will basically finish the project, will finish

2
00:00:06,870 --> 00:00:11,190
the coding part of the project and in the next which is the locks to see the overview of the project.

3
00:00:12,420 --> 00:00:15,840
So we'll see the work in court of the cellblocks component.

4
00:00:17,030 --> 00:00:20,990
First thing, we are having a search input from the user select search input.

5
00:00:21,590 --> 00:00:24,740
So this search input will be distinct, which is present inside.

6
00:00:25,130 --> 00:00:25,980
Once we log in.

7
00:00:26,000 --> 00:00:28,550
So once we click on log in, then it will logging.

8
00:00:30,660 --> 00:00:35,310
Since I'm using the anonymous log in, then I'm not getting my image and everything, if you click on

9
00:00:35,310 --> 00:00:39,120
lower to log so you can follow this project, you can also use your Gmail.

10
00:00:39,120 --> 00:00:44,310
If you use the Gmail log in, then you will get this off your profile name and also the name of your

11
00:00:44,310 --> 00:00:45,330
user beside that.

12
00:00:45,930 --> 00:00:46,920
So this is then what?

13
00:00:47,430 --> 00:00:48,420
OK, the tech.

14
00:00:49,460 --> 00:00:51,950
Now, blog, you are on this blog, you.

15
00:00:52,460 --> 00:00:55,790
I said there will be API endpoint, so this until here.

16
00:00:57,160 --> 00:00:59,440
Until here it is the being born until before.

17
00:00:59,980 --> 00:01:07,480
So now after this, we're having the parameters such is a parameter for search, but I'm going to be

18
00:01:07,810 --> 00:01:08,950
it because the question mark.

19
00:01:09,520 --> 00:01:12,760
So the search parameter has a key value pair call Q.

20
00:01:13,850 --> 00:01:16,250
So Cuba will be the value.

21
00:01:16,790 --> 00:01:23,540
On what basis the database of that baby, I should fix the data for us so that you the Cuban searching.

22
00:01:23,780 --> 00:01:25,280
So we want the database on tech.

23
00:01:25,640 --> 00:01:31,370
So if you want to check, you can remove the search and put this click on photos.

24
00:01:33,410 --> 00:01:35,870
And then you refreshing and loving.

25
00:01:43,100 --> 00:01:45,830
He can directly see your getting the data out of sports.

26
00:01:46,100 --> 00:01:48,910
OK, you're not getting the tech, even notice that you're not getting the picture.

27
00:01:49,520 --> 00:01:57,260
So to make it dynamic, that's why we are using this coaching to make it dynamic for the user to avail

28
00:01:57,260 --> 00:02:00,830
the use of the feature for searching the data based on his interest.

29
00:02:01,280 --> 00:02:06,590
We're giving this cue will be to send a JavaScript object and send a string.

30
00:02:06,590 --> 00:02:11,300
We'll be using this kind of codes so that we can use our JavaScript object.

31
00:02:11,300 --> 00:02:14,000
So it is touch input sensitive, a JavaScript connection.

32
00:02:14,390 --> 00:02:17,980
You can have a Dolev symbol that will be done right.

33
00:02:18,590 --> 00:02:18,800
OK.

34
00:02:19,520 --> 00:02:22,360
Next, we're using the dispatch function as you are familiar with it now, right?

35
00:02:22,730 --> 00:02:24,500
We'll be using the for this blocks.

36
00:02:24,830 --> 00:02:30,110
This block will have the date of the blobs that we are getting from that API and also the set blocks,

37
00:02:30,110 --> 00:02:34,310
which will be used to change the value of these blocks are not known.

38
00:02:34,310 --> 00:02:35,000
Exactly.

39
00:02:35,390 --> 00:02:39,740
This will be like if you refresh it, though if you log in.

40
00:02:42,780 --> 00:02:45,510
Then you can see, for instance, you are getting blogs floating rate.

41
00:02:45,980 --> 00:02:52,800
So for that will be using this floating and secretary used to attribute to and use effect here.

42
00:02:53,280 --> 00:02:55,650
Basically, you made me lose use effect.

43
00:02:56,160 --> 00:02:56,970
That is the question.

44
00:02:58,150 --> 00:02:59,230
First thing you have to remember.

45
00:02:59,320 --> 00:03:01,480
Use effect will have two parameters.

46
00:03:01,930 --> 00:03:04,210
One will be the court to what it has to do.

47
00:03:04,810 --> 00:03:09,190
Second thing will be on what condition it have to perform the first argument.

48
00:03:09,820 --> 00:03:14,500
So the second Bush will continue will consider the second parameter it is searching for.

49
00:03:15,040 --> 00:03:16,780
So it will if it's taking the search input.

50
00:03:17,500 --> 00:03:23,280
So what it can do is whenever the search input changes, it will perform the focus better.

51
00:03:23,530 --> 00:03:25,630
That is distinct Xia's and everything.

52
00:03:26,320 --> 00:03:30,940
So whenever the user is changing the search input, then what it is doing it is fetching the data.

53
00:03:30,940 --> 00:03:34,210
Using the Xia's Xia's not get it is sending this you warrant.

54
00:03:34,600 --> 00:03:39,130
And then based on that, you are also sending it will return our response.

55
00:03:39,490 --> 00:03:44,620
We are dispatching that response to send blog data response, not data cellblocks blocks to respond

56
00:03:44,770 --> 00:03:45,340
to that sector.

57
00:03:45,340 --> 00:03:48,100
Settling is false so that we don't see any more that loading thing.

58
00:03:49,250 --> 00:03:54,380
If there is an area they will control so they know that the searching part is changing, it can fetch

59
00:03:54,380 --> 00:03:54,860
the data.

60
00:03:55,580 --> 00:03:58,100
It will show the data on click so they never know.

61
00:03:58,140 --> 00:04:01,130
The user is like, you know, clicking on the search.

62
00:04:01,780 --> 00:04:08,360
OK, then you will change this event, perform this and then it will be presented to the user on the

63
00:04:08,360 --> 00:04:08,630
block.

64
00:04:09,500 --> 00:04:11,600
That is what this user is used for.

65
00:04:12,410 --> 00:04:16,550
And then here is the general coding will have blogs, loading and everything.

66
00:04:16,550 --> 00:04:20,820
If if the loading is true, they will have this loading thing.

67
00:04:21,260 --> 00:04:22,620
Otherwise, we'll will have a blog.

68
00:04:22,640 --> 00:04:23,900
All the blogs will appear.

69
00:04:25,120 --> 00:04:25,540
And then.

70
00:04:26,960 --> 00:04:27,890
This is important.

71
00:04:28,070 --> 00:04:29,450
This is what we have to focus on.

72
00:04:29,840 --> 00:04:34,730
So, OK, we are getting the blogs data from Axios using the use effect whenever they're searching for

73
00:04:34,730 --> 00:04:35,270
testing.

74
00:04:35,930 --> 00:04:41,840
So now the data is a JavaScript object, which contains many items so as you can see in the documentation

75
00:04:41,840 --> 00:04:42,530
we saw.

76
00:04:44,870 --> 00:04:45,440
I show you.

77
00:04:45,980 --> 00:04:50,870
Yeah, you saw that a total three thousand to thirty two thousand seven articles.

78
00:04:51,350 --> 00:04:54,080
So as you keep on scrolling, you are reading on a few of them.

79
00:04:54,260 --> 00:04:56,060
OK, so why this is happening?

80
00:04:56,570 --> 00:04:58,070
This is because here.

81
00:05:03,670 --> 00:05:05,230
Here we are mapping it.

82
00:05:05,590 --> 00:05:12,010
That means we are only slipping a few articles and then we are using performing a for loop on it and

83
00:05:12,010 --> 00:05:13,360
printing only those articles.

84
00:05:13,810 --> 00:05:14,170
OK.

85
00:05:15,240 --> 00:05:21,200
So as you can see, this map function will take this job blogs, dark articles, JavaScript object,

86
00:05:21,210 --> 00:05:27,840
it will map all the items present in this object and each item in each and every iteration item will

87
00:05:27,840 --> 00:05:28,620
be colors block.

88
00:05:28,980 --> 00:05:33,360
So when we get the blog as we are then having this court, this is basically the email contact.

89
00:05:33,360 --> 00:05:36,870
You can see that the anger tag of blog.

90
00:05:36,880 --> 00:05:41,400
You add in the image source for blogging, managing the division where we can see the source name,

91
00:05:41,400 --> 00:05:47,330
the blog that is not named blog that published that blog, the title blog, that description we have

92
00:05:47,460 --> 00:05:48,630
these things we are getting from.

93
00:05:48,630 --> 00:05:52,950
As you can see in the documentation, we are having a title description content to our image published

94
00:05:52,950 --> 00:05:58,020
at source name and you are so through this we are getting this or we are fetching the data and then

95
00:05:58,020 --> 00:06:00,960
we are printing it in the required manner for us.

96
00:06:01,560 --> 00:06:05,930
You can see you are printing the data, that description published and this is the published date,

97
00:06:05,950 --> 00:06:06,990
that image and everything.

98
00:06:07,530 --> 00:06:14,340
So how we are getting this, we are getting from the blog that are using that use now we can see this

99
00:06:14,340 --> 00:06:15,690
is styled in a beautiful manner.

100
00:06:15,690 --> 00:06:18,470
The styling is done using the blogs, not CCIs.

101
00:06:18,490 --> 00:06:19,620
You can see here everything.

102
00:06:20,550 --> 00:06:23,760
The poll you can check if you have any doubts, you can refer to the documentation.

103
00:06:24,780 --> 00:06:25,260
And then.

104
00:06:26,680 --> 00:06:27,100
Here.

105
00:06:28,400 --> 00:06:30,260
If there are no blocks.

106
00:06:30,890 --> 00:06:35,180
So, for example, the block or not, because I feel that there is nothing to render.

107
00:06:35,690 --> 00:06:41,450
So then what we have to do if the blocks that allotment is equal to zero, then what will what will

108
00:06:41,450 --> 00:06:45,840
put in this will print no blogs available, so it's something else to read blogs on the British flag.

109
00:06:46,700 --> 00:06:48,650
Let us try an example.

110
00:06:48,650 --> 00:06:51,860
For example, I'm giving some random text you click on Search.

111
00:06:52,640 --> 00:06:53,600
See, there is no data.

112
00:06:53,600 --> 00:06:55,340
That's when it's giving more blogs available.

113
00:06:55,910 --> 00:06:58,330
But if I give some voice.

114
00:06:59,500 --> 00:07:07,540
And people on such can say, I'm getting some data on that given text that is movies, so this is how

115
00:07:07,540 --> 00:07:08,410
we can perform.

116
00:07:10,020 --> 00:07:15,320
So to have an overview of this blocks, we are basically fetching the data, using music, using vaccines,

117
00:07:15,330 --> 00:07:17,550
we are getting getting that we are sending the request.

118
00:07:17,730 --> 00:07:19,440
In response, we are getting the blocks data.

119
00:07:19,860 --> 00:07:22,320
We are storing that inside this blocks variable.

120
00:07:22,770 --> 00:07:28,410
And then whenever the user is silent, then we will load these blocks component.

121
00:07:28,740 --> 00:07:34,380
As you can see, the Mediterranean approaches here when the unit is signed and then we are entering

122
00:07:34,380 --> 00:07:35,310
the blocks component.

123
00:07:35,580 --> 00:07:38,730
If it is not signed in, only now button on page will render.

124
00:07:39,330 --> 00:07:43,770
So this is the thing that we made a change in address.

125
00:07:43,770 --> 00:07:46,290
You can see we are basically having all data.

126
00:07:46,290 --> 00:07:51,330
We are showing the blocks data in the way that we want, whether it should be a major division or a

127
00:07:51,330 --> 00:07:52,920
hedge one, two, three or paragraph.

128
00:07:53,280 --> 00:07:56,250
And based on the styling that you give, it will be visible in that fashion.

129
00:07:56,520 --> 00:07:57,420
There are no articles.

130
00:07:57,420 --> 00:07:58,170
We'll just print it.

131
00:07:59,190 --> 00:08:01,950
So this with this, we have completed the page.

132
00:08:02,340 --> 00:08:06,750
So we'll have just a quick, you know, a glance on this page.

133
00:08:07,140 --> 00:08:12,090
So he should add, this will be on a page, a now button on page and then when you click with log in

134
00:08:12,090 --> 00:08:12,720
with Google and.

135
00:08:14,060 --> 00:08:19,210
See here, as you can see, when I'm taking a log in, I'm getting some open pop up that will show all

136
00:08:19,210 --> 00:08:20,500
the accounts that your computer has.

137
00:08:20,500 --> 00:08:24,700
You can click on them when you click on them to log in with that account and you can see I imagine the

138
00:08:24,700 --> 00:08:27,670
name, but the yellow, I don't do anonymous issues.

139
00:08:27,670 --> 00:08:28,240
I should I.

140
00:08:28,450 --> 00:08:29,620
I should not reveal my name.

141
00:08:29,630 --> 00:08:30,100
That's right.

142
00:08:30,370 --> 00:08:34,170
I'll be using this symbol and not not knowing no name will be.

143
00:08:34,180 --> 00:08:37,930
That's why I'm clicking on the X button whenever it's popping up.

144
00:08:39,150 --> 00:08:44,490
So it will open and then you can see the now, but on the blogs, the attack since there is a default

145
00:08:44,490 --> 00:08:45,670
value take, that's it.

146
00:08:45,750 --> 00:08:51,720
It is the default guarantee blog news so you can click on the blog and it will take you.

147
00:08:51,730 --> 00:08:57,510
But that blog, where the blog is present and all you can read everything related to that blog.

148
00:08:59,360 --> 00:09:01,100
So with this, we have completed the project.

149
00:09:02,100 --> 00:09:06,840
In the next week, you will see with our recap from start to end, what we did in the project.

150
00:09:07,110 --> 00:09:08,900
OK, see you in the next week.