Instructor: We got a list of very static users
on the screen but the profile component
that we're rendering here is kind of growing unbound,
so, it'd be really great
if we kinda shorten the width on each of these,
just a little bit of styling just to make things work,
or I should say, make things look a little bit nicer.
So let's take care of that really quick
and then we'll talk about some of the AJAX data
that we're gonna be loading up into our application.
So I'm gonna go back over to my code editor
and we've already got a default style CSS file
inside of this project,
so, in the style directory, I'm gonna find style.css.
I'll open it up and we can put any CSS
that we want inside of this file right here.
So we've already got some CSS classes already put
on our application, specifically card, card-block right here
on each of the profile components.
I'm gonna add one other class in here,
to the top level div inside of UserList.
We're gonna put on a class name
of simply user-list, like so.
Now with these two classes, user-list and card,
we can make this whole component look a lot better.
First on user-list, I'm gonna add just three properties.
We'll make sure that it gets its styling with display: flex,
display content space-around,
and flex-wrap: wrap.
Then just two more, on our card, we'll assign a width
of 30% and I'm also gonna put on a min-width of 300 pixels.
All right, let's see how this looks.
So back over, refresh and, okay,
so this looks more reasonable.
Everything is kinda responsive.
You can see that it collapses down
and this is just the benefit of using flexbox,
that's where we're getting this behavior from right now.
Okay, so enough of a side digression with some CSS here.
Time to get back to the real interesting stuff.
So let's talk a little bit more
about the API endpoint that we're gonna be using.
Now, again, the entire point of this application is
to learn more about middlewares, and I know
that I'm doing an awful job
of kinda keeping the pace moving along
and talking specifically about middlewares, but, you know,
middlewares don't make a lot of sense
if you don't really have the context of the app
that we're trying to build first,
so, it is very important to me that before we kind
of just dive face first into middlewares,
I need to have kind of a sample
or beginner application already put together,
and then we can add the middleware.
So with that in mind, let's talk more about the API endpoint
that we're going to use to load our list of users.
In a new tab, I'm going to search for,
very simply, JSON placeholder
and the first link
that I'm gonna get is Fake online REST API for developers.
I'm gonna go there.
So this documentation on this page is
for a kind of fake API endpoint.
All it does is it returns a static list of users.
We can fetch the entire list of users
or we can fetch a very specific user.
Let's see what a response might look like.
I'm just gonna click on the link /users
and I get back and array of objects.
Each object has details for a very specific user.
So you can see we've got Leanne Graham as number one,
well, maybe you can't see it, now you can.
We've got Leanne Graham as id number one.
We have id two with Ervin Howell,
number three with Clementine Bauch.
So, I think you get the idea.
We've got a list of different users
that gets returned from this endpoint.
So, what I really wanna do is take this URL,
do a get request against it in one of our action creators,
specifically the fetch users action creator,
and then return that list of users back down to,
you know, our reducer, have it get picked up
and boom, everything renders, everyone's happy.
So the first key here is we need a way
to make an actual AJAX request.
Let's talk about exactly how we're gonna make the request,
and some of the methodologies we're going to use
and where our middleware, very importantly,
comes into play in the next section.