In the previous video, we saw how to get started with the components, so not yet.
If you look at the chart engine, you white dots.
On the left side, you can see customized urine and then the components of it yet.
And that are function functions you can see in that chart feed and that headed and also people say things
like these are all the props that you can use from the white dots that the top engine developers provide
it to customize your chat application in the way you want.
There are so many things like you can see the context, API function and API, even people such as honored
methods.
The sounds are when we are editing the message to see some animation of some kind of thing that invokes
a fully dressed API.
So this will need to be done in the pitch where you can see the how to like.
This is the last step of the project and see how the authentication thing, the login thing using sockets
that how to like what I do understand the error, code rate and everything.
So this is all you can check the documentation if you want to design your app and more like in your
own way, your customized customer customization and everything.
So now let us see.
The next step that in the short film, writing code for the short film and we open, we've got to go
inside inside the cockpit.
Now, as we created everything, we can import them.
I'll be importing all the components.
But my message from.
And then importing their message also.
First message from.
So now no need to cancel.
And I said you can check whether inside to inspect element and open the console and check the object's
position, as you can see, we are getting all the information that we want from that chart, like the
chart in the charts that are present.
Since there is no chart present, the value is null and then everything like you can use whatever kind
you want, username and the user secret we can encrypt them using.
Then one when variables are passport and there are many areas.
So this is out of the topic, so we are not going to discuss it.
Is you can see what we are getting.
If you have never been to any any step, the basic way to sort that out is that cancer it.
So we're not.
If you don't understand the variable what the variable is hiding or what the variable is starting,
just cancel it and see what it is, what is happening.
So this is basically what the developers did.
They just cancelled whatever they don't understand.
So now as we got the props and the structure them.
Oh, only the information that they want, but basically you can do the restructuring of the object
in this fit.
I want the charts present, the active chart present.
Username, any messages of the user?
So these elements I'll get from props.
So after that, you can start inside, you can get it constant.
If there are jobs present, then it will.
Run this line of code.
From the charts, it will take back to active duty.
So what this line that is creating a culture of culture, if charts is true, then this line of code
will execute.
And then watch it in the charts of activity chart, the chart that they use that is currently that we
are starting and said, Chuck.
OK, so after this, we can create a function called alert messages.
So we're creating a constant court case in which I store the keys off messages.
That means every message you will have a certain unique key so that I'll be storing inside the keys
object means it's referring to the current object.
So long as you do that, you can basically return those keys, you can use the map function for those
keys.
So the parameters will be key and in next.
So what they should return?
So their spiritual return.
We will not be in this.
So it should return the constant message, it should store the messages that the key has.
So when we are mapping through the key, we'll get a key link for the first message.
There'll be a unique key.
For the second message, there'll be another.
So now we'll be shooting them.
Mess it up that, you know, foreign policy, so this contains a single message, so I will be letting
the messages.
He.
So what that's going to give is, though it will store the message of that particular tree inside a
Pakistan called residual.
Every time the new principals start, every time.
So that is how it works.
And then.
Last message focused on the last message.
So carefully look over there will be writing some logical.
If index is equal to zero.
Then when we started now, that means that there is no lasting effect.
Otherwise, we'll be storing them.
Last message in next minus one.
So index gives the value of the key as we are taking in the barometer, so this is how we can get the
last message.
And then.
Is my message.
That means I said, do we want to differ from the message to our message will be using the basic principles
like our messages will be on one side and the message will be another side.
So how to check whether it is our message?
So basically username.
Matches the message box and under them.
Sanders is an.
Something, well, we're going to do it so that this we completed the story off message last message
again, checking whether this will return a Boolean, whether if it if it's equally valid and true,
and this will contain a Boolean, whether true or false.
And then after that, you can return.
This is basically the message of administering all the material of that particular job.
So what will be rendering is will be rendering native.
Oh, it is not working.
So instead, the two will be having a key.
He basically contends the.
Message and messaging.
Amazing, the toilet operator for the extraction of the data.
Index for this will be the key of that division.
And we'll be having some custom style.
It will be 100 percent.
Now, the new and now inside this new will be having a message blocked.
So the to check whether it is my message or not, as I do, is my message will contain the bullion.
So if it is true, I should render my message if it is not true.
I have never read receipts.
So I will be writing forward for that.
If.
It's my message.
Is my message.
Then I'll be rendering my message component.
This should be self self-closing time.
Yeah.
So if not.
Then I should read them their message if it is not my message.
Yeah, so with this.
That there will be complicated.
So I'll be sending some props already ready to use my message out there measures we need to have me
say tonight, so I'll be sending the prop off message that will be a message.
The current message.
And then similar deal, and he had bad message.
There should be a prop sending message.
And also represented the last message, if it is their message, we want to know how many messages this,
and so that's why we'll be sending the last message with the help of the last message.
So in the messages, society will be searching for that message with last message.
So this is how it should be done.
So once this deal is completed, we can read receipts, we can build up the four leaderships.
So this day will have a custom styling.
First time will be should be our objective.
That's why I will be using double parentheses.
And the margin right should be.
Margin, right, should be.
If it is my message, it should be 18 pixels.
Otherwise, it should be zero, because that's it for display and message solvable if it is my message.
Oh, it should be 18 percent, so this is basically this big since I have picked the correct values
that will suit based on different permutations and combinations to plan a better return.
Otherwise it should be zero pixels.
You know, pictures.
And then the margin, right?
So the margin left.
Margin of the same thing, if it is my as it should be zero because it's either IP68 since.
It is my message.
It should be, you know, since.
And the right fit should be 68 pixels.
Basically, this is done by trying to pick the best values for you.
So we have done with the research once this deal is closed and closed the other day.
And keep the.
The closing does so, yeah, so with this, we have completed the randomized just.
Function, so what is the next step?
So next step is we have to return the them that we want exactly right.
So the First Division class name will be.
Chatfield.
Then the next day will be job title containers.
It is basically the basic guarantee as a sponge that you can understand quite easily.
And instead, the chart that you can determine over the weekend chart by the.
COVID-19, the job title would be having the title of the job, right?
If not, if there is some chart, if there is some chart present, like already the users are charting,
then we want to see the title of the chart.
So this is all we can do that.
Or we can solve that, this do we can have the subtitle.
That's a of.
And instead, we'll be having some logic shortly.
Say after that, after this, we'll be calling them in their chalk messages, so this will render all
the messages of that particular fit so we can call the function.
And that message messages.
Yeah.
Put it after this, finally, we should have the message from to send a message.
So I have a personal.
And the style.
I will be 100 pixels.
Now.
So this should be a self-closing.
And after that.
So basically, this is this we are using our height of honor to of because to give some gap between
the message of stock fit and then the message form that we are going to build up soft, there's this
will be using a message from container.
Message from.
And Dana.
So in Chad this weekend, Paula.
Component message from component.
Hedge fund will be sending all the props using the spirit operator.
And also the chart I.D..
With the props that are previously existed have sending the new prop that is the chartered.
There's sending that gift.
So it is basically the basic version of our chart, this is ready the chart.
So that there are some more steps like we have to use this, we have to build that and then read receipts
function that we used on.
Apart from that, everything is done.
And then in the next year that save the remaining portion of the chocolate and also the message and
my message components.