feat(frontend): finished frontend auth and worked on components

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 (
-    <div class="container">
-      <h1 class="d-flex justify-content-center m-2 p-4">Bank</h1>
-      <h1>{process.env.REACT_APP_API_ENDPOINT}</h1>
+    <div className="container">
+      <button type="button" className="btn btn-outline-success robinhood">
+        Connect to Robinhood
+      </button>
     </div>
   );
 };

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 (
-    <div className="container">
+    <div className="portfolio container">
       <h1 className="d-flex justify-content-center m-2 p-4">Browse</h1>
       <input
         className="form-control"

frontend/src/components/Portfolio.js

@@ -3,26 +3,35 @@ import "./assets/Portfolio.css";
 
 const Portfolio = (props) => {
   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 (
     <div>
       <h1 className="d-flex justify-content-center m-2 p-4">Portfolio</h1>
@@ -31,7 +40,7 @@ const Portfolio = (props) => {
 
       <div className="bg-dark text-white">
         <h4 className="d-flex justify-content-center m-2 p-4">Your Stocks:</h4>
-        {state.stocks.map((stock) => {
+        {[].map((stock) => {
           return (
             <div className="d-inline-flex m-1 text-wrap bg-warning rounded p-3">
               <h3>Stock: {stock.ticker}</h3>

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 (
     <div className="container">
       <h1 className="d-flex justify-content-center m-2 p-4">Profile</h1>

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 (
             <Redirect
               to={{
-                pathname: "/",
+                pathname: "/login",
                 state: {
                   from: props.location,
                 },

frontend/src/components/assets/Bank.css

@@ -0,0 +1,4 @@
+.robinhood {
+  margin-top: 40vh;
+  padding: 20px 25vw;
+}

frontend/src/components/assets/Browse.css

@@ -1,17 +1,17 @@
-.h4 {
+.portfolio .h4 {
   font-family: "Lucida Console", "Courier New", monospace;
   color: cornflowerblue;
 }
-h1 {
+.portfolio h1 {
   font-family: "Lucida Console", "Courier New", monospace;
   color: cornflowerblue;
 }
-.btn {
+.portfolio .btn {
   background-color: cornflowerblue;
   font-family: "Lucida Console", "Courier New", monospace;
   border-radius: 0px;
 }
-.btn:hover {
+.portfolio .btn:hover {
   background-color: aqua; /* Green */
   color: white;
 }

frontend/src/components/auth/Signin.js

@@ -16,12 +16,13 @@ const Signup = (props) => {
     };
     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);