1
00:00:01,080 --> 00:00:04,170
We've now got our track context and our location context.

2
00:00:04,230 --> 00:00:09,450
And as we just discussed we want these two things to essentially share some information and then eventually

3
00:00:09,450 --> 00:00:11,230
make requests where API.

4
00:00:11,340 --> 00:00:13,410
So what's the best way of doing this.

5
00:00:13,410 --> 00:00:17,760
Well I think that the best way of getting multiple different contacts to work together would be to create

6
00:00:17,790 --> 00:00:24,090
a custom hook and inside that hook we can make references where the use contacts took from react to

7
00:00:24,090 --> 00:00:29,790
get a handle on our location context a handle on track context and then freely share information between

8
00:00:29,790 --> 00:00:30,600
them.

9
00:00:30,660 --> 00:00:34,110
So let's try that out inside of my folks directory.

10
00:00:34,110 --> 00:00:41,530
I'm going to make a new file called use save track dot J.S. so as you might expect.

11
00:00:41,550 --> 00:00:47,650
The idea behind this hook right here is that it's going to give us the ability to save a track inside

12
00:00:47,650 --> 00:00:48,350
of this file.

13
00:00:48,350 --> 00:00:52,630
I want to first add in a couple of different imports so I think that we're probably going to need.

14
00:00:52,640 --> 00:00:56,870
So first off I think that we definitely need use context from react.

15
00:00:56,870 --> 00:01:03,850
I think we definitely need our context object as track context from the context file we just created.

16
00:01:03,850 --> 00:01:14,230
So that's gonna be up one directory context track context and I think that we also need to get our context

17
00:01:14,230 --> 00:01:24,450
object as location context from up one directory context location context so then inside of here we'll

18
00:01:24,450 --> 00:01:31,780
do an export default and inside we're going to add in some code to essentially pull some information

19
00:01:32,260 --> 00:01:37,690
out of our location context notably our list of locations and maybe that name property we're going to

20
00:01:37,690 --> 00:01:44,200
also pull the action function out of the track context we just created the one to create a track right

21
00:01:44,200 --> 00:01:44,880
here.

22
00:01:45,010 --> 00:01:48,940
So we're going to essentially pull some information out of our location we're going to pull the action

23
00:01:48,940 --> 00:01:53,620
function out of track context and then throw that information into the action function.

24
00:01:53,620 --> 00:01:54,690
And that's pretty much it.

25
00:01:55,420 --> 00:01:59,650
So inside of here I'm going to first pull off the action function that we're going to want to call to

26
00:01:59,650 --> 00:02:02,430
eventually create a track on our API.

27
00:02:02,620 --> 00:02:11,690
So I'll say const create track and that's going to come from use context track context.

28
00:02:11,690 --> 00:02:15,650
Next up I'm going to pull some information out of our location context.

29
00:02:15,950 --> 00:02:20,270
I'm going to open up my location context file very quickly and just get a quick reminder about some

30
00:02:20,270 --> 00:02:24,410
of the different properties that we maintain inside of here that we probably care about.

31
00:02:24,440 --> 00:02:28,880
So once again whenever we create a new track what we definitely care about the name that the user entered

32
00:02:28,880 --> 00:02:29,450
for it.

33
00:02:29,630 --> 00:02:33,920
And we also care about the list of locations that they have recorded as well.

34
00:02:35,650 --> 00:02:42,430
So if I go back over to it use save track I'm going to take a look at my state object and out of there

35
00:02:42,460 --> 00:02:46,740
I'm going to get my locations in My Name property.

36
00:02:46,890 --> 00:02:53,470
I'll make sure that I get those from use context location context.

37
00:02:53,580 --> 00:03:00,000
So then inside of here we can essentially call create track and pass in locations and name and then

38
00:03:00,000 --> 00:03:04,590
it will be up to us to provide some implementation for the create track function to actually take the

39
00:03:04,590 --> 00:03:10,200
list locations and the name and actually make a request with them now rather than thinking hey we're

40
00:03:10,200 --> 00:03:13,350
just gonna do something like create track and pass stuff in.

41
00:03:13,350 --> 00:03:15,570
That's probably not quite what we want.

42
00:03:15,780 --> 00:03:21,090
Instead our goal inside of a hook file like this is going to be to expose some reusable functionality

43
00:03:21,360 --> 00:03:23,910
to some different components inside of application.

44
00:03:24,060 --> 00:03:28,380
So rather than just kind of calling create track inside of here and saying Okay here's some data to

45
00:03:28,380 --> 00:03:35,040
save I think that instead what would be really handy to have would be maybe a function called like save

46
00:03:35,130 --> 00:03:42,970
track and inside of here maybe we put it in some logic to well call create track with that locations

47
00:03:43,000 --> 00:03:44,360
and name.

48
00:03:44,360 --> 00:03:51,520
So inside of here I'm going to call create track with the name and the list of locations and now here's

49
00:03:51,520 --> 00:03:52,200
the real trick.

50
00:03:52,210 --> 00:03:58,500
At the very bottom from this hook I'm going to return the save track function inside of an array.

51
00:03:58,900 --> 00:04:04,450
Now think about how we can really use this hook effectively if we ever have a component inside of application

