The section we finished up handing handling validation around our form.
Now one thing you might have noticed in the last section is that now we seem to be getting some type
of warning in our con..
This is a warning that is being generated automatically by some tooling inside of create react up and
in particular it is complaining about the reg X that we just added to the validate e-mails not js file.
It's saying essentially you have some extra character inside that Reg X that is not strictly necessary.
And so again it's not really an error.
It's just a warning.
Now I understand that seeing warnings pop up in your console like this is kind of irritating sometimes
especially if you start to get several of them stacking up.
And so if you want to get this warning message to go away a very easy solution rather than trying to
find that unnecessary escape character is to go back over to email right.
X-Com find the each team L5 section and grab the rag X from that section instead.
So he had used the javascript one right here and that Linter that we're using is essentially complaining
to say hey you've got some extra characters inside of here that you don't need.
Now the HTL 5 right x is not quite as accurate as the javascript one that is existing right here.
But again this is an easy solution just to get the warning message to go away.
So I copied that Reg x.
I'm going to open up my validate e-mails don't just file inside of here.
I'm going to delete the red X at the very top and replace it with the new one I just copied and then
I'm also going to make sure that I get a semi colon on the very end of that Reg X as well.
OK.
So if I save this now when the app refreshes the warning message will go away because that other I X
doesn't have any unnecessary characters in it
and.
OK.
Good enough.
Yeah.
No warning message.
Everyone's happy.
All right.
So that looks good.
Now that our form is done we can start thinking about what we really do with the information in the
form and so recall we've spoken about this several times.
We've said once the user fills out all the information side the form we want to then kick the user over
to some new component called survey form review where they can have the opportunity to review all their
inputs before they send out the e-mail.
And really that survey form our view is their last chance to really kind of verify make sure that they
didn't make any big mistakes.
Now we need to kind of think a little bit about how we're going to somehow get a user from seeing the
survey form to seeing the survey form of view component instead.
So of course we only want one of these to be visible at a time.
Either you're editing the form or you are reviewing the form.
So I take a little bit of time to think about the different ways in which we might decide how to implement
this.
So we've got to serve a new component the very top and the survey you can done right now is showing
the survey form and very sure shortly it'll also be showing the survey for review.
And so essentially we're saying that there needs to be some decision making process inside of this survey
new component that decides which of these to actually show on the screen.
There's a couple different directions we can go with this decision making process right here and I want
to talk about some the different options because this really is a kind of critical area in the design
of redux and re-act applications.
Really it's a very easy place to get quite confused.
So again the issue here is we need to somehow figure out when we want to show the survey form or the
survey form review like how do we progress or change between those two.
Obviously you know we're going to the user click the button at the bottom of the form right or sane
Yeah you click the next button right here.
That's what advances you but I'm saying OK what does the next button really do.
How do we actually make a change to our component to show the other component on the screen.
OK.
So enough lead in.
So we've got three different very clear obvious answers are possible solutions to this and I'm going
to tell you right now that each of these three options right here certainly could be correct.
They might all be correct answers to the problem that we're trying to solve but I'm going to lay out
some of the pros and cons of each approach and you know can I leave it to you to decide whether or not
this is you know each of these is a good way to go.
Now of course I have a very strong opinion about going one direction but it's not necessarily the correct
answer.
There is a couple of very small ways in which we could tweak our application.
And by that I mean if we add it in some other features then all of a sudden one of these other options
might suddenly become more attractive.
So I'm not saying that we're going to make the right decision here.
I'm going to say we're going to make the best decision out of these three.
OK.
So let's get to it.
Inside of survey Do we have to somehow make the decision on which component to show on the screen.
Now the first option we can do the first option to toggle visibility between these two is to add another
route to react router.
We could make a new route that says rather than going to our current surveys slash knew maybe we'd have
a user go to like surveys slash new Slash review or something like that.
And when the user goes there.
OK fantastic let's show them the review screen.
Now this will be a very clear implementation.
It would be very clear to any future engineers were working on the project how they can somehow change
that review component.
You know things would be pretty easy pretty straightforward.
But the downside.
The downside is that if a user ever for some crazy reason took this link right here you know copied
it opened up a brand new tab pasted a link and then hit enter and then attempted to navigate directly
to the survey form or view component.
Now if that happens the user has gone directly to the survey form of view and completely bypassed having
to enter any information onto the form.
And so like best case the user would probably be presented with some type of empty page or empty form
and we would ask them Hey do all these inputs look OK.
You know everything on the screen would be empty because the user navigated directly here without first
providing some values inside of the survey form itself.
And so of course we could add some logic to this component and say hey if a user somehow forcibly navigated
to this component by accident but they have not provided any values then we should redirect them back
over to the server farm.
But you know hey that's that's part of the tradeoff here.
Yes it would work well to make the separate route but we would also have to put together some extra
code to make sure that a user actually belongs at this component and decide whether or not they need
to be kicked back over to the survey form.
So again I'm not saying that this is a good solution.
I'm not saying it's a bad solution.
I'm saying that is a solution with bro both pros and cons.
Now the next solution could be we could say that whenever user the next button inside of the survey
form maybe we update some piece of state inside of our redux store and say like OK the user has now
successfully filled out the first stage of this form.
We should now somehow progressed them over to the other one.
So words have some flag inside of our redux store.
Maybe we should make an action creator or reduce or you know really just do the whole shebang and have
that little reducer that single reduce or just decide whether or not a user should progress over to
the survey form or view then inside the survey new component we could pull in that little piece of state
we could look at it and based on that value the piece of state we can decide which component to show
on the screen.
Now again this is certainly a valid solution we could definitely go in this direction.
Absolutely.
But in going that direction we would have to you know make the creator make the action make the reducer
wire all the stuff up to the survey new component.
Again it's just a solution that takes a lot of extra code to implement.
Now the final solution and this is the one I'm going to recommend we go with of course because I put
it last is to add a little piece of component level state to the survey new component inside the survey
a new component maybe we have a piece of state called like show form review or something like that and
it would be a boolean either true or false if it's false then show the survey form.
If it's true then show the survey form a view and then we can update that little piece of state by passing
a callback into the survey form and a call back into the survey form of view and both those callbacks
would essentially just toggle that boolean value and allow a user to navigate back and forth back and
forth.
So I'm thinking about this solution now and I'm kind of thinking that there's really not a lot of downsides
to it.
Like we don't really have to write a whole bunch of extra special code.
Yes we do have to put together some component level state and side of Servais new.
Yes we do have to pass a callback down to survey form and survey form review but none of that stuff
is particularly challenging.
It also solves a lot of the issues that will really all the issues that we previously had around this
separate Raut thing where we had said that well there might be a risk of a user going to this second
component before they really should.
And so we handled this with component state Yeah that's not really an issue anymore because we'll make
sure that the form is first valid before allowing them to progress on so the user won't ever kind of
magically be able to force their way over to the survey form review.
Now you might be curious what's the big difference between the component level state solution here and
the redux state.
I mean you might be seeing there thinking Stephen.
I thought that we were using redux to manage all the state in our applications so if reason redux way
we can still have component level state what's what's the deal here.
The answer is yes we can certainly have both component level state and our global redux store containing
all the application All-State all of our application data as well.
They can both coexist inside of the same application to ever decide if you are working with some piece
of application data or some piece of application state that belongs in one of the other.
You know if you're trying to make a decision on where to put some little piece of data the rule of thumb
that I like to hand out as I like to say.
Do you ever expect to have any other feature inside of your application that expects to make use of
some piece of state.
So let's apply that question to our little form right here.
You know the current setup that we have this format here I want to ask you do you think there's ever
going to be any other feature inside of our application that even remotely cares about whether or not
the user is currently seeing the survey form or the survey form of view I'm strapped.
I'm scratching my head right now and I really can't think of any reason that any other component inside
of our entire application would really care about why or would really care about what one of these forms
or what one of these components the user is currently looking at.
Now sure you can think of some really contrived case you know I'm sure we could really kind of stretch
our brain and try to think of some imaginary case here but I can't think of any like very practical
reason that any other component would care about whether or not a user is looking at one of the other.
And so this would make for a great use case of component level state.
No other component cares about this little decision making process right here.
And so it doesn't really need to be in redux because it doesn't need to be shared with anything else
inside the application.
So that's the general thought process I have whenever I'm trying to decide between making use of component
state or redux application level state.
OK.
So this mind let's take a break.
When we come back we're going to make that survey knew we were going to make the survey form of view.
We're going to start to wired out to the survey a new and we're going to start to put to squint to start
to put together a solution excuse me that allows a user to toggle between these two components by using
component level state.
So let's take care of that in the next section.