We are now done with our back and drought handler that allows a user to create a brand new survey at
this point.
There's really two different directions we can go for working on our next feature or the next aspect
of our application.
On the one hand we can continue on the back end side and make sure that we have some endpoint put together
for our center grid web hook to make sure that whenever a user clicks on a button it gives us some feedback
to our server.
So that's kind of aspect number one.
That's the first thing we could work on.
The other thing we can work on is the front end component for creating a new survey.
So to make sure that the user has some form that they can fill out to actually generate the new survey
posted to this end point and email it out to all of our people.
So just to make sure that we have a little bit of variety rather than working a super long time on the
back end I'm thinking that we will put off some of that stuff and instead work on some the client side
UI and build out a form that a user can use to make a new survey.
So with that in mind let's get a review on exactly how our front end is going to look for creating a
new survey.
And now we've looked at these mockups a while ago.
So I just want to do a quick once over.
Just talk about what they're doing for us.
So I'm going to zoom in here just a little bit.
Creating a survey is going to be a two stage process when the user navigates to a route of something
like surveys slash who will show the user a form to fill out.
So something that has entry for the title is subject the body and so on.
After the user fills all this stuff out and clicks on the next button we'll then make sure that the
user has the opportunity to review all their inputs before it actually gets submitted to our backend.
Now to make sure that the user can actually navigate to this form you know find the form to create the
new survey.
We're going to put a button on our dashboard.
So here's our dashboard which we haven't really worked on at all so far.
Now this big red button at the bottom right hand side right here that the user can click on to add a
new survey.
So this is really taking a page from material design standards and making sure that our users have this
nice pretty thing to click on.
So I think that will first start off by making sure that this button exists and that a user can navigate
over to these forms.
Once we get that link in place right here this link will then come back to the forms over here and start
to dive into great deal detail on them.
So I don't think there's any reason to take a pause.
Let's just get to it right now.
Let's change on over to our code editor.
We're going to make a new dashboard component.
Remember that's going to be the component that a user sees when the kind of first log into the application.
And we're going to make sure that it has this big red ad button down here at the bottom right.
And whenever a user clicks on it they should be automatically navigated over to surveys slash new Ok
so I going to change on over to my code editor.
I'm going to close out all the files I have open so that I'm making sure that I'm not going to accidentally
mess around my server at all.
I'm going to open up my client directory and find the SIRC directory and then inside of the components
folder I'm going to make a new file called dashboard.
Yes and this is going to be our route dashboard component woofs dashboard Yes and then inside if you're
we'll put together a little bit of markup for just a normal old component will say oops import re-act
from react at the top we will then declare our dashboard component and I'm thinking right now that it
can just be a material or a functional component.
One thing that we really need a class based component here at all.
So let's say it's dashboard and from here I think that for right now we'll just return a div with a
text dashboard and then down the bottom we'll make sure that we immediately export this component.
So say export default dashboard like so get let's make sure that our app component remerge that's where
we have all of our client side routing logic it's all inside the app lets make sure that the app shows
this dashboard as opposed to the dummy component that we're showing in here right now.
So here's the dummy component that we're currently showing.
I'm going to remove this thing and replace it with an import statement for the dashboard component that
we just made.
So we'll say import dashboard from dashboard and then down a little bit lower.
You'll notice that we still have dashboard wired up on the flash survey's route which is really exactly
what we want.
OK.
So let's make sure our server is running.
I think that looks like mine is running here.
So I think that I killed mine at some point.
So I started back up I think we'll take a quick break right now.
When we come back in the next section we're just going to verify that the dashboard component is successfully
showing up.
Let's talk about how we're going to get that nice big red button to show up on the screen.
So I'll see you in just a minute.