So lets go to our libraryCourse.js and straight up just copy this action, we want to basically put in the same functionality, so I want to copy this action and put it in to scheduleCourse.js. Now, obviously we want to change this class name to schedule-course not library-course and lets give this label a class name of schedule-course__label and we'll put this on scss grid after we do this.

So lets just copy things over from libraryCourse.js because its so similar. So we want actions and connect and we want this export default except we want ScheduleCourse not LibraryCourse. Okay sweet that should be all we have to do other then placing it on the grid properly.

scheduleCourse.js

import React, { Component } from "react";
import { connect } from 'react-redux';
import * as actions from '../../actions';

class ScheuleCourse extends Component {
  render() {
    return (
      <div className="schedule-course">
        <label className="schedule-course__label">{this.props.title}</label>
        <Action onClick={() => this.props.toggleEnrolled(this.props.id)} className="schedule-course__action"/>
      </div>
    );
  }
}

export default connect(null, actions)(ScheduleCourse);

Let's go see if we can see that X button immediately. Okay, let's add a course and we get an error, let's try and think about the error before we check the error message. I think it's because we might not have access to this id. Okay, its because we didn't import action, so we need to say import Action from '../actions';. So let's go back to our browser and click on the button and you will see we now have that plus.

Cool stuff, okay so what we going to do now is make it so we can press this button in our My Schedule section. Sorry I was looking at these Course Library buttons seeing if it was rendering the content correctly, anyway let's see if this works. So HTML/CSS Bootcamp this button gets rid of it and if we try again it also gets rid of it.

Obviously we don't want this icon on here to be a plus though, but we are going to shift the weight from the icons and make our own custom animation when we get around to it so it can rotate cool and turn into a X from a plus so its going to look really cool.

Anyway that completes the functionality for that all we need to do now is put in the progress tracker status so lets just go ahead and do that in the next video. So lets say

Terminal

git status
git add .
git commit -m "added action functionality to schedule course component to enable removal of course from schedule"

I spelt schedule wrong so I can say git commit --amend okay so there we go. So I am always very careful when using amend because there is a mend command and what mend does is it creates a new commit. Any way back to what we are doing is I'm just changing the commit to have schedule spelled correctly. So I'm going to hit I to to insert and im going to respell functionality and schedule so they are spelt the correct way.

I'm going to hit escape colon and wq for write quit to quit out of that file. Then we can say git push origin master then we are good to go.

Lets move onto the next video where we will implement the progress tracker functionality.

Resources

Source code