add market to stock trader

lishenyu16 · Jul 24, 2020 · 4d10c2b · 4d10c2b
1 parent 5923caf
commit 4d10c2b
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 126 deletions.
diff --git a/inspiredblog/src/pages/index/components/Sites.js b/inspiredblog/src/pages/index/components/Sites.js
@@ -19,7 +19,10 @@ const Sites = (props) => {
         <div className={classes.main}>
             <div style={{fontSize:'26px',width: '100%', textAlign: 'center',margin: '50px 0'}}>Other Websites</div>
             <div style={{width: '100%',padding: '0 10%'}}>
-                <li>Stock Market App: <a href="/stocktrader" target="__blank">Reacthood</a></li>
+                <li><a href="/stocktrader" target="__blank">Stock Market App: Reacthood</a></li>
+                <li><a href="https://lishenyu16.github.io/aboutMe/" target="__blank">Author Profile: About Me</a></li>
+                <li><a href="https://lishenyu16.github.io/calculator/" target="__blank">Simple Vue App: A calculator</a></li>
+                <li>Share Your Secrets(on the way)</li>
             </div>
         </div>
     );

diff --git a/inspiredblog/src/pages/stocktrader/components/Market.js b/inspiredblog/src/pages/stocktrader/components/Market.js
@@ -5,7 +5,6 @@ import {connect} from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import { checkAuthState } from '../selectors/authSelector';
 import Button from '@material-ui/core/Button';
