1
00:00:01,040 --> 00:00:05,880
Back inside of our track text file we can now make use of our tracker API right here to make a request

2
00:00:05,880 --> 00:00:08,360
to our API and create our track.

3
00:00:08,370 --> 00:00:12,330
So going to find create track I'm going to delete the code inside of it.

4
00:00:12,570 --> 00:00:16,590
I'm gonna make sure that I mark the inner function here as async because we're definitely going to want

5
00:00:16,590 --> 00:00:18,710
to use some async await syntax.

6
00:00:18,950 --> 00:00:23,900
All then say a weight tracker API and remember to create a new track.

7
00:00:23,910 --> 00:00:30,580
We're going to make a post request to slash tracks then as a second argument we're gonna pass in in

8
00:00:30,580 --> 00:00:36,370
an object or name of the track we're trying to create in the list of locations as well so I'll put in

9
00:00:36,370 --> 00:00:39,830
name and locations inside of an object.

10
00:00:41,030 --> 00:00:45,700
And that should pretty much be it so I'm gonna save this before I tested.

11
00:00:45,710 --> 00:00:50,570
I want you to recall that we can take a look at all the data inside of our database by going to our

12
00:00:50,630 --> 00:00:54,560
Mongo DB Atlas over here and finding are running cluster.

13
00:00:54,740 --> 00:00:57,110
Once here we can inspect our cluster.

14
00:00:57,260 --> 00:01:03,560
Remember you can click on that collections button right there and then we can take a list look at our

15
00:01:03,560 --> 00:01:04,740
list of tracks.

16
00:01:04,760 --> 00:01:12,250
So right now I have exactly one track inside of my database so I'm going to flip back over to my application.

17
00:01:12,330 --> 00:01:19,500
I'm going to go to track create I'll answer in a name like went for a hike.

18
00:01:19,760 --> 00:01:25,980
I'll then start recording I'll let it do one two three or four points or so I'll then stop and then

19
00:01:25,980 --> 00:01:31,170
I should be able to hit save recording and that should make the request to our back and server.

20
00:01:31,170 --> 00:01:35,120
So after I hit save recording I'll then go back over to mongo.

21
00:01:35,480 --> 00:01:39,840
I'm going to click on that green find button right here to reassure our query to get a list of all the

22
00:01:39,840 --> 00:01:40,930
different tracks we have.

23
00:01:42,740 --> 00:01:48,170
And now I can see that I've got a second track inside of here with the name of went for Heike and if

24
00:01:48,170 --> 00:01:52,850
I expand locations I'll see that I've got all of my recorded locations inside of here.

25
00:01:53,060 --> 00:01:59,510
So I've got cords and there's exactly where it was for that portion or that particular point that we

26
00:01:59,510 --> 00:02:00,560
recorded.

27
00:02:00,560 --> 00:02:06,080
So it looks like everything is working out OK well this is definitely fantastic.

28
00:02:06,310 --> 00:02:11,020
Before we move on there's probably a couple things we're going to want to do after we successfully save

29
00:02:11,050 --> 00:02:12,290
a recording.

30
00:02:12,340 --> 00:02:16,600
So first off after we save a recording we probably are going to want to make sure that media we like

31
00:02:16,630 --> 00:02:21,160
navigate over to the track list screen or something like that where a user can then take a look at the

32
00:02:21,160 --> 00:02:22,880
track they just created.

33
00:02:22,960 --> 00:02:28,000
In addition after we save a recording we're probably going to want to reset the state of our form so

34
00:02:28,000 --> 00:02:31,340
we might want to dump the entire list of points that are currently on the screen.

35
00:02:31,420 --> 00:02:36,670
We probably are going to want to hide the text right there and essentially just revert this entire screen

36
00:02:36,700 --> 00:02:39,880
back to how it looked when a user first started the application up.

37
00:02:40,330 --> 00:02:42,800
So a couple of different things we need to do.

38
00:02:42,830 --> 00:02:46,430
I think the first thing we should do is just make sure that we can reset this form right here.

39
00:02:46,460 --> 00:02:54,060
After we successfully save our recording so to do so I'm going to go back to our use save tracked J.S.

40
00:02:54,060 --> 00:03:00,890
file right here inside of you save track remember we've got the safe track function and that's right

41
00:03:00,890 --> 00:03:06,720
there is where we actually make a request inside of create track so if we wanted to we can add a async

42
00:03:06,870 --> 00:03:11,550
onto that function and then await the success of creating the track.

43
00:03:11,550 --> 00:03:16,290
So then right after we successfully create that thing we can add in some code to do some cleanup on

44
00:03:16,290 --> 00:03:21,700
our form like reset the name reset the list of locations and all that kind of good stuff.

45
00:03:21,700 --> 00:03:26,780
Now remember our list of locations and the name and all that stuff is stored inside of our location

46
00:03:26,780 --> 00:03:28,100
context.

47
00:03:28,100 --> 00:03:32,630
So what we're really doing here when we are talking about resetting our form we are really talking about

48
00:03:32,630 --> 00:03:35,770
modifying the state inside of location context.

