diff --git a/frontend/src/components/Bank.js b/frontend/src/components/Bank.js index b5fee8f..f1d3051 100644 --- a/frontend/src/components/Bank.js +++ b/frontend/src/components/Bank.js @@ -1,25 +1,14 @@ import React, { useState, useEffect } from "react"; -import "./assets/Portfolio.css"; +import "./assets/Bank.css"; const Bank = (props) => { const [state, setState] = useState({}); - const [bruh, setBruh] = useState(1); - - useEffect(() => { - callAPI(); - }); - - const callAPI = () => { - fetch("http://localhost:9000/FETCHURL") - .then((res) => res.text()) - .then((res) => setState(res)) - .catch((err) => err); - }; return ( -
-

Bank

-

{process.env.REACT_APP_API_ENDPOINT}

+
+
); }; diff --git a/frontend/src/components/Browse.js b/frontend/src/components/Browse.js index d7f1409..1c9d8af 100644 --- a/frontend/src/components/Browse.js +++ b/frontend/src/components/Browse.js @@ -6,26 +6,25 @@ const Plot = createPlotlyComponent(Plotly); const Browse = (props) => { const [stockChartXValues, setStockChartXValues] = useState([]); const [stockChartYValues, setStockChartYValues] = useState([]); - const [days, setDays] = useState(100); + const [days, setDays] = useState(30); const [stock, setStock] = useState("INTC"); - useEffect(() => { - fetchStock(); - }, [stock]); - let stockChartXValuesFunction = []; - let stockChartYValuesFunction = []; + + let stockChartXValuesList = []; + let stockChartYValuesList = []; + const fetchStock = () => { const KEY = "DTPB5IBDMPNE65TY"; let API_CALL = `https://www.alphavantage.co/query?function=TIME_SERIES_DAILY_ADJUSTED&symbol=${stock}&outputsize=compact&apikey=${KEY}`; const handleData = (data) => { for (var date in data["Time Series (Daily)"]) { - stockChartXValuesFunction.push(date); - stockChartYValuesFunction.push( + stockChartXValuesList.push(date); + stockChartYValuesList.push( data["Time Series (Daily)"][date]["1. open"] ); } - setStockChartXValues(stockChartXValuesFunction); - setStockChartYValues(stockChartYValuesFunction); + setStockChartXValues(stockChartXValuesList); + setStockChartYValues(stockChartYValuesList); }; fetch(API_CALL) @@ -33,8 +32,12 @@ const Browse = (props) => { .then((data) => handleData(data)); }; + useEffect(() => { + fetchStock(); + }, [stock]); + return ( -
+

Browse

{ const [state, setState] = useState({ - user: { username: "", first_name: "", last_name: "" }, + user: { username: "", email: "", first_name: "", last_name: "" }, charity: "", + nickname: "", + profile_pic: "/media/default.jpg", + percentage: 0.5, stocks: [], }); - useEffect(() => { - callAPI(); - }, [state]); + const requestOptions = { method: "GET", headers: { - Authorization: `JWT eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNjEyMDgyNzM3LCJlbWFpbCI6ImFkbWluQGdtYWlsLmNvbSJ9.hmTYX9LO1koP-1OLfY7EYBHZPtviGz2ilBA9qq4MChw`, + Authorization: `Bearer ${localStorage.getItem("token")}`, }, }; const callAPI = () => { - fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile`, requestOptions) + fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile/`, requestOptions) .then((response) => response.json()) - .then((data) => setState(data)); + .then((data) => { + if (data !== undefined) { + setState(data); + } + }); }; + useEffect(() => { + callAPI(); + }, []); + return (

Portfolio

@@ -31,7 +40,7 @@ const Portfolio = (props) => {

Your Stocks:

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

Stock: {stock.ticker}

diff --git a/frontend/src/components/Profile.js b/frontend/src/components/Profile.js index c497cee..8746721 100644 --- a/frontend/src/components/Profile.js +++ b/frontend/src/components/Profile.js @@ -2,18 +2,6 @@ import React, { useState, useEffect } from "react"; import "./assets/Portfolio.css"; const Profile = (props) => { - const [state, setState] = useState({}); - useEffect(() => { - callAPI(); - }); - - const callAPI = () => { - fetch("http://localhost:9000/FETCHURL") - .then((res) => res.text()) - .then((res) => setState(res)) - .catch((err) => err); - }; - return (

Profile

diff --git a/frontend/src/components/ProtectedRoute.js b/frontend/src/components/ProtectedRoute.js index d348fa0..366e9de 100644 --- a/frontend/src/components/ProtectedRoute.js +++ b/frontend/src/components/ProtectedRoute.js @@ -6,19 +6,52 @@ const ProtectedRoute = ({ component: Component, ...rest }) => { try { const requestOptions = { method: "GET", - headers: { Authorization: `JWT ${localStorage.getItem("token")}` }, + headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }, }; const response = await fetch( `${process.env.REACT_APP_API_ENDPOINT}/profile`, requestOptions ); + console.log(`Checking status! ${response.status}`); if (response.status === 200) { return true; } else { + const requestOptions = { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: { refresh: localStorage.getItem("refresh") }, + }; + const response = await fetch( + `${process.env.REACT_APP_API_ENDPOINT}/token/refresh/`, + requestOptions + ); + + const data = response.json(); + + localStorage.setItem("token", data.access); + return false; } } catch (e) { + const requestOptions = { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: { refresh: localStorage.getItem("refresh") }, + }; + const response = await fetch( + `${process.env.REACT_APP_API_ENDPOINT}/token/refresh/`, + requestOptions + ); + + const data = response.json(); + + localStorage.setItem("token", data.access); + return false; } }; @@ -33,7 +66,7 @@ const ProtectedRoute = ({ component: Component, ...rest }) => { return ( { }; try { const response = await fetch( - `${process.env.REACT_APP_API_ENDPOINT}/token`, + `${process.env.REACT_APP_API_ENDPOINT}/token/`, requestOptions ); const data = await response.json(); - localStorage.setItem("token", data.token); + localStorage.setItem("token", data.access); + localStorage.setItem("refresh", data.refresh); history.push("/"); } catch (e) { console.error(e);