add quote machine

src/components/quote/quote.js

@@ -1,18 +1,55 @@
 import React, {Component} from 'react';
-import './quote.css'
-// import { connect } from "react-redux";
-// import { bindActionCreators } from "redux";
-// import * as quoteActions from "../../store/quote/actions";
+import './quote.scss'
+import { FaQuoteLeft, FaTwitter, FaFacebook } from 'react-icons/fa';
+import quotesList from './quotes_list';
+
 export default class quote extends Component {
-    // constructor(props) {
-    //     super(props);
-    //     this.state = {};
-    // }
-    render() {
-      return <div className="component-quote">Hello! component quote</div>;
+    constructor(props) {
+        super(props);
+        this.state = {selectedQuote: this.randomInt(quotesList().length)};
+        this.selectRandom = this.selectRandom.bind(this);
     }
-  }
-// export default connect(
-//     ({ quote }) => ({ ...quote }),
-//     dispatch => bindActionCreators({ ...quoteActions }, dispatch)
-//   )( quote );
+    randomInt(size){
+      return Math.floor(Math.random() * size);
+    }
+    selectRandom(){
+      this.setState({
+        selectedQuote: this.randomInt(quotesList().length)
+      })
+      // Trigger appear animation again!
+      let first = document.getElementById("quote-div");
+      let second = document.getElementById("author");
+      first.classList.add("appear");
+      setTimeout(
+        () => first.classList.remove("appear"), 1000
+      );
+      second.classList.add("appear");
+      setTimeout(
+        () => second.classList.remove("appear"), 1000
+      );
+    }
+    render() {
+      return <div id="main">
+      <div className="component-quote" id="quote-box">
+        <div id="quote-div">
+          <p id="text">
+            <FaQuoteLeft id="quote-icon" size={26} style={{"margin-top": 5, "margin-right": 5}}/>
+            {quotesList()[this.state.selectedQuote].quote}
+          </p>
+        </div>
+        <p id="author">- {quotesList()[this.state.selectedQuote].author}</p>
+        <div id="button-container">
+          <div>
+            <a id="tweet-quote" href={"https://twitter.com/intent/tweet?&text="+"\""+quotesList()[this.state.selectedQuote].quote+"\" " + quotesList()[this.state.selectedQuote].author} target="_blank"><button><FaTwitter/></button></a>
+            
+            {/* <button><FaFacebook/></button> */}
+          </div>
+          <div>
+            <button id="new-quote" onClick={this.selectRandom}>New Quote</button>
+          </div>
+        </div>
+      </div>
+      <p >By <a id="page-author"href="https://codepen.io/Loosetooth">Loosetooth</a></p>
+      </div>;
+    }
+  }