Original subtitles

Hi there, welcome back in the annual lecture in the previous one, and they have talked about the composition

and we have created for the composition of functional use, register in this lecture will continue with

the composition and it will create rather more functional.

OK, let's start.

Let's go to register Dot View and as you can see, there it is there.

A composition and function is not that useful because we are using register only in this page in registered

view.

So let's try to create a compositional function that will expose some state we can also use in other

pages.

We will start with our consulate property, as we have in the register.

You have your error and its processing, but of this consulate property is going to be separated into

the composition function and we can use them also in other pages because any processing we can also

use, for example, in the log in page, you will change the structure of our state, but I will talk

about this later.

OK, so there will be refactoring a little bit differently light there for now.

Just create a composition function of these computer properties.

OK, so how can we be doing that?

We can go to our composition a folder and it will create here in your composition of function, the

call to use out right click here and a composition folder.

New file.

It's going to use out dodges and simply let's copy everything from user registered to use of.

OK, we'll of course, change your naming here.

We'll call it the use of.

OK, we will get her story, but from story, I will access the state so we can visit these contest

states or the state, or you can see the structure I state here and access this simply from a story

or simply a one liner.

You will on the front line right head state and it will distract you from a story and this will catch

you.

You all are of you state just like this.

OK, this is what gets me excited, but I would like to expose computer properties here.

They cannot be the same approach as we have in our in our components because in our in our components,

we can simply just specify computer computer properly, and this will give me access to compute it in

our composition function.

They need to approach it differently.

Generally, all of these things like a war, chest, computer properties and so on, you have access

to you have access in your component.

You have also access in your composition function, but you need to explicitly import this functionality.

So then I want to work here with a with a computer properties, I need to import them.

So your browser import Golay brackets and it will import your computer that from you.

And that's it.

Now I have access to computer properties and I can create are two comparable properties at all and is

processing so that your concert at our lesson here compare that and to the computer developed, provide

a callback function that will return your state of error.

OK, so now it's time to access the state from behind from your store.

OK, let's accept their state on the stadium will access your module.

We have a user module on user module.

They have a register property and on the register we have finally error like this.

OK, this will get the error of a copy and paste it on there and the next little bit is processing again,

communal property that is seeing the register Dot is processing.

OK, and then simply, we can return them, we can return here earlier and is processing, and that's

going to be.

Navigon can go to our use register to register and register to vote.

We can import the areas out import use out from dot dot slash composition, slash use out and then in

our youth in our setup function, we can on to stage, but be careful.

We are already returning user registers to combine it together.

You can wrap it in the curly brackets like this and you can this structure of the properties of a use

register their returned and you can write her comma and you can also get everything from a use out like

this.

OK, and we'll get you access to this to compare properly, so this way you can remove that computer

from here.

Simply remove them here.

That is where you need to also remove that important state because we are using here in upstate as well.

Now you can save it, and we'll have access to everything, we will have access to registries processing

and all these things.

But now, thanks to the composition of functions.

OK, let's say let's try it out with let's go to browser refresh here on registered page and yeah,

let's to sign up, sign up here we are blocking it.

Yeah, it's working.

You can see you are blocking the access to is.

All right.

But our effects of these working just great.

OK, you can try to also register, of course, successfully.

Yeah, if you want, we can do it.

I don't have how many tests the emails.

I'll create a table by the test.

Then at Gmail dot com username test, then password test.

Does the password test the sign up?

And I should be registered or.

OK.

Actually, there are no veterans there, so you can verify it into your fighter base if you want to,

I will go now to the fighter base to check it out with the pilots to use our 10.

Case, Firebase.

I'll fast forward to my console.

And here it is, Test 10 user.

OK, so everything is or a kink we can, uh, display the issues when we have them, we can block the

buttons on the on a button that we that use for authentication.

And all of this is thanks to the computer properties that we have created now in our composition function.

Let's stop it here.

Let's continue in the next lecture, we'll be also talking more about the composition of functions,

and it'll be handling a lot of user experience improvements here.

So guys, that's going to be and I hope to see you in the next lecture, Oculus.