adicionado pinterest e melhorias visuais

Author: Saulo Benigno

.idea/workspace.xml

@@ -1,7 +1,4 @@
 import React from 'react'
-// import logoFbk from 'public/images/facebook.png'
-// import logoTwt from 'public/images/twitter.png'
-// import logoGlg from 'public/images/google.jpg'
 
 export default class Form extends React.Component {
 
@@ -44,16 +41,19 @@ export default class Form extends React.Component {
             <div>
                 <div>
                     <button className="btn btn-logo" onClick={() => callSymbol('FBOK34')}>
-                        <img src='./images/facebook.png' alt="facebook logo" />
+                        <img src='./images/facebook.png' alt="Facebook logo" title="Facebook Inc. (FBOK34)" />
                     </button>
                     <button className="btn btn-logo"  onClick={() => callSymbol('GOGL34')}>
-                        <img src='./images/google.png'  alt="google logo" />
+                        <img src='./images/google.png'  alt="Google logo" title="Alphabet Inc. (GOGL34)" />
+                    </button>
+                    <button className="btn btn-logo"  onClick={() => callSymbol('P2IN34')}>
+                        <img src='./images/pinterest.png'  alt="Pinterest logo" title="Pinterest, Inc. (P2IN34)" />
                     </button>
                     <button className="btn btn-logo"  onClick={() => callSymbol('TWTR34')}>
-                        <img src='./images/twitter.png'  alt="twitter logo" />
+                        <img src='./images/twitter.png'  alt="Twitter logo" title="Twitter, Inc. (TWTR34)" />
                     </button>
                 </div>
-                <div>
+                <div className="algo" id="algo">
                     <button className="btn btn-white" onClick={() => callAlgo('all')}>
                         All
                     </button>
@@ -67,7 +67,7 @@ export default class Form extends React.Component {
                         Sell
                     </button>
                 </div>
-                <div>
+                <div className="days" id="days">
                     Days:
                     <select name="time_window" defaultValue={'10'} onChange={(event) => this.callDays(event)} >
                         <option value="5">5</option>

public/images/pinterest.png

@@ -5,7 +5,7 @@ export default class Header extends React.Component {
     render() {
         return (
             <div>
-                Social Media - Stock Market
+                <h3>Social Media - Stock Market</h3>
             </div>
         )
     }

src/components/Form.jsx

@@ -19,8 +19,6 @@ export default class Table extends React.Component {
 
     render() {
 
-        console.log('days: ' + this.props.days);
-
         let social_media = [];
         let social_type;
         let prices  = [];
@@ -35,6 +33,9 @@ export default class Table extends React.Component {
         } else if (this.props.symbol === 'TWTR34') {
             social_media = 'Twitter, Inc.';
             social_type = 'Twitter';
+        } else if (this.props.symbol === 'P2IN34') {
+            social_media = 'Pinterest, Inc.';
+            social_type = 'Pinterest';
         }
 
         function randomDate(start, end) {
@@ -51,8 +52,6 @@ export default class Table extends React.Component {
         let number1 = Math.round(Math.random() * (this.props.days - 1) + 1);
         let number2 = number1 + parseInt(this.props.days);
 
-        console.log('n1: ' + number1 + ' , n2: ' + number2);
-
         const { dates } = this.state
 
         const stockPriceGenerator = (symbol, date) => {
@@ -82,6 +81,8 @@ export default class Table extends React.Component {
         if (this.props.symbol !== "") {
 
             fetchData(this.props.symbol, social_type);
+            document.getElementById("algo").style.visibility = 'visible';
+            document.getElementById("days").style.visibility = 'visible';
 
             return (
                 <div>
@@ -130,9 +131,9 @@ export default class Table extends React.Component {
 
         } else {
             return (
-                <div>
-                    Choose the Social Media
-                </div>
+                <h4>
+                    choose your preferred social media network
+                </h4>
             )
         }
 

src/components/Header.jsx

@@ -9,6 +9,11 @@ body {
   font-size: 30px;
 }
 
+h3 {
+  margin: 0;
+  text-transform: uppercase;
+}
+
 div {
   margin-top: 5px;
 }
@@ -91,4 +96,15 @@ select {
 
 .index {
   color: darkgray;
+}
+
+.days {
+  text-align: right;
+  margin-right: 10%;
+  margin-top: -20px;
+  visibility: hidden;
+}
+
+.algo {
+  visibility: hidden;
 }