1

00:00:01,260  -->  00:00:06,300
In the last section we implemented our fetch post action creator right here that reaches out and grabs

2

00:00:06,300  -->  00:00:07,640
a single post.

3

00:00:07,920  -->  00:00:12,720
So I think at this point in time we're ready to go ahead and make sure that we can connect our state

4

00:00:12,720  -->  00:00:20,430
to props and grab our state props posts and make sure it shows up inside of our component here.

5

00:00:20,430  -->  00:00:29,810
So let's go ahead and define that really quickly we'll do a function map state to prop's state and will

6

00:00:29,820  -->  00:00:35,620
return an object state DOT pose dot post.

7

00:00:35,880  -->  00:00:43,860
So this is the currently selected post right here and we'll make sure that we replace our role in our

8

00:00:43,860  -->  00:00:48,860
function call a connector right here with MAP state to props.

9

00:00:49,230  -->  00:00:51,100
Perfect.

10

00:00:52,370  -->  00:00:52,790
OK.

11

00:00:52,800  -->  00:00:59,550
So in theory we could probably go ahead and start referencing this up prop stopped in here and you know

12

00:00:59,580  -->  00:01:01,790
putting some content together blah blah blah.

13

00:01:02,070  -->  00:01:06,720
But I've got like kind of a nagging suspicion that something might not quite be right here.

14

00:01:07,140  -->  00:01:13,620
So inside of our render method I'm going to add a console log and I'm going to log this prop stock post

15

00:01:13,740  -->  00:01:18,390
which should be you know the posts that we just fetched right here.

16

00:01:18,390  -->  00:01:19,400
So I going to save this.

17

00:01:19,440  -->  00:01:22,980
And let's go ahead and refresh the browser and just try and see what happens.

18

00:01:23,330  -->  00:01:26,380
So a refresh and OK.

19

00:01:26,420  -->  00:01:28,850
Well this is kind of interesting.

20

00:01:28,950  -->  00:01:35,340
We've got two console logs from the same console logs so the first time console log null and the second

21

00:01:35,340  -->  00:01:38,130
time we've got our object here.

22

00:01:38,200  -->  00:01:40,720
So this is kind of interesting what's going on here.

23

00:01:41,070  -->  00:01:44,790
Well remember network requests take time.

24

00:01:44,790  -->  00:01:46,290
They don't happen instantaneously.

25

00:01:46,290  -->  00:01:49,770
In this case it was 214 milliseconds.

26

00:01:50,340  -->  00:01:57,180
That's 214 second 214 milliseconds in between the time that our component first is attempting to render

27

00:01:57,330  -->  00:02:04,020
to the time that our component actually has the data it needs to show up on the screen whenever we render

28

00:02:04,020  -->  00:02:04,740
our component.

29

00:02:04,740  -->  00:02:07,810
It's not going to wait for our data to magically show up.

30

00:02:07,860  -->  00:02:12,870
The component is going to render immediately every single time even if some props are not available

31

00:02:13,740  -->  00:02:19,200
that means that we need a way to handle the case in which our post is not yet loaded but the component

32

00:02:19,230  -->  00:02:21,310
is trying to render itself.

33

00:02:21,330  -->  00:02:25,080
Traditionally this would be a really good place to put in a Jack spinner.

34

00:02:25,080  -->  00:02:29,210
You know you like kind of spinning picture what have you something like that.

35

00:02:29,430  -->  00:02:36,390
We're going to use a little bit more or less Finast solution here but nonetheless still very useful

36

00:02:36,390  -->  00:02:37,640
.

37

00:02:37,680  -->  00:02:43,520
So what we're going to do is we're going to say if we don't have this stock prop top post.

38

00:02:43,560  -->  00:02:49,260
So if not this props post then just go ahead and return a div

39

00:02:52,290  -->  00:02:54,170
with loading.

40

00:02:54,520  -->  00:02:57,740
So we'll say to the user if we haven't loaded it up yet.

41

