add stock trader project and initial setup, basic layout for first page

inspiredblog/src/config/createHtml.js

@@ -14,10 +14,10 @@ function createHtml(page_path){
 			infoData = {};
 		}
 		htmlArr.push(new HtmlWebpackPlugin({
-			title:infoData.title ? infoData.title : "webpack,react多页面架构",
+			title:infoData.title ? infoData.title : "Inspirations",
 			meta:{
-				keywords: infoData.keywords ? infoData.keywords : "webpack，react，github",
-				description:infoData.description ? infoData.description : "这是一个webpack，react多页面架构"
+				keywords: infoData.keywords ? infoData.keywords : "blogs",
+				description:infoData.description ? infoData.description : "inspired blogs"
 			},
 			chunks:[`${item}/${item}`], //引入的js: myStory/myStory.bundle.js
 			template: "./src/pages/index.html",

inspiredblog/src/pages/index/App.js

@@ -172,10 +172,9 @@ const App = (props) => {
     });
     const [mobile, setMobile] = React.useState(mql.matches);
     // const [mql, setMql] = React.useState(mql.matches); 
-    useEffect(()=>{
-        console.log('gets here: 1,', mql.matches);
-        props.checkAuthState();
-    },[])
+    // useEffect(()=>{
+    //     props.checkAuthState();
+    // },[])
     useEffect(()=>{
         props.trackUser();
     },[])
@@ -184,7 +183,6 @@ const App = (props) => {
     }
     useEffect(()=>{ // similar to componentWillMount. when it's unmounted, run the returned function
         // refer to this: https://zhuanlan.zhihu.com/p/21650585
-        console.log('gets here:', mql.matches);
         mql.addListener(mediaQueryChanged);
         return () =>{
             // setMql(mq);
@@ -414,7 +412,7 @@ const mapDispatchToProps = (dispatch)=>{
     return {
         onSignIn: (email,password)=> dispatch({type: 'SIGN_IN', data: {email, password}}),
         onLogout: (history) => dispatch({type: 'logout', data: history}),
-        checkAuthState: () => dispatch({type: 'checkAuthState'}),
+        // checkAuthState: () => dispatch({type: 'checkAuthState'}),
         trackUser: () => dispatch({type: 'TRACK_USER'}),
         // onSignUp :()=> dispatch({type: 'SIGN_UP'}),
     }

inspiredblog/src/pages/myStory/index.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 // import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
+// import * as serviceWorker from './serviceWorker';
 // import store from './store';
 
 ReactDOM.render(
@@ -16,5 +16,5 @@ ReactDOM.render(
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+// serviceWorker.unregister();
 

inspiredblog/src/pages/stocktrader/app.js

@@ -1,12 +1,160 @@
-import React, { Component } from 'react'
+import React, { Component, useEffect, useState } from 'react';
+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';
 
-class App extends Component {
+const useStyles = makeStyles({
+    main: {
+        display:'flex',
+        justifyContent:'center',
+        width:'100%',
+        flexWrap: 'wrap'
+    },
+    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%',
+    },
+    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'
+    }
+})
+const App = (props) => {
+    const classes = useStyles();
+    return (
+        <React.Fragment>
+            {checkAuthState()?
+            <div className={classes.main}>
+                Authenticated
+            </div>:
+            <div className={classes.main}>
+                <AppBar classes={{colorPrimary: classes.primary, positionFixed: classes.positionFixed}}>
+                    <Toolbar>
+                        <IconButton edge="start">
+                            <MenuIcon />
+                        </IconButton>
+                        <div className={classes.link}>
+                            Learn
+                        </div>
+                        <div className={`${classes.title} ${classes.link}`}>
+                            Support
+                        </div>
+                        <Button classes={{root: classes.signInButton}}>
+                            <span className={'sansBold'}>Sign In</span>
+						</Button>
+                        <Button classes={{root: classes.signUpButton}}>
+                            <span className={'sansBold'}>Sign Up</span>
+						</Button>
+                    </Toolbar>
+                </AppBar>
+                <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}>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+            }
+        </React.Fragment>
+    )
+}
 
-    render () {
-        return (
-            <h1>This is <span style={{fontWeight:'bold'}}>Stock Trader</span></h1>
-        )
+const mapStateToProps = (state) => {
+    return {
+        auth: state.auth,
     }
 }
 
-export default App
+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)(App);

inspiredblog/src/pages/stocktrader/index.js

@@ -1,9 +1,19 @@
-import React, { Component } from 'react'
-import ReactDOM from 'react-dom'
-
-import App from './app';
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import {Provider} from 'react-redux';
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import App from './App';
+import './styles/App.css';
+import Favicon from 'react-favicon';
+import profile from './img/logo.png';
+import store from './store';
 
 ReactDOM.render(
-    <App />,
+    <Provider store={store}> 
+        <BrowserRouter>
+            <Favicon url={profile} />
+            <App />
+        </BrowserRouter>
+    </Provider>, 
     document.getElementById("index")
-)
+);

inspiredblog/src/pages/stocktrader/pageInfo.json

@@ -1,5 +1,5 @@
 {
-    "title":"Stock Trader",
-    "keywords":"react,multi-page,webpack,node",
-    "description":"Stock Trader"
+    "title":"Reacthood",
+    "keywords":"stock market app implemented with React",
+    "description":"Stock Market App using React"
 }

inspiredblog/src/pages/stocktrader/reducers/authReducer.js

@@ -0,0 +1,33 @@
+const initialState = {
+    username: null,
+    userId: null,
+}
+
+const authReducer = (state=initialState,action) => {
+    switch(action.type) {
+        case ('signin_success'):
+            return {
+                ...state,
+                userId: action.payload.userId,
+                username: action.payload.username,
+            }
+        case ('signin_fail'):
+            return {
+                ...state,
+            }
+        case ('signup_success'):
+            return {
+                ...state,
+                userId: action.payload.userId,
+                username: action.payload.username,
+            }
+        case ('signup_fail'):
+            return {
+                ...state,
+            }
+        default: 
+            return state
+    }
+}
+
+export default authReducer;

inspiredblog/src/pages/stocktrader/reducers/index.js

@@ -0,0 +1,10 @@
+import {combineReducers} from 'redux';
+import authReducer from './authReducer';
+
+const rootReducer = combineReducers(
+    {
+        auth: authReducer,
+    }
+);
+
+export default rootReducer;

inspiredblog/src/pages/stocktrader/selectors/authSelector.js

@@ -0,0 +1,16 @@
+
+// this is not a pure selector as it doesn't take state as arguement
+export const checkAuthState = () =>{
+    const expirationTime = localStorage.getItem('stock_expirationTime');
+    const currentDate = new Date();
+    if(localStorage.getItem('stock_token')){
+        if (currentDate >= new Date(expirationTime)){
+            localStorage.removeItem('stock_username');
+            localStorage.removeItem('stock_token');
+            localStorage.removeItem('stock_expirationTime');
+            return false;
+        } 
+        return true;
+    }
+    return false;
+}

inspiredblog/src/pages/stocktrader/store.js

@@ -0,0 +1,16 @@
+import rootReducer from './reducers';
+import createSagaMiddleware from 'redux-saga';
+import { createStore, applyMiddleware,compose} from 'redux';
+// import { rootSaga } from '../index/sagas';
+// import {rootSaga} from './sagas';
+
+const sagaMiddleware = createSagaMiddleware();
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+const store = createStore(rootReducer, composeEnhancers(
+    applyMiddleware(sagaMiddleware)
+));
+
+// sagaMiddleware.run(rootSaga);
+
+export default store;