Added list of stocks to the search page

Screwed-Up-Head · Oct 1, 2018 · f2ba02d · f2ba02d
1 parent cda3ebf
commit f2ba02d
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 49 deletions.
diff --git a/public/style.css b/public/style.css
@@ -121,3 +121,9 @@ a:visited {
 .ct-chart-pie {
   height: 15rem;
 }
+#drop {
+  justify-content: space-around;
+}
+#logo {
+  transform: translateY(0.5rem);
+}
diff --git a/src/App.js b/src/App.js
@@ -22,7 +22,7 @@ class App extends Component {
   constructor() {
     super();
     const stocks = JSON.parse(localStorage.getItem('stocks')) || {
-      GE: ['General Electric', '$12.46'],
+      GE: ['General Electric', '12.46'],
       BAC: ['Bank of America', '31.19'],
       F: ['Ford Motor', '9.81'],
       NIO: ['NIO ADR', '8.78'],
@@ -279,6 +279,7 @@ class App extends Component {
                 getStock={this.getStock}
                 logged={this.state.logged}
                 balance={this.state.current.balance}
+                stocks={this.state.stocks}
               />
             )}
           />

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,57 +1,82 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-const Navbar = () => (
-  <div class="navbar navy">
-    <div class="navbar-brand">
-      <div class="level">
-        <div class="level-item">
-          <Link to={`${process.env.PUBLIC_URL}/`}>
-            <div className="level">
-              <div className="level-item">
-                <svg
-                  version="1.1"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 512 512">
-                  <g />
-                  <path
-                    d="M409.241 34.038h-306.442c-37.98 0-68.741 30.771-68.741 68.721v306.462c0 37.959 30.761 68.741 68.741 68.741h306.442c37.929 0 68.7-30.781 68.7-68.741v-306.462c0-37.95-30.771-68.721-68.7-68.721zM270.101 370.903v38.676h-30.781v-36.423c-23.685-0.717-47.35-7.516-60.846-16.517l10.148-35.277c14.613 8.622 35.645 16.517 58.563 16.517 23.685 0 39.803-11.684 39.803-29.696 0-16.855-13.118-27.76-40.919-37.929-39.434-14.254-64.973-32.276-64.973-67.185 0-32.327 22.507-57.088 60.447-63.846v-36.834h30.812v34.939c23.654 0.758 39.824 6.4 51.845 12.391l-10.168 34.54c-9.022-4.117-25.529-12.718-51.077-12.718-26.245 0-35.666 13.486-35.666 26.245 0 15.381 13.517 24.034 45.476 36.803 42.046 15.79 60.815 36.055 60.815 69.468-0.010 31.928-22.19 60.078-63.478 66.846z"
-                    fill="#ffffff"
-                  />
-                </svg>
-                <span class="is-size-4 has-text-white">tocks</span>
-              </div>
+class Navbar extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      toggle: false
+    };
+  }
+  changeToggle = () => {
+    this.setState({
+      toggle: !this.state.toggle
+    });
+  };
+  render() {
+    const active = this.state.toggle ? 'is-active' : '';
+    return (
+      <div class="navbar navy">
+        <div class="navbar-brand">
+          <div class="level" id="logo">
+            <div className="level-item">
+              <Link to={`${process.env.PUBLIC_URL}/`}>
+                <div className="level">
+                  <div className="level-item">
+                    <svg
+                      version="1.1"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 512 512">
+                      <g />
+                      <path
+                        d="M409.241 34.038h-306.442c-37.98 0-68.741 30.771-68.741 68.721v306.462c0 37.959 30.761 68.741 68.741 68.741h306.442c37.929 0 68.7-30.781 68.7-68.741v-306.462c0-37.95-30.771-68.721-68.7-68.721zM270.101 370.903v38.676h-30.781v-36.423c-23.685-0.717-47.35-7.516-60.846-16.517l10.148-35.277c14.613 8.622 35.645 16.517 58.563 16.517 23.685 0 39.803-11.684 39.803-29.696 0-16.855-13.118-27.76-40.919-37.929-39.434-14.254-64.973-32.276-64.973-67.185 0-32.327 22.507-57.088 60.447-63.846v-36.834h30.812v34.939c23.654 0.758 39.824 6.4 51.845 12.391l-10.168 34.54c-9.022-4.117-25.529-12.718-51.077-12.718-26.245 0-35.666 13.486-35.666 26.245 0 15.381 13.517 24.034 45.476 36.803 42.046 15.79 60.815 36.055 60.815 69.468-0.010 31.928-22.19 60.078-63.478 66.846z"
+                        fill="#ffffff"
+                      />
+                    </svg>
+                    <span class="is-size-4 has-text-white">tocks</span>
+                  </div>
+                </div>
+              </Link>
             </div>
-          </Link>
+          </div>
+          <div
+            className={'navbar-burger ' + active}
+            onClick={this.changeToggle}>
+            <span className="has-text-white" />
+            <span className="has-text-white" />
+            <span className="has-text-white" />
+          </div>
         </div>
-      </div>
-    </div>
-    <div class="navbar-menu ">
-      <div class="navbar-end">
-        <div class="navbar-item field is-grouped">
-          <p class="control">
-            <Link to={`${process.env.PUBLIC_URL}/search`}>
-              <div class=" button is-primary is-inverted is-rounded">
-                Search{' '}
-              </div>{' '}
-            </Link>
-          </p>
-          <p class="control">
-            <Link to={`${process.env.PUBLIC_URL}/login`}>
-              <div class=" button is-success is-inverted is-rounded">Login</div>
-            </Link>
-          </p>
-          <p class="control">
-            <Link to={`${process.env.PUBLIC_URL}/register`}>
-              <div class=" button is-primary is-inverted is-rounded">
-                Register
-              </div>
-            </Link>
-          </p>
+        <div className={'navbar-menu ' + active}>
+          <div class="navbar-end">
+            <div class="navbar-item field is-grouped" id="drop">
+              <p class="control">
+                <Link to={`${process.env.PUBLIC_URL}/search`}>
+                  <div class=" button is-primary is-inverted is-rounded">
+                    Search{' '}
+                  </div>{' '}
+                </Link>
+              </p>
+              <p class="control">
+                <Link to={`${process.env.PUBLIC_URL}/login`}>
+                  <div class=" button is-success is-inverted is-rounded">
+                    Login
+                  </div>
+                </Link>
+              </p>
+              <p class="control">
+                <Link to={`${process.env.PUBLIC_URL}/register`}>
+                  <div class=" button is-primary is-inverted is-rounded">
+                    Register
+                  </div>
+                </Link>
+              </p>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
-);
+    );
+  }
+}
 
 export default Navbar;
diff --git a/src/components/SearchPage.jsx b/src/components/SearchPage.jsx
@@ -44,7 +44,29 @@ class SearchPage extends Component {
       });
     }
   };
+  handleClick = sym => {
+    const stock = this.broker(sym);
+    this.setState({
+      sym,
+      stock,
+      stockFound: true
+    });
+  };
   render() {
+    const keys = Object.keys(this.props.stocks);
+    const stockTable = keys.map(key => {
+      const func = () => this.handleClick(key);
+      return (
+        <tr
+          className={
+            'clickable ' + (key === this.state.sym ? 'is-selected' : '')
+          }
+          onClick={func}>
+          <td>{key}</td>
+          <td>{this.props.stocks[key][0]}</td>
+        </tr>
+      );
+    });
     const cost = this.state.stock.price * this.state.count;
     return (
       <div className="has-background-white">
@@ -158,6 +180,21 @@ class SearchPage extends Component {
             </div>
           </div>
         ) : null}
+        <div className="section">
+          <div className="level">
+            <div className="level-item has-text-centered">
+              <table className="table is-hoverable is-striped">
+                <tbody>
+                  <tr>
+                    <th>Ticker</th>
+                    <th>Company</th>
+                  </tr>
+                  {stockTable}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }