1
00:00:00,620 --> 00:00:04,370
The last two things that we have to do inside of this component right here is to make sure that the

2
00:00:04,370 --> 00:00:07,120
user has a button to press to delete the post.

3
00:00:07,170 --> 00:00:11,450
And we also need to make sure that there is a button that they can click to navigate back to the big

4
00:00:11,450 --> 00:00:12,580
list of posts.

5
00:00:12,860 --> 00:00:17,830
So many something up top that just says hey take me back to the index and something that says I want

6
00:00:17,830 --> 00:00:19,970
to delete this post.

7
00:00:19,970 --> 00:00:23,560
So we've definitely taken care of that navigation side of things before.

8
00:00:23,570 --> 00:00:25,880
By using the link tag from re-act router.

9
00:00:26,010 --> 00:00:27,230
So it's definitely easy one.

10
00:00:27,230 --> 00:00:34,320
Let's start off with that at the top of our file will import the link tag from re-act Rotterdam.

11
00:00:34,340 --> 00:00:37,980
So important link from re-act router.

12
00:00:39,000 --> 00:00:50,150
Dong that inside of our render function will place a linked tag will tell it to render the user or something

13
00:00:50,160 --> 00:00:53,570
redirect the user back to the root route of our application.

14
00:00:53,810 --> 00:00:58,050
I will give it the text or something like back to index.

15
00:00:58,050 --> 00:01:02,190
Now I'm going to not going to put a class name of button on this one because I'm OK with it just being

16
00:01:02,460 --> 00:01:03,860
rendered as plain text.

17
00:01:04,020 --> 00:01:09,660
But if you want to you can definitely put on a class name of DTN and DTN primary to make this look like

18
00:01:09,690 --> 00:01:10,980
a nice button.

19
00:01:11,490 --> 00:01:16,850
So let's refresh in the browser now and be at the nice back to index linked up here.

20
00:01:16,860 --> 00:01:17,180
OK.

21
00:01:17,190 --> 00:01:21,160
So that's definitely working pretty well on that side of things.

22
00:01:21,180 --> 00:01:25,650
Now I know that I said that will also take care of delete inside this section but it just occurred to

23
00:01:25,650 --> 00:01:31,230
me that if we go back to the index page we don't really have the ability to navigate back to an individual

24
00:01:31,230 --> 00:01:32,050
post.

25
00:01:32,160 --> 00:01:37,110
So maybe before we take care of any of that deletion stuff let's make sure that a user has the ability

26
00:01:37,350 --> 00:01:44,160
to navigate from clicking right here and going to the show page for each in particular or each particular

27
00:01:44,160 --> 00:01:45,900
post.

28
00:01:45,960 --> 00:01:46,960
So to take care of that.

29
00:01:46,980 --> 00:01:47,240
Yup.

30
00:01:47,280 --> 00:01:51,330
We're going to use the link tag again inside of our post index component.

31
00:01:52,820 --> 00:01:58,760
Back inside of our code editor I'll find the Post's index component we've already imported the link

32
00:01:58,760 --> 00:02:00,750
tag in here up at the top.

33
00:02:00,890 --> 00:02:07,610
So all we really need to do is wrap the post title inside of the render post function with another link

34
00:02:07,610 --> 00:02:09,830
tag.

35
00:02:09,830 --> 00:02:12,000
So let's say link.

36
00:02:12,350 --> 00:02:17,760
We're going to give myself a little bit of space to work with here and we'll send the user to.

37
00:02:17,810 --> 00:02:20,840
Now this is going to be a little bit more complicated in the past.

38
00:02:20,840 --> 00:02:25,970
We always hardcoded the route that we wanted to send the user to but this time around we want to send

39
00:02:25,970 --> 00:02:33,800
the user to a route that includes this particular post ID so we can form up a template string that will

40
00:02:33,800 --> 00:02:41,420
essentially take us to the right route will place our back to X and we'll say slash posts slash and

41
00:02:41,420 --> 00:02:43,640
then the ID of the post.

42
00:02:43,640 --> 00:02:47,740
So Post dot ID.

43
00:02:47,930 --> 00:02:48,240
All right.

44
00:02:48,320 --> 00:02:50,540
Let's test this out inside the browser now.

45
00:02:51,190 --> 00:02:53,090
I'll refresh the document.

46
00:02:53,570 --> 00:02:55,890
And now everything appears to be clickable.

47
00:02:56,030 --> 00:02:57,200
I can go over here.

48
00:02:57,200 --> 00:03:00,150
Yup looks good looks good.

