vikingeducation · svbarker · Sep 8, 2017 · Sep 8, 2017 · Sep 8, 2017 · Sep 8, 2017
diff --git a/client/.gitignore b/client/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/client/README.md b/client/README.md
diff --git a/client/package.json b/client/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^15.6.1",
+    "react-bootstrap": "^0.31.3",
+    "react-dom": "^15.6.1",
+    "react-redux": "^5.0.6",
+    "react-router-dom": "^4.2.2",
+    "react-scripts": "1.0.13",
+    "react-slider": "^0.9.0",
+    "redux": "^3.7.2",
+    "redux-thunk": "^2.2.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "proxy": "http://localhost:3001"
+}
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/index.html b/client/public/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/client/public/logo.svg b/client/public/logo.svg
diff --git a/client/public/manifest.json b/client/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/client/src/App.css b/client/src/App.css
@@ -0,0 +1,59 @@
+.nav {
+	background-color: #346;
+	color: white;
+}
+
+.nav h1 {
+	display: inline-block;
+	margin: 10px;
+}
+.nav img {
+	width: 60px;
+	margin: -15px 20px;
+}
+.container {
+	margin: 20px auto;
+	display: grid;
+	grid-template-columns: 40% 55%;
+	grid-column-gap: 5%;
+}
+.sidebar {
+	border: 2px solid #ccc;
+	border-radius: 5px;
+	grid-column-start: 1;
+	grid-column-end: 2;
+	grid-row-start: 1;
+	grid-row-end: span 4;
+	padding: 10px;
+}
+
+.slider {
+	grid-column-start: 2;
+}
+.routeContainer {
+	grid-column-start: 2;
+	grid-row-start: 3;
+	grid-row-end: span 2;
+	border: 2px solid #ccc;
+	border-radius: 5px;
+	padding: 10px;
+}
+
+.trade-container {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-gap: 20px;
+}
+
+.main-header {
+	display: grid;
+	grid-template-columns: 3fr 1fr;
+	justify-items: start;
+	align-items: center;
+	margin-bottom: 20px;
+}
+
+.main-header h2 {
+	display: inline-block;
+	margin: 0;
+}
diff --git a/client/src/App.js b/client/src/App.js
@@ -0,0 +1,150 @@
+import React, { Component } from "react";
+import { BrowserRouter as Router, withRouter } from "react-router-dom";
+
+import { Navbar } from "./components/Navbar";
+import { Slider } from "./components/Slider";
+import Sidebar from "./components/Sidebar";
+import Main from "./components/Main";
+
+import "./App.css";
+
+const SidebarRoute = withRouter(Sidebar);
+const MainRoute = withRouter(Main);
+
+class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      sideBarData: [],
+      symbol: "AAPL",
+      price: 0,
+      quantity: 0
+    };
+  }
+
+  componentDidMount = async () => {
+    await Promise.resolve(this.props.getStocks());
+    const sideBarData = this.formatSidebarData(
+      this.props.stockData[this.props.date]
+    );
+    await this.setState({ sideBarData: sideBarData });
+    await this.setState({
+      price: Number(
+        this.state.sideBarData.filter(row => row[0] === this.state.symbol)[0][1]
+      )
+    });
+  };
+
+  formatSidebarData = data => {
+    const dataArray = Object.entries(data);
+    const date = new Date(this.props.date);
+    return dataArray.map(row => {
+      row.push(Number(row[1] - this.prevData(date, -1, row[0])).toFixed(2));
+      row.push(Number(row[1] - this.prevData(date, -7, row[0])).toFixed(2));
+      row.push(Number(row[1] - this.prevData(date, -30, row[0])).toFixed(2));
+      return row;
+    });
+  };
+
+  parseDate = (date, change, symbol) => {
+    let newdate = new Date(date);
+    newdate.setDate(newdate.getDate() + change);
+    return newdate.toISOString().split("T")[0];
+  };
+
+  prevData = (date, difference, symbol) => {
+    const string = this.parseDate(date, difference);
+    return this.props.stockData[string][symbol];
+  };
+
+  changeDate = async e => {
+    const date = new Date(2015, 0, 1);
+    const string = this.parseDate(date, Number(e.target.value));
+    await Promise.resolve(this.props.setDate(string));
+
+    const sideBarData = this.formatSidebarData(
+      this.props.stockData[this.props.date]
+    );
+
+    await Promise.resolve(this.setState({ sideBarData: sideBarData }));
+  };
+
+  changePage = e => {
+    //
+  };
+
+  handleClick = (symbol, price) => {
+    this.setState({ symbol: symbol, price: price });
+  };
+
+  changeQuantity = e => {
+    console.log(e.target.value);
+    this.setState({ quantity: Number(e.target.value) });
+  };
+
+  handleFormSubmit = async e => {
+    e.preventDefault();
+
+    let price, quantity;
+    const symbol = e.target.symbol.value;
+    const buySell = e.target.buySell.value;
+
+    const transaction = {
+      date: this.props.date,
+      symbol: symbol,
+      type: buySell,
+      quantity: e.target.quantity.value,
+      price: this.state.price
+    };
+
+    if (buySell === "buy") {
+      price = 0 - this.state.price;
+      quantity = 0 - e.target.quantity.value;
+    } else {
+      price = this.state.price;
+      quantity = e.target.quantity.value;
+    }
+
+    const portfolioData = {
+      symbol: e.target.symbol.value,
+      quantity: e.target.quantity.value,
+      price: price
+    };
+
+    await this.props.createTransaction(transaction);
+    await this.props.updatePortfolio(portfolioData);
+    await this.props.updateBalance(price);
+    console.log(this.props);
+  };
+
+  render() {
+    return (
+      <div className="App">
+        <Navbar />
+        <Router>
+          <div className="container">
+            <SidebarRoute
+              data={this.state.sideBarData}
+              onClick={this.handleClick}
+            />
+            <Slider onChange={this.changeDate} date={this.props.date} />
+            <MainRoute
+              onChange={this.changePage}
+              date={this.props.date}
+              symbol={this.state.symbol}
+              transactionData={this.props.transactions}
+              balance={this.props.balance}
+              price={this.state.price}
+              changeQuantity={this.changeQuantity}
+              total={this.state.quantity * this.state.price}
+              onSubmit={this.handleFormSubmit}
+            />
+            )}
+          </div>
+        </Router>
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/client/src/App.test.js b/client/src/App.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+});