1
00:00:00,630 --> 00:00:06,210
Now that the read side of our application knows about the idea of a list of surveys we can now integrate

2
00:00:06,210 --> 00:00:08,670
it into the re-act side of our app.

3
00:00:08,700 --> 00:00:13,200
Now at this point when we've been looking at our diagrams or all of our mockups we've said that the

4
00:00:13,200 --> 00:00:16,480
dashboard component would show this list of surveys.

5
00:00:16,560 --> 00:00:21,420
However as we're now sitting here and thinking about wiring all this stuff up I'm thinking that maybe

6
00:00:21,420 --> 00:00:27,750
the dashboard component should not be responsible for fetching that list of surveys or showing it on

7
00:00:27,750 --> 00:00:28,590
the screen.

8
00:00:28,620 --> 00:00:34,080
I think that instead maybe we should make a separate component called like survey list or something

9
00:00:34,080 --> 00:00:34,730
like that.

10
00:00:34,920 --> 00:00:39,980
And the survey list component can be responsible for fetching these surveys and displaying them.

11
00:00:40,230 --> 00:00:44,960
And instead the dashboard will just be responsible for showing the survey list.

12
00:00:44,970 --> 00:00:47,020
So I think that would be a little bit cleaner approach.

13
00:00:47,040 --> 00:00:48,860
Let's go in that direction.

14
00:00:49,020 --> 00:00:53,910
So I'm going to open up my surveys directory inside the components folder and inside of here I'm going

15
00:00:53,910 --> 00:00:57,210
to make a new file called survey list.

16
00:00:57,450 --> 00:01:00,760
So a new file survey list.

17
00:01:00,870 --> 00:01:02,740
Yes.

18
00:01:02,850 --> 00:01:03,920
Now before we forget.

19
00:01:03,960 --> 00:01:10,380
I'm going to immediately change back to the dashboard js file and I'm going to import the survey list

20
00:01:10,620 --> 00:01:12,590
and show it inside of here.

21
00:01:12,660 --> 00:01:23,100
So inside of dashboard we will import survey lists from survey lists and then rather than just showing

22
00:01:23,100 --> 00:01:31,520
this simple text of dashboard right here I can replace it with this new survey list component OK.

23
00:01:31,720 --> 00:01:36,190
It's not going to close out the dashboard because I think this thing is all done and I think the last

24
00:01:36,190 --> 00:01:40,130
thing we really have to do is to put together the survey list component.

25
00:01:40,270 --> 00:01:42,010
So let's get to it.

26
00:01:42,070 --> 00:01:44,860
I'm going to make this a class based component.

27
00:01:46,700 --> 00:01:51,290
And I already know I can tell you right now we definitely need to make sure that this thing gets wired

28
00:01:51,290 --> 00:01:56,430
up to redux because we want it to call our action creator to fetch the list of surveys.

29
00:01:56,480 --> 00:02:04,130
So I'm going to import the Kinect helper from re-act redux and I'll also import that action creator

30
00:02:04,130 --> 00:02:12,960
that we just made inside of our actions index file and we call that thing fetch surveys.

31
00:02:13,170 --> 00:02:22,340
So we'll import only the fetch surveys action creator from up one directory up another directory into

32
00:02:22,340 --> 00:02:23,230
actions.

33
00:02:23,300 --> 00:02:29,280
So we're going to say dot dot slash slash actions OK.

34
00:02:29,280 --> 00:02:36,090
So now we can put together some boilerplate for the component itself will say class survey list extends

35
00:02:36,770 --> 00:02:38,410
react.

36
00:02:39,030 --> 00:02:42,310
We will render and return.

37
00:02:42,450 --> 00:02:47,430
I think that this will probably end up being a I don't know we'll look at some of the materials CSSA

38
00:02:47,460 --> 00:02:51,720
to figure out exactly what stuff we're going to return from this to make sure the styling looks nice

39
00:02:52,070 --> 00:02:59,810
but let's say that right now we'll just put on like a div with the text of Servais list.

40
00:02:59,830 --> 00:03:01,240
That'll work right now.

41
00:03:03,890 --> 00:03:09,130
And then at the bottom we will make sure that we export the survey list but not before we wire it up

42
00:03:09,130 --> 00:03:14,590
to redux to connect the component make sure that we wire up the action creator and make sure that we

43
00:03:14,590 --> 00:03:19,410
also define a map state to proper function to pull in the list of service.

44
00:03:19,420 --> 00:03:24,040
So at the very bottom let's first to clear that map state to props.

45
00:03:24,790 --> 00:03:32,470
So from our global state object we want to return an object that contains our list of surveys.

46
00:03:32,680 --> 00:03:39,820
So state DOT surveys remember that it is state DOT surveys right here because of how we just wired it

