added portfoliojs and services

This commit is contained in:
Joshua Hsueh 2021-01-31 11:23:44 -05:00
parent d66873c9af
commit e241f43bdf
4 changed files with 127 additions and 28 deletions

View File

@ -10,6 +10,7 @@ const Portfolio = (props) => {
percentage: 0.5,
stocks: [],
});
const [stocks, setStocks] = useState([]);
const requestOptions = {
method: "GET",
@ -28,30 +29,79 @@ const Portfolio = (props) => {
});
};
const callStocksAPI = () => {
fetch(
`${process.env.REACT_APP_API_ENDPOINT}/robinhood/fetch/`,
requestOptions
)
.then((response) => response.json())
.then((data) => {
if (data !== undefined) {
setStocks(data);
}
});
};
useEffect(() => {
callAPI();
callStocksAPI();
}, []);
return (
<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>
<div className="container">
<h1>Hello {state.user.username}!</h1>
<h4>
Your Charity of Choice:{" "}
<a href="https://www.unwomen.org/en">UN Women</a> {state.charity}
</h4>
<h4>Your earnings: $0.00</h4>
<h4>Charity earnings: $17745.90</h4>
</div>
<br></br>
<div className="bg-dark text-white">
<h4 className="d-flex justify-content-center m-2 p-4">Your Stocks:</h4>
{[].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 className="container">
<h4 className="d-flex justify-content-center m-2 p-4">
Your Stocks:
</h4>
{stocks.map((stock) => {
return (
<div className="m-1 d-inline-block text-dark text-wrap bg-white rounded p-3">
<h3>Stock: {stock.ticker}</h3>
<p>Quantity: {stock.quantity}</p>
<p>Buy Price: ${stock.price}</p>
<form method="POST" action="/delete/">
<input type="submit" value="Sell" class="btn btn-danger" />
</form>
</div>
);
})}
<div className="m-1 d-inline-block text-dark text-wrap bg-white rounded p-3">
<h3>Stock: AMZN</h3>
<p>Quantity: 5</p>
<p>Buy Price: $3206.20</p>
<form method="POST" action="/delete/">
<input type="submit" value="Sell" class="btn btn-danger" />
</form>
</div>
<div className="d-inline-block m-1 text-wrap bg-white text-dark rounded p-3">
<h3>Stock: INTC</h3>
<p>Quantity: 10</p>
<p>Buy Price: $55.51</p>
<form method="POST" action="/delete/">
<input type="submit" value="Sell" class="btn btn-danger" />
</form>
</div>
<div className="m-1 d-inline-block text-dark text-wrap bg-white rounded p-3">
<h3>Stock: MSFT</h3>
<p>Quantity: 5</p>
<p>Buy Price: $231.96</p>
<form method="POST" action="/delete/">
<input type="submit" value="Sell" class="btn btn-danger" />
</form>
</div>
</div>
</div>
</div>
);

BIN
website/images/browse.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

View File

@ -101,20 +101,69 @@
</div>
</section>
<section id="services" class="">
<div class="bg-dark text-white">
<div class="bg-dark text-white p-4">
<div class="container">
<h1 class="d-flex justify-content-center m-2 p-4">Our Services</h1>
<p class="d-flex justify-content-center m-2 p-4">
ReInvest is a philanthropic platform where users can invest money
for charities. Instead of a simple donation, you can purchase stocks
for your charity of choice. This offers a great opportunity for you
to learn about stocks while helping your favorite organizations.
Scared of losing too much money? Our platform offers automatic stop
losses so that your organization doesn't lose more than a set
percentage of your initial donation. Additionally, you set the
percentage of profits that you get in return meanwhile your charity
gets the initial donation plus the rest of the profits.
</p>
<div class="row exp-grids py-3 d-inline-flex justify-content-center">
<div class="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
<img src="images/browse.png" alt=" " class="img-fluid" />
<div class="exp wthree">
<h5>Browse Stocks</h5>
<div class="clearfix"></div>
<p>
Easily browse through stocks and see their past. Change the
scale of the graph to your pleasing. Then if you wish to hold
a position, specify the amount of money you wish to donate and
submit.
</p>
</div>
</div>
<div class="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
<br />
<br />
<br />
<img src="images/logo.png" alt=" " class="img-fluid" />
<div class="exp wthree">
<br />
<br />
<br />
<h5>Charities</h5>
<div class="clearfix"></div>
<p>
Help out your favorite charities while learning and practicing
trading. The charities will receive the initial buy price.
Then, you can set a percentage of the profits that also goes
to charity. In this era, instead of a simple donation, you can
use our trading platform to trade for your charities.
</p>
</div>
</div>
<div class="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
<br />
<br />
<br />
<img src="images/portfolio.png" alt=" " class="img-fluid" />
<div class="exp wthree">
<br />
<br />
<br />
<h5>Portfolio</h5>
<div class="clearfix"></div>
<p>
Easily manage your portfolio with Reinvest. Here you can see
all the positions you currently hold as well as the initial
buy price and quantity. You can sell the stock by clicking
Sell for the desired stock. You can also see the current
earnings for yourself and the charity.
</p>
</div>
</div>
</div>
</div>
</div>
</section>