All language subtitles for 9. Toast Module

Hey, guys.

In the last lecture, we did the cleanup in our code in this lecture will improve our error messaging.

So let's start what we have currently.

And if you sign up without any details, that is blank error US alert, it is not that great.

It's not a bad, though.

It's not just good enough for us.

OK, so let's improve it.

Let's open here in your tap and we will install a your package.

So what you are looking for is a package called The View that toast ification view dash dolls.

The fake funnel like it is, you will search it.

You should find.

Here it is.

GitHub repository view that notification or you can go to this npm here.

View that ossification app.

OK, let's see if we need to install.

The version of For Our Just Trade is a for a view to, as you can see here.

OK, let me take a look at these, these dates shall be also for a to trace some of their.

Using your tree, you should instead have your diversification of version two instead.

OK, so I was in the wrong package in the end.

So let's take care of your top certification aversion to will show you around.

Here it is.

GitHub dot com slash more on slash viewed ossification slash three slash next.

This is, of course, included also in the resources, but I am pretty sure you can find out by yourself.

OK, so let's see what we need to install.

Let's go down.

OK, let's go down and down here.

OK, so first, we need to start off guard.

Let's copy installation command here it one.

OK, let's go, Pete, let's get back to our terminology and open your tap here, and let's face it

here about it is we can take a look what we need to do.

OK, so they need to import those, they need to register it as a plugin.

Then they need to import cassettes.

OK, simple enough then, but we want to use it.

We will simply import to use dolls.

OK.

Nothing hard here to get to those interfaces will import to your stores.

OK, let's look at me east and I can call here.

Toast.

I am a toast.

OK.

Also looks simple enough.

OK, and you have different methods you can use.

You have a toaster, not even four.

You have also toaster sacks says you have toast error and so on.

OK, in this store, you can do it like this.

OK, I'll use a toast.

You've already straight.

OK, you will call it OK, also simple enough.

OK, let me see if we have a demo, here is a demo here, a live demo page so we can click here.

Let me see if that will be available here.

So the national certification don't matter.

Not to toot def Shout-outs.

Click here.

And that's how the toast looks like.

So we can see that I'm calling here this glass and toast and providing here this message.

And here are some couple of properties.

A lot of them are provided by default already.

OK, you can hear the topic looks like everything can set it up as you want, and this will generate

you how you should call your toast.

It is a success.

It is a default type, benevolent or sexist double click here.

On the right side, it will change.

You see the styles of Texas and message and some options and short tones and should be green.

OK, guys, so that's how it is, and now it's time for implementation, and I just was talking a lot.

So just let's implement this, I will go back and we just go simple step by step.

So we'll start in the installation.

Step up here.

OK, I find it very it was.

Here.

OK, so maybe will get to import those.

Let's get these this line here.

Let's go back to called.

Let's go to main lodges in Amando Jezreel import here.

Those that can import it, let's say here is up the road.

We can have it under the store at the post here.

OK, we'll use here is storage is there out there and use.

Uh, dozed.

OK, well, what we are missing, you see, is see us says, of course, because this is using its own

space, it's telling.

So it's in pursuit of certifications.

And Xia says, Go back here and let's paste it.

And there are WTO certification here.

You OK?

Perfect, so we have this now what they are going to do, guys will create a separate module for art

functionality.

OK.

So I will go to our modules in a store on the left side modules and create here a new module and we'll

call it Toast module.

OK, so toast dodges.

You know, it also jazz, you know, all this stuff would be all done before, does it export default

empty object?

Oh, it's right here.

Namespace to be true name space to be to make sure you're not making any typos here and it'll have your

actions will have the for now.

Does it to extend will ever action to display at the error message and action to display sexist message?

OK.

So the idea for a for a first let's the first one will be success or rather success like this, the

second a little bit better.

What you need to do in order to display the message, you need the message value itself.

So first is for context, second, just value a placeholder for it because I will be not using this

value.

Does that empty underscore?

And a second value will be the message.

The error message?

OK, and the same thing here, the error underscored a message.

In the examples I showed you in their GitHub, how we can get access to the toast is with a vote or

certification, a function called use toast.

So up here I will import here in the curly brackets to use toast.

You can get from the Bluetooth certification and they will simply ride your concert toast.

All right, and he will get your access to that, also use those, you know, like perfect.

Now you have your toast and you can now dispatch there, you can display the error and the access to

the functions called error and the success.

So in the case of a successive override, a toast dot success and you will write your message about

a message and a similar to the error, your caller here toast dot error.

Perfect now they have accents for success, and the startup's message is they can register a toast to

module in our main main module.

So in the starter folder index suggests let's import your toast module.

Import toast from modules toast.

And let's get here to the modules perfect.

Now they have access to it and we can do special elections.

OK, so let's do this better, the -- of Florida, beginning of envy, getting an error, so when

we are getting that or go back to your story, go back to your user touches and we are getting here

error in the catch.

Right.

So the other thing that I use the error to be the error message and what we can do next, we can simply

hear dispatch the error.

OK, so a comment here, and I will dispatch here, so we don't have here dispatch.

You can get a dispatch in the action itself so I can write your comment and from the context we can

get also dispatch like this and I can dispatch here new action.

OK, this will be maybe.

Maybe different as the previous dispatch that their dispatch and the initial specify here module.

Your action, so they are calling it the election, remember, in a toast module, they have an error

here.

OK, so you are dispatching toasts at your property value for the action, which is their error message,

error message.

And you need to specify here one more thing.

You know, specify here are there ought to be true.

OK, so I am specifying growth to be true, if you will, to divide this thing here growth through.

You will try to dispatch action those sorts error, but they would look for it for the action here in

this module, here in the user module bulb anymore, the route through you will look all of your other

modules and you will look for the toast module in also other modules for this action.

So make sure you need to be sure when you are dispatching actions from outside of your current module

that you will specify your property to be true.

OK, so now, guys, whenever you look at the Arrow Valley, you are registering and they will jump

to the catch block, you build this page here.

Action error with the error message.

This will go to your module is called error.

The error message you will receive here and you will call the function error, which will display the

top.

Now, I know it will be a little bit longer like short of changes go to.

Go to register to view and to hear as you watch there is processing, you're done.

OK, this can we can live here.

So for our dog, we'll be changing it.

But for error you definitely don't need because we are handling it.

So ed, we don't need the washer now.

That was the older of the changes.

We can save it.

Let's go to our browsers.

Let's go to our application refresh here, just in a case.

Let's click here to sign up and you should see here firebase that out.

Invalid email.

OK, so now we are displaying distilled messages.

OK.

OK, so that's how it works, we can we can continue the next lecture with more improvements of those

guys that want more explanations.

You can stay here.

So simply.

Well, what's happening here, but everybody's pitching ideas that they are calling the register election,

right, so a user of been calling register, obviously registering, it's failing because we don't be

able to provide any information.

So this is this is failing.

We are jumping into the catch and here we are dispatching.

So I volunteer a debugger to show you all right and the dose of the bucket right here.

Okay.

And that simple, I think what's happening.

Many of us sign up one more time, sign up and you'll see at our message, that's what you're getting

here, our message and venue of this particular error.

Like, here you are getting this error message here.

Firebase error and you are just going to hit that error, which will display this on the screen.

And that's that's basically it.

OK, let's start with this is the backyard, we don't need them, I am pretty sure now it's pretty clear

if the all clear feel free to ask.

I'll open, I have always provide you explanation as if you need so.

OK, let's go into next lecture, we'll be working on some of your things I hope to see with there,

guys.

Cheers.