Merge branch 'master' of github.com:rushilwiz/reinvest

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

@@ -10,6 +10,7 @@ const Portfolio = (props) => {
     percentage: 0.5,
     stocks: [],
   });
+  const [stocks, setStocks] = useState([]);
 
   const requestOptions = {
     method: "GET",
@@ -28,32 +29,60 @@ 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>
+      <div className="container">
         <h1>Hello {state.user.username}!</h1>
-      <h4 className="h4">Your Charity of Choice: {state.charity}</h4>
-
+        <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) => {
+        <div className="container">
+          <h4 className="d-flex justify-content-center m-2 p-4">
+            Your Stocks:
+          </h4>
+          {stocks.map((stock) => {
             return (
-            <div className="d-inline-flex m-1 text-wrap bg-warning 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.buy_price}</p>
+                <p>Buy Price: ${stock.price}</p>
                 <form method="POST" action="/delete/">
-                <input type="submit" value="Delete" class="btn btn-danger" />
+                  <input type="submit" value="Sell" class="btn btn-danger" />
                 </form>
               </div>
             );
           })}
         </div>
       </div>
+    </div>
   );
 };
 

website/index.html

@@ -101,22 +101,71 @@
       </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.
+
+          <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>
     <section id="support" class="m-2">
       <div class="container">