react router and dashboard build out

client/App.js

@@ -1,21 +1,34 @@
 import React from 'react';
+import { BrowserRouter as Router, Switch, Route, withRouter } from "react-router-dom";
+import Login from './Components/Login';
+import PrivateRoute from './Components/PrivateRoute';
+import Dashboard from './Components/Dashboard';
+
 
 class App extends React.Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     this.state = {
-      text: 'inital text'
+      isAuthenticated: false
     };
   }
 
+  authenticate() {
+    this.setState({isAuthenticated: true});
+    this.props.history.push('/');
+  }
+
   render() {
     return (
-      <div>
-
-      </div>
+        <div>
+          <Route exact path="/login" component={() => <Login authenticate={this.authenticate.bind(this)} />} />
+          <PrivateRoute exact path="/" authenticated={this.state.isAuthenticated} component={Dashboard} />
+        </div>
     );
   }
 
 }
 
-export default App;
+
+
+export default withRouter(App);

client/Components/Buttons.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Buttons = () => {
+  return (
+    <div className="buttons">
+      <button className="buy">BUY</button>
+      <button className="sell">SELL</button>
+    </div>
+  )
+}
+
+export default Buttons;

client/Components/CurrencyChart.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  HorizontalGridLines,
+  VerticalGridLines,
+  XAxis,
+  XYPlot,
+  YAxis, LineMarkSeries
+} from 'react-vis';
+
+class CurrencyChart extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      data: [],
+    }
+  }
+
+  componentDidMount() {
+    setInterval(() => {
+      fetch('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC&tsyms=USD&api_key=c3928dbf8fd1c2f62b730f46a5fff3d1ba38535ecd0609cb68c95c31d92edd25').then(res => res.json())
+      .then(res => {
+        this.setState({
+          data: this.state.data.concat({x: Date.now(), y: res['BTC']['USD']}).slice(-30)})
+      })
+      }, 4000);
+  }
+
+  render() {
+    return (
+      <div>
+        <XYPlot height={600} width={600}>
+          <VerticalGridLines />
+          <HorizontalGridLines />
+          <XAxis />
+          <YAxis />
+          <LineMarkSeries 
+            style={{
+              strokeLinejoin: 'round',
+              strokeWidth: 4
+            }} 
+            animation 
+            data={this.state.data} 
+          />
+        </XYPlot>
+      </div>
+    )
+  }
+}
+
+export default CurrencyChart;

client/Components/Dashboard.js

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import Holdings from './Holdings';
+import CurrencyChart from './CurrencyChart';
+import Buttons from './Buttons';
+
+
+function Dashboard(props) {
+  const [balances, setBalances] = useState({USD: 0, BTC: 0})
+
+  return (
+    <div className="dashboard">
+      DASHBOARD
+      <Holdings balances={balances} />
+      <CurrencyChart />
+      <Buttons />
+    </div>
+  );
+}
+
+export default Dashboard;

client/Components/Holdings.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Holdings = (props) => {
+  return (
+    <div className="holdings">
+      <div className="holdings-title">HOLDINGS</div>
+      <div className="holdings-usd-balance">{props.balances.USD}</div>
+      <div className="holdings-btc-balance">{props.balances.BTC}</div>
+    </div>
+  )
+}
+
+export default Holdings;

client/Components/Login.js

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+
+const Login = (props) => {
+
+  let [email, setEmail] = useState('');
+  let [password, setPassword] = useState('');
+
+  return (
+    <div className="login">
+      <div className="fields">
+        <input type="text" className="email" onChange={e => setEmail(e.target.value)}/>
+        <input type="text" className="password" onChange={e => setPassword(e.target.value)}/>
+      </div>
+      <div className="buttons">
+        <button className="login-btn" onClick={props.authenticate}>Login</button>
+        <button className="signup-btn">Signup</button>
+      </div>
+    </div>
+  )
+}
+
+
+
+export default Login;

client/Components/PrivateRoute.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Route, Redirect } from "react-router-dom";
+
+function PrivateRoute({ component: Component, authenticated }) {
+  return (
+    <Route
+      render={() =>
+        authenticated ? (
+          <Component />
+        ) : (
+          <Redirect
+            to={{
+              pathname: "/login",
+            }}
+          />
+        )
+      }
+    />
+  );
+}
+
+export default PrivateRoute;

client/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.js';
+import { BrowserRouter as Router } from 'react-router-dom';
 
-ReactDOM.render(<App />, document.querySelector('#root'));
+ReactDOM.render(<Router><App /></Router>, document.querySelector('#root'));