Our users now have the ability to review all their different inputs and they can freely go back and
edit them if they feel like they need to.
So we're not going to move on to one of the last steps in the form which is to put a nice big submit
button on here towards the right hand side that a user can click to actually submit all the different
values and presumably send out the survey.
So we're going to change back over to our survey form review view file.
Remember this is the one that shows the form and puts and allows the user to review all of them.
And then inside of here we'll scroll down to our return statement or we're going to add another button
inside of here that will go right after our current back button.
So right on that one I'll put my button tag.
This is going to be again the submit button right here.
Now I want to make sure that our user really understands that when they click this it's really the point
of no return.
Like when you click this button.
Hey we're going to send your survey out.
So I'm going to give it the text of send survey.
Hopefully that's going to make it reasonably clear to the users that yeah this is really it.
We're now going to kick your e-mail out to everyone that you designated inside the recipient list.
Now right after the text of send Servais let's also put a little icon on here just for a nice smooth
nice design elements.
We're going to give it a class name of material icons and right right of course is going to make the
icon appear to the right hand side the button.
Close off the tag.
And I'm going to give it an icon name of e-mail which is going to make it appear as just kind of like
a nice little e-mail looking thing you'll see what the icon looks like in just a second.
Now for the button tag itself we're going to give it a class name of green beauty and flat and right.
And I bet you can guess what each one of those do make it green.
Give it the flat design and pull the button to the right hand side of the screen.
So let's say this and see what the button looks like just kind of verify we're going down the right
path here.
When we reload we get kicked back over to the initial form let's put in our dummy inputs really quick
and OK so sensitive.
Yeah that's looking pretty reasonable.
You know I am noticing however that we've got white text on this form on these buttons but then black
on this one maybe looks kind of consolidate our coloring scheme here.
We're kind of going a little bit haywire between the two forms.
So on the yellow button.
Let's replace that dark.
Three are dark and three are it's not dark at all.
Let's just give it a white text class name and let's get the other button a white text class names.
Well let's see what this looks like.
Now the yellow might be a little bit too yellow so maybe we had that Darkon on there for a reason.
Let's check it out really quick.
Next.
OK.
So that's a little bit too yellow.
Yeah let's bring back the dark and three.
So dark and three.
OK.
And I'm not going to check it out.
I'm just going to have that wrong button.
We want it on the yellow one right here.
So dark in theory.
So again I'm not going to check it out per se I'm just going to assume yes we'll probably look pretty
reasonable and definitely consistent with the last page that we had as well.
OK.
So now back on track we've got a button being displayed to the user.
And now we want to make sure that whenever a user clicks on this thing it actually like does something
for us.
Right.
We want to make sure that's actually kind of like submit a survey or sends it out or something.
You know who knows what that step really is.
But we really want to kind of finalize this process and say it's time to actually make use of these
this new form inputs.
So remember with redux any time we want to make any type of change to how our applications data is structured
whatsoever we're always talking about an actual creator.
And so when we think about sending a survey here or creating a survey we are talking about changing
the state or the data inside of our application.
And so I'm immediately thinking to myself this is going to be tied to an actual creator because we want
to change the data inside of our app now.
Right now I don't really want to think a lot about what this action is going to do.
I just want to kind of create a scaffold for an action creator and hook it up to this component and
then we'll come back and think a little bit about exactly what we need to do inside that action creator.
So yeah maybe you can accept that we're somehow creating a survey it's going to change our data.
We don't really know how.
But let's just kind of like put the action creator together and then we'll come back and figure out
what actually needs to happen inside of there.
So remember how we handle action creators inside of our client as sarcy actions directory.
We find the index dodgiest file and then inside if you're scrolling down to the bottom and we're going
to create our new action creator which again don't know what it's going to do yet it's going to put
it together.
So I'm going to export Konst and we'll get the name of how about something like create survey and save
survey maybe submit survey maybe that will be the best one submit survey to make sure it's really clear
that we are submitting a new survey for creation.
So submit survey.
I'm going to assume that's action creators going to be called with all the different values out of our
form.
I don't receive that as an argument called values.
And then right now I don't really want to do anything with this whatsoever.
However for redux to work correctly it's always going to expect us to return in action or extend me
a object which is an action with a tight property.
So again I don't have any preferences on what the thing is doing but just to make sure that redux doesn't
crash I'm going to return an object with a type of submit survey like so.
All right.
So not doing anything with this right now.
I just want to make sure that redux doesn't attempt to throw an error on us so we've now got our action
creator put together.
Let's flip back over to our survey form review component.
We're going to import that our actions object at the top and then wire up to our component with the
connect helper.
So we'll say imports star as actions.
The words just give me all my different auction creators from up one directory that takes me to components
up another directory that takes me to source into actions and that's all we really need.
OK so now the very last step down at the bottom will you will find our next statement.
And then as the second argument will pass in our list of actions and then finally on our submit button
right here we're going to add on in on click handler to make sure that new action creator is called
with all of our different form inputs.
So whenever a user clicks this thing called the action creator which we called members submit survey
with our different form values which were passed into this component under the prompt name of form values.
Now if we just leave our coding here just looking like this right here the instant that this component
is rendered and the button tagged right here is inters executed by our javascript interpreter.
If I leave this statement just like this right here submit survey will be called instantly.
Because look at it it looks like a function call.
So in order for this thing to be kind of delayed in execution in order to say don't execute this function
until the user actually clicks on it we're going to wrap this with an arrow function like so.
OK.
Now one last thing a little bit of bookkeeping just to make sure we don't forget to do this very last
critical step we are making use of the Smith survey action Creator that is being passed in as a prop
to our component because we just wired all of our different action creators up in the K'NEX statement.
So don't forget we need to make sure that we receive this as a prop into this component.
It's going to scroll back up to the argument list right here and I'll make sure that I receive this
as a prop called submit survey like so OK.
So I think that we're finally ready to test this out.
Now again I don't really expect anything to happen per se.
We are not doing any large statements we're not actually creating any surveys really nothing whatsoever.
But I just want to test it out and see that we're kind of at least somewhat going down the right path.
So I'm back at our surveys.
New It looks like my browser already automatically refresh.
Put in my dummy data will hit next.
My button click it.
Yup nothing happens but at the end of the day that's actually kind of good because it means I'm not
getting any error messages.
OK.
So we've got our button here put together.
I think that we're going down the right path.
There's just a couple of issues I want to point out to you right now to kind of give us a little bit
of direction as we start to move forward from putting spun of course when we click on the button.
We want to actually somehow save this to our back and server right like that totally makes sense.
I want to save this to our server in some fashion.
I want to send this e-mail out to all of our different users.
So obviously we need to figure out what really truly happens when we click on send survey right here.
But we don't only want to somehow create the survey we also want to make sure that whenever a user clicks
on this button we actually also kick them back over toward dashboard route because obviously we don't
want them to click the button and just kind of like sit here staring at the screen.
We want to say oh OK we get it we are going to send your survey now and we want to kick our user back
over to the dashboard wrapped finally.
So that's kind of item too.
Finally there's one third thing I want to point out to you right now if I go back and I hit cancel and
then I click on the Add button down here again you'll notice that all of our different form inputs are
still visible on the screen.
Now maybe that's kind of like a neat feature for our user.
You know because maybe they accidentally click cancel and they want to go back and it's like oh look
all my work did not get dumped.
It's all still here it's ready to be sent out.
So kind of a neat feature but really I feel like that's kind of unexpected behavior.
I mean if the user clicks cancel it means they want to say I don't want to do a survey at all.
Just cancel it.
Forget it.
I don't want to deal with this.
So when they click on out again it's just a little bit disconcerting.
And I think that really we should make sure that we clear out all the different form inputs when the
user comes back to the form.
Remember all the different form values are only visible here because of that helper that we used inside
of our survey form component.
So here survey form G-S and at the very bottom where we wired up redux form we had said Do not destroy
the form values whenever this component is unmounted.
And so that's why all those values are being persisted right now he said very directly.
Don't dump the form whenever we navigate away from this component.
OK.
So that's the three things really got to figure out what really happens when we submit the form how
we navigate the user back to the dashboard and how we persist or me dump all these persisted values
after user navigates away from the form.
So let's start to think about how are going to tackle these three issues inside the next section.