1 00:00:01,200 --> 00:00:05,820 I think the very last thing we have to do on this create track screen is make sure that after a user 2 00:00:05,820 --> 00:00:09,580 has entered a name started recording and stopped recording. 3 00:00:09,600 --> 00:00:13,620 We probably want to make sure that we show another button on here that will allow a user to save the 4 00:00:13,620 --> 00:00:15,000 recording that they have created. 5 00:00:15,690 --> 00:00:21,710 So to do so let's open up our track form once again inside of our components directory and inside of 6 00:00:21,710 --> 00:00:21,940 here. 7 00:00:21,960 --> 00:00:26,700 We're going to try to show an additional button that will eventually allow a user to save this recorded 8 00:00:26,700 --> 00:00:29,140 list of locations to our Express API. 9 00:00:30,490 --> 00:00:31,040 All right. 10 00:00:31,090 --> 00:00:37,270 So inside of here we probably only want to show that button to save the list of locations if we are 11 00:00:37,270 --> 00:00:41,930 no longer recording and we have some number of locations. 12 00:00:41,970 --> 00:00:47,290 So in other words if recording is false and locations has some number of objects inside of it let's 13 00:00:47,290 --> 00:00:49,140 show an additional button. 14 00:00:49,420 --> 00:00:52,720 By the way while I'm inside of track form I'm going to clean up that console log. 15 00:00:52,720 --> 00:00:56,860 We had around locations dot length really quickly all right. 16 00:00:56,870 --> 00:01:03,080 So then I'll scroll on down and right after our existing button I'll add in another ternary expression. 17 00:01:03,140 --> 00:01:09,890 So instead of here I'll say if we are not recording and if we have some number of locations 18 00:01:12,620 --> 00:01:18,270 then I want to show a button element notice that I've got the question mark in there for my ternary 19 00:01:18,270 --> 00:01:27,630 expression right now I'll give this button a title of save recording and then otherwise indicated by 20 00:01:27,640 --> 00:01:34,270 my colon I won't show anything at all indicated by null case we can then save this and test it out really 21 00:01:34,270 --> 00:01:35,620 quickly. 22 00:01:35,650 --> 00:01:37,380 Now I should be able to start recording. 23 00:01:37,510 --> 00:01:40,020 Let it get one or two points and then stop. 24 00:01:40,560 --> 00:01:43,330 And as soon as I do so I now see that extra button. 25 00:01:43,660 --> 00:01:47,880 At present those two buttons are kind of shameless smushed up against each other so to speak. 26 00:01:47,920 --> 00:01:52,630 So let's add a spacer component around both of our different buttons right here just to make sure that 27 00:01:52,630 --> 00:01:55,000 they've got a little bit of spacing around them. 28 00:01:55,000 --> 00:01:55,680 It's all wrapped. 29 00:01:55,680 --> 00:02:00,850 My first button with a spacer and I'll wrap my second button with a spacer as well 30 00:02:04,390 --> 00:02:10,930 so if I now test this once again I can start let it get one or two points stop and there's that save 31 00:02:10,930 --> 00:02:11,700 button. 32 00:02:12,010 --> 00:02:12,250 Okay. 33 00:02:12,260 --> 00:02:14,000 So that definitely looks good. 34 00:02:14,020 --> 00:02:17,440 So now we need to think about what happens whenever a user taps that button. 35 00:02:17,470 --> 00:02:22,180 Chances are we're going to want to take our list of locations and make a list or someone make a request 36 00:02:22,180 --> 00:02:29,600 to our back end API and essentially create a new track that's kind of opens up an interesting idea like 37 00:02:29,690 --> 00:02:34,070 how are we going to actually save our list of tracks to the back end API. 38 00:02:34,070 --> 00:02:38,660 In addition how are we going to eventually fetch all those and show them on the track list. 39 00:02:38,660 --> 00:02:43,730 Screen will as usual any time that we're talking about working with some kind of data we are always 40 00:02:43,730 --> 00:02:46,310 talking about making use of context. 41 00:02:46,490 --> 00:02:51,830 We already have a single context inside of our project called location context that's all about storing 42 00:02:51,890 --> 00:02:53,240 user data. 43 00:02:53,270 --> 00:02:58,370 So one way we could handle this is to essentially add in some more action functions to location context 44 00:02:58,760 --> 00:03:04,330 to create a new track on our backend API and then fetch a list of all the tracks that we have. 45 00:03:04,370 --> 00:03:09,290 However we're going to take a slightly different approach adding additional functionality to location 46 00:03:09,290 --> 00:03:11,130 contexts absolutely could work. 47 00:03:11,130 --> 00:03:11,740 Hundred percent. 48 00:03:11,750 --> 00:03:12,940 No doubt about it. 49 00:03:13,190 --> 00:03:17,540 But in the context of this course I want to make sure that you have a really good example of how to 50 00:03:17,540 --> 00:03:24,030 get different context objects to kind of work with each other so rather than just adding some more functionality 51 00:03:24,030 --> 00:03:30,790 into location context we're going to instead create a another context a third one inside of our application. 52 00:03:31,000 --> 00:03:37,090 We're going to call this track context and this new thing is going to be all about saving tracks that 53 00:03:37,090 --> 00:03:41,170 we ever recorded and fetching them from our back end API. 54 00:03:41,340 --> 00:03:46,350 Again we could add that functionality into location context but I really want you to have an example 55 00:03:46,530 --> 00:03:49,840 of having these two different things having to work with each other. 56 00:03:49,880 --> 00:03:54,540 Now when I say work with each other what I mean to say is that our location context has that locations 57 00:03:54,540 --> 00:03:57,750 property and it also has the name property. 58 00:03:57,750 --> 00:04:03,150 Whenever we make a request to our back end API to create a new track we need to take that name and the 59 00:04:03,150 --> 00:04:06,720 list of locations and send them off any post request. 60 00:04:06,720 --> 00:04:12,960 So we want to somehow take those two properties and transfer them in some fashion over to our track 61 00:04:12,960 --> 00:04:19,050 context and make sure it has the ability to take that information make a post request get a track back 62 00:04:19,260 --> 00:04:25,410 and then store it and say OK here's the track that was just created so to get started. 63 00:04:25,430 --> 00:04:31,480 Let's first start to scaffold out a track context a back inside of my project directory I'm going to 64 00:04:31,480 --> 00:04:39,850 find the context directory and find me create a new file inside they're called Track context dot J.S. 65 00:04:42,300 --> 00:04:49,360 inside of here we are going to import create data context remember that is our helper function from 66 00:04:49,360 --> 00:04:57,210 a create data context I'll then make my reducer which I will call track reducer as usual this thing 67 00:04:57,210 --> 00:05:03,720 is going to take in some state and action we'll do a switch over the actions type. 68 00:05:03,950 --> 00:05:10,770 And right now we'll just have a default case where we return our state's let's start to think about 69 00:05:10,770 --> 00:05:15,390 the different action functions that we might want to have related to our track reducer. 70 00:05:15,390 --> 00:05:17,620 I can definitely think of two off the top of my head. 71 00:05:17,700 --> 00:05:23,400 We probably want to have the ability to fetch all the tracks that are tied to some user so going to 72 00:05:23,400 --> 00:05:24,660 put in fetch tracks here. 73 00:05:24,690 --> 00:05:31,750 I'll use the shortened syntax and I'm going to put in kind of a placeholder function for right now like 74 00:05:31,750 --> 00:05:36,390 so and then I think that we should also have a second one called Create track. 75 00:05:36,390 --> 00:05:40,770 And this is as you might guess it's going to take in a name and list of locations and send them off 76 00:05:40,770 --> 00:05:45,680 to our back end API so I'll do create track. 77 00:05:45,710 --> 00:05:49,720 This will also have our dispatch in once again. 78 00:05:49,720 --> 00:05:53,310 I'll just throw in a can a stub of a function right here. 79 00:05:55,810 --> 00:06:03,430 All right now that we've got those to put together let's do an export const provider in context and 80 00:06:03,430 --> 00:06:07,050 that's going to come from calling create data context. 81 00:06:08,690 --> 00:06:12,620 And as usual our first argument will be our reducer. 82 00:06:12,660 --> 00:06:19,120 The second argument will be an object with our different action functions so fetch tracks and create 83 00:06:19,180 --> 00:06:20,470 track. 84 00:06:20,470 --> 00:06:24,040 And then finally our third argument is going to be our initial state. 85 00:06:24,040 --> 00:06:29,200 So for our initial states well we're gonna have a kind of list of different tracks here that we want 86 00:06:29,200 --> 00:06:30,730 to eventually display on the screen. 87 00:06:31,240 --> 00:06:35,560 So I think that our default state object should just be a simple array that will eventually have a list 88 00:06:35,560 --> 00:06:41,650 of all the different tracks that we have created and tied to this particular user gets us. 89 00:06:41,700 --> 00:06:46,830 Looks good to get started with last and we need to do is make sure that we wire this thing up to our 90 00:06:46,830 --> 00:06:48,180 app dot J.S. file. 91 00:06:48,390 --> 00:06:52,520 So I going to go back over to abduct J.S. at the very top. 92 00:06:52,530 --> 00:07:07,920 I'm gonna make sure that I import provider as track provider from source context track context and we 93 00:07:07,920 --> 00:07:11,780 can use that track provider down inside of our component right here. 94 00:07:11,790 --> 00:07:15,870 Now once again doesn't really matter what order we provide these in we can put them in in any order 95 00:07:15,870 --> 00:07:16,730 we wish. 96 00:07:16,750 --> 00:07:17,390 So this time around. 97 00:07:17,400 --> 00:07:25,380 All throw it as the most outer element so I'll put in track pro Vidar and just make sure I close it 98 00:07:25,380 --> 00:07:26,390 off. 99 00:07:26,590 --> 00:07:30,550 On the other side. 100 00:07:30,720 --> 00:07:31,880 So let's save this. 101 00:07:31,900 --> 00:07:34,790 I'm gonna make sure that I don't get any error messages or anything like that. 102 00:07:34,830 --> 00:07:36,290 Yeah still looks good. 103 00:07:36,510 --> 00:07:36,780 All right. 104 00:07:36,780 --> 00:07:40,730 So now that we've got this additional provider in here let's now take a quick pause. 105 00:07:40,740 --> 00:07:45,300 When come back the next video we're gonna figure out how we can somehow get the track context and the 106 00:07:45,300 --> 00:07:50,850 location context to kind of work together exchange information and eventually make our request to the 107 00:07:50,850 --> 00:07:52,410 back end API. 108 00:07:52,410 --> 00:07:54,030 So I'll see you in just a minute.