[00:00:00] Hi welcome back to the reactor cores. In the last guy we added a bunch of styles to make this look a little clearer. We also introduced the my schedule side of things and this guide we're going to actually put together our schedule component and map over the same data you see here and in the next guide after that we will be making it so we can remove the items from here. And then after that we will make it so we can add them and then we can remove them back and forth. All right. So this guide we are going to basically just try and get this data over here without all the styles just the data. So let's go ahead buy it and start by looking at our component here. You can see our course library component. Just remember we have maps data props and map dispatch props. So before we create the component let's just kind of think of what we want to do to make it so. Step 1 we got to give the skeleton we give the skeleton of a react component Saddam give it a class constructor render and then we want to map the state props so we can have access to our courses reducer which is in here so we can have access to the same data which we are fetching from a server. In this case it's just going to be in here automatically hardcoded in which you don't want to do. We're just doing it for demonstration purposes. [00:01:25][84.4]
[00:01:26] And then after that we want to provide map dispatch props except for we don't want to fetch the courses we want to have the ability to remove courses so in a different guide the next guy we will be creating a new action introducer to manage removing a course from our retrack store. So let's go ahead and create our component. So our components let's create a new file and call it schedule digests and then in here it's sort of a component. Go ahead and type this out I'm going to type this a little bit faster just because you already have done this a couple hundred times maybe not many times but we've done it enough that you should be able to type this out. No problem. Okay. Now let's go ahead and think about what we need. Okay. So we need our list but should we do it with a list. Yeah let's not do it with a list this time because we apply to much style. This maybe we will refactor it a little bit in the future and how we can use Dibbs kills competitive here. Let's give this a class name of schedule slots and the reason I'm be nice because in our design you can see that this is an empty slot. So we're just going to be calling each one of these a slot. So we have our slots here and then let's go ahead. And this is where we're going to want to call our staff core courses. So if we look back and of course library can see we're saying hey that's not props that courses are map this our intercourse or we're going to need something similar to this. [00:03:35][128.4]
[00:03:37] And let's go ahead and we don't want all of these things because we don't want the description and we don't want all these fancy styles we just want a nice little box that we can see our course titlist with a remove button which I added later. OK. So and our schedule was go ahead and start by connecting it to our store. So technically you could call this a container lets you react has to say about that react containers react containers can close that are so reactive containers. Let's see where the redux TAJAI Started work. Let's click on Nowling cases. I'm just going to hit command and type in container container components okay. Designing container components here I'm just going to search it in the search box up here container OK. So they're putting it in containers not components and you can see it's kind of like a component here except for we have access to our store. Yeah. OK. So we'll go we'll have a couple separate guides specifically on containers probably in the next app since we built these so far without talking about containers too much but just know that when we hook up our components to us to the store are pretty much creating a container and that's just to feed or not. So you can kind of understand what I'm talking about when we get around to containers and the next step. So we have our company here. And so far it's just a component not a container. Since we haven't implemented the Connect method so let's go ahead and do that. Now it's import connect and we're not going to import dispatch yet since we won't be doing actions in this video that will be the next guy. [00:05:49][132.9]
[00:05:50] So connect from react redux case we have three ducks and trying to remember the syntax for this. We have to type out maps the to props pass and state and then we have to return something so and state our courses we can do that. And then our props would be entirely equal to courses and I'll show you how it works. So down here in x40 if all we want to type out connect state or connect mapped to special props my state props my back and then we can put in actions but we're not doing that and then we need to kind of bind it to our component. So we're making a container here so our component is schedule and boom we have our higher cabala we have are we ever container here. Let's go ahead and let's go back to of course library and see what else we need so we ever connect. We don't need this yet. We will be adding in a move course feature. All right we're returning state. Looks like we should do this but I don't want to do that immediately because I've never tried returning just state our courses and this is how you kind of learn how things work is by really just experimenting and right now on recording as I'm experimenting to see if this is if this sets the entire app props to courses and I'm pretty sure that's what will happen because if you think about it we're saying this thought process courses and right here we're saying return courses. So this has to be props because the thing props art courses. [00:07:31][101.0]
[00:07:32] So we return just stayed on course as this has to make props equal to just courses. So I is probably pretty obvious or you might be kind of amazed like I am right now. So let's go ahead and see if this is all we need to let's just instead of learning it since I got stuck on time with all those alerts let's just console log it with back text and say provice is equal to this that props and lets Jaison string a virus that props. Okay. Make sure this is contained in some brackets. Definitely don't use the application brackets. It's not that nice visuals to your code is where it's which contain these in brackets and you would go and log that and then access our component interact. So lets say import schedule from DOT slash schedule. Cain eyelets throating kind of overthrowing this but down in here so right Melor thing schedule Schedule schedule Spolar right to. All right now let's see what this looks like. Nothing which means something is broken. So cancel nothing was returned from render. That means we didn't return anything from render Kway obviously. So what we have. Oh this is the library. OK let's say return in our schedule digests this throw in here back to have Laptev this whole thing. Clean it up make it look real nice it's real. This looks like we got one on our map state props and K'nex schedule must return a plane object. [00:09:27][114.5]
[00:09:28] Okay so basically what's happening is if you read here props is equal to assigning it as an array and then it's putting everything in or horses so it didn't do exact who thought it would do but because it looks like the kind of garden that if we're to do this it probably work because this makes it a plain javascript object and we actually have to give it a property name. So let's just say courses instead of courses. So I think that it would have had the behavior where we were kind of expecting except for the Facebook developing react. They made a. They basically handled that error by making uncustomary class of some sort and saying okay you need to return a custom object not just a random piece of data and that goes back to the pre work for this course. When we're going error management you might have asked how like how that all plays out. And that's exactly that's a good example of how it works so react was developed by redux was developed by not SRU but basically never developed it. They created some custom air to handle this. This here because they say OK we don't want this. We need a javascript object. So they made an error class and it's giving us this. So that's a good example of how that works. So back to relax we now have access to our courses and our props are schedule up lets go and this flag on here. Okay so housing is equal to let's get rid of that and let's write a render function let's just copy it from course library so copy this. Throating you. And what's not. Do all this. Well let's see how it acts. So let's go to of course library and copy our Propst courses our map and see how this behaves. [00:11:46][138.1]
[00:11:49] Case so it was already in brackets so let's just get of these brackets. Save that real page and we have exactly what we see here. So it's working exactly the same but it's normally Ul-Haque so that's why we're getting these dots. Since we're returning lists here so let's go ahead and get real quick I want to explain why this is working without having to use components. The reason being is because we've already fetched these from our store and then well this is on the screen. It's already in our store. We don't need to fetch it. You can reach our producers and get it from orses so we're turning it into art courses research courses. Then we can have access to it via a map save the props and connect redux. So I hope that makes sense for doesn't just kind of think about it and just know that that's why that's happening. So does the class name let's call this slot and then let's close that off let's put another given here and basically we want to either render a we want to either render KS is going to say empty or is it can say the name of the course. Right now we're just going to empty slot or actually we'll just put in course title but later on we're going to be introducing ternary operator condition deal and we will be determining whether or not to say cost title or empty slot. Okay. Now we need to out a little bit a little button so we can move it. Let's just give these a couple class names that I've already came up with so we don't really are so action and sloppy move. [00:14:08][139.5]
[00:14:10] And then on Cleg is where we would put the auction which will do that in the next guide so I won't go into debt. These guys are getting long so I don't want to talk about too much let's just say Rooth course. I would say that it's mapping over and it should be rendering all of our content up and running with red us remove course you export developers and remit of course. Okay so first things first we don't need the dollars saying and we have these in here. Okay let's go ahead and insert in Romania. I see it's us let's just make these. Well let's see. We have our dev here let's give this a class name know let's just try to think let's just give it a class. This is temporary we're going to remove this. I think maybe slight title is going to mean the CSSA. And let's actually create a file on our style and let's name this file Muccino adding a file let's name this file schedule. Yes good rule not just see us make a folder in here. All right it is called components. Let's toss that in there. And then let's add some styles for our course or our slot title. OK let's make the font size 24 pixels just so we can see it better. Want to move this later on. We're going to keep a file though. This is where we will be putting all of our schedule styles let's import this into our main dicy as us save that for reload and we're golden is bigger. We have removed course. [00:16:19][128.8]
[00:16:20] Let's go ahead and just give it a quick look for pixels just to give it some breathing room so we don't go insane. All right. And then let's fix this. Each child in the rare interview or have a unique key prop if you remember how we did that in court where you go now or just follow along the way we can do that saying he is equal to course dot title and better yet a better solution to doing this is actually just getting the index of this in the rain since that will definitely be unique. Every single time there will never be a course in the same spot. Another course though there really could be another title if anything went wrong. That's just one more like if for some reason this got duplicated in the database we were fetching from or for some reason you copied and pasted it in our interaction here then we'd get in there. So to reduce that to reduce the amount of hours that we can get. Like the potential of things breaking let's just implement this better way of doing this so we can say this dot Propst courses dot index of and then passing course and this will give us the index of where this courses in the array. That's always going to be unique. So this will be fulfilled will be good. Let's see right. Okay. So the reason this isn't working is because this render course technically isn't a part of the instance so we can't access this. So it's time constructor and just bind it in here and pass it prompts. [00:18:03][102.2]
[00:18:03] So I'm used to it and then I'll say there's our intercourse is equal to this start of intercourse buying this say that we should be golden. All right. Yeah we're. Let's go ahead and say that in the next guy it will be done with this and the next guy we are going to add in the functionality for a move course we've mapped over our state or existing state. We don't want to fetch it again to our schedule component and the next guide we will develop a new reducer called new action that we're going to call this Rimu course. All right so let's come in code let's just say set up a schedule component could push emerging master from either and I will see you in the next guy. [00:19:18][74.3]
[1144.0]