Add PortfolioBuilderApp with data

src/Components/PortfolioBuilderApp/PortfolioBuilderApp.css

@@ -0,0 +1,21 @@
+.portfolio-builder-app {
+  width: 100%;
+  height: 100%;
+}
+
+.portfolio-builder-app>.header-bar {
+  width: 100%;
+  height: 3em;
+  background-image: linear-gradient(-90deg, #2BC4DD 0%, #3489D1 100%);
+}
+
+.portfolio-builder-app>.body {
+  padding: 2em; 
+}
+
+.portfolio-builder-app>.body>.title {
+  font-size: 2em;
+  color: #17BCD9;
+
+  padding-bottom: 1em;
+}

src/Components/PortfolioBuilderApp/PortfolioBuilderApp.jsx

@@ -0,0 +1,69 @@
+/* eslint-disable react/prefer-stateless-function */
+import React, { Component } from 'react';
+import './PortfolioBuilderApp.css';
+import { data } from './data';
+import { deepCloneNaive } from '../Utils';
+import { StockPicker } from '../StockPicker';
+import { PortfolioManager } from '../PortfolioManager';
+
+class PortfolioBuilderApp extends Component {
+  constructor(props) {
+    super(props);
+
+    this.allScripPrices = data.price;
+    this.state = {
+      portfolioScripPrices: {
+      },
+    };
+
+    this.addScripToPortfolio = this.addScripToPortfolio.bind(this);
+  }
+
+  addScripToPortfolio(scripName) {
+    if (scripName in this.allScripPrices) {
+      this.setState((oldState) => {
+        const oldPortfolioScripPrices = oldState.portfolioScripPrices;
+        const newPortfolioScripPrices = deepCloneNaive(oldPortfolioScripPrices);
+        newPortfolioScripPrices[scripName] = this.allScripPrices[scripName];
+
+        return {
+          portfolioScripPrices: newPortfolioScripPrices,
+        };
+      });
+    }
+  }
+
+  calcRemainingScripPrices() {
+    const remainingScripPrices = {};
+    Object.keys(this.allScripPrices).forEach((scripName) => {
+      if (!(scripName in this.state.portfolioScripPrices)) {
+        remainingScripPrices[scripName] = this.allScripPrices[scripName];
+      }
+    });
+
+    return remainingScripPrices;
+  }
+
+  render() {
+    return (
+      <div className="portfolio-builder-app">
+        <div className="header-bar" />
+        <div className="body">
+          <div className="title">
+            smallcase Portfolio Builder
+          </div>
+          <StockPicker
+            remainingScripPrices={this.calcRemainingScripPrices()}
+            addScripToPortfolio={this.addScripToPortfolio}
+          />
+          <PortfolioManager
+            portfolioScripPrices={this.state.portfolioScripPrices}
+            addScripToPortfolio={this.addScripToPortfolio}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export { PortfolioBuilderApp };

src/Components/PortfolioBuilderApp/PortfolioBuilderApp.test.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PortfolioBuilderApp from './PortfolioBuilderApp';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<PortfolioBuilderApp />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/Components/PortfolioBuilderApp/index.js

@@ -0,0 +1 @@
+export { PortfolioBuilderApp } from './PortfolioBuilderApp';