OK, now we've got our own producers set up and we can see the values inside our store.
Let's go ahead and hook this all up into our form.
And the sign now, action as well.
So let's head back to our log informs so that we can make use of the Spatt so that we can actually sign
in user based on the values that they input into the form.
So what we need to add inside our log in form will need to get the dispatch.
Those will say constant dispatch equals use dispatch.
And what we also need to do, because the loading spinner never stops.
We've actually hooked this up to our button.
But the way that formic works is that when we do submits, the submitting status.
Is always that true?
And after our action is completed, it's down to us, to settlor submitting back to false.
So what we can do is, as well as passing the values to or from the submit method.
What we can also do is just add a comma after this.
Surround the values in parentheses because we're passing more than one parameter here.
And then what we can do is d structure the set, submitting property from formic.
And this gives us the ability to turn off the submitting status or set it to false.
After we've submitted our data.
So what we're going to do instead of console log in the values we're going to dispatch and we're going
to say sign in user and Dimmick and pass the values.
We get to sense the submitting flag and we're going to tell it to be false.
And then what we're also going to do is add in dispatch and we're going to close the model after we've
submitted the form and slam.
What we want to do is go to our NAV bar and instead of using local state to set the authenticated status,
will now be able to use our reader store.
To see if we authenticated or not.
So let's open up the bar.
And inside here, currently, what we're doing is using the local state for this.
So we'll remove this and what we'll do instead, we'll get our authenticated state from the store.
So we'll say contest and restructure, be authenticated and say you select her and then we'll go and
get our state and state dot auth from the store.
And obviously, we've removed the local state, so we'll remove this from Handal sign out.
And in fact, what we'll do is we'll move this completely as well as the history, and we'll handle
all of this inside the components itself.
Revel in passing it down as props.
So authenticated stays the same.
That's fine.
The sign out.
And the sets authenticated we can remove from both of our different menus and what we'll do, we'll
head over to our sign the menu.
And when we click on the sign out dropdown item, what we want to do is once again dispatch an action.
So let's remove sign out from there and we'll say Konsta dispatch.
Equals use.
Dispatch.
And in the unclick methods, we'll say, well, at a function and say dispatch.
And David can just say, Seim out.
User.
And at the premises now, we still want our user to be redirected after we've signed in.
And if we wanted to add an additional function into our unclick.
So two things happen instead of one.
Technically, it's possible.
It's normally easier to add a handler.
But just for the time being, what we'll do is we'll add the use history back in here.
So we'll say Konsta history.
Equals.
History.
And what we can do then, instead of just having a single action, what we can do is just open up some
curly brackets and then take out dispatch and cut and paste the insides.
This one, and let's try and tidy things up a little bit and move that down, and then what we can do
is say history, doc, push and pass them back to the home page and try and reformat things to line
this up a bit better.
So it is possible to add a separate function inside the unclick event, like I say, is normally cleaner,
tidier, better just to use a handler like we were doing earlier to do this.
But just to see it working.
I'm just adding it inside this particular dropdown for the time being.
And what we also want to do inside this signed in menu is displayed a current user's email address and
image instead of the static text.
So what we'll also do is we'll use this selector to get the current user from the off.
So we'll say current user equals use selector and we'll say state goes to State Star or.
And what we'll do, we'll specify the source image and we'll say current use, adult photo.
You are L.
And I know we've set this to a static image for now.
But that won't always be the case.
So just in case, we'll add assets and use it up PMG as an alternative.
If the user doesn't have a photo euro and fill text, what we'll do for the time being is set this to
the current user DOT's email.
And what we should find now is that when we do attempt to log in, we're going to populate the user's
email address as the content for the dropdown.
And we should be able to sort of fake our log in in a better way.
Let's just make sure we haven't left anything hanging behind that we don't need anymore.
We've got argues history inside here, and we can remove the use states as well from our nav bar.
And let's just go back to the browser and see how we're doing.
I'm just got to refresh the page.
And if I click on Log In, we get a form, of course, analysts can say, Bob, at test dot com and
we're not obviously checking a password, say anything.
We'll do.
And I'll click on log in and we get taken while we get technically logged in.
We can see the creative empt button and we can see the email address of the user in there as well.
And we can see the actions that we dispatched to the store with the current user.
And we did send the email and the password, but we're only using the email from what we sent to our
store.
So let's just make sure the sign out works as well.
And indeed, we get signed out and we get pushed back to the home page.
And what we also want to do, because I promise you, I get annoying very, very quickly, is having
to keep logging in every time we want to do something like create an event, because Lembo need to start
adding properly formatted email addresses and it will become quite irritating quite quickly.
So what we'll also do is we'll just go back to our Orff, which user and instead of the current user
being know what will do is set the email to Bob at test.
Dot com.
And the photo and the photo, you're all.
We'll just get to the same as we had down below and say assessed user PMG and we'll set the authenticated
state as true for the time being.
This will just save us from logging in every time.
As I promise you, it will get annoying very quickly.
And if I refresh the page, then we should stay as are logged in an authenticated status.
So that was quite a long section and we've reached the end of the forms section.
So what we're going to do is we can commit to our changes into to get hub.
And that's just clear this screen.
And what we'll do is we'll just take it ad period.
Get kibbitz dash m.
And we'll say end of.
Section seven.
And gets push origin, master and press button.
And we can wrap up this particular section with a short summary.