import React, { Component } from 'react';
import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
import './index.scss';
import Contributor from './contributor';
import FaIcon from './../../components/Icons/fa-icon';
import { TweetButton, FaceButton } from './../../components/ShareButtons';


class Home extends Component {
  constructor(props) {
    super(props);

    this.state = { contributors: [] };

    fetch('https://api.github.com/repos/leocardoso94/free-courses')
      .then(blob => blob.json()
        .then(data => this.updateStars(data.stargazers_count)));

    fetch('https://api.github.com/repos/Leocardoso94/Free-Courses/contributors')
      .then(blob => blob.json()
        .then(data => this.updateContributors(data)));

    this.contributorsList = this.contributorsList.bind(this);
  }

  updateContributors(contributors) {
    this.setState({ contributors });
  }

  contributorsList() {
    return this.state.contributors.map((contributor, index) => <Contributor contributor={contributor} index={index} key={contributor.login} />);
  }

  updateStars(stars) {
    this.setState({ stars });
  }
  render() {
    return (
      <ReactCSSTransitionGroup
        transitionName="initial"
        transitionAppear
        transitionAppearTimeout={500}
        transitionEnter={false}
        transitionLeave={false}
        component="div"
        className="home"
      >
        <h1 className="title">Free Courses</h1>
        <p>
          <b>Welcome!</b>
          <br />
          <br />
          This is a list of free courses about programming.
          <br />
          You can contribute to the project adding more courses, <a
            target="_blank"
            href="https://github.com/Leocardoso94/Free-Courses/blob/master/README.md"
          >see how
          </a>
          <br />
          <br />
          Free Courses is <a
            target="_blank"
            href="https://github.com/Leocardoso94/Free-Courses"
          >open source
          </a>. <a
                            className="stars" target="_blank"
                            href="https://github.com/Leocardoso94/Free-Courses"
                          ><FaIcon icon="fa-github" color="#000" /><FaIcon icon="fa-star" color="#ff8f00" /> {this.state.stars} Stars
                                </a>
          <br />
          <span >Made with <FaIcon icon="fa-heart" color="red" /> by <a
            target="_blank"
            href="https://github.com/Leocardoso94"
          >@LeoCardoso94
          </a>
          </span>
          <br />
          <br />
          <TweetButton text="https://freecourses.github.io/" title="Share" /><FaceButton text="https://freecourses.github.io/" title="Share" />
        </p>

        <h4>Special thanks to all contributors:</h4>

        <ul className="contributors">
          {this.contributorsList()}
        </ul>

        <h4>If you want to donate something:</h4>

        <a className="bmc-button" target="_blank" href="https://www.buymeacoffee.com/leocardoso"><img src="https://www.buymeacoffee.com/assets/img/BMC-btn-logo.svg" alt="BMC logo" /><span>Buy me a coffee</span></a>

      </ReactCSSTransitionGroup>
    );
  }
}

export default Home;

@@ -963,16 +963,23 @@
 ributors
+%0A      
 .map((co
@@ -999,16 +999,17 @@
 dex) =%3E 
+(
 %3CContrib
@@ -1012,16 +1012,24 @@
 tributor
+%0A       
  contrib
@@ -1046,16 +1046,24 @@
 ributor%7D
+%0A       
  index=%7B
@@ -1068,16 +1068,24 @@
 =%7Bindex%7D
+%0A       
  key=%7Bco
@@ -1104,12 +1104,19 @@
 gin%7D
+%0A     
  /%3E)
+)
 ;%0A  
@@ -1710,16 +1710,26 @@
 courses,
+%0A         
  %3Ca%0A    
@@ -1849,16 +1849,29 @@
        %3E
+%0A            
 see how%0A
@@ -1945,16 +1945,33 @@
 rses is 
+&nbsp;%0A          
 %3Ca%0A     
@@ -2068,16 +2068,29 @@
        %3E
+%0A            
 open sou
@@ -2092,16 +2092,17 @@
 n source
+.
 %0A       
@@ -2112,12 +2112,8 @@
 %3C/a%3E
-. %3Ca
 %0A   
@@ -2111,38 +2111,52 @@
  %3C/a%3E%0A          
-      
+%3Cbr /%3E%0A          %3Ca%0A
             clas
@@ -2168,16 +2168,28 @@
 =%22stars%22
+%0A           
  target=
@@ -2197,32 +2197,16 @@
 _blank%22%0A
-                
         
@@ -2263,36 +2263,34 @@
 rses%22%0A          
-    
+%3E%0A
             %3E%3CFa
@@ -2285,17 +2285,16 @@
         
-%3E
 %3CFaIcon 
@@ -2325,16 +2325,29 @@
 #000%22 /%3E
+%0A            
 %3CFaIcon 
@@ -2405,38 +2405,16 @@
 %7D Stars%0A
-                      
         
@@ -2506,15 +2506,45 @@
 %22 /%3E
- by
+%0A          &nbsp;by%0A           
  %3Ca%0A
+  
     
@@ -2559,32 +2559,34 @@
 target=%22_blank%22%0A
+  
             href
@@ -2630,17 +2630,41 @@
         
-%3E
+  %3E%0A              &nbsp; 
 @LeoCard
@@ -2669,16 +2669,18 @@
 rdoso94%0A
+  
         

fix lint erros on Home container