1
00:00:01,090 --> 00:00:04,120
All right in this video we're going to do some work inside of our track form.

2
00:00:04,120 --> 00:00:07,990
So instead of track form we now need to wire up a couple of those different action functions so we just

3
00:00:07,990 --> 00:00:08,940
put together.

4
00:00:09,040 --> 00:00:12,840
In particular we need to make sure that we call start recording.

5
00:00:12,840 --> 00:00:16,620
Anytime time we tap on that button we also need to make sure that we call change name.

6
00:00:16,630 --> 00:00:18,520
Anytime user changes the name.

7
00:00:18,580 --> 00:00:23,260
So essentially we're just adding in some code to track form to call those action functions that we just

8
00:00:23,260 --> 00:00:25,360
implemented in last video.

9
00:00:25,360 --> 00:00:28,480
The first we have to do inside of here is get access to those functions.

10
00:00:28,510 --> 00:00:33,130
So we need to make sure we get our use context hook from react.

11
00:00:33,310 --> 00:00:41,720
We need to make sure that we get our context as location context from our context file as well so we'll

12
00:00:41,720 --> 00:00:48,990
get that from up one directory context location context gates.

13
00:00:49,000 --> 00:00:58,550
Now inside of here we're going to pull off start recording stop recording and change name from use context

14
00:00:59,510 --> 00:01:05,850
location context we'll probably eventually need to get access to state inside of here as well.

15
00:01:05,860 --> 00:01:09,070
But right now let's just wire up some of these easy things.

16
00:01:09,070 --> 00:01:13,210
So first off we probably want to make sure that our text input right here anytime a user changes that

17
00:01:13,210 --> 00:01:15,460
text we should call changed name.

18
00:01:15,460 --> 00:01:22,520
Remember this is how we turn it into a controlled input so I'm going to add on a on change text callback

19
00:01:22,860 --> 00:01:31,330
on change text and say anytime someone changes this text call our action function of change name to

20
00:01:31,330 --> 00:01:32,980
truly turn this into a controlled input.

21
00:01:32,980 --> 00:01:36,100
Remember we need to specify the value prop on the input as well.

22
00:01:36,490 --> 00:01:38,530
So I guess we do need that state property.

23
00:01:38,530 --> 00:01:39,990
Let's pull it off right now.

24
00:01:39,990 --> 00:01:41,800
So a lot in state right there.

25
00:01:41,800 --> 00:01:46,660
Now we probably are going to end up needing a couple of different state values inside of here.

26
00:01:46,660 --> 00:01:52,090
So we could just reference like state DOT name and state DOT recording all that kind of stuff or we

27
00:01:52,090 --> 00:01:56,710
could d structure further into our state object which I think would probably be ideal.

28
00:01:56,760 --> 00:02:01,060
So going to first begin by giving myself just a little bit of space here by new learning these properties

29
00:02:01,060 --> 00:02:07,080
that we're pulling off and then off the state object I'll say inside of there I want to get access to

30
00:02:07,080 --> 00:02:08,000
name.

31
00:02:08,190 --> 00:02:12,750
And chances are we will also need recording inside of here as well to decide what text we should show

32
00:02:12,780 --> 00:02:14,930
on that button.

33
00:02:14,960 --> 00:02:16,010
It's now on our input.

34
00:02:16,010 --> 00:02:27,730
We can add in a value prop of name and now on the button we can add in an on press and say anytime someone

35
00:02:27,850 --> 00:02:31,940
presses that button right there like that one in particular let's start recording.

36
00:02:32,080 --> 00:02:38,050
So I will do start recording like so we also wanna make sure that this button kind of changes its title

37
00:02:38,110 --> 00:02:40,980
and the on press callback anytime that recording is true.

38
00:02:40,990 --> 00:02:46,210
So if we already are recording we want to show a different button so we can easily express that by writing

39
00:02:46,210 --> 00:02:47,740
in a little ternary expression.

40
00:02:47,740 --> 00:02:51,530
Once again it's all put in a set of red quotes.

41
00:02:51,650 --> 00:02:58,670
I'll say if we are recording so recording then a question mark if we are recording then I probably want

42
00:02:58,670 --> 00:03:05,860
to show a new button element so I'll put it a button and I'll give this one a title of stop recording

