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=
SECRET_KEY=
DEBUG=True
SECRET_KEY=wjtowjatiowjatioawtawt
DATABASE_USER=
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 (
<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>
);

View File

@ -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>

View File

@ -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;

View File

@ -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>

View File

@ -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>
);
};

View File

@ -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>
);