So let's go ahead and go to your files and let's create a new file in our components directory and let's just call this add.js. Well, its going to be our remove icon as well, so what we want to do is say, let's just call it action.js and then lets say import, well we want this to be very similar to our arrow.js at least in terms of the react class architecture.

So let's copy this entire component and lets throw it in action.js, let's just change where it says Arrow to Action, and let's change the class name to action and lets change the default to action as well. Okay cool, that sets this up. What we need to do is put a plus(+) in our div and what we can do now that I think about it is we can use an icon from our icon component.

action.js

import React, { Component } from 'react';

class Action extends Component {
  render() {
    return (
      <div className={'${this.props.className} action'}>
        +
      </div>
    )
  }
}

export default Arrow;

For now lets just do this and then we can create the icon. So lets head over to libraryCourse.js and let's get rid of this comment and let's just say action, I'm going to hit return for auto import. Make sure you have the import in there.

libraryCourse.js

import React, { Component } from "react";

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

class LibraryCourse extends Component {
  render() {
    return (
      <div className="library-course">
        <div className="library-course__title-arrow">      
          <label className="library-course__title">Problem Solving</label>
          {Icon("fas fa-check", "library-course__icon")}
        </div>
        <Arrow className="library-course__arrow" />
        <Action className="library-course__action"/>
        <div className="library-course__description">
          <label>Course Description</label>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
            fringilla facilisis mi, non pellentesque metus consectetur vel.
            Quisque dictum, lectus vitae dignissim tincidunt, sapien nibh
            placerat diam, quis blandit enim nulla in felis.
          </p>
        </div>
      </div>
    );
  }
}

export default LibraryCourse;

Now what I want to do is place it on the grid. So let's go into library.scss and libraryCourse.scss and let's place it on here after the arrow and we actually want to rename this title-arrow to be title-check.

libraryCourse.scss

.library-course {
  display: grid;
  grid-template-columns: repeat(auto-fit, 1fr);
  grid-template-rows: 1fr 1fr;
  background: cornflowerblue;

  &__title-check {
    grid-row: 1/2;
    display: flex;
  }
  &__arrow {
    grid-row: 1/2;
  }
  &__
  &__description {
    grid-row: 2/3;
  }
}

And then lets go to libraryCourse.js and change this to title check, my bad sorry about that.

libraryCourse.js

import React, { Component } from "react";

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

class LibraryCourse extends Component {
  render() {
    return (
      <div className="library-course">
        <div className="library-course__title-check">      
          <label className="library-course__title">Problem Solving</label>
          {Icon("fas fa-check", "library-course__icon")}
        </div>
        <Arrow className="library-course__arrow" />
        <Action className="library-course__action"/>
        <div className="library-course__description">
          <label>Course Description</label>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
            fringilla facilisis mi, non pellentesque metus consectetur vel.
            Quisque dictum, lectus vitae dignissim tincidunt, sapien nibh
            placerat diam, quis blandit enim nulla in felis.
          </p>
        </div>
      </div>
    );
  }
}

export default LibraryCourse;

Okay, back to the libraryCourses.scss let's say &__action is 1/2.

libraryCourses.scss

.library-course {
  display: grid;
  grid-template-columns: repeat(auto-fit, 1fr);
  grid-template-rows: 1fr 1fr;
  background: cornflowerblue;

  &__title-check {
    grid-row: 1/2;
    display: flex;
  }
  &__arrow {
    grid-row: 1/2;
  }
  &__action {
    grid-row: 1/2;
  }
  &__description {
    grid-row: 2/3;
  }
}

and then it will automatically place on the column where it needs to be using auto fit, the auto fit function determines it. Okay, let's go check it out in the application you'll see we have that plus here

Now, let's just give it a font awesome icon because we want it to be consistent with the rest of our icons. So let's go over to font awesome

so let's just copy the fas fa-plus-circle down here, or just remember fas fa-plus-circle so you don't have to come to this page. And then let's go back to our application and go to action.js. And import the icon, I'm going to delete the + and type in icon and its going to auto import, so just make sure that you have that import at the top of your file.

And let's just say icon is equal to, sorry, remember this is a function so let's put some brackets here and paste that in, and I don't think I need to add a class so let's just leave it like this and we should be good.

action.js

import React, { Component } from 'react';
import Icon from './icon';

class Action extends Component {
  render() {
    return (
      <div className={'${this.props.className} action'}>
        { Icon('fas fa-plus-circle') }
      </div>
    )
  }
}

export default Arrow;

Now, we're putting it in an action because we're going to have it do something else other than just being an icon. We're going to have more functionality then just the check icon where as the check icon in your libraryCourse isn't going to do anything its just going to be toggled on and off.

So let's go ahead and go to the browser and go to our application see what we've got. It looks like we got that icon in there.

So based on some functionality we'll put into the app later on it's going to change that to an X icon so let's just go grab that X icon for now so we are ready. So you're going to hit Icons on font awesome, and type in x, and times-circle(fas fa-times-circle) should be good.

I'm going to go into action.js and I'm just going to paste it down here and then comment it out just so we have access to it.

action.js

import React, { Component } from 'react';
import Icon from './icon';

class Action extends Component {
  render() {
    return (
      <div className={'${this.props.className} action'}>
        { Icon('fas fa-plus-circle') }
        {/* fas fa-times-circle */}
      </div>
    )
  }
}

export default Arrow;

And I'm going to show you another way we can do icons and it's going to have animation so we don't just switch between icons. But I want to show you how to use Font awesome and the components we built before I do that because I need to teach you that so you can be a master in the codes.

Okay, so that's what we've got going on here, everything's looking kind of nice. I want to select a different one so it has a different color for our grid.

So what we want to do is decrease the size of this top row and then increase the size of the bottom row. So let's go into our code let's go into libraryCourse.scss and instead of saying 1fr 1fr let's just say repeat autofit 1fr and let's see if that does it. Okay, yeah that's good enough for now.

libraryCourse.scss

.library-course {
  display: grid;
  grid-template-columns: repeat(auto-fit, 1fr);
  grid-template-rows: repeat(auto-fit, 1fr);
  background: cornflowerblue;

  &__title-check {
    grid-row: 1/2;
    display: flex;
  }
  &__arrow {
    grid-row: 1/2;
  }
  &__action {
    grid-row: 1/2;
  }
  &__description {
    grid-row: 2/3;
  }
}

And that just reduced the size a little bit, if that bothers you you can just change this grid-template-rows to something like 50px 1fr for now. Okay, that looks pretty good actually. So thats kind of the basic structure of this component we got the grid laid out and the grid is looking nice we have everything where it needs to be.

Now, what I want to do in the next video is build the grid for the scheduling component because we already have this built out literally all we need to really do is put in the My Schedule component and then the progress tracker and we will be good to go.

So lets commit our code and then get into the schedule course component and thats going to be an easier component then the one we just built. The libraryCourse component was much more involved.

So I'm going to hit command + j and go into the terminal and say git status, git add ., git commit -m "library course component grid finished", push git push origin master.

Then I'm going to push Heroku master and then I'm going to end this guide because usually pushing to heroku usually takes a couple minutes. So I'm going to say git push heroku master and then Ill see you in the next video where we will look at it in Heroku and then build out that next component. I will see you in the next guide.

Resources

Source code