49
00:03:35,960 --> 00:03:43,250
And as usual anytime we want to modify our state we need an action function so let's open up our location

50
00:03:43,250 --> 00:03:51,130
context file year location context I'm going to add in a new action function inside of here and I'll

51
00:03:51,130 --> 00:03:52,980
call it simply reset.

52
00:03:53,260 --> 00:04:02,690
So any time that I call reset I want to dispatch an action right away that's going to essentially reset

53
00:04:02,720 --> 00:04:08,420
our state back to some kind of like initial state where maybe we empty out our list of locations and

54
00:04:08,420 --> 00:04:14,770
reset the name property back to an empty string so inside of resets I'll make sure that I dispatch an

55
00:04:14,770 --> 00:04:17,460
action type simply like reset.

56
00:04:17,470 --> 00:04:23,160
I think that's a reasonable term I'll add in that new action function to my list of functions right

57
00:04:23,160 --> 00:04:23,710
here.

58
00:04:23,790 --> 00:04:26,190
So the very end I'll put in reset

59
00:04:29,130 --> 00:04:35,690
and then finally inside of my reducer I'll add in a new case of resets.

60
00:04:35,870 --> 00:04:38,940
So then instead of here I'll take my entire state object.

61
00:04:39,300 --> 00:04:45,240
I'm going to update the name and kind of reset it back to being an empty string and then I'll reset

62
00:04:45,240 --> 00:04:49,160
my list of locations as well to an empty array okay.

63
00:04:49,170 --> 00:04:50,810
That should pretty much be it.

64
00:04:50,910 --> 00:04:53,260
Now I can save this file.

65
00:04:53,500 --> 00:04:55,310
I'll go back to you at use save track.

66
00:04:55,450 --> 00:04:59,260
Here's the hook and from our location context right here.

67
00:04:59,390 --> 00:05:02,590
I'll get that reset function we just created.

68
00:05:02,610 --> 00:05:09,410
So now inside of safe track immediately after we successfully make a request we can call reset and that

69
00:05:09,410 --> 00:05:12,720
should reset our form okay.

70
00:05:12,750 --> 00:05:16,740
So let's make a quick test here once again.

71
00:05:16,760 --> 00:05:21,400
I will add in some name like went for a bike ride.

72
00:05:21,620 --> 00:05:24,790
I'll start recording let it get a couple of points here.

73
00:05:24,800 --> 00:05:28,880
Just so I can see a line being drawn I'll then stop.

74
00:05:29,120 --> 00:05:34,370
And now once I hit save recording and their request is made successfully I should see the text right

75
00:05:34,370 --> 00:05:36,820
there be zeroed out and go back to an empty string.

76
00:05:36,830 --> 00:05:41,480
In addition I should see that line right there disappear as well because remember we just emptied out

77
00:05:41,480 --> 00:05:43,150
that list of locations.

78
00:05:43,520 --> 00:05:44,740
So let's say recording.

79
00:05:44,900 --> 00:05:48,810
And sure enough it all goes away and I'm back to my original status.

80
00:05:48,830 --> 00:05:51,210
Well I'd say this looks pretty good.

81
00:05:51,320 --> 00:05:55,080
Now there's probably one other quick thing that we might want to do here.

82
00:05:55,190 --> 00:06:00,440
Remember after we save the form as we just mentioned we probably want to navigate over to our trackless

83
00:06:00,500 --> 00:06:04,400
screen where a user can then see that track that they just created.

84
00:06:04,400 --> 00:06:10,500
So to do so we can just add in right after that reset call call to our navigate function.

85
00:06:10,580 --> 00:06:15,740
Remember we've got that navigate function from the navigation ref file that we created a little bit

86
00:06:15,740 --> 00:06:20,160
ago so inside of you save track.

87
00:06:20,160 --> 00:06:26,950
I'm going to add in an import at the top to get the navigate function from up one directory.

88
00:06:27,310 --> 00:06:36,110
Navigation ref and then after we save our stuff after we reset the form will then navigate over to our

89
00:06:36,380 --> 00:06:41,540
track list like so let's do a safe here.

90
00:06:41,550 --> 00:06:43,730
And one last quick test.

91
00:06:43,980 --> 00:06:54,180
So get a check create I can enter in a new thing here like car drive I'll start recording and I'll stop

92
00:06:54,660 --> 00:07:00,440
I'll save and I get navigated over here where presumably we can now make a request to go and get our

93
00:07:00,440 --> 00:07:04,310
list of all those different tracks that are saved on our API.

94
00:07:04,310 --> 00:07:07,450
Well I'd say we've made some pretty good progress so quick pause right here.

95
00:07:07,460 --> 00:07:13,140
When come back the next video we'll make sure that our track contacts has an implementation for fetch.

96
00:07:13,130 --> 00:07:14,240
Tracks right here.

97
00:07:14,240 --> 00:07:19,160
We'll get that list of tracks storm inside of our state and then we'll be able to show them as a list

98
00:07:19,190 --> 00:07:20,360
on the screen.

99
00:07:20,360 --> 00:07:23,780
So as usual quick pause and I'll see you in just a minute.