[00:00:01] Hi and welcome back to the reactor cores in the last guide we set up our action for removing a course from our schedule and this guide we're going to be setting up the reducer that we can dispatch side action to so we can actually remove the course from our from our store from our state. So to get started let's go ahead and look at our course library to get an idea of how we set up our map dispatched to props. So in the component did mount you see that we say this props stuff that courses and the idea here is that when the component mounts we are fetching our courses but we don't want to do this we want to we want to call a method called really of course except for we don't want to do that in the course library but we want to do it our props. We want to have access to this function on our props. So the way we can do this is by using this map dispatch to props function in our schedule component. So let's just copy this and let's head over to our schedule jazz and right under our map state the props let's just paste this except for we don't want to access our fetch courses reducer. We want to access our our remove course serotype or remove coarse and paste up there and then go back to court library and you'll notice we're importing this action and we want to do the same thing in our schedule. JS So copy that and at the top of our schedule jazz let's import remove course. Okay so now we have to actually. [00:01:46][105.0]
[00:01:47] So yeah this is our action on. So you'll notice that we command click on actions or we go to our index not Jacen or Yaşar our actions directory. You'll see that we have removed coarse or remove coarse function action and we are getting that from our type such as. Okay so when we are in our schedule dodgiest and we call them start Propst dot remove course we are going to dispatch that and then that's going to tell our reducers to run that specific case. So right now we only fetch courses so we need to write out a case for remove coarse to type out remove and if you're using visual studio code you'll notice the first one it says auto import. If you just hit return the auto import it from actions types and if it doesn't do that for you just go ahead and type it up here and actually it commands Z so you can type on any again based on it. OK so fetch courses remove course. Now in this case we want to somehow tell our state that we don't want this course in our schedule and the way we can do that is by first going to our index that Jacen our actions and giving each one of these objects a and enrolled variable so we can determine whether or not it's enrolled. So we have to say enrolled and then let's put false pretty full and let's actually put true pretty for value because we're starting with removing courses instead of adding so we want the user to be enrolled in them so we can actually remove them. Okay so they're enrolled. We have remove coerce action. [00:03:38][111.0]
[00:03:38] Now back in our reducer here of course reducer or courses reducer. Let's first get rid of this console log we don't get there and in here we have to somehow change the specific course so we have our action and then our action has a payroll right. So for our pay our fetch course is payload is going to be all of our courses so the payload we want for remove cores is going to be the course we want to remove it. Instead of all the courses so one course multiple courses. Okay so let's go back to our core library real quick or not art course library but art our schedule and you'll see we have removed course and we need to pass a course here to our actions. So if you go to our actions index you'll notice we're exception of course and that's the payload is of course okay so you'll see that we have access to that course now and it's going to be an action not payload so we just console to learn it since we're only going to be clicking on once alert action. Haloed. And what's actually Jaison string and find this just in case. So Jaison string faction payload. And then we have to add a return here. So for right now let's just return the same exact thing we're going to change this or let's just returns. Yeah it's just not okay. So and our schedule digest we are going to dispatch remove course. So now we just have to somehow call that action so we can call map dispatcher props. We also need to pass in map dispatch the props into our second parameter here. [00:05:28][109.5]
[00:05:29] So let's go ahead and do that. Now let's go ahead and let's make it so when we click this aoba it's going to dispatch that action to the root user so we can do that by typing in on Kleck is equal to. And then in curly races and Arrow function you say this dot Propst remove course and then remember that we have the pass of course and we're getting this course from our rendered horse Paramor here because when we're mapping it over we're putting each course that we've fetched into here. So if we click on the one specific course it's going to remove that exact course because that's the one. Of course that's okay. So save that and I think that should be good. It's not going to remove it yet since we haven't put up put together the logic in our reducer here but it will alert us to the specific course we're clicking on. Let's go ahead and see if that works. So in our in our browser here let's go ahead and click on her image of course and it looks like it's saying Kay title you expert developers description this user experience. Yeah we get it. So remove course an up and running and it will say up and running. Okay so the next thing we want to do is actually remove the course from our from our our schedule here. So the way we can do that is by first let's go into our schedule and let's only display the course were enrolled in it so only of course dot enroll is true. [00:07:12][102.6]
[00:07:13] So the way we can do that is by going to our div here and saying OK we only want to display when we want to display this because this could be an empty slot. So let's say in our class seemless just rename this class name to display specific Cázares based on whether or not we are enrolled in the course. So in curly braces and then back take for the typing slot. So it still got the slot styles. Now let's say course that in some string interpolation here. So of course enrolled if it's enrolled we want to show a course slot and if we are not enrolled we want to display an empty slot. OK. So save that and then let's get that CSSA and so we can actually display it when we want to display it. So first thing let's just rename this so we can follow the convention we've been doing with the styling so it's called slot empty and slot course. OK. So when it's enroll we want to display the course styles which are going to be these styles the white background and then when it's not enrolled we want to display an empty slot the empty slots styles. So let's go to our main as the assassin type those now. OK. So dot slot of course and period slot empty for our empty slot. We want an opacity point seventy five. That kind of query look we want to make the background color transparent and then we want to give it a border of one page so solid and we want it to be white but slightly faded so 255 255 255 and point six. [00:09:27][134.0]
[00:09:29] Okay now let's give it a border style of Dasht so we can get that dasht effect there and then finally give all the text the color of white. Okay so that should be good for Slon emptied for Sławik coerced. Let's give it a let's see what we should do let's give it a background color of white because we want it to be Y. We want the text to be black and then we want the same looking border except for C Yeah we want the same border now. Yeah that should be good. Let's go ahead and we should be getting the slot core styling. Every time right now because our values are set to true by fall our general values. So let's go to our browser and go to our app here. Yet we're getting the styles we want. I'm going to pull this over a little bit and you'll see that since we utilized flex box this is resizing pretty nicely so far. Okay so next thing we want to do is when we hit remove it should display the empty style. So let's go ahead and hit remove and see what happens. Okay. Nothing happened. First things first let's go ahead and remove this alert. In our courses releaser. And the reason nothing happened is because returning the same state. So let's go ahead and map through our state here which are our courses and let's change the enrolled value of the specific course. [00:11:08][99.2]
[00:11:09] So the way we can do that is by using the map function in JavaScript and going through and comparing the actual payload which is our course to each course in our courses and if it's the right one if it's the if they match up then we want to change the old value to the opposite value so we can say if well first the type of the maps are dot dot dot which is the spreader operator and what's typing dot map is passing coarsen index. We probably don't need index but you can type that out for now. Mila's AK if course we're going through each one of our courses our state is our courses that sort of thing go through our courses and if course is equal to action payload let's go ahead and let's change the value of an old to not so technically we could use this to add to our courses as well because it's not changing into false it's actually swapping it. So if it's true and we dispatch this action to this releaser it's going to swap it to false. But we're going to add in a specific action called a hard course just to make it more clear and understandable. Instead of calling remove one or trying to add it. So that should work. Let's go ahead and reload our page here that hasn't updated and I would say of course it looks like we are care. Let's check our content seawards cannot read property enrolled of undefined. OK so says we cannot read property in or title. Kate where is this happening. It's happening in Dutch as which is not. Why is that happening. Chicken producer let's try returning. This shouldn't be the problem but let's try returning of course. Oh well it is. OK. So I think what was going on is we weren't returning these back to our state from After mapping through it. [00:13:34][145.5]
[00:13:36] And that's what was causing the air. OK. So that's all set up in a producer and it's removing the course. Well it's applying the styles. Now let's just make it so it doesn't display the name and instead it displays empty slot. So back in our schedule let's go ahead and where it says course titling and render course function. Let's get rid of that and let's typing course. We're actually going to need brackets so let's have uncoerced on road questionmark and then we either just by course title if it's true or we want to display empty slot if it's false. So if we wait for this to reload this should say empty slot now reloaded the entire thing. Let's go out and remove it says empty slot and then it's empty slaw and you'll notice since we're swapping the value it puts it back when we hear move course which we don't really want so we might as well just change this to coarsen and or reduce or to equal just a false. That way we can't change it back and once also make sure let's get rid of. Yeah so we can't get it back. Let's also make it so we can't even click this because you'll notice it's calling me of course every time. But what's ending up happening is just going through this again and saying coarsen all is equal to false even though it's already false which we don't want. Okay. Like it's just redundant and unnecessary and we can't remove a course like this is a bad experience. Just remove this but an ID. If the courses are old. [00:15:10][94.3]
[00:15:11] OK so let's say coarsen are old Kelsi let's just do the same thing we're doing here. Let's grab this entire thing. This entire class name and once just throw it in you know it's replaced slot here with action slaughterer move. Let's get rid of that class name and then for SLOC horse if it's an old let's put high content. And for this let's put show content because while the other way around because we only want to show the remove it and all of them we want to hide if we want to hide it if we're not in it. OK. So that should be working. Let's see here. OK so we have there's an error somewhere and here we have it. We just need to add in another bracket. OK so this is only going to show if we're enrolled but we don't think we have the style Zimpher show content inside content so let's just add those and yeah they're not in here. So it's a show content display none content display none. And what's actually changed is to display. BLOCK OK go back to our app here and see if this works. Kate something's not working. It's just the buttons and not awkward place so it is hard to click OK. So it's removing it saying empty slot and that's all working. And the next guy. Well real quick. This guy was a was pretty long. I went further into it than I thought I would. I thought we were just going to do the reducer and not actually dispatch it the action. [00:17:34][142.8]
[00:17:35] So the next guy we're just going to set up the ad button on here on each course. And the. And the action for ad course and that will be it for that guy. And then then the next guy will set up the reducer and then so on to keep it to keep the guy it's shorter. OK so let's commit our code status. Get a good command. Let's just say I did remove cores reducer and dispatched the action. You remove coarse action. Get push. Origin master and I will see you in the next guy. [00:18:24][49.5]
[1093.4]