Implementing the Course Selected Styles

Let's go ahead and get the styles in here so that when we have this hover animation, it stays when we have the course open.

What we want it to do is show the background color and box shadow when the course is open. Open up libraryCourse.scss and let's take everything our from the hover call and let's put in a mix-in.

libraryCourse.scss

@mixin solid-course {
    background: white;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.21);
}

.library-course-selected {
  @include solid-course();
}

.library-course {

    padding: 25px;

    &:hover {
        @include solid-course();
    }

Now we want to do what we did with our arrows, to our description, just using our .library-course-selected class. Open up libraryCourse.js and in our description we want to add in our getElementById functions. We also need to set this up in our callback function so that it won't try to render it before it exists.

Here's what your file should look like.

libraryCourse.js

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

import Icon from "../icon";
import Arrow from "../arrow";
import Action from "../action";

class LibraryCourse extends Component {

  constructor(props) {
    super(props)

    this.state = {
      status: true
    }
  }

  renderDescription = function() {
    if (!this.state.status) {
      return (
        <div className="library-course__description">
          <label>Course Description</label>
          <p>{this.props.description}</p>
        </div>
      )
    }
  }.bind(this);

  handleCallback = function(status) {
    if(!status) {
      document.getElementById('library-course').classList.add('library-course-selected');
    } else {
      document.getElementById('library-course').classList.remove('library-course-selected');
    }
    this.setState({ status })
  }.bind(this)

  render() {
    return (
      <div id="library-course" className="library-course">
        <div className="library-course__title-check">
          <label className="library-course__title">{this.props.title}</label>
          {Icon("fas fa-check", "library-course__icon")}
        </div>
        <div className="library-course__line" />
        <Arrow
          callback={status => this.handleCallback(status)}
          id={this.props.id}
          className="library-course__arrow"
        />
        <Action
          onClick={() => this.props.toggleEnrolled(this.props.id)}
          className="library-course__action"
        />
        {this.renderDescription()}
      </div>
    );
  }
}

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

Now let's check it out.

large

That looks really good. Obviously, we have the same error that we had with the arrows, but we'll work on that later.

git status
git add .
git commit -m "added course selected styles"

See you in the next video.

Resources

Code at this stage