-: We've now got our static list of users.
So we'll put together our user list component.
I'm gonna make a new file inside
of our components directory called User List.
Inside of here this is definitely gonna be a container
component. It's going to need to reach out to Redux
and get our current list of users from the Redux store
which means we need to read
from our global application state. To make this happen
we'll definitely turn this into a container.
Let's do our import statements at the top.
So we'll import React and component from React
and we'll also import our Connect helper from React Redux.
Then we'll do our store, or excuse me
our class user list extends component
Put our render method in and let's, let's do our user
list first. Let's build that.
That should be pretty straightforward.
So we want to have a list of users here.
We're going to have definitely kinda like a list, you know
on this dot props, maybe something like this dot Props
dot users and we'll map over that, that list and produce one
kind of card looking thing or one profile for each user
that we have.
So I'm going to assume that we're going to have
a separate helper method that's going to put together
a single profile for one of our users.
Let's put that kinda helper method together
and we'll call it render user.
and we'll pass in a single user to be rendered.
So now all we have to do is put in our route div
and then we can map over our list
of users and for each user that we have
so this dot props dot users dot map
each user that we have will reference this dot render user.
So for each user, call the helper function, render user
and then return it into our jsx right here.
Let's put together the jsx now for our render user.
So again, this is gonna be rendering a single user.
We're gonna make use
of some bootstrap CSS classes here as well, so
that we get a kind of nice looking card available to us.
Nice, nice looking profile.
So let's return a top level div with a class name of card.
Card block.
We'll have, how about a leading H four
for the class name
of card title.
This will be our user name.
And for right now, we don't really have any anything else.
We said that we were gonna put on the company name
and a button to click to email that particular user.
We don't have that data available to us yet
because we're just kinda loading these fake users
with just a name property.
So instead we'll put in some, a fake company name
and a fake acre tag or a fake email link.
and then when we start loading our real data
from our AJA X standpoint
then we'll come back and refresh this component right here.
So I'm gonna put in a paragraph tag with a class name
of card text
and let's say
that they work for a
everyone's gonna work for the same company
since we're gonna hard code it right here
but let's just say
that they work for the, I don't know, cheese factory.
Sounds like good job.
We'll put in our anchor tag.
This will serve as the email link.
Have a class name of button button primary
And we'll say email.
We don't need to put it on an actual HF property.
We'll do that later when we have some actual email
addresses to work with.
Okay, so this looks pretty good for our user list.
Again, our only goal right now is just to show a list
of users, a list of our fake static data.
We're gonna turn our application into fetching its data
from a AJAX resource, and then we're gonna work
on the middleware.
So the last thing we need to do before we can probably
start rendering our app application is define our map state
to props and push our list of users into this component.
So let's do that really quick.
At the bottom of the file, we'll define our function
map state to props
and we will return
users
state dot users.
Then we can finally get around to doing our export
statement, export
default
connect
map state to props
with user list.
All right, I'm gonna save this.
So I'm gonna tell you
that there might be something a little bit funny
about our application right now.
Let's try it out in the browser
and just see what happens really quick.
So I'm going to open our project, I'm gonna refresh the page
and it looks like, huh, nothing, nothing's different yet.
So we made one small mistake.
We didn't actually include user list into our app.
So let's make sure that happens
real quick. I'm gonna go back over to app.
We will import our user list
from user list
and then okay
now we can actually make use of the component.
So user list
like so
and I'm gonna do some formatting here just cuz.
All right, so this looks a little bit better.
Let's give this a shot.
Now we'll refresh and all right
that's what I was expecting.
Nothing on the screen, nothing at all.
So this is not related to middlewares at all.
Just a little bit of a side effect
because the way that we wired everything up
if I look at my element inspector
we can see that we've got our body, we've got a div
and then we've got an inner div here
and this innermost div represents our user list component.
So the user list is definitely showing up.
We just don't really have any users to render
over or iterate over to build our list of users.
So we missed one very critical component in here.
We never actually called our action creator to
kind of seed our list of users.
So we need to define, a component will mount inside
of our user list to seed or kind
of fetch that in this initial list of very static users.
The first thing we need to do
before we do the component will mount is import all
of our action creators into this file
and then wire them up as props to user list.
So let's import star as actions from
from actions.
Then in the second argument to connect, we'll pass actions.
And then finally, inside of component we'll
mount
we can finally call this dot props, dot fetch users.
So this will call our action creator fetch users.
The list of users or the static fake list
of users will flow into the reducer.
It will cause this component to rerender.
And boom, we should have our list of users.
So let's go ahead and give this a shot.
Back in the browser.
A refresh.
And boom, there's our list of users.
Very good.
Now I can already tell that these list of users
it's very wide so to speak.
So let's get into the next section and do just a little bit
of styling just to shorten up the list of users.
And then we'll start on doing some
of the more interesting stuff in this section.
I'll see in the next section.