browse stock feature added

frontend/package.json

@@ -4,8 +4,10 @@
   "private": true,
   "dependencies": {
     "bootstrap": "^4.6.0",
+    "plotly.js": "^1.58.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-plotly.js": "^2.5.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1"

frontend/src/App.js

@@ -9,45 +9,40 @@ import Login from "./components/Login";
 import "./App.css";
 
 function App() {
-    const adminUser = {
+  const adminUser = {
+    email: "admin@admin.com",
+    password: "admin123",
+  };
 
-        email: "admin@admin.com",
-        password: "admin123"
+  const [user, setUser] = useState({ name: "", email: "" });
+  const [error, setError] = useState("");
 
-    }
+  const Login = (details) => {
+    console.log(details);
+  };
 
-    const [user, setUser] = useState({name: "", email: ""});
-    const [error, setError] = useState("");
-
-    const Login = details => {
-      console.log(details);
-
-    }
-
-    const Logout = () => {
-      console.log("Logout");
-    }
+  const Logout = () => {
+    console.log("Logout");
+  };
 
   return (
-
     <div className="App">
-      <BrowserRouter> 
-      <Switch>
-        <Route component={Bank} path="/banking" />
-        <Route component={Browse} path="/browse" />
-        <Route component={Profile} path="/profile" />
-        <Route component={Portfolio} path="/" />
-      </Switch>
-    </BrowserRouter>
-      {(user.email !== "") ? (
+      <BrowserRouter>
+        <Switch>
+          <Route component={Bank} path="/banking" />
+          <Route component={Browse} path="/browse" />
+          <Route component={Profile} path="/profile" />
+          <Route component={Portfolio} path="/" />
+        </Switch>
+      </BrowserRouter>
+      {/* {(user.email !== "") ? (
         <div className="welcome">
           <h2>Welcome, <span>{user.name}</span></h2>
           <button>Logout</button>
           </div>
       ) : (
         <Login/>
-      )}
-
+      )} */}
     </div>
   );
 }

frontend/src/components/Bank.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import "./assets/Portfolio.css";
 
-const Portfolio = (props) => {
+const Bank = (props) => {
   const [state, setState] = useState({});
   useEffect(() => {
     callAPI();

frontend/src/components/Browse.js

@@ -1,23 +1,96 @@
 import React, { useState, useEffect } from "react";
 import "./assets/Browse.css";
-
-const Portfolio = (props) => {
-  const [state, setState] = useState({});
+import Plotly from "plotly.js";
+import createPlotlyComponent from "react-plotly.js/factory";
+const Plot = createPlotlyComponent(Plotly);
+const Browse = (props) => {
+  const [stockChartXValues, setStockChartXValues] = useState([]);
+  const [stockChartYValues, setStockChartYValues] = useState([]);
+  const [days, setDays] = useState(100);
+  const [stock, setStock] = useState("INTC");
   useEffect(() => {
-    callAPI();
-  });
+    fetchStock();
+  }, [stock]);
+  let stockChartXValuesFunction = [];
+  let stockChartYValuesFunction = [];
+  const fetchStock = () => {
+    const KEY = "DTPB5IBDMPNE65TY";
+    let API_CALL = `https://www.alphavantage.co/query?function=TIME_SERIES_DAILY_ADJUSTED&symbol=${stock}&outputsize=compact&apikey=${KEY}`;
 
-  const callAPI = () => {
-    fetch("http://localhost:9000/FETCHURL")
-      .then((res) => res.text())
-      .then((res) => setState(res))
-      .catch((err) => err);
+    const handleData = (data) => {
+      for (var date in data["Time Series (Daily)"]) {
+        stockChartXValuesFunction.push(date);
+        stockChartYValuesFunction.push(
+          data["Time Series (Daily)"][date]["1. open"]
+        );
+      }
+      setStockChartXValues(stockChartXValuesFunction);
+      setStockChartYValues(stockChartYValuesFunction);
+    };
+
+    fetch(API_CALL)
+      .then((response) => response.json())
+      .then((data) => handleData(data));
   };
 
   return (
-    <div class="container">
-      <h1 class="d-flex justify-content-center m-2 p-4">Browse</h1>
-      <h1></h1>
+    <div className="container">
+      <h1 className="d-flex justify-content-center m-2 p-4">Browse</h1>
+      <input
+        class="form-control"
+        name="stock"
+        type="text"
+        id="stocksearch"
+        placeholder="Search stock..."
+      />
+      <button
+        class="btn"
+        onClick={() => setStock(document.getElementById("stocksearch").value)}
+      >
+        Search
+      </button>
+      <Plot
+        data={[
+          {
+            x: stockChartXValues.filter((x, index) => index <= days),
+            y: stockChartYValues.filter((y, index) => index <= days),
+            type: "scatter",
+            mode: "lines+markers",
+            marker: { color: "red" },
+          },
+        ]}
+        layout={{ width: 720, height: 440, title: `${stock} ` }}
+      />
+      <div class="d-inline bg-dark text-white">
+        <button class="btn" onClick={() => setDays(5)}>
+          5D
+        </button>
+        <button class="btn" onClick={() => setDays(14)}>
+          14D
+        </button>
+        <button class="btn" onClick={() => setDays(30)}>
+          30D
+        </button>
+        <button class="btn" onClick={() => setDays(100)}>
+          100D
+        </button>
+      </div>
+      <div>
+        <br></br>
+        <form method="POST" action="/browse/">
+          <div id="form-group">
+            <label class="h4">Amount:</label>
+            <input
+              class="form-control"
+              name="username"
+              type="number"
+              step="0.01"
+            />
+          </div>
+          <br />
+          <input class="btn btn-primary" type="submit" value="Submit" />
+        </form>
+      </div>
     </div>
   );
 };

frontend/src/components/Portfolio.js

@@ -17,6 +17,7 @@ const Portfolio = (props) => {
   return (
     <div class="container">
       <h1 class="d-flex justify-content-center m-2 p-4">Portfolio</h1>
+
       <h1></h1>
     </div>
   );

frontend/src/components/Profile.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import "./assets/Portfolio.css";
 
-const Portfolio = (props) => {
+const Profile = (props) => {
   const [state, setState] = useState({});
   useEffect(() => {
     callAPI();
@@ -22,4 +22,4 @@ const Portfolio = (props) => {
   );
 };
 
-export default Portfolio;
+export default Profile;

frontend/src/components/assets/Browse.css

@@ -0,0 +1,17 @@
+.h4 {
+  font-family: "Lucida Console", "Courier New", monospace;
+  color: cornflowerblue;
+}
+h1 {
+  font-family: "Lucida Console", "Courier New", monospace;
+  color: cornflowerblue;
+}
+.btn {
+  background-color: cornflowerblue;
+  font-family: "Lucida Console", "Courier New", monospace;
+  border-radius: 0px;
+}
+.btn:hover {
+  background-color: aqua; /* Green */
+  color: white;
+}

npm-debug.log

@@ -0,0 +1,19 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'start' ]
+2 info using npm@3.5.2
+3 info using node@v8.10.0
+4 verbose stack Error: ENOENT: no such file or directory, open '/mnt/c/Users/JoshuaHsueh/package.json'
+5 verbose cwd /mnt/c/Users/JoshuaHsueh/Desktop/reinvest
+6 error Linux 4.4.0-18362-Microsoft
+7 error argv "/usr/bin/node" "/usr/bin/npm" "start"
+8 error node v8.10.0
+9 error npm  v3.5.2
+10 error path /mnt/c/Users/JoshuaHsueh/package.json
+11 error code ENOENT
+12 error errno -2
+13 error syscall open
+14 error enoent ENOENT: no such file or directory, open '/mnt/c/Users/JoshuaHsueh/package.json'
+15 error enoent ENOENT: no such file or directory, open '/mnt/c/Users/JoshuaHsueh/package.json'
+15 error enoent This is most likely not a problem with npm itself
+15 error enoent and is related to npm not being able to find a file.
+16 verbose exit [ -2, true ]