1 00:00:01,920 --> 00:00:07,650 So we've got our charts successfully rendering inside of our application all we need to do now is replicate 2 00:00:07,650 --> 00:00:15,320 this two more times once for the pressure and once for humidity. 3 00:00:15,370 --> 00:00:19,920 There's one thing I want you to think about ahead of that though if we were going to duplicate the spark 4 00:00:19,920 --> 00:00:25,080 lines in here in the same file we would end up with something that looks like this. 5 00:00:25,350 --> 00:00:30,930 And this is something that should definitely give you pause if you ever find yourself replicating some 6 00:00:30,930 --> 00:00:33,630 piece of markup in this fashion right here. 7 00:00:33,630 --> 00:00:39,240 It's definitely a sign that you're probably going to want to be playing this out to be a separate component 8 00:00:39,560 --> 00:00:42,080 a reusable component. 9 00:00:42,180 --> 00:00:47,820 So I think this would be a really good opportunity to refactor our SPARC lines code right here into 10 00:00:47,820 --> 00:00:53,580 a separate component and reuse that three times instead of writing out all this markup right here for 11 00:00:53,580 --> 00:00:56,860 defining a single char three times in a row. 12 00:00:57,370 --> 00:00:57,880 OK. 13 00:00:58,080 --> 00:00:59,540 So let's get to it. 14 00:00:59,580 --> 00:01:01,510 We'll be making a separate component. 15 00:01:01,540 --> 00:01:06,710 And as usual we need to decide whether this is going to be a container or a component. 16 00:01:07,230 --> 00:01:10,260 In this case the choice is going to be a lot easier. 17 00:01:10,320 --> 00:01:15,120 We're generating all of our data inside of this function right here which means we're always going to 18 00:01:15,120 --> 00:01:17,550 be passing it directly into that chart. 19 00:01:17,820 --> 00:01:22,110 That means that this component this new chart component we're going to make doesn't need to talk to 20 00:01:22,110 --> 00:01:26,270 redux at all because it's going to be getting its data from its parent. 21 00:01:26,820 --> 00:01:32,520 So we'll just make it a component instead and sodomite components folder right here. 22 00:01:32,550 --> 00:01:37,150 I'm going to make a new directory call or see a new file called Charcot. 23 00:01:37,180 --> 00:01:39,860 Jay Yes. 24 00:01:40,770 --> 00:01:46,440 Now once we're in here we need to ask ourselves the question should this be a class based component 25 00:01:46,470 --> 00:01:49,070 or a function based component. 26 00:01:49,230 --> 00:01:53,580 In this case we don't need to make any use of state inside of our chart at all. 27 00:01:53,580 --> 00:01:58,710 Any use of phone of component state it's going to be just some props come in. 28 00:01:58,710 --> 00:02:01,400 We render a component that's it. 29 00:02:01,440 --> 00:02:05,850 No extra you know jumping around or any fancy stuff going on at all. 30 00:02:06,030 --> 00:02:10,080 So we can really get away with just making a functional component here. 31 00:02:10,140 --> 00:02:13,090 Let's throw in some boilerplate to make that happen. 32 00:02:13,200 --> 00:02:25,440 The top will do import react from react and then will export default props the fat arrow function and 33 00:02:25,440 --> 00:02:26,580 we will return. 34 00:02:26,670 --> 00:02:27,050 It's 35 00:02:30,480 --> 00:02:34,390 a div for just right now. 36 00:02:34,460 --> 00:02:39,600 Now let's go ahead and copy paste over some of the code that we were using for making a chart. 37 00:02:39,960 --> 00:02:44,180 And we do is make sure that you clean up the old code Songun specifically rather than copy. 38 00:02:44,190 --> 00:02:45,350 I should say cut. 39 00:02:45,750 --> 00:02:53,130 So I'm going to cut the import statement at the top paste it my char and I am and come back over and 40 00:02:53,280 --> 00:03:00,770 cut the spark lines code in here as well and I'm going to paste it inside of this div. 41 00:03:01,380 --> 00:03:04,440 We don't really need this top level div right here. 42 00:03:04,470 --> 00:03:08,470 But as you'll see in just a minute we're going to add another element in here. 43 00:03:08,540 --> 00:03:11,790 So trying to keep the div around anyways. 44 00:03:13,200 --> 00:03:18,070 Ok so now that we're in here we've got to just fix a couple loose ends. 45 00:03:18,090 --> 00:03:24,390 First off our component right here is making reference to a variable of temp's which doesn't exist anymore 46 00:03:24,390 --> 00:03:24,950 in here. 47 00:03:25,200 --> 00:03:27,930 We're going to pass the data in as a property. 48 00:03:27,930 --> 00:03:34,050 So instead of saying temp's will say prop's dot data because we'll pass it in as a property called Data 49 00:03:35,390 --> 00:03:36,780 next. 50 00:03:36,900 --> 00:03:38,890 This is hardcoded for the color red. 51 00:03:39,060 --> 00:03:42,630 We probably want to make that available as a level of configuration. 52 00:03:42,750 --> 00:03:47,430 So instead of hard coding it I'll say prop's start color. 53 00:03:49,410 --> 00:03:50,670 That looks pretty good. 54 00:03:50,670 --> 00:03:55,190 Now we just need to import it back into weather list and make use of it in here. 55 00:03:55,680 --> 00:04:09,300 So from here we'll import charts from up into components chart up into components chart and then we'll 56 00:04:09,300 --> 00:04:16,250 place our new charts and expects to properties a color and some data. 57 00:04:17,160 --> 00:04:22,620 So for this first chart that replace your the property or the data that we're going to pass in is still 58 00:04:22,620 --> 00:04:24,000 going to be the temperature right. 59 00:04:24,000 --> 00:04:26,370 We're still rendering a chart for the temperature. 60 00:04:27,030 --> 00:04:31,840 So will pass and temps and then we're going to pass in a color as well. 61 00:04:31,950 --> 00:04:39,290 And this one will be let's do orange and then we'll just do a self-closing tag here for the chart. 62 00:04:40,220 --> 00:04:44,160 Okay I'm going to save this and let's give it a shot in the browser. 63 00:04:44,760 --> 00:04:45,770 So refresh 64 00:04:48,630 --> 00:04:55,010 and let's do a search for Phoenix Denver Dallas Yep. 65 00:04:55,050 --> 00:04:58,460 Looks like we're still good to go here. 66 00:04:58,560 --> 00:05:04,500 So what we did in this section was refactored out that chart component to be its own separate functional 67 00:05:04,500 --> 00:05:05,350 component. 68 00:05:05,700 --> 00:05:10,680 This is something that I want to get really used to finding out over time or you know seeing that kind 69 00:05:10,680 --> 00:05:16,500 of pattern throughout the throughout your different re-act projects if you ever see yourself see yourself 70 00:05:16,500 --> 00:05:19,580 starting to replicate markup in your file. 71 00:05:19,590 --> 00:05:24,990 That's definitely a sign that you've got a really good opportunity for doing a factor into a separate 72 00:05:24,990 --> 00:05:27,570 reusable component on your hands. 73 00:05:28,350 --> 00:05:31,510 One of the best parts about this is specifically for this chart. 74 00:05:31,650 --> 00:05:36,780 This is such a generic component right here that we could really turn this into a usable component for 75 00:05:36,810 --> 00:05:38,090 other projects as well. 76 00:05:38,130 --> 00:05:38,820 Right. 77 00:05:38,820 --> 00:05:44,520 We could really use this sparkling component all over the place because it's so small there is no additional 78 00:05:44,520 --> 00:05:45,360 configuration. 79 00:05:45,360 --> 00:05:48,340 It's just very clear pass in your data pass your color. 80 00:05:48,420 --> 00:05:49,370 And that's pretty much it. 81 00:05:49,380 --> 00:05:50,850 You're good to go. 82 00:05:51,660 --> 00:05:52,140 OK. 83 00:05:52,140 --> 00:05:57,690 So let's go ahead and continue in the next section where we're going to make a new chart for the temperature 84 00:05:57,690 --> 00:06:00,350 or excuse me for the pressure and the humidity as well.