1
00:00:01,110 --> 00:00:03,330
Instructor: We got a list of very static users

2
00:00:03,330 --> 00:00:05,370
on the screen but the profile component

3
00:00:05,370 --> 00:00:08,280
that we're rendering here is kind of growing unbound,

4
00:00:08,280 --> 00:00:09,420
so, it'd be really great

5
00:00:09,420 --> 00:00:11,850
if we kinda shorten the width on each of these,

6
00:00:11,850 --> 00:00:14,550
just a little bit of styling just to make things work,

7
00:00:14,550 --> 00:00:17,850
or I should say, make things look a little bit nicer.

8
00:00:17,850 --> 00:00:19,530
So let's take care of that really quick

9
00:00:19,530 --> 00:00:22,320
and then we'll talk about some of the AJAX data

10
00:00:22,320 --> 00:00:25,650
that we're gonna be loading up into our application.

11
00:00:25,650 --> 00:00:28,230
So I'm gonna go back over to my code editor

12
00:00:28,230 --> 00:00:31,860
and we've already got a default style CSS file

13
00:00:31,860 --> 00:00:33,030
inside of this project,

14
00:00:33,030 --> 00:00:37,230
so, in the style directory, I'm gonna find style.css.

15
00:00:37,230 --> 00:00:39,450
I'll open it up and we can put any CSS

16
00:00:39,450 --> 00:00:42,180
that we want inside of this file right here.

17
00:00:42,180 --> 00:00:44,880
So we've already got some CSS classes already put

18
00:00:44,880 --> 00:00:49,590
on our application, specifically card, card-block right here

19
00:00:49,590 --> 00:00:52,110
on each of the profile components.

20
00:00:52,110 --> 00:00:54,240
I'm gonna add one other class in here,

21
00:00:54,240 --> 00:00:57,180
to the top level div inside of UserList.

22
00:00:57,180 --> 00:00:59,520
We're gonna put on a class name

23
00:00:59,520 --> 00:01:02,463
of simply user-list, like so.

24
00:01:04,500 --> 00:01:07,590
Now with these two classes, user-list and card,

25
00:01:07,590 --> 00:01:10,380
we can make this whole component look a lot better.

26
00:01:10,380 --> 00:01:14,640
First on user-list, I'm gonna add just three properties.

27
00:01:14,640 --> 00:01:18,123
We'll make sure that it gets its styling with display: flex,

28
00:01:19,590 --> 00:01:23,130
display content space-around,

29
00:01:23,130 --> 00:01:25,473
and flex-wrap: wrap.

30
00:01:27,540 --> 00:01:32,070
Then just two more, on our card, we'll assign a width

31
00:01:32,070 --> 00:01:37,070
of 30% and I'm also gonna put on a min-width of 300 pixels.

32
00:01:37,650 --> 00:01:40,260
All right, let's see how this looks.

33
00:01:40,260 --> 00:01:42,540
So back over, refresh and, okay,

34
00:01:42,540 --> 00:01:45,120
so this looks more reasonable.

35
00:01:45,120 --> 00:01:47,190
Everything is kinda responsive.

36
00:01:47,190 --> 00:01:49,470
You can see that it collapses down

37
00:01:49,470 --> 00:01:51,660
and this is just the benefit of using flexbox,

38
00:01:51,660 --> 00:01:54,750
that's where we're getting this behavior from right now.

39
00:01:54,750 --> 00:01:58,290
Okay, so enough of a side digression with some CSS here.

40
00:01:58,290 --> 00:02:00,060
Time to get back to the real interesting stuff.

41
00:02:00,060 --> 00:02:01,590
So let's talk a little bit more

42
00:02:01,590 --> 00:02:03,990
about the API endpoint that we're gonna be using.

43
00:02:03,990 --> 00:02:06,570
Now, again, the entire point of this application is

44
00:02:06,570 --> 00:02:08,280
to learn more about middlewares, and I know

45
00:02:08,280 --> 00:02:09,810
that I'm doing an awful job

