So knowing this video will finish up the the all the left will basically finish the project, will finish
the coding part of the project and in the next which is the locks to see the overview of the project.
So we'll see the work in court of the cellblocks component.
First thing, we are having a search input from the user select search input.
So this search input will be distinct, which is present inside.
Once we log in.
So once we click on log in, then it will logging.
Since I'm using the anonymous log in, then I'm not getting my image and everything, if you click on
lower to log so you can follow this project, you can also use your Gmail.
If you use the Gmail log in, then you will get this off your profile name and also the name of your
user beside that.
So this is then what?
OK, the tech.
Now, blog, you are on this blog, you.
I said there will be API endpoint, so this until here.
Until here it is the being born until before.
So now after this, we're having the parameters such is a parameter for search, but I'm going to be
it because the question mark.
So the search parameter has a key value pair call Q.
So Cuba will be the value.
On what basis the database of that baby, I should fix the data for us so that you the Cuban searching.
So we want the database on tech.
So if you want to check, you can remove the search and put this click on photos.
And then you refreshing and loving.
He can directly see your getting the data out of sports.
OK, you're not getting the tech, even notice that you're not getting the picture.
So to make it dynamic, that's why we are using this coaching to make it dynamic for the user to avail
the use of the feature for searching the data based on his interest.
We're giving this cue will be to send a JavaScript object and send a string.
We'll be using this kind of codes so that we can use our JavaScript object.
So it is touch input sensitive, a JavaScript connection.
You can have a Dolev symbol that will be done right.
OK.
Next, we're using the dispatch function as you are familiar with it now, right?
We'll be using the for this blocks.
This block will have the date of the blobs that we are getting from that API and also the set blocks,
which will be used to change the value of these blocks are not known.
Exactly.
This will be like if you refresh it, though if you log in.
Then you can see, for instance, you are getting blogs floating rate.
So for that will be using this floating and secretary used to attribute to and use effect here.
Basically, you made me lose use effect.
That is the question.
First thing you have to remember.
Use effect will have two parameters.
One will be the court to what it has to do.
Second thing will be on what condition it have to perform the first argument.
So the second Bush will continue will consider the second parameter it is searching for.
So it will if it's taking the search input.
So what it can do is whenever the search input changes, it will perform the focus better.
That is distinct Xia's and everything.
So whenever the user is changing the search input, then what it is doing it is fetching the data.
Using the Xia's Xia's not get it is sending this you warrant.
And then based on that, you are also sending it will return our response.
We are dispatching that response to send blog data response, not data cellblocks blocks to respond
to that sector.
Settling is false so that we don't see any more that loading thing.
If there is an area they will control so they know that the searching part is changing, it can fetch
the data.
It will show the data on click so they never know.
The user is like, you know, clicking on the search.
OK, then you will change this event, perform this and then it will be presented to the user on the
block.
That is what this user is used for.
And then here is the general coding will have blogs, loading and everything.
If if the loading is true, they will have this loading thing.
Otherwise, we'll will have a blog.
All the blogs will appear.
And then.
This is important.
This is what we have to focus on.
So, OK, we are getting the blogs data from Axios using the use effect whenever they're searching for
testing.
So now the data is a JavaScript object, which contains many items so as you can see in the documentation
we saw.
I show you.
Yeah, you saw that a total three thousand to thirty two thousand seven articles.
So as you keep on scrolling, you are reading on a few of them.
OK, so why this is happening?
This is because here.
Here we are mapping it.
That means we are only slipping a few articles and then we are using performing a for loop on it and
printing only those articles.
OK.
So as you can see, this map function will take this job blogs, dark articles, JavaScript object,
it will map all the items present in this object and each item in each and every iteration item will
be colors block.
So when we get the blog as we are then having this court, this is basically the email contact.
You can see that the anger tag of blog.
You add in the image source for blogging, managing the division where we can see the source name,
the blog that is not named blog that published that blog, the title blog, that description we have
these things we are getting from.
As you can see in the documentation, we are having a title description content to our image published
at source name and you are so through this we are getting this or we are fetching the data and then
we are printing it in the required manner for us.
You can see you are printing the data, that description published and this is the published date,
that image and everything.
So how we are getting this, we are getting from the blog that are using that use now we can see this
is styled in a beautiful manner.
The styling is done using the blogs, not CCIs.
You can see here everything.
The poll you can check if you have any doubts, you can refer to the documentation.
And then.
Here.
If there are no blocks.
So, for example, the block or not, because I feel that there is nothing to render.
So then what we have to do if the blocks that allotment is equal to zero, then what will what will
put in this will print no blogs available, so it's something else to read blogs on the British flag.
Let us try an example.
For example, I'm giving some random text you click on Search.
See, there is no data.
That's when it's giving more blogs available.
But if I give some voice.
And people on such can say, I'm getting some data on that given text that is movies, so this is how
we can perform.
So to have an overview of this blocks, we are basically fetching the data, using music, using vaccines,
we are getting getting that we are sending the request.
In response, we are getting the blocks data.
We are storing that inside this blocks variable.
And then whenever the user is silent, then we will load these blocks component.
As you can see, the Mediterranean approaches here when the unit is signed and then we are entering
the blocks component.
If it is not signed in, only now button on page will render.
So this is the thing that we made a change in address.
You can see we are basically having all data.
We are showing the blocks data in the way that we want, whether it should be a major division or a
hedge one, two, three or paragraph.
And based on the styling that you give, it will be visible in that fashion.
There are no articles.
We'll just print it.
So this with this, we have completed the page.
So we'll have just a quick, you know, a glance on this page.
So he should add, this will be on a page, a now button on page and then when you click with log in
with Google and.
See here, as you can see, when I'm taking a log in, I'm getting some open pop up that will show all
the accounts that your computer has.
You can click on them when you click on them to log in with that account and you can see I imagine the
name, but the yellow, I don't do anonymous issues.
I should I.
I should not reveal my name.
That's right.
I'll be using this symbol and not not knowing no name will be.
That's why I'm clicking on the X button whenever it's popping up.
So it will open and then you can see the now, but on the blogs, the attack since there is a default
value take, that's it.
It is the default guarantee blog news so you can click on the blog and it will take you.
But that blog, where the blog is present and all you can read everything related to that blog.
So with this, we have completed the project.
In the next week, you will see with our recap from start to end, what we did in the project.
OK, see you in the next week.