52
00:04:04,480 --> 00:04:09,970
where we want to save a track from we only have to import use safe track.

53
00:04:09,970 --> 00:04:16,030
We will call it and in return we're going to get a function that we can call at any point in time to

54
00:04:16,030 --> 00:04:22,180
take whatever name we have whatever list of locations we have and make a request to our backend API.

55
00:04:22,180 --> 00:04:29,450
So essentially we are just exposing a function here that any component can use to save a new track in

56
00:04:29,480 --> 00:04:35,330
our particular case we probably want to call that safe track function from our track form.

57
00:04:35,330 --> 00:04:37,320
So here's my track form component.

58
00:04:37,370 --> 00:04:43,310
Remember we just added in that new button down here called Save recording so we could make use of the

59
00:04:43,370 --> 00:04:49,130
use safe track hook inside of here get the safe track function and then whenever user presses that button

60
00:04:49,400 --> 00:04:51,970
we can call that function right there.

61
00:04:51,980 --> 00:04:54,700
So essentially at all points in time we are ready.

62
00:04:54,740 --> 00:04:59,710
Hundred percent rate to go to make our request and it's really just up to our component to say okay

63
00:04:59,750 --> 00:05:00,140
you know what.

64
00:05:00,140 --> 00:05:04,890
I think that right now is the time that I want to save my track so time to call that function.

65
00:05:04,940 --> 00:05:10,220
So this is a really handy pattern to have put together to essentially integrate information from multiple

66
00:05:10,220 --> 00:05:13,110
different contexts.

67
00:05:13,180 --> 00:05:17,930
So now that we've got a reasonable idea of what we're trying to do I'm gonna go back over to track form

68
00:05:18,740 --> 00:05:21,500
at the very top I'm going to import the hook we just created.

69
00:05:21,650 --> 00:05:31,930
So I will import use save track from up one directory hooks you save track and then inside of you track

70
00:05:31,930 --> 00:05:35,550
form I'll say const save track.

71
00:05:35,580 --> 00:05:37,020
Let's get a reference set function.

72
00:05:37,040 --> 00:05:42,530
Remember the array that we return here inside of you safe track is only for community convention.

73
00:05:42,530 --> 00:05:44,390
Convention is to form a hook.

74
00:05:44,390 --> 00:05:47,920
Return a array that has some number of values inside of it.

75
00:05:47,960 --> 00:05:52,760
We don't have to return an array like this we could just return the function by itself or just the function

76
00:05:52,760 --> 00:05:53,990
inside an object.

77
00:05:53,990 --> 00:05:55,040
Anything goes.

78
00:05:55,100 --> 00:06:00,600
But again if we're sticking with commune convention we'll return that value inside of an array okay.

79
00:06:00,610 --> 00:06:07,020
So then back inside of track form we'll call use save track like so.

80
00:06:07,230 --> 00:06:08,000
And that's pretty much it.

81
00:06:08,870 --> 00:06:12,750
It's now down inside of our button here's our button right here.

82
00:06:13,870 --> 00:06:23,190
I'll do an on press whenever user presses this button we can call safe track as a final kind of a little

83
00:06:23,190 --> 00:06:26,620
bit of code we're going to add in here just to kind of test everything out.

84
00:06:26,760 --> 00:06:32,700
Let's open up our track context we will find our create track function right here.

85
00:06:32,700 --> 00:06:38,550
So remember this is ultimately the function that we want to call and we want this thing to receive the

86
00:06:38,550 --> 00:06:40,960
name and the list of locations.

87
00:06:41,010 --> 00:06:46,380
And so instead of here we will eventually make a request to our API but for right now let's just do

88
00:06:46,380 --> 00:06:49,900
a console log of the name of the track that we're trying to create.

89
00:06:50,280 --> 00:06:54,870
And also the number of locations that we're trying to save we could of course counsel log out all the

90
00:06:54,870 --> 00:06:58,590
locations in bulk but that's a very large array of objects.

91
00:06:58,590 --> 00:07:03,280
So we'll just print up the length case let's save this.

92
00:07:03,510 --> 00:07:11,000
I'll go back over to check create I'll enter a name of like go hiking I will start recording.

93
00:07:11,210 --> 00:07:13,080
Let it pick up one or two points.

94
00:07:13,210 --> 00:07:14,140
Let it stop.

95
00:07:14,640 --> 00:07:18,140
And then when I hit save that should trigger our console log.

96
00:07:18,140 --> 00:07:18,610
So now.

97
00:07:18,770 --> 00:07:25,810
Now go back over to my terminal and there's our console log so I've got a moment scrolled up here.

98
00:07:25,810 --> 00:07:27,150
Let me go all the way back down the bottom.

99
00:07:27,160 --> 00:07:28,030
There we go.

100
00:07:28,030 --> 00:07:32,780
So I've got the name which is go hiking and the number of points I recorded which is 4.

101
00:07:32,830 --> 00:07:35,850
So now we are 100 percent ready to take this information.

102
00:07:35,980 --> 00:07:39,620
Make requests for our back end API and actually create our track.

103
00:07:39,670 --> 00:07:41,470
So let's take care of that in the next video.