46
00:02:09,810 --> 00:02:12,150
of kinda keeping the pace moving along

47
00:02:12,150 --> 00:02:15,000
and talking specifically about middlewares, but, you know,

48
00:02:15,000 --> 00:02:16,350
middlewares don't make a lot of sense

49
00:02:16,350 --> 00:02:18,600
if you don't really have the context of the app

50
00:02:18,600 --> 00:02:19,860
that we're trying to build first,

51
00:02:19,860 --> 00:02:23,070
so, it is very important to me that before we kind

52
00:02:23,070 --> 00:02:25,903
of just dive face first into middlewares,

53
00:02:25,903 --> 00:02:27,660
I need to have kind of a sample

54
00:02:27,660 --> 00:02:30,330
or beginner application already put together,

55
00:02:30,330 --> 00:02:32,080
and then we can add the middleware.

56
00:02:32,970 --> 00:02:37,020
So with that in mind, let's talk more about the API endpoint

57
00:02:37,020 --> 00:02:39,963
that we're going to use to load our list of users.

58
00:02:41,040 --> 00:02:43,320
In a new tab, I'm going to search for,

59
00:02:43,320 --> 00:02:47,050
very simply, JSON placeholder

60
00:02:48,420 --> 00:02:49,320
and the first link

61
00:02:49,320 --> 00:02:53,490
that I'm gonna get is Fake online REST API for developers.

62
00:02:53,490 --> 00:02:54,543
I'm gonna go there.

63
00:02:55,950 --> 00:02:58,410
So this documentation on this page is

64
00:02:58,410 --> 00:03:01,470
for a kind of fake API endpoint.

65
00:03:01,470 --> 00:03:05,340
All it does is it returns a static list of users.

66
00:03:05,340 --> 00:03:07,110
We can fetch the entire list of users

67
00:03:07,110 --> 00:03:09,570
or we can fetch a very specific user.

68
00:03:09,570 --> 00:03:11,370
Let's see what a response might look like.

69
00:03:11,370 --> 00:03:13,480
I'm just gonna click on the link /users

70
00:03:15,270 --> 00:03:19,170
and I get back and array of objects.

71
00:03:19,170 --> 00:03:22,530
Each object has details for a very specific user.

72
00:03:22,530 --> 00:03:26,340
So you can see we've got Leanne Graham as number one,

73
00:03:26,340 --> 00:03:28,440
well, maybe you can't see it, now you can.

74
00:03:28,440 --> 00:03:31,653
We've got Leanne Graham as id number one.

75
00:03:32,610 --> 00:03:34,863
We have id two with Ervin Howell,

76
00:03:35,790 --> 00:03:38,430
number three with Clementine Bauch.

77
00:03:38,430 --> 00:03:39,810
So, I think you get the idea.

78
00:03:39,810 --> 00:03:41,370
We've got a list of different users

79
00:03:41,370 --> 00:03:43,270
that gets returned from this endpoint.

80
00:03:45,270 --> 00:03:48,120
So, what I really wanna do is take this URL,

81
00:03:48,120 --> 00:03:51,450
do a get request against it in one of our action creators,

82
00:03:51,450 --> 00:03:55,530
specifically the fetch users action creator,

83
00:03:55,530 --> 00:03:58,950
and then return that list of users back down to,

84
00:03:58,950 --> 00:04:01,230
you know, our reducer, have it get picked up

85
00:04:01,230 --> 00:04:04,650
and boom, everything renders, everyone's happy.

86
00:04:04,650 --> 00:04:06,510
So the first key here is we need a way

87
00:04:06,510 --> 00:04:10,410
to make an actual AJAX request.

88
00:04:10,410 --> 00:04:13,050
Let's talk about exactly how we're gonna make the request,

89
00:04:13,050 --> 00:04:15,330
and some of the methodologies we're going to use

90
00:04:15,330 --> 00:04:17,160
and where our middleware, very importantly,

91
00:04:17,160 --> 00:04:19,413
comes into play in the next section.