47
00:03:39,880 --> 00:03:42,790
up to our combined reducers call.

48
00:03:42,790 --> 00:03:46,070
We had taken the reducer and assign it to the property of surveys.

49
00:03:46,180 --> 00:03:51,480
And that's why back inside of our component it is specifically state debt service.

50
00:03:51,490 --> 00:03:54,790
Now we can definitely use a little bit of six destructuring here.

51
00:03:54,930 --> 00:04:00,550
So let's say from the state objects we really just care about the surveys property and so the object

52
00:04:00,550 --> 00:04:09,880
then becomes surveys Kolins surveys and then yep one worry factor to be just surveys like so now the

53
00:04:09,880 --> 00:04:17,290
last step at the bottom we're going to export default the connect function with MAP state to prop's

54
00:04:18,100 --> 00:04:22,070
as a second argument will pass and that action creator inside of an object.

55
00:04:22,090 --> 00:04:26,340
So we'll say curly braces fecche surveys.

56
00:04:26,920 --> 00:04:32,470
Well then close off the next set of parentheses and then place a second set for our component which

57
00:04:32,470 --> 00:04:37,330
we called Surveillant.

58
00:04:37,810 --> 00:04:38,320
All right.

59
00:04:38,320 --> 00:04:40,910
I think that's about it for boiler plate setup.

60
00:04:40,930 --> 00:04:45,550
Now before we actually test this out inside the browser you know I think we've got a pretty good feeling

61
00:04:45,550 --> 00:04:50,290
that this is going to work out so as just one extra thing that we're going to stuff in here for right

62
00:04:50,290 --> 00:04:52,940
now so we can just test it all in one go.

63
00:04:52,970 --> 00:04:59,770
I'm going out on a lifecycle method of component did mount to make sure that any time this component

64
00:04:59,800 --> 00:05:04,950
is rendered to the screen we call that fetch surveys action creator.

65
00:05:04,990 --> 00:05:15,770
So inside of a component did mt life cycle method we'll call this prop's dot patch surveys like so.

66
00:05:16,880 --> 00:05:18,650
OK now it's time to test this out.

67
00:05:18,760 --> 00:05:24,550
So I'll flip back or the browser will pull up our re-act up here and we get a nice little error message

68
00:05:24,550 --> 00:05:24,760
here.

69
00:05:24,760 --> 00:05:28,600
So probably made a typo inside of our dashboard component.

70
00:05:28,600 --> 00:05:34,320
Let's go check that thing out and make sure that we didn't kind of really type in something wrong.

71
00:05:35,020 --> 00:05:39,500
So back inside my code editor a final Capones directory.

72
00:05:39,500 --> 00:05:40,680
Here's the dashboard.

73
00:05:40,840 --> 00:05:41,410
And you know what.

74
00:05:41,410 --> 00:05:43,170
I assumed that it was in the same directory.

75
00:05:43,180 --> 00:05:47,610
The import statement doesn't reflect the fact that the survey list is in the surveys directory.

76
00:05:47,620 --> 00:05:48,820
My mistake.

77
00:05:48,850 --> 00:05:54,720
So import survey list from dot slash surveys slash survey list.

78
00:05:54,850 --> 00:05:57,520
That's better.

79
00:05:57,660 --> 00:06:00,630
Now back in the browser.

80
00:06:00,630 --> 00:06:01,190
OK.

81
00:06:01,260 --> 00:06:04,980
So we still have a little bit of a typo here.

82
00:06:05,000 --> 00:06:08,820
Home man and of course I'm starting to fall apart clearly.

83
00:06:08,880 --> 00:06:10,600
Plus surveillance extends react.

84
00:06:10,620 --> 00:06:12,150
Not quite right.

85
00:06:12,150 --> 00:06:17,400
Well thankfully we get some really nice debug stuff from our create re-act out boilerplate.

86
00:06:17,400 --> 00:06:24,840
So of course it should be classily list extends component's Let's save that watch three Frush and now

87
00:06:24,870 --> 00:06:25,700
hopefully.

88
00:06:25,820 --> 00:06:26,170
OK.

89
00:06:26,190 --> 00:06:27,000
Little bit better.

90
00:06:27,000 --> 00:06:28,520
This is definitely better.

91
00:06:28,560 --> 00:06:33,960
So now inside of our request log over here you'll see that we are showing the survey list component.

92
00:06:33,960 --> 00:06:39,970
And just as that thing is rendered we also make sure that we fetch our list of surveys from the backend.

93
00:06:39,990 --> 00:06:44,470
So I think that this thing is working out at this point even though we made too little typos there.

94
00:06:44,580 --> 00:06:49,770
So let's now continue the next section and start getting to work around styling our list of surveys.

95
00:06:49,770 --> 00:06:52,080
So I'll see you in just a minute.