1
00:00:01,000 --> 00:00:03,770
Well let's make sure that ain't tell me user taps on these items.

2
00:00:03,790 --> 00:00:08,530
We take them to the track detail screen and then show the user some information about that particular

3
00:00:08,530 --> 00:00:09,550
track.

4
00:00:09,670 --> 00:00:15,520
So to do so inside of my tracklist screen I'm gonna add in an on press handler to touchable opacity

5
00:00:20,300 --> 00:00:24,770
and then inside of here whenever user taps is saying we want to make sure that we navigate over to track

6
00:00:24,800 --> 00:00:29,660
detail in along the way we want to make sure that we also pass along some information about what track

7
00:00:29,870 --> 00:00:31,840
the user just tapped on.

8
00:00:31,880 --> 00:00:36,560
So inside of here we're going to want to do some navigation to do some navigation we can either import

9
00:00:36,710 --> 00:00:42,740
the navigation function from our navigation rep file right there or alternatively remember we've already

10
00:00:42,740 --> 00:00:48,320
got a reference to the navigation prop coming into our tracklist screen we can use either one of them

11
00:00:48,320 --> 00:00:49,550
to navigate around.

12
00:00:49,550 --> 00:00:55,220
In this case since we've already got the prop luscious use that so inside this function I'm gonna give

13
00:00:55,220 --> 00:01:02,310
myself just a little bit of space here by new lining that like so and then inside I'll do a navigation

14
00:01:03,150 --> 00:01:09,720
dot navigate we want to go over to our track detail and remember if we ever want to pass along some

15
00:01:09,750 --> 00:01:13,620
information we can put in an object as a second argument.

16
00:01:13,620 --> 00:01:18,450
So in this case I'm going to communicate the idea of the item or the track that the user just tapped

17
00:01:18,450 --> 00:01:19,350
on.

18
00:01:19,350 --> 00:01:24,390
Remember that the idea's property inside of each these tracks is on the underscore I.D. property.

19
00:01:24,390 --> 00:01:28,320
So I'm going to include the underscore here just to stay very consistent.

20
00:01:28,320 --> 00:01:34,540
So I'll say underscore I.D. is item dot underscore I.D..

21
00:01:34,670 --> 00:01:34,930
All right.

22
00:01:34,940 --> 00:01:40,220
So we should be able to test that very quickly if I now go back over I should build to tap on say car

23
00:01:40,220 --> 00:01:43,090
drive and go over to my track detail screen.

24
00:01:43,130 --> 00:01:44,700
Very good.

25
00:01:44,740 --> 00:01:48,380
Now we can go to our track detail screen.

26
00:01:48,490 --> 00:01:53,500
Here it is right here and start to add in some code to take a look at the I.D. that was provided when

27
00:01:53,500 --> 00:01:58,990
we navigated over here and also take a look inside of our context object and find the appropriate track

28
00:01:59,410 --> 00:02:04,460
and then display some information about it on the screen to the user so to get started let's first try

29
00:02:04,460 --> 00:02:09,350
to get a reference to the I.D. of the track that the user just tapped on.

30
00:02:09,380 --> 00:02:15,750
So to do so remember we can get a reference to the navigation property and then to get some piece of

31
00:02:15,750 --> 00:02:23,300
information that was passed along when we did our navigation we call underscore I.D. navigation dot

32
00:02:23,300 --> 00:02:24,630
to get param.

33
00:02:24,760 --> 00:02:27,700
And then the key of whatever that information was passed on.

34
00:02:27,700 --> 00:02:33,470
So in our case underscore I.D. it's now we've got this variable that tells us exactly what element the

35
00:02:33,470 --> 00:02:36,200
user just tapped on or what track they tapped on.

36
00:02:36,200 --> 00:02:41,330
So now we can try to get a big list of all of our different tracks and find the appropriate track inside

37
00:02:41,350 --> 00:02:44,790
their well if we want to get a list of all of our different tracks.

38
00:02:44,810 --> 00:02:52,020
All we have to do is get access to our track context and pull the state out of it so inside of track

39
00:02:52,020 --> 00:02:53,580
detail screen at the very top.

40
00:02:53,610 --> 00:02:59,280
I'll make sure that I get use context from react.

41
00:02:59,460 --> 00:03:08,080
I'll make sure that I get my context as track context from UPS up one directory context track context

42
00:03:08,090 --> 00:03:11,870
there we go and then inside of my component.

43
00:03:12,090 --> 00:03:17,940
Let's get our state so that's going to be our array of all the tracks we fetched from our API we'll

44
00:03:17,940 --> 00:03:23,400
say use context location to submit track context like so

45
00:03:27,660 --> 00:03:28,050
all right.

46
00:03:28,340 --> 00:03:33,660
It's now that we've got our big list and the idea the one that we want to find well we can simply do

47
00:03:33,660 --> 00:03:38,370
some kind of iteration through that list and find a particular track and we don't have to write a for

48
00:03:38,370 --> 00:03:39,590
loop or anything like that.

49
00:03:39,600 --> 00:03:44,520
Instead we can use that find helper function that we spoke about earlier inside this course.

50
00:03:44,520 --> 00:03:49,140
So I'll say that I want to find the track by doing states dot find.

51
00:03:49,150 --> 00:03:54,270
So remember staked find or specifically the find function tied to an array in Javascript is going to

52
00:03:54,270 --> 00:04:00,910
take a function and we're going to receive every different track inside of here we're then going to

53
00:04:00,910 --> 00:04:06,790
return a boolean the first somewhere you turn a boolean the entire find statement is going to end and

54
00:04:06,790 --> 00:04:11,710
that element will be assigned to the track variable right there just to avoid some naming collisions

55
00:04:11,710 --> 00:04:13,390
between track and track.

56
00:04:13,390 --> 00:04:18,620
I'm going to name track inside of that arrow function as simply t like so.

57
00:04:18,680 --> 00:04:25,920
So now the track that we care about is going to be t dot underscore I.D. with an I.D. equal to underscore

58
00:04:25,950 --> 00:04:27,050
I.D..

59
00:04:27,190 --> 00:04:32,080
So that should give us the track that we want to see.

60
00:04:32,090 --> 00:04:32,330
All right.

61
00:04:32,330 --> 00:04:37,310
So now inside of our text element rather than printing out track detail screen let's try printing out

62
00:04:37,310 --> 00:04:39,560
the name of the track that we just found.

63
00:04:39,740 --> 00:04:45,650
So I will do inside of here track dot name Gail let's test this out.

64
00:04:45,790 --> 00:04:51,190
So I got a tap on car drive in as soon as I do I see a car drive appear perfect.

65
00:04:51,220 --> 00:04:55,060
Same thing for went for bike ride and went for hike.

66
00:04:55,100 --> 00:04:57,340
Well I would say that definitely works out.

67
00:04:57,390 --> 00:04:58,720
So let's take a quick pause right here.

68
00:04:58,730 --> 00:05:03,590
Now that we've got the track that we care about we can start to show a map to the user and draw the

69
00:05:03,620 --> 00:05:05,990
track on there as well.

70
00:05:05,990 --> 00:05:08,360
So quick pause and I'll see you in just a minute.