43
00:03:07,000 --> 00:03:16,100
and then on press of stop recording and then if we are not recording so I'll put in the LC case inside

44
00:03:16,100 --> 00:03:16,980
of your soul.

45
00:03:17,000 --> 00:03:21,660
Put in the colon like so if we are not recording I want to use that but an element right there.

46
00:03:21,660 --> 00:03:28,080
Though the one that says start recording and that should probably do it all right.

47
00:03:28,090 --> 00:03:33,360
So if we are recording or something if we are yes if we are recording we want to stop.

48
00:03:33,400 --> 00:03:38,000
Otherwise if false then we want to start all right.

49
00:03:38,010 --> 00:03:38,850
So this looks pretty good.

50
00:03:38,860 --> 00:03:40,330
Let's see this and see how we're doing.

51
00:03:41,670 --> 00:03:45,420
So go back to track create I should be able to enter a name.

52
00:03:45,440 --> 00:03:46,770
Yep looks good.

53
00:03:46,770 --> 00:03:52,750
And I should be able to tap on start recording and when I do you'll notice the changes into stop recording.

54
00:03:52,750 --> 00:03:53,030
Look at that.

55
00:03:53,030 --> 00:03:54,510
Definitely looks good.

56
00:03:54,510 --> 00:03:58,950
Now one thing I can tell you right away is that it's really hard to see when that checks change from

57
00:03:58,950 --> 00:03:59,730
start to stop.

58
00:04:00,030 --> 00:04:04,620
So we might want to change the text on the button element right here on specifically these stop recording

59
00:04:04,620 --> 00:04:09,750
one and just have it say like Stop instead because that's gonna make the change a little bit more evident

60
00:04:09,750 --> 00:04:14,340
to the user and just make it more obvious that hey you are like now in a recording state.

61
00:04:14,340 --> 00:04:15,550
Yeah there we go that's a little bit better.

62
00:04:15,660 --> 00:04:17,000
We'll get more obvious what's going on.

63
00:04:18,150 --> 00:04:19,540
So I can stop.

64
00:04:19,540 --> 00:04:22,150
And very good OK.

65
00:04:22,170 --> 00:04:26,350
So this definitely looks great but we need to make sure that we're actually saving the correct data.

66
00:04:26,350 --> 00:04:29,760
We're updating the correct data inside of our location context.

67
00:04:29,950 --> 00:04:35,140
The last thing I want to do very quickly inside of here at the very top of track form I'm going to pull

68
00:04:35,140 --> 00:04:38,290
off the locations property off of state as well.

69
00:04:38,290 --> 00:04:43,240
Remember anytime we are recording a list of all of our different locations should be getting accumulated

70
00:04:43,240 --> 00:04:50,640
inside of that locations array so inside of here I'm gonna do a console log of locations dot length

71
00:04:50,820 --> 00:04:55,290
like so I'm not going to look at the actual objects inside there because remember every location is

72
00:04:55,290 --> 00:04:56,850
a rather large object.

73
00:04:56,850 --> 00:05:00,950
Instead I'm just going to say hey are we adding in some additional number of locations.

74
00:05:00,990 --> 00:05:02,770
That's all I really want to check.

75
00:05:02,900 --> 00:05:10,010
So I going to save this I'm going to go over to create a track I'm going to go and check my journal

76
00:05:10,020 --> 00:05:12,870
really quickly and make sure those we start off with zero.

77
00:05:12,960 --> 00:05:17,120
And yes we definitely do notice how we're seeing kind of the scrolling zero right here.

78
00:05:17,130 --> 00:05:22,530
That's because remember we are updating our current location piece of state over and over again because

79
00:05:22,530 --> 00:05:26,450
we are updating the current location piece of state that causes all of our different components to re

80
00:05:26,450 --> 00:05:29,180
render and that includes track form.

81
00:05:29,350 --> 00:05:34,300
Now to make sure that we actually can track or add in some additional locations I'll hit start recording

82
00:05:35,610 --> 00:05:42,670
if I now flip back over oh well it says zero right here which means something is not quite recording

83
00:05:42,670 --> 00:05:46,000
correctly so it looks like we've got a little bit of troubleshooting to do.

84
00:05:46,000 --> 00:05:48,610
So let's take a quick pause right here and continue in the next video.