49
00:03:00,380 --> 00:03:01,990
Fantastic.

50
00:03:02,000 --> 00:03:09,050
Now something I want you to notice really quick if I refreshed the page it can be very subtle very hard

51
00:03:09,050 --> 00:03:09,930
to see.

52
00:03:10,310 --> 00:03:16,460
We have already fetched the entire list of posts so we've already got everything but our individual

53
00:03:16,460 --> 00:03:20,800
posts show page will also attempt to refed That's the post as well.

54
00:03:20,840 --> 00:03:25,670
So when I click on this link right here we're going to instantly see some content on the screen but

55
00:03:25,670 --> 00:03:31,880
we will also see an additional request down here to fetch that extra post or prefetch the post.

56
00:03:31,940 --> 00:03:37,880
So we were kind of fetching every record twice inside of our application once for the index page and

57
00:03:37,880 --> 00:03:39,830
then once for the show page.

58
00:03:39,830 --> 00:03:44,960
Now for me personally that is how I always construct pages I always assume that we're working with stale

59
00:03:44,960 --> 00:03:49,810
data because you never know how long a user has been sitting at this index page.

60
00:03:49,880 --> 00:03:55,280
And so I always want to make sure that I re-offense records whenever I go to the show page.

61
00:03:55,390 --> 00:04:00,610
If you're working on an application however where you are really really really concerned about network

62
00:04:00,670 --> 00:04:05,880
usage you can always add a check inside of the post-show component.

63
00:04:05,920 --> 00:04:06,700
So it's fine.

64
00:04:07,920 --> 00:04:09,750
Here's the component did mount right here.

65
00:04:09,880 --> 00:04:15,280
So if you did not want to eagerly refresh posts you can always wrap this thing with an if statement

66
00:04:15,310 --> 00:04:18,230
and said if this dot Propst post.

67
00:04:18,340 --> 00:04:24,010
So if we already have a post or if not there we go.

68
00:04:24,010 --> 00:04:29,350
So if we already have a post do not attempt to re fetch it but if we don't have one then great.

69
00:04:29,350 --> 00:04:31,360
Go and try to grab the thing.

70
00:04:31,360 --> 00:04:35,590
So I just wanted to throw that out there that that is always an option to do if you really care about

71
00:04:35,590 --> 00:04:36,690
that side of things.

72
00:04:38,570 --> 00:04:43,760
With that in mind I also want to try to go into an individual post show page and I'm going to refresh

73
00:04:43,760 --> 00:04:45,610
the page.

74
00:04:45,610 --> 00:04:46,800
And yes perfect.

75
00:04:46,820 --> 00:04:52,040
We do see the post immediately appear on the screen and we only fetch the data required for showing

76
00:04:52,040 --> 00:04:53,920
this particular page.

77
00:04:53,960 --> 00:05:00,020
Now another very interesting thing that one should take note of right now are Post piece of state contains

78
00:05:00,230 --> 00:05:04,840
only the post with the idea of 7 9 6 2 6.

79
00:05:04,910 --> 00:05:10,970
If I click back to index right here you're going to see only this post appear on the screen and then

80
00:05:10,970 --> 00:05:16,180
once the index request completes as well you'll see all the other posts appear as well.

81
00:05:16,490 --> 00:05:17,990
So watch very carefully.

82
00:05:18,230 --> 00:05:25,340
So there's the I mean is very brief but the very top was the single post by itself and then we saw this

83
00:05:25,400 --> 00:05:31,070
index route request to the API are complete and then all the other posts appeared as well.

84
00:05:31,070 --> 00:05:34,380
Now of course that only happens one time inside of our application.

85
00:05:34,490 --> 00:05:41,630
Once all the data has been fetched we are refreshing data but the page is being rerun dered with the

86
00:05:41,630 --> 00:05:43,990
old data that we had previously anyways.

87
00:05:44,220 --> 00:05:49,880
So this is a very nice approach because your user instantly sees content appear on the screen but if

88
00:05:49,910 --> 00:05:56,360
any of the records has updated since they last attempted to get one the once the request completes for

89
00:05:56,360 --> 00:05:59,120
that update they'll see the new content appear on the screen.

90
00:05:59,180 --> 00:06:02,790
So very good a very solid approach going this way.

91
00:06:03,540 --> 00:06:03,960
OK.

92
00:06:04,010 --> 00:06:06,320
So a little bit of a quick aside there.

93
00:06:06,320 --> 00:06:10,790
Let's get back on track in the next section and make sure that our users have the ability to delete

94
00:06:10,850 --> 00:06:12,410
a very particular post.