Now that the read side of our application knows about the idea of a list of surveys we can now integrate
it into the re-act side of our app.
Now at this point when we've been looking at our diagrams or all of our mockups we've said that the
dashboard component would show this list of surveys.
However as we're now sitting here and thinking about wiring all this stuff up I'm thinking that maybe
the dashboard component should not be responsible for fetching that list of surveys or showing it on
the screen.
I think that instead maybe we should make a separate component called like survey list or something
like that.
And the survey list component can be responsible for fetching these surveys and displaying them.
And instead the dashboard will just be responsible for showing the survey list.
So I think that would be a little bit cleaner approach.
Let's go in that direction.
So I'm going to open up my surveys directory inside the components folder and inside of here I'm going
to make a new file called survey list.
So a new file survey list.
Yes.
Now before we forget.
I'm going to immediately change back to the dashboard js file and I'm going to import the survey list
and show it inside of here.
So inside of dashboard we will import survey lists from survey lists and then rather than just showing
this simple text of dashboard right here I can replace it with this new survey list component OK.
It's not going to close out the dashboard because I think this thing is all done and I think the last
thing we really have to do is to put together the survey list component.
So let's get to it.
I'm going to make this a class based component.
And I already know I can tell you right now we definitely need to make sure that this thing gets wired
up to redux because we want it to call our action creator to fetch the list of surveys.
So I'm going to import the Kinect helper from re-act redux and I'll also import that action creator
that we just made inside of our actions index file and we call that thing fetch surveys.
So we'll import only the fetch surveys action creator from up one directory up another directory into
actions.
So we're going to say dot dot slash slash actions OK.
So now we can put together some boilerplate for the component itself will say class survey list extends
react.
We will render and return.
I think that this will probably end up being a I don't know we'll look at some of the materials CSSA
to figure out exactly what stuff we're going to return from this to make sure the styling looks nice
but let's say that right now we'll just put on like a div with the text of Servais list.
That'll work right now.
And then at the bottom we will make sure that we export the survey list but not before we wire it up
to redux to connect the component make sure that we wire up the action creator and make sure that we
also define a map state to proper function to pull in the list of service.
So at the very bottom let's first to clear that map state to props.
So from our global state object we want to return an object that contains our list of surveys.
So state DOT surveys remember that it is state DOT surveys right here because of how we just wired it
up to our combined reducers call.
We had taken the reducer and assign it to the property of surveys.
And that's why back inside of our component it is specifically state debt service.
Now we can definitely use a little bit of six destructuring here.
So let's say from the state objects we really just care about the surveys property and so the object
then becomes surveys Kolins surveys and then yep one worry factor to be just surveys like so now the
last step at the bottom we're going to export default the connect function with MAP state to prop's
as a second argument will pass and that action creator inside of an object.
So we'll say curly braces fecche surveys.
Well then close off the next set of parentheses and then place a second set for our component which
we called Surveillant.
All right.
I think that's about it for boiler plate setup.
Now before we actually test this out inside the browser you know I think we've got a pretty good feeling
that this is going to work out so as just one extra thing that we're going to stuff in here for right
now so we can just test it all in one go.
I'm going out on a lifecycle method of component did mount to make sure that any time this component
is rendered to the screen we call that fetch surveys action creator.
So inside of a component did mt life cycle method we'll call this prop's dot patch surveys like so.
OK now it's time to test this out.
So I'll flip back or the browser will pull up our re-act up here and we get a nice little error message
here.
So probably made a typo inside of our dashboard component.
Let's go check that thing out and make sure that we didn't kind of really type in something wrong.
So back inside my code editor a final Capones directory.
Here's the dashboard.
And you know what.
I assumed that it was in the same directory.
The import statement doesn't reflect the fact that the survey list is in the surveys directory.
My mistake.
So import survey list from dot slash surveys slash survey list.
That's better.
Now back in the browser.
OK.
So we still have a little bit of a typo here.
Home man and of course I'm starting to fall apart clearly.
Plus surveillance extends react.
Not quite right.
Well thankfully we get some really nice debug stuff from our create re-act out boilerplate.
So of course it should be classily list extends component's Let's save that watch three Frush and now
hopefully.
OK.
Little bit better.
This is definitely better.
So now inside of our request log over here you'll see that we are showing the survey list component.
And just as that thing is rendered we also make sure that we fetch our list of surveys from the backend.
So I think that this thing is working out at this point even though we made too little typos there.
So let's now continue the next section and start getting to work around styling our list of surveys.
So I'll see you in just a minute.