Beautiful, and I'll start implementing the register user functionality on our frontend, and I'll start
with the entire setup where where we have initial state in the app context, I want to set up user token
and user location for the first two hours.
There will be no online user location will be equal to an empty string run in the actions jazz.
I want to create following actions, register user begin success and error, meaning it's going to be
registered users begin register users success and hopefully you see where I'm going with it.
As far as the values, it's going to be equal to an exact same string value.
So this is going to be my variable name and learn value will be exactly the same just set up as a string.
And this is going to be the case for rest of the actions that I want to set up the imports introducer
as well as our context, both of them and not in the app context.
Let's set up a structure for our function.
The name will be registered user who's going to be looking for one thing.
It's going to be working for the object where it will have all the data about the user, meaning the
one that is being provided in the register function name, email as well as the password.
Three things.
And for now, I just want to log it.
That's it.
Pretty straightforward.
I'm not in the registered address where I have the submit handler right after the commission, where
I check for empty values.
I want to set up a new object, current user, like I said, it's going to be an object with these values.
So essentially, this is what we'll be passing in in the register function.
And then I want to set up another condition where I'm checking for years member, because if you recall,
we have two options.
The user is a member or he or she wants to register.
And like I said, eventually we'll set up that commission where I'll check the local registered just
states.
Value is member, and if it isn't a member, eventually we will call log in user, which we're going
to set up in the second, meaning once we're done with the register.
But if the user is not a member, if this is false, then we invoke registry user.
And what are we doing here?
Well, we passed in the current user.
And lastly, in the registered address, what I want to do is use is loading.
So essentially, once the loading is true, which is going to be the case when we are in the middle
of our fetch request with the submit button is going to be disabled.
That's it.
That's all we have to do.
And in react, we can do that by using the disabled attribute.
And if it's loading as true, which is again coming from our state run button will be disabled.
And if it's not true, meaning if we're not loading, then it's not going to be disabled.
And once we're know what we're going to be doing, why don't we start in a dashboard where I want to
remove this dummy code, but it's really no use cash for it right now.
So let me just go here with everything green and I don't know.
We might re-use the use of fact.
I'm not sure.
And then let me navigate back to my app context.
So that's the first thing that I want to do is to add those values to my initial state.
Now what values am I talking about?
I'm going to go with user.
No.
Then I also want to add tokenized, though.
And lastly, I want to go with user user location, location, and I want to set that one up as a empty
string.
So those are my default values.
Then we want to navigate through the actions over here, and then let's set up those three actions.
So we're going to go with export consent and then let's go with register on the score user and begin.
Like I said, the value will be exactly the same as is my variable name, the only difference it's going
to be set up as a string.
And then I'm going to go with my two cursors copy and paste, and now we're just going to remove and
we'll go with success.
So this is going to be dispatched if we're successful.
And then the last one will be if we have the error.
Now let me save this one properly here and now what I want to do is go to my reducer and not import
that one.
So right after this one, we're going to go with registry user began.
Where is their user success and then register user error?
And I don't know.
I think I'm just going to copy and paste and then set it up in context.
I really don't see the difference.
So let me navigate here again.
We're looking for reactions.
Copy and paste.
And now it's set up that structure for the function.
Essentially, I want to set up that registered user that is going to be looking for my user object.
I'm going to go below my clear alert and what I want to set up is const register user.
That's the function name.
It's going to be interesting because we'll make a fetch call and then let's go with current user.
So that's the object that we're going to be passing on for time being, since we're just setting everything
up.
We're going to go with current and user.
So now I'll take a look what I see in the console correct now.
It goes without saying that I do want to explore that.
So like I said, I'm not going to be including that step in the actual arena me because I find that
self-explanatory.
And then where I have the register and the sound of this will be a little bit of an issue where, I
mean, I cannot stand the fact that I have so many times open as well as so many files over here.
So you'll see me probably a lot during this where I clean out my tabs as well as the files that are
open because again, I'm just OCD that way.
So let me go back to my client here and source on looking for pages, looking for a register.
Mm-Hmm.
Yes, I do want to read me, though, because that's going to be important.
I might want to showcase some stuff here and there.
So back in the register, what are we doing?
Well, we have pretty much all the imports.
What we don't have is a registered user.
Correct.
So a registered user and as a sign out, you know, it can navigate here to register just so I can see
everything.
And then, uh, I mean, we have a bunch of warnings in a console.
Don't worry about that one.
Let's keep on scrolling.
And like I said, once we're done checking whether one of the values is empty.
And if that's the case, we invoke this play a lot.
Now set up that user where I want to go with concert and non current user front user and not one is
equal to what?
Well, you have here name, email and password.
So we're pretty much don't need to do anything.
We just say that there's going to be an object and then these are going to be our properties.
Name, email and password.
And then let's set up that condition.
So if it is a member, then we'll invoke logging.
Correct.
And as I say, you know what?
I don't want to see those warnings, so I'm just going to uncheck it where I have the custom levels
and we can clearly see what we're looking for.
Now back to our main topic.
What do we want to do here?
We want to check if the user is a member, then eventually we'll go with logging user, something we
haven't set up even on a server yet.
So that is still coming up.
So let's say here is member and for time being another silly console.log where I'm going to say already.
Already a member.
OK.
Beautiful.
And if it's not a case, then we'll go else.
And now I want to go with a registered user and let's pass in that current user.
So if everything is correct, once I click on a register, provide all the values and then click on
Submit, we should see that user object in a console.
And before we do that, let me just scroll down, look for my submit one and then remember of the attribute
name was disabled and that is equal to my is loading.
So if it's going to be loading, it's going to be true.
So we won't be able to click on a button annual clearly say that once we make the fetch request, just
at the moment, we haven't set up any functionality in reducer where we actually toggle the loading.
So that is still coming up.
And if we're not loading, well, then we can use the button.
And what is the default value for?
Is loading?
Well, that one is false, correct?
So let me go to a register.
Then with me out here, John and John gmail.com online, let me provide some kind of password.
And if everything is correct once we click on Submit.
Check it out now in a console.
I see all of the values.
Now, if you want to quickly test that out, is loading.
Well, just navigate to the big screen.
So I'm going to go here.
I'm going to go look for local host.
Three thousand.
Then we're going to go for register, and once you're in the register page, simply go to the components.
And what we can do in the app provider we can toggle.
Correct.
We can go with is loading.
And then let's set it up as true.
So what you'll notice right now is the fact that we cannot click on a button.
So that's why there is no alert over here because we even have the cursor displayed that we cannot click
on a button.
And the goal for this is following where as we're fetching, I don't want the user to keep submitting
the values and in return, keep making those requests.
So while we're still in flight of our register or logging request, the user won't be able to click
the button.
We're done with register users set up.
So now let's talk about the library we're going to use in order to make our fetch requests.