1 00:00:00,770 --> 00:00:06,180 In the last video we were able to successfully console log out some data inside of a real component. 2 00:00:06,180 --> 00:00:10,340 The special thing about this data is that it was sourced from our redux store. 3 00:00:10,650 --> 00:00:15,780 So we got some information from our retail store by defining that map stage props function and then 4 00:00:15,780 --> 00:00:18,320 passing it to the connect function down here. 5 00:00:18,450 --> 00:00:23,040 Now that we've got our list of songs inside of our song component we can start to focus on building 6 00:00:23,070 --> 00:00:25,010 a list of elements out of them. 7 00:00:25,230 --> 00:00:28,360 So this is going to be just like every other list that we've built so far. 8 00:00:28,440 --> 00:00:35,530 We're going to map over our this prop's songs array member that contains the list of song objects and 9 00:00:35,580 --> 00:00:40,800 for every song inside there we're going to return some GSX that's going to represent that song on our 10 00:00:40,800 --> 00:00:41,780 list. 11 00:00:41,850 --> 00:00:44,930 Now as a quick reminder at the end of the day we want something that looks like this. 12 00:00:44,970 --> 00:00:46,640 So we should see the song title. 13 00:00:46,650 --> 00:00:48,970 And then a select button right next to it. 14 00:00:49,020 --> 00:00:52,950 We're not going to worry about implementing any functionality around the like button just yet. 15 00:00:52,950 --> 00:00:57,090 We're just going to get this GSX to appear on the screen and then we'll start to worry about wiring 16 00:00:57,090 --> 00:00:59,070 up that slick button after that. 17 00:00:59,100 --> 00:01:02,540 So let's get to it back instead of my song list component. 18 00:01:02,550 --> 00:01:07,710 I'm going to clean up that console log inside the render method and then going to add in a new helper 19 00:01:07,710 --> 00:01:12,860 method to the song list component I'll say render list. 20 00:01:13,290 --> 00:01:18,810 So the goal of this method right here is to just take our list of songs map over them and return a big 21 00:01:18,810 --> 00:01:25,670 blob of GSX So inside of your I'm going to say return this prop's songs. 22 00:01:25,830 --> 00:01:33,560 Matt and then I'm going to pass the mapping function a function that's going to be called with each 23 00:01:33,620 --> 00:01:41,490 song object inside of that array and then inside of here we're going to return some amount of GSX that 24 00:01:41,490 --> 00:01:44,340 uses some properties out of that song object. 25 00:01:44,340 --> 00:01:49,630 Very quickly I want to mention make sure you've got the two return key words inside of render list the 26 00:01:49,800 --> 00:01:50,610 return statement. 27 00:01:50,610 --> 00:01:55,330 This one right here is returning some amount of GSX for the mapping function. 28 00:01:55,590 --> 00:02:02,010 The map statement overall is going to produce a brand new array of GSX elements and after we produce 29 00:02:02,010 --> 00:02:05,770 that array we want to return the array from the Wunderlist method. 30 00:02:05,790 --> 00:02:08,550 So that's why we have to return keywords here in a row. 31 00:02:09,410 --> 00:02:09,630 All right. 32 00:02:09,630 --> 00:02:12,340 So inside of here we're going to build out a list of elements. 33 00:02:12,360 --> 00:02:15,320 Now we've already used semantic UI quite a bit to build that list. 34 00:02:15,420 --> 00:02:18,320 So I'm not going to reference the semantic UI documentation. 35 00:02:18,390 --> 00:02:22,920 If you want to you could pull up the semantic UI docs and understand where I'm pulling all these different 36 00:02:22,920 --> 00:02:24,150 class names from. 37 00:02:24,330 --> 00:02:26,480 But I'm going to kind of throw the class names on here. 38 00:02:26,500 --> 00:02:32,670 Remember these are just class names that are pulled from semantic UI to get Arliss to look pretty reasonable. 39 00:02:32,700 --> 00:02:32,900 All right. 40 00:02:32,910 --> 00:02:37,860 So inside if you're going to place a div with the class aim of item and I'm also going to give it a 41 00:02:37,860 --> 00:02:38,540 key. 42 00:02:38,730 --> 00:02:43,410 Remember a key is not necessarily required but very highly recommended. 43 00:02:43,410 --> 00:02:46,390 Anytime that you are building out a list of elements. 44 00:02:46,560 --> 00:02:50,890 So for my key we don't have an ID and side of these song objects. 45 00:02:51,000 --> 00:02:55,390 Remember each song object only has a title and a duration. 46 00:02:55,410 --> 00:03:00,660 So in this case I'm just going to use the title as the key because it's sufficiently unique for each 47 00:03:00,660 --> 00:03:02,160 song that we're trying to render. 48 00:03:02,940 --> 00:03:08,990 So I'll say key of song dot title and then I'll close off that div. 49 00:03:09,830 --> 00:03:13,070 Then inside of here we're going to first place our button. 50 00:03:13,070 --> 00:03:18,680 Now I know it's kind of strange to write out the GSX for the button first but this just comes down to 51 00:03:18,680 --> 00:03:21,560 kind of how these semantic UI library renders out less. 52 00:03:21,590 --> 00:03:24,460 You'll see that it actually ends up looking really nice at the end of the day. 53 00:03:24,770 --> 00:03:33,190 So I would put down a div here with the class name of rights floated content's the keyword or the class 54 00:03:33,190 --> 00:03:38,920 name floated right there is what gets this div and everything inside of it to appear to the right hand 55 00:03:38,920 --> 00:03:41,970 side of each list item. 56 00:03:42,160 --> 00:03:53,520 Then inside that div I'm going to put a button with a class name of UI button primary and I'll give 57 00:03:53,520 --> 00:03:56,940 it some text of select. 58 00:03:57,630 --> 00:03:57,830 So 59 00:04:00,680 --> 00:04:05,720 then outside of that div with the classroom of right floated content so as a sibling to it I'm going 60 00:04:05,720 --> 00:04:09,880 to put another div with the class name of content. 61 00:04:12,050 --> 00:04:17,720 And it's going to have the actual song title like so. 62 00:04:17,870 --> 00:04:20,200 OK so that's it for our render list method. 63 00:04:20,200 --> 00:04:24,210 Now remember we don't have anything happening when a user clicks on that button just yet. 64 00:04:24,250 --> 00:04:27,910 So we're going to come back to this thing in just a little bit and make sure that we wire up an event 65 00:04:27,910 --> 00:04:32,740 handler to this button so we know that whenever a user clicks on select. 66 00:04:32,920 --> 00:04:37,680 And before we test this out we need to make sure that we actually call the render list method from our 67 00:04:37,680 --> 00:04:38,910 render method. 68 00:04:38,910 --> 00:04:42,470 So here's the render method at the bottom of the file or the bottom of the class. 69 00:04:42,480 --> 00:04:47,190 I'm going to replace song list inside there with the code to render list. 70 00:04:49,100 --> 00:04:53,260 And now I'll save this and we'll flip back over and see how we're doing. 71 00:04:53,270 --> 00:04:54,010 All right so. 72 00:04:54,130 --> 00:04:57,740 Well looks like it's not quite perfect just yet. 73 00:04:57,920 --> 00:05:02,920 We're going to add in a little bit more elements and a couple of different class names here and there. 74 00:05:02,990 --> 00:05:07,640 Inside of both this file in our app component as well to get the list to appear a little bit better 75 00:05:07,640 --> 00:05:08,870 than it currently does. 76 00:05:09,080 --> 00:05:14,270 So first off sudden my render method I'm going to find my div and I'm going to add a class name to it 77 00:05:14,330 --> 00:05:16,610 of UI divided. 78 00:05:16,700 --> 00:05:17,330 List 79 00:05:21,160 --> 00:05:23,440 and I'll save that and we'll test it out again. 80 00:05:23,440 --> 00:05:23,680 All right. 81 00:05:23,680 --> 00:05:28,390 That looks way more reasonable than it did before but now it appears that the entire list is stretching 82 00:05:28,390 --> 00:05:30,890 from the left hand side to the right hand side. 83 00:05:30,910 --> 00:05:35,920 In our original mockup showed it kind of being a little bit constrained in width and it also should 84 00:05:35,920 --> 00:05:38,720 have kind of a margin on the left hand side as well. 85 00:05:38,740 --> 00:05:43,180 So to take care of that we're going to set up a grid system just like we did back on that video. 86 00:05:43,510 --> 00:05:51,500 Now remember the grid system a semantic UI is not the same thing as the CSSA grid system. 87 00:05:51,560 --> 00:05:55,980 So back inside of my app component is the app component. 88 00:05:56,070 --> 00:06:00,090 We're just going to add a couple of elements in a couple of class names to this thing to give our app 89 00:06:00,090 --> 00:06:03,590 a little bit more structure when it comes to the layout of it. 90 00:06:03,600 --> 00:06:10,670 So on this top level div I'm going to give it a class name of UI container grid Eildon Place a div inside 91 00:06:10,670 --> 00:06:17,340 there with the class name of UI row and I'm going to close off the div on the other side of the song 92 00:06:17,340 --> 00:06:24,430 list and I'm going to add in one more nested if you're with the class name of column 8 wide 93 00:06:27,340 --> 00:06:30,060 and again I'll close it off on the other side the song list. 94 00:06:30,280 --> 00:06:34,600 So we've now got three nested divs right here each of which have a class name. 95 00:06:34,600 --> 00:06:35,690 We've got content. 96 00:06:35,700 --> 00:06:40,080 Can you give me your container grid you I row and column 8 wide. 97 00:06:40,200 --> 00:06:44,920 So let's say I'll save this we'll flip back over and that looks way more reasonable. 98 00:06:44,920 --> 00:06:49,590 So it looks a lot more like what we had initially been imagining inside of our Mocca. 99 00:06:49,990 --> 00:06:50,220 OK. 100 00:06:50,210 --> 00:06:51,210 So this looks pretty good. 101 00:06:51,340 --> 00:06:52,410 Let's take a pause right here. 102 00:06:52,450 --> 00:06:56,320 When we come back the next section we're going to make sure that any time a user clicks on the select 103 00:06:56,320 --> 00:07:01,810 button we will somehow select that song and then attempt to show information about it on the right hand 104 00:07:01,810 --> 00:07:02,850 side of her app. 105 00:07:02,920 --> 00:07:04,780 So quick pause and I'll see you in just a minute.