00:02:57,870  -->  00:02:59,370
Hey just hold on a second.

42

00:02:59,370  -->  00:03:01,270
We're still loading up the data here.

43

00:03:01,680  -->  00:03:09,300
So let's do a refresh now so you'll see just there for the slightest instant it shows loading and then

44

00:03:09,300  -->  00:03:12,160
it resolves into show Post 63.

45

00:03:12,420  -->  00:03:17,460
So it occurs so quickly that you could kind of debate whether or not we need to show you know loading

46

00:03:17,460  -->  00:03:18,590
text at all.

47

00:03:18,620  -->  00:03:22,800
And in fact it might actually be a little bit better user experience to not show it at all.

48

00:03:22,920  -->  00:03:26,310
But really you know just so you know how do you implement a asperin like this.

49

00:03:26,310  -->  00:03:28,470
This is a good pattern right here.

50

00:03:29,340  -->  00:03:29,670
OK.

51

00:03:29,670  -->  00:03:34,260
So now that we know that we've got our data by the time we hit this return statement right here.

52

00:03:34,260  -->  00:03:38,880
Let's go ahead and flush out this component just a little bit and make sure we show some info from the

53

00:03:38,880  -->  00:03:40,410
post.

54

00:03:40,920  -->  00:03:44,490
So we'll add some friends.

55

00:03:44,490  -->  00:03:46,950
Make sure you take off the semi colon out here

56

00:03:50,700  -->  00:03:57,770
and we'll go ahead and show in each three four post title.

57

00:03:58,230  -->  00:03:59,760
We'll do an age 6

58

00:04:02,550  -->  00:04:09,660
for post categories and just so the user knows what they're looking at.

59

00:04:09,660  -->  00:04:14,970
Let's say you know categories categories there we go.

60

00:04:16,140  -->  00:04:17,760
And then we'll do a paragraph tag

61

00:04:21,360  -->  00:04:25,740
for post content like so.

62

00:04:26,760  -->  00:04:27,230
OK.

63

00:04:27,360  -->  00:04:29,560
Let's refresh.

64

00:04:29,610  -->  00:04:31,850
Post is not defined I think I got a typo.

65

00:04:32,010  -->  00:04:32,800
Oh my mistake.

66

00:04:32,790  -->  00:04:33,870
I'd reference just post.

67

00:04:33,870  -->  00:04:36,060
We need this stop proper stop post.

68

00:04:36,150  -->  00:04:40,870
Let's go ahead and since we're using the post in here so much.

69

00:04:41,190  -->  00:04:45,380
Let's just pull it off of props like so.

70

00:04:46,770  -->  00:04:52,290
So no just more E-6 This is totally identical to doing cons to pose sequel's this stuff props start

71

00:04:52,440  -->  00:04:55,680
post totally identical.

72

00:04:55,680  -->  00:04:57,690
And so we don't really need this cool anymore.

73

00:04:57,750  -->  00:04:58,840
You can just do.

74

00:04:59,160  -->  00:05:03,710
If we don't have a post and then post title categories and content.

75

00:05:03,720  -->  00:05:05,970
All right let's give this another shot.

76

00:05:06,840  -->  00:05:07,320
Cool.

77

00:05:07,320  -->  00:05:08,060
Looks good.

78

00:05:08,280  -->  00:05:14,040
So we've got the title of our blog post the categories and then the content below is just what we need

79

00:05:14,040  -->  00:05:15,700
.

80

00:05:15,720  -->  00:05:16,970
So this is looking pretty good.

81

00:05:16,980  -->  00:05:19,030
We just need two more features.

82

00:05:19,200  -->  00:05:21,640
We really need to build to delete this post.

83

00:05:21,960  -->  00:05:26,790
If we don't want to view it anymore and we also need to build to navigate back to our list of posts

84

00:05:26,790  -->  00:05:27,740
here at the top.

85

00:05:28,150  -->  00:05:31,130
So let's go ahead and tackle those in the next section.