-import appleStockImage from '../img/apple_stock.png';
 import axios from 'axios';
 
 const useStyles = makeStyles({
@@ -38,7 +37,7 @@ const useStyles = makeStyles({
         padding: '22px 23px',
         display: 'flex',
         flexDirection: 'column',
-        border: '1px solid black',
+        border: '1px solid #b8c1ca',
         justifyContent: 'space-between',
         margin: '5px 5px',
         cursor: 'pointer',
@@ -59,23 +58,27 @@ const Market = (props) => {
     const history = useHistory();
     const [marketStocks, setMarketStocks] = useState(null);
     useEffect(()=>{
-        console.log('it is the using effect 1')
         async function fetchData() {
             const result = await axios.get(host + `/api/stocktrader/quotes/fetch_market_quotes`, header);
             setMarketStocks(result.data.data);
         }
         fetchData();
     },[]);
     useEffect(() => {
-        console.log('it is the using effect 2')
-        if (marketStocks&&marketStocks['FB'].quote.isUSMarketOpen){
-            setInterval(() => {
-                console.log('This will run every 10 seconds!');
+        //this hook will run after the state has been filled with datas.
+        if (marketStocks&&marketStocks['BA'].quote.isUSMarketOpen){
+            setTimeout(() => {
                 async function fetchData() {
                     const result = await axios.get(host + `/api/stocktrader/quotes/fetch_market_quotes`, header);
                     setMarketStocks(result.data.data);
                 }
-                fetchData();
+                try {
+                    fetchData();
+                }
+                catch(err){
+                    console.log(err);
+                    fetchData();
+                }
             }, 10000);
         }
       }, [marketStocks]);

diff --git a/inspiredblog/src/pages/stocktrader/components/Portfolio.js b/inspiredblog/src/pages/stocktrader/components/Portfolio.js
@@ -5,7 +5,8 @@ import {connect} from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import { checkAuthState } from '../selectors/authSelector';
 import Button from '@material-ui/core/Button';
-import appleStockImage from '../img/apple_stock.png';
+import mrnaStockImage from '../img/mrna.png';
+
 const useStyles = makeStyles({
     main: {
         display:'flex',
@@ -67,7 +68,8 @@ const useStyles = makeStyles({
         maxWidth: '1024px',
         padding: '100px 60px',
         width: '100%',
-        display: 'flex'
+        display: 'flex',
+        justifyContent: 'space-between',
     },
     header_left: {
         maxWidth: '45%',
@@ -98,7 +100,8 @@ const useStyles = makeStyles({
     },
 
 })
-const Home = (props) => {
+
+const Portfolio = (props) => {
     const classes = useStyles();
     const history = useHistory();
 
@@ -116,7 +119,7 @@ const Home = (props) => {
                         </div>
                     </div>
                     <div className={classes.header_right}>
-                        <img src={appleStockImage} style={{maxWidth: '100%'}}></img>
+                        <img src={mrnaStockImage} style={{maxWidth: '100%'}}></img>
                     </div>
                 </div>
             </div>
@@ -144,4 +147,4 @@ const mapDispatchToProps = (dispatch) => {
         onLogout: (history) => dispatch({type: 'logout', data: history}),
     }
 }
-export default connect(mapStateToProps,mapDispatchToProps)(Home);
+export default connect(mapStateToProps,mapDispatchToProps)(Portfolio);
diff --git a/inspiredblog/src/pages/stocktrader/components/Stock.js b/inspiredblog/src/pages/stocktrader/components/Stock.js
@@ -4,15 +4,8 @@ import { Switch, Route, Redirect, Link ,useHistory} from 'react-router-dom';
 import {connect} from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import { checkAuthState } from '../selectors/authSelector';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
-import appleStockImage from '../img/apple_stock.png';
-import SignIn from './auth/SignIn';
-import Footer from '../Footer';
+import axios from 'axios';
 
 const useStyles = makeStyles({
     main: {
@@ -23,120 +16,52 @@ const useStyles = makeStyles({
         position: 'relative',
         paddingBottom: '40px', // for bottom footer.
     },
-    title: {
-        flexGrow: 1
-    },
-    link: {
-        paddingLeft:'20px',
-        display:'flex',
-        justifyContent:'flex-start',
-        '&:hover': {
-            color: 'rgb(0,180,5)'
-        }
-    },
-    primary: {
-        color: 'inherit',
-        backgroundColor: 'inherit'
-    },
-    positionFixed: {
-        position: 'inherit'
-    },
     signInButton: {
         textTransform: 'none',
         '&:hover': {
             color: 'rgb(0,180,5)',
             backgroundColor: 'inherit'
         }
     },
-    signUpButton: {
-        textTransform: 'none',
-        minWidth: '144px',
-        padding: '0 16px',
-        borderRadius: '24px',
-        backgroundColor: 'rgba(0,200,5,1)',
-        height: '48px',
-        display: 'inline-flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginLeft: '30px',
-        '&:hover': {
-            backgroundColor: 'rgb(0,180,5)',
-            backgroundBottomColor: '#000000',
-            borderBottomWidth: '1px',
-            borderBottomStyle: 'solid',
-        }
-    },
-    header: {
-        width: '100%',
-        backgroundColor:'rgba(195,245,60,1)',
-    },
-    headerContainer: {
-        margin: '0 auto',
-        maxWidth: '1024px',
-        padding: '100px 60px',
-        width: '100%',
-        display: 'flex'
-    },
-    header_left: {
-        maxWidth: '45%',
-    },
-    header_left_top: {
-        fontSize: '60px',
-        lineHeight: '72px',
-        letterSpacing: '-2.4px',
-        color: 'rgb(4,13,20)',
-        marginBottom: '18px',
-        whiteSpace: 'pre-line'
-    },
-    header_left_mid: {
-        marginTop: '24px',
-        fontSize: '24px',
-        lineHeight: '32px',
-        letterSpacing: '-0.24px',
-        color: '#040d14',
-    },
-    header_left_button: {
-        marginTop: '40px',
-        display: 'flex',
-        flexDirection:'column',
-        alignItems: 'start'
-    },
-    header_right: {
-        maxWidth: '45%',
-    },
 
 })
-const Home = (props) => {
+
+const host = process.env.NODE_ENV === "production"?'':'http://localhost:5000';
+let header = {
+    headers: localStorage.getItem('stock_token')? {
+        Authorization: 'Bearer ' + localStorage.getItem('stock_token')
+    } :null
+} 
+const Stock = (props) => {
     const classes = useStyles();
     const history = useHistory();
-
+    const [stock, setStock] = useState(null);
+    useEffect(()=>{
+        async function fetchData(){
+            const result = await axios.get(host + `/api/stocktrader/quotes/stocks/${props.match.params.symbol}`, header);
+            setStock(result.data);
+        }
+        fetchData();
+    },[])
+    useEffect(()=>{
+        if (stock&&stock.quote.isUSMarketOpen){
+            setTimeout(() => {
+                async function fetchData() {
+                    const result = await axios.get(host + `/api/stocktrader/quotes/stocks/${props.match.params.symbol}`, header);
+                    setStock(result.data);
+                }
+                fetchData();
+            }, 10000);
+        }
+    },[stock])
     return (
-        <React.Fragment>
-            <div className={classes.header}>
-                <div className={classes.headerContainer}>
-                    <div className={classes.header_left}>
-                        <div className={classes.header_left_top}>Investing for Everyone</div>
-                        <div className={classes.header_left_mid}>Reacthood, a pioneer of commission-free investing, gives you more ways to make your money work harder.</div>
-                        <div className={classes.header_left_button}>
-                            <Button classes={{root: classes.signUpButton}} style={{marginLeft: '0', backgroundColor: '#000000', color: 'white'}}>
-                                <span className={'sansBold'}>Sign Up</span>
-                            </Button>
-                        </div>
-                    </div>
-                    <div className={classes.header_right}>
-                        <img src={appleStockImage} style={{maxWidth: '100%'}}></img>
-                    </div>
-                </div>
-            </div>
-            <div style={{width: '100%', display: 'flex', justifyContent: 'center'}}>
-                <img  
-                    src="https://cdn.robinhood.com/assets/robinhood/brand/e46bb5ae43b4085ee9a2e2d576047a37-1x.png" 
-                    srcset="https://cdn.robinhood.com/assets/robinhood/brand/e46bb5ae43b4085ee9a2e2d576047a37-1x.png, https://cdn.robinhood.com/assets/robinhood/brand/f399a1d9bf69ffa75c65e2d4aed8473b-2x.png 2x, https://cdn.robinhood.com/assets/robinhood/brand/b8c0239a85297be0e892b14387b9193d-3x.png 3x" 
-                    role="presentation" draggable="false">
-                </img>
+        <div className={classes.mainDiv}>
+            <div>
+
             </div>
-            {/* <Footer /> */}
-        </React.Fragment>
+            <div></div>
+            <div></div>
+        </div>
     )
 }
 
@@ -148,8 +73,6 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
     return {
-        onSignIn: (email,password)=> dispatch({type: 'SIGN_IN', data: {email, password}}),
-        onLogout: (history) => dispatch({type: 'logout', data: history}),
     }
 }
-export default connect(mapStateToProps,mapDispatchToProps)(Home);
+export default connect(mapStateToProps,mapDispatchToProps)(Stock);
diff --git a/inspiredblog/src/pages/stocktrader/img/mrna.png b/inspiredblog/src/pages/stocktrader/img/mrna.png