update env

connorskorburg · Jun 22, 2022 · c0b3d9c · c0b3d9c
1 parent 778b7c5
commit c0b3d9c
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 50 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.env
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "stock-dashboard",
+  "name": "robinhood-clone",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -15,7 +15,6 @@
     "react-apexcharts": "^1.4.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
-    "styled-components": "^5.3.5",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },
@@ -42,8 +41,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "@types/styled-components": "^5.1.25"
   }
 }
diff --git a/src/components/About/index.tsx b/src/components/About/index.tsx
@@ -3,8 +3,9 @@ const About = (): JSX.Element => {
     <div className="about mb-75">
       <h2 className="mb-1 pb-1 bb-1">About</h2>
       <h3>
-        QQQ tracks a modified-market-cap-weighted index of 100 NASDAQ-listed
-        stocks. The listed name for QQQ is Invesco QQQ Trust, Series 1.
+        SPY tracks a market-cap weighted index of US large- and midcap stocks
+        selected by the S&P committee. The listed name for SPY is SPDR S&P 500
+        ETF Trust.
       </h3>
     </div>
   );

diff --git a/src/components/PopularStocks/index.tsx b/src/components/PopularStocks/index.tsx
@@ -7,6 +7,7 @@ const PopularStocks = (): JSX.Element => {
 
   useEffect(() => {
     setLoading(true);
+    console.log("fetching....");
     fetchPopularStocks();
     setLoading(false);
     // eslint-disable-next-line
@@ -22,7 +23,7 @@ const PopularStocks = (): JSX.Element => {
         {popularStocks
           .splice(0, 4)
           .map(({ latestPrice, changePercent, companyName, change }: Stock) => (
-            <div className="card">
+            <div key={companyName} className="card">
               <h4 className="font-bold h-60">{companyName}</h4>
               <h2 className="text-green">${latestPrice}</h2>
               <p className="text-green mt-1">+{changePercent}%</p>

diff --git a/src/components/StockChart/index.tsx b/src/components/StockChart/index.tsx
@@ -5,9 +5,6 @@ import { useStockContext } from "../../context";
 
 const StockChart = (): JSX.Element => {
   const { symbol, companyName } = useStockContext();
-
-  console.log(symbol);
-
   const [tickerInfo, setTickerInfo] = useState({
     symbol,
     iexClose: 0,
@@ -25,37 +22,30 @@ const StockChart = (): JSX.Element => {
   const [seriesData, setSeriesData] = useState([]);
 
   useEffect(() => {
-    setTimeout(() => {
-      setTickerInfo({ ...tickerInfo, companyName, symbol });
-      fetch(
-        `https://sandbox.iexapis.com/stable/stock/${tickerInfo.symbol}/chart?token=Tpk_2dedebc58c2b48a189cbbab50515b095&range=1m&includeToday=true&format=json`
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          const tempSeriesData: any = [];
-          data.forEach(({ date, fHigh, fLow, fClose, fOpen }: SeriesData) => {
-            if (fHigh && fLow && fClose && fOpen) {
-              tempSeriesData.push({
-                x: new Date(date),
-                y: [fOpen, fHigh, fLow, fClose],
-              });
-            }
-          });
-          setSeriesData(tempSeriesData);
-          // setTickerInfo({
-          //   ...tickerInfo,
-          //   iexClose: tempSeriesData[tempSeriesData.length - 1]["y"][3],
-          // });
-        })
-        .catch((err) => console.error(err));
-    }, 3000);
-  }, [symbol, companyName]);
+    fetch(
+      `${process.env.REACT_APP_IEX_CLOUD_API_BASE_URL}stock/${tickerInfo.symbol}/chart?token=${process.env.REACT_APP_IEX_CLOUD_API_KEY}&range=1m&includeToday=true&format=json`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        const tempSeriesData: any = [];
+        data.forEach(({ date, fHigh, fLow, fClose, fOpen }: SeriesData) => {
+          if (fHigh && fLow && fClose && fOpen) {
+            tempSeriesData.push({
+              x: new Date(date),
+              y: [fOpen, fHigh, fLow, fClose],
+            });
+          }
+        });
+        setSeriesData(tempSeriesData);
+      })
+      .catch((err) => console.error(err));
+  }, []);
 
   return (
     <section>
       <header>
         <h1>{tickerInfo.companyName}</h1>
-        <h1>${tickerInfo.iexClose}</h1>
+        <h1>$375.66</h1>
         <h4 className="mt-1">+$0.79 (+0.22%)</h4>
       </header>
 

diff --git a/src/components/Watchlist/index.tsx b/src/components/Watchlist/index.tsx
@@ -15,7 +15,7 @@ const Watchlist = () => {
 
   useEffect(() => {
     fetch(
-      `https://sandbox.iexapis.com/stable/stock/market/quote?token=Tpk_2dedebc58c2b48a189cbbab50515b095&range=1m&includeToday=true&symbols=AAPL,DIS,TSLA,SPY,QQQ&format=json`
+      `${process.env.REACT_APP_IEX_CLOUD_API_BASE_URL}stock/market/quote?token=${process.env.REACT_APP_IEX_CLOUD_API_KEY}&range=1m&includeToday=true&symbols=AAPL,DIS,TSLA,SPY,QQQ&format=json`
     )
       .then((res) => res.json())
       .then((data) => {

diff --git a/src/context/Provider/index.tsx b/src/context/Provider/index.tsx
@@ -16,7 +16,7 @@ const Provider = ({ children }: { children: JSX.Element }) => {
 
   const fetchNews = () =>
     fetch(
-      "https://sandbox.iexapis.com/stable/stock/market/news?token=Tpk_2dedebc58c2b48a189cbbab50515b095&range=1m&includeToday=true&format=json"
+      `${process.env.REACT_APP_IEX_CLOUD_API_BASE_URL}stock/market/news?token=${process.env.REACT_APP_IEX_CLOUD_API_KEY}&range=1m&includeToday=true&format=json`
     )
       .then((response) => response.json())
       .then((data) =>
@@ -26,7 +26,7 @@ const Provider = ({ children }: { children: JSX.Element }) => {
 
   const fetchPopularStocks = () =>
     fetch(
-      "https://sandbox.iexapis.com/stable/stock/market/list/mostactive?token=Tpk_2dedebc58c2b48a189cbbab50515b095&range=1m&includeToday=true&format=json"
+      `${process.env.REACT_APP_IEX_CLOUD_API_BASE_URL}stock/market/list/mostactive?token=${process.env.REACT_APP_IEX_CLOUD_API_KEY}&range=1m&includeToday=true&format=json`
     )
       .then((response) => response.json())
       .then((data) =>

diff --git a/src/index.css b/src/index.css
@@ -187,7 +187,6 @@ a {
   color: transparent;
   width: 500px;
   max-width: 550px;
-  /* height: 100px; */
   margin-bottom: 10px;
   margin-top: 10px;
 }

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,14 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  // <React.StrictMode>
+  <App />
+  // </React.StrictMode>
 );
-