diff --git a/frontend/src/components/Browse.js b/frontend/src/components/Browse.js index 1c9d8af..a73b7b5 100644 --- a/frontend/src/components/Browse.js +++ b/frontend/src/components/Browse.js @@ -1,4 +1,5 @@ import React, { useState, useEffect } from "react"; +import { useHistory } from "react-router-dom"; import "./assets/Browse.css"; import Plotly from "plotly.js"; import createPlotlyComponent from "react-plotly.js/factory"; @@ -8,6 +9,8 @@ const Browse = (props) => { const [stockChartYValues, setStockChartYValues] = useState([]); const [days, setDays] = useState(30); const [stock, setStock] = useState("INTC"); + const [quantity, setQuantity] = useState(0); + const history = useHistory(); let stockChartXValuesList = []; let stockChartYValuesList = []; @@ -36,6 +39,23 @@ const Browse = (props) => { fetchStock(); }, [stock]); + const onSubmit = (e) => { + e.preventDefault(); + const requestOptions = { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${localStorage.getItem("token")}`, + }, + body: JSON.stringify({ ticker: stock, quantity: quantity }), + }; + fetch(`${process.env.REACT_APP_API_ENDPOINT}/stock/create`, requestOptions) + .then((response) => response.json()) + .then((data) => { + console.log(data); + }); + }; + return (

Browse

@@ -91,14 +111,15 @@ const Browse = (props) => {


-
+
setQuantity(e.target.value)} />

diff --git a/frontend/src/components/Portfolio.js b/frontend/src/components/Portfolio.js index a15f21b..3570227 100644 --- a/frontend/src/components/Portfolio.js +++ b/frontend/src/components/Portfolio.js @@ -10,6 +10,7 @@ const Portfolio = (props) => { percentage: 0.5, stocks: [], }); + const [stocks, setStocks] = useState([]); const requestOptions = { method: "GET", @@ -28,30 +29,58 @@ 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 (

Portfolio

-

Hello {state.user.username}!

-

Your Charity of Choice: {state.charity}

- +
+

Hello {state.user.username}!

+

+ Your Charity of Choice:{" "} + UN Women {state.charity} +

+

Your earnings: $0.00

+

Charity earnings: $17745.90

+
+

-

Your Stocks:

- {[].map((stock) => { - return ( -
-

Stock: {stock.ticker}

-

Quantity: {stock.quantity}

-

Buy Price: {stock.buy_price}

- - - -
- ); - })} +
+

+ Your Stocks: +

+ {stocks.map((stock) => { + return ( +
+

Stock: {stock.ticker}

+

Quantity: {stock.quantity}

+

Buy Price: ${stock.price}

+
+ +
+
+ ); + })} +
); diff --git a/website/images/browse.png b/website/images/browse.png new file mode 100644 index 0000000..d5bf591 Binary files /dev/null and b/website/images/browse.png differ diff --git a/website/images/portfolio.png b/website/images/portfolio.png new file mode 100644 index 0000000..710c547 Binary files /dev/null and b/website/images/portfolio.png differ diff --git a/website/index.html b/website/index.html index 9166ae1..8d3c3f1 100644 --- a/website/index.html +++ b/website/index.html @@ -101,20 +101,69 @@
-
+

Our Services

-

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

+ +
+
+ +
+
Browse Stocks
+
+

+ 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. +

+
+
+
+
+
+
+ +
+
+
+
+ +
Charities
+
+ +

+ 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. +

+
+
+
+
+
+
+ +
+
+
+
+ +
Portfolio
+
+ +

+ 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. +

+
+
+