working buy function and portfolio

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 (
     <div className="portfolio container">
       <h1 className="d-flex justify-content-center m-2 p-4">Browse</h1>
@@ -91,14 +111,15 @@ const Browse = (props) => {
       </div>
       <div>
         <br></br>
-        <form method="POST" action="/browse/">
+        <form onSubmit={onSubmit}>
           <div id="form-group">
             <label className="h4">Amount:</label>
             <input
               className="form-control"
               name="username"
               type="number"
-              step="0.01"
+              value={quantity}
+              onChange={(e) => setQuantity(e.target.value)}
             />
           </div>
           <br />

frontend/src/components/Portfolio.js

@@ -67,7 +67,10 @@ const Portfolio = (props) => {
           </h4>
           {stocks.map((stock) => {
             return (
-              <div className="m-1 d-inline-block text-dark text-wrap bg-white rounded p-3">
+              <div
+                key={stock.uuid}
+                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>
@@ -77,30 +80,6 @@ const Portfolio = (props) => {
               </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>