From 02d169e1eed1792bec68154558de6b01687c72a3 Mon Sep 17 00:00:00 2001
From: Joshua Hsueh <joshua12696@gmail.com>
Date: Sun, 31 Jan 2021 03:44:14 -0500
Subject: [PATCH] added portfolio feature
---
backend/config/.env | 4 +--
frontend/.env | 2 +-
frontend/src/components/Bank.js | 4 +--
frontend/src/components/Browse.js | 24 +++++++--------
frontend/src/components/Login.js | 45 ++++++++++++++--------------
frontend/src/components/Nav.js | 32 ++++++++++----------
frontend/src/components/Portfolio.js | 43 ++++++++++++++++++++------
frontend/src/components/Profile.js | 4 +--
8 files changed, 91 insertions(+), 67 deletions(-)
diff --git a/backend/config/.env b/backend/config/.env
index 30d4393..ccd9ae7 100644
--- a/backend/config/.env
+++ b/backend/config/.env
@@ -1,4 +1,4 @@
-DEBUG=
-SECRET_KEY=
+DEBUG=True
+SECRET_KEY=wjtowjatiowjatioawtawt
DATABASE_USER=
DATABASE_PASSWORD=
\ No newline at end of file
diff --git a/frontend/.env b/frontend/.env
index f7736f1..7b4778e 100644
--- a/frontend/.env
+++ b/frontend/.env
@@ -1 +1 @@
-REACT_APP_API_ENDPOINT=api.reinvest.com/api
+REACT_APP_API_ENDPOINT=https://api.reinvest.space/api
\ No newline at end of file
diff --git a/frontend/src/components/Bank.js b/frontend/src/components/Bank.js
index edc1fd0..8d5c8a3 100644
--- a/frontend/src/components/Bank.js
+++ b/frontend/src/components/Bank.js
@@ -15,8 +15,8 @@ const Bank = (props) => {
};
return (
- <div class="container">
- <h1 class="d-flex justify-content-center m-2 p-4">Bank</h1>
+ <div className="container">
+ <h1 className="d-flex justify-content-center m-2 p-4">Bank</h1>
<h1></h1>
</div>
);
diff --git a/frontend/src/components/Browse.js b/frontend/src/components/Browse.js
index 2173c02..d7f1409 100644
--- a/frontend/src/components/Browse.js
+++ b/frontend/src/components/Browse.js
@@ -37,16 +37,16 @@ const Browse = (props) => {
<div className="container">
<h1 className="d-flex justify-content-center m-2 p-4">Browse</h1>
<input
- class="form-control"
+ className="form-control"
name="stock"
type="text"
id="stocksearch"
placeholder="Search stock..."
/>
- <h4 class="h4">
+ <h4 className="h4">
${(stockChartYValues[0] - stockChartYValues[1]).toFixed(2)}
</h4>
- <h4 class="h4">
+ <h4 className="h4">
{(
((stockChartYValues[0] - stockChartYValues[1]) /
stockChartYValues[1]) *
@@ -55,7 +55,7 @@ const Browse = (props) => {
%
</h4>
<button
- class="btn"
+ className="btn"
onClick={() => setStock(document.getElementById("stocksearch").value)}
>
Search
@@ -72,17 +72,17 @@ const Browse = (props) => {
]}
layout={{ width: 720, height: 440, title: `${stock} ` }}
/>
- <div class="d-inline bg-dark text-white">
- <button class="btn" onClick={() => setDays(5)}>
+ <div className="d-inline bg-dark text-white">
+ <button className="btn" onClick={() => setDays(5)}>
5D
</button>
- <button class="btn" onClick={() => setDays(14)}>
+ <button className="btn" onClick={() => setDays(14)}>
14D
</button>
- <button class="btn" onClick={() => setDays(30)}>
+ <button className="btn" onClick={() => setDays(30)}>
30D
</button>
- <button class="btn" onClick={() => setDays(100)}>
+ <button className="btn" onClick={() => setDays(100)}>
100D
</button>
</div>
@@ -90,16 +90,16 @@ const Browse = (props) => {
<br></br>
<form method="POST" action="/browse/">
<div id="form-group">
- <label class="h4">Amount:</label>
+ <label className="h4">Amount:</label>
<input
- class="form-control"
+ className="form-control"
name="username"
type="number"
step="0.01"
/>
</div>
<br />
- <input class="btn btn-primary" type="submit" value="Submit" />
+ <input className="btn btn-primary" type="submit" value="Submit" />
</form>
</div>
</div>
diff --git a/frontend/src/components/Login.js b/frontend/src/components/Login.js
index 71a5793..1f2ec84 100644
--- a/frontend/src/components/Login.js
+++ b/frontend/src/components/Login.js
@@ -1,26 +1,25 @@
-import React from 'react';
+import React from "react";
const Login = (props) => {
- return (
+ return (
+ <form>
+ <div className="form-inner">
+ <h2>Login</h2>
+ <div className="form-group">
+ <label htmlFor="name">Name:</label>
+ <input type="text" name="name" id="name" />
+ </div>
+ <div className="form-group">
+ <label htmlFor="email">Email: </label>
+ <input type="email" name="email" id="email" />
+ </div>
+ <div className="form-group">
+ <label htmlFor="password">Password:</label>
+ <input type="password" name="password" id="password" />
+ </div>
+ </div>
+ </form>
+ );
+};
- <form>
- <div className="form-inner">
- <h2>Login</h2>
- <div className="form-group">
- <label htmlFor="name">Name:</label>
- <input type="text" name="name" id="name"/>
- </div>
- <div className="form-group">
- <label htmlFor="email">Email: </label>
- <input type="email" name="email" id="email"/>
- </div>
- <div className="form-group">
- <label htmlFor="password">Password:</label>
- <input type="password" name="password" id="password"/>
- </div>
- </div>
- </form>
- )
-}
-
-export default Login
+export default Login;
diff --git a/frontend/src/components/Nav.js b/frontend/src/components/Nav.js
index 9e0d861..ad9c652 100644
--- a/frontend/src/components/Nav.js
+++ b/frontend/src/components/Nav.js
@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
const Nav = (props) => {
return (
- <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+ <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<button
- class="navbar-toggler"
+ className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
@@ -12,27 +12,27 @@ const Nav = (props) => {
aria-expanded="false"
aria-label="Toggle navigation"
>
- <span class="navbar-toggler-icon"></span>
+ <span className="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="navbarNavDropdown">
- <ul class="navbar-nav mr-auto">
- <li class="nav-item">
- <a class="nav-link text-white" href="/">
- Portfolio <span class="sr-only">(current)</span>
+ <div className="collapse navbar-collapse" id="navbarNavDropdown">
+ <ul className="navbar-nav mr-auto">
+ <li className="nav-item">
+ <a className="nav-link text-white" href="/">
+ Portfolio <span className="sr-only">(current)</span>
</a>
</li>
- <li class="nav-item">
- <a class="nav-link text-white" href="/profile">
- Profile <span class="sr-only">(current)</span>
+ <li className="nav-item">
+ <a className="nav-link text-white" href="/profile">
+ Profile <span className="sr-only">(current)</span>
</a>
</li>
- <li class="nav-item">
- <a class="nav-link text-white" href="/banking">
+ <li className="nav-item">
+ <a className="nav-link text-white" href="/banking">
Bank
</a>
</li>
- <li class="nav-item">
- <a class="nav-link text-white" href="/browse">
+ <li className="nav-item">
+ <a className="nav-link text-white" href="/browse">
Browse
</a>
</li>
diff --git a/frontend/src/components/Portfolio.js b/frontend/src/components/Portfolio.js
index 92ef647..a4d7b94 100644
--- a/frontend/src/components/Portfolio.js
+++ b/frontend/src/components/Portfolio.js
@@ -2,23 +2,48 @@ import React, { useState, useEffect } from "react";
import "./assets/Portfolio.css";
const Portfolio = (props) => {
- const [state, setState] = useState({});
+ const [state, setState] = useState({
+ user: { username: "", first_name: "", last_name: "" },
+ charity: "",
+ stocks: [],
+ });
useEffect(() => {
callAPI();
- });
+ }, [state]);
+ const requestOptions = {
+ method: "GET",
+ headers: {
+ Authorization: `JWT eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNjEyMDgyNzM3LCJlbWFpbCI6ImFkbWluQGdtYWlsLmNvbSJ9.hmTYX9LO1koP-1OLfY7EYBHZPtviGz2ilBA9qq4MChw`,
+ },
+ };
const callAPI = () => {
- fetch("http://localhost:9000/FETCHURL")
- .then((res) => res.text())
- .then((res) => setState(res))
- .catch((err) => err);
+ fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile`, requestOptions)
+ .then((response) => response.json())
+ .then((data) => setState(data));
};
return (
- <div class="container">
- <h1 class="d-flex justify-content-center m-2 p-4">Portfolio</h1>
+ <div>
+ <h1 className="d-flex justify-content-center m-2 p-4">Portfolio</h1>
+ <h1>Hello {state.user.username}!</h1>
+ <h4 className="h4">Your Charity of Choice: {state.charity}</h4>
- <h1></h1>
+ <div className="bg-dark text-white">
+ <h4 className="d-flex justify-content-center m-2 p-4">Your Stocks:</h4>
+ {state.stocks.map((stock) => {
+ return (
+ <div className="d-inline-flex m-1 text-wrap bg-warning rounded p-3">
+ <h3>Stock: {stock.ticker}</h3>
+ <p>Quantity: {stock.quantity}</p>
+ <p>Buy Price: {stock.buy_price}</p>
+ <form method="POST" action="/delete/">
+ <input type="submit" value="Delete" class="btn btn-danger" />
+ </form>
+ </div>
+ );
+ })}
+ </div>
</div>
);
};
diff --git a/frontend/src/components/Profile.js b/frontend/src/components/Profile.js
index 2bf6cf3..c497cee 100644
--- a/frontend/src/components/Profile.js
+++ b/frontend/src/components/Profile.js
@@ -15,8 +15,8 @@ const Profile = (props) => {
};
return (
- <div class="container">
- <h1 class="d-flex justify-content-center m-2 p-4">Profile</h1>
+ <div className="container">
+ <h1 className="d-flex justify-content-center m-2 p-4">Profile</h1>
<h1></h1>
</div>
);