added portfolio feature

This commit is contained in:
Joshua Hsueh 2021-01-31 03:44:14 -05:00
parent 51614e027f
commit 02d169e1ee
8 changed files with 91 additions and 67 deletions

View File

@ -1,4 +1,4 @@
DEBUG= DEBUG=True
SECRET_KEY= SECRET_KEY=wjtowjatiowjatioawtawt
DATABASE_USER= DATABASE_USER=
DATABASE_PASSWORD= DATABASE_PASSWORD=

View File

@ -1 +1 @@
REACT_APP_API_ENDPOINT=api.reinvest.com/api REACT_APP_API_ENDPOINT=https://api.reinvest.space/api

View File

@ -15,8 +15,8 @@ const Bank = (props) => {
}; };
return ( return (
<div class="container"> <div className="container">
<h1 class="d-flex justify-content-center m-2 p-4">Bank</h1> <h1 className="d-flex justify-content-center m-2 p-4">Bank</h1>
<h1></h1> <h1></h1>
</div> </div>
); );

View File

@ -37,16 +37,16 @@ const Browse = (props) => {
<div className="container"> <div className="container">
<h1 className="d-flex justify-content-center m-2 p-4">Browse</h1> <h1 className="d-flex justify-content-center m-2 p-4">Browse</h1>
<input <input
class="form-control" className="form-control"
name="stock" name="stock"
type="text" type="text"
id="stocksearch" id="stocksearch"
placeholder="Search stock..." placeholder="Search stock..."
/> />
<h4 class="h4"> <h4 className="h4">
${(stockChartYValues[0] - stockChartYValues[1]).toFixed(2)} ${(stockChartYValues[0] - stockChartYValues[1]).toFixed(2)}
</h4> </h4>
<h4 class="h4"> <h4 className="h4">
{( {(
((stockChartYValues[0] - stockChartYValues[1]) / ((stockChartYValues[0] - stockChartYValues[1]) /
stockChartYValues[1]) * stockChartYValues[1]) *
@ -55,7 +55,7 @@ const Browse = (props) => {
% %
</h4> </h4>
<button <button
class="btn" className="btn"
onClick={() => setStock(document.getElementById("stocksearch").value)} onClick={() => setStock(document.getElementById("stocksearch").value)}
> >
Search Search
@ -72,17 +72,17 @@ const Browse = (props) => {
]} ]}
layout={{ width: 720, height: 440, title: `${stock} ` }} layout={{ width: 720, height: 440, title: `${stock} ` }}
/> />
<div class="d-inline bg-dark text-white"> <div className="d-inline bg-dark text-white">
<button class="btn" onClick={() => setDays(5)}> <button className="btn" onClick={() => setDays(5)}>
5D 5D
</button> </button>
<button class="btn" onClick={() => setDays(14)}> <button className="btn" onClick={() => setDays(14)}>
14D 14D
</button> </button>
<button class="btn" onClick={() => setDays(30)}> <button className="btn" onClick={() => setDays(30)}>
30D 30D
</button> </button>
<button class="btn" onClick={() => setDays(100)}> <button className="btn" onClick={() => setDays(100)}>
100D 100D
</button> </button>
</div> </div>
@ -90,16 +90,16 @@ const Browse = (props) => {
<br></br> <br></br>
<form method="POST" action="/browse/"> <form method="POST" action="/browse/">
<div id="form-group"> <div id="form-group">
<label class="h4">Amount:</label> <label className="h4">Amount:</label>
<input <input
class="form-control" className="form-control"
name="username" name="username"
type="number" type="number"
step="0.01" step="0.01"
/> />
</div> </div>
<br /> <br />
<input class="btn btn-primary" type="submit" value="Submit" /> <input className="btn btn-primary" type="submit" value="Submit" />
</form> </form>
</div> </div>
</div> </div>

View File

@ -1,26 +1,25 @@
import React from 'react'; import React from "react";
const Login = (props) => { 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> export default Login;
<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

View File

@ -1,10 +1,10 @@
import React, { useState, useEffect } from "react"; import React from "react";
const Nav = (props) => { const Nav = (props) => {
return ( return (
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<button <button
class="navbar-toggler" className="navbar-toggler"
type="button" type="button"
data-toggle="collapse" data-toggle="collapse"
data-target="#navbarNavDropdown" data-target="#navbarNavDropdown"
@ -12,27 +12,27 @@ const Nav = (props) => {
aria-expanded="false" aria-expanded="false"
aria-label="Toggle navigation" aria-label="Toggle navigation"
> >
<span class="navbar-toggler-icon"></span> <span className="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNavDropdown"> <div className="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto"> <ul className="navbar-nav mr-auto">
<li class="nav-item"> <li className="nav-item">
<a class="nav-link text-white" href="/"> <a className="nav-link text-white" href="/">
Portfolio <span class="sr-only">(current)</span> Portfolio <span className="sr-only">(current)</span>
</a> </a>
</li> </li>
<li class="nav-item"> <li className="nav-item">
<a class="nav-link text-white" href="/profile"> <a className="nav-link text-white" href="/profile">
Profile <span class="sr-only">(current)</span> Profile <span className="sr-only">(current)</span>
</a> </a>
</li> </li>
<li class="nav-item"> <li className="nav-item">
<a class="nav-link text-white" href="/banking"> <a className="nav-link text-white" href="/banking">
Bank Bank
</a> </a>
</li> </li>
<li class="nav-item"> <li className="nav-item">
<a class="nav-link text-white" href="/browse"> <a className="nav-link text-white" href="/browse">
Browse Browse
</a> </a>
</li> </li>

View File

@ -2,23 +2,48 @@ import React, { useState, useEffect } from "react";
import "./assets/Portfolio.css"; import "./assets/Portfolio.css";
const Portfolio = (props) => { const Portfolio = (props) => {
const [state, setState] = useState({}); const [state, setState] = useState({
user: { username: "", first_name: "", last_name: "" },
charity: "",
stocks: [],
});
useEffect(() => { useEffect(() => {
callAPI(); callAPI();
}); }, [state]);
const requestOptions = {
method: "GET",
headers: {
Authorization: `JWT eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNjEyMDgyNzM3LCJlbWFpbCI6ImFkbWluQGdtYWlsLmNvbSJ9.hmTYX9LO1koP-1OLfY7EYBHZPtviGz2ilBA9qq4MChw`,
},
};
const callAPI = () => { const callAPI = () => {
fetch("http://localhost:9000/FETCHURL") fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile`, requestOptions)
.then((res) => res.text()) .then((response) => response.json())
.then((res) => setState(res)) .then((data) => setState(data));
.catch((err) => err);
}; };
return ( return (
<div class="container"> <div>
<h1 class="d-flex justify-content-center m-2 p-4">Portfolio</h1> <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> </div>
); );
}; };

View File

@ -15,8 +15,8 @@ const Profile = (props) => {
}; };
return ( return (
<div class="container"> <div className="container">
<h1 class="d-flex justify-content-center m-2 p-4">Profile</h1> <h1 className="d-flex justify-content-center m-2 p-4">Profile</h1>
<h1></h1> <h1></h1>
</div> </div>
); );