diff --git a/inspiredblog/src/config/createHtml.js b/inspiredblog/src/config/createHtml.js index 98962e4..25bddf8 100644 --- a/inspiredblog/src/config/createHtml.js +++ b/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", diff --git a/inspiredblog/src/pages/index/App.js b/inspiredblog/src/pages/index/App.js index 6d14fe1..401b08b 100644 --- a/inspiredblog/src/pages/index/App.js +++ b/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'}), } diff --git a/inspiredblog/src/pages/myStory/index.js b/inspiredblog/src/pages/myStory/index.js index 762be06..c34cbdd 100644 --- a/inspiredblog/src/pages/myStory/index.js +++ b/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(); diff --git a/inspiredblog/src/pages/stocktrader/app.js b/inspiredblog/src/pages/stocktrader/app.js index 1de50a7..c0afae8 100644 --- a/inspiredblog/src/pages/stocktrader/app.js +++ b/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 ( + + {checkAuthState()? +
+ Authenticated +
: +
+ + + + + +
+ Learn +
+
+ Support +
+ + + + +
+
+
+
Investing for Everyone
+
Reacthood, a pioneer of commission-free investing, gives you more ways to make your money work harder.
+
+ +
+
+
+ +
+
+
+
+ } + + ) +} - render () { - return ( -

This is Stock Trader

- ) +const mapStateToProps = (state) => { + return { + auth: state.auth, } } -export default App \ No newline at end of file +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); \ No newline at end of file diff --git a/inspiredblog/src/pages/stocktrader/img/.DS_Store b/inspiredblog/src/pages/stocktrader/img/.DS_Store new file mode 100644 index 0000000..efdca02 Binary files /dev/null and b/inspiredblog/src/pages/stocktrader/img/.DS_Store differ diff --git a/inspiredblog/src/pages/stocktrader/img/brand.png b/inspiredblog/src/pages/stocktrader/img/brand.png new file mode 100644 index 0000000..fcb70c5 Binary files /dev/null and b/inspiredblog/src/pages/stocktrader/img/brand.png differ diff --git a/inspiredblog/src/pages/stocktrader/img/calendar.jpg b/inspiredblog/src/pages/stocktrader/img/calendar.jpg new file mode 100644 index 0000000..a9001c3 Binary files /dev/null and b/inspiredblog/src/pages/stocktrader/img/calendar.jpg differ diff --git a/inspiredblog/src/pages/stocktrader/img/logo.png b/inspiredblog/src/pages/stocktrader/img/logo.png new file mode 100644 index 0000000..41ee1de Binary files /dev/null and b/inspiredblog/src/pages/stocktrader/img/logo.png differ diff --git a/inspiredblog/src/pages/stocktrader/img/logo192.png b/inspiredblog/src/pages/stocktrader/img/logo192.png new file mode 100644 index 0000000..fc44b0a Binary files /dev/null and b/inspiredblog/src/pages/stocktrader/img/logo192.png differ diff --git a/inspiredblog/src/pages/stocktrader/img/profile.png b/inspiredblog/src/pages/stocktrader/img/profile.png new file mode 100644 index 0000000..d60d811 Binary files /dev/null and b/inspiredblog/src/pages/stocktrader/img/profile.png differ diff --git a/inspiredblog/src/pages/stocktrader/index.js b/inspiredblog/src/pages/stocktrader/index.js index 77f2ef0..bbdc7dc 100644 --- a/inspiredblog/src/pages/stocktrader/index.js +++ b/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( - , + + + + + + , document.getElementById("index") -) \ No newline at end of file +); \ No newline at end of file diff --git a/inspiredblog/src/pages/stocktrader/pageInfo.json b/inspiredblog/src/pages/stocktrader/pageInfo.json index 702adad..e8018a7 100644 --- a/inspiredblog/src/pages/stocktrader/pageInfo.json +++ b/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" } \ No newline at end of file diff --git a/inspiredblog/src/pages/stocktrader/reducers/authReducer.js b/inspiredblog/src/pages/stocktrader/reducers/authReducer.js new file mode 100644 index 0000000..2cc0c9a --- /dev/null +++ b/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; \ No newline at end of file diff --git a/inspiredblog/src/pages/stocktrader/reducers/index.js b/inspiredblog/src/pages/stocktrader/reducers/index.js new file mode 100644 index 0000000..ced66d4 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/inspiredblog/src/pages/stocktrader/selectors/authSelector.js b/inspiredblog/src/pages/stocktrader/selectors/authSelector.js new file mode 100644 index 0000000..7c7f8a8 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/inspiredblog/src/pages/stocktrader/store.js b/inspiredblog/src/pages/stocktrader/store.js new file mode 100644 index 0000000..c587258 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/inspiredblog/src/pages/stocktrader/styles/App.css b/inspiredblog/src/pages/stocktrader/styles/App.css new file mode 100644 index 0000000..4a6abfb --- /dev/null +++ b/inspiredblog/src/pages/stocktrader/styles/App.css @@ -0,0 +1,93 @@ +@font-face { + font-family: 'SansRegular'; + font-style: normal; + font-weight: normal; + src: url('../../../public/fonts/OpenSans-Regular.ttf') + format('truetype'); +} +@font-face { + font-family: 'SansBold'; + font-style: normal; + font-weight: normal; + src: url('../../../public/fonts/OpenSans-Bold.ttf') + format('truetype'); +} +@font-face { + font-family: 'SansSemiBold'; + font-style: normal; + font-weight: normal; + src: url('../../../public/fonts/OpenSans-SemiBold.ttf') + format('truetype'); +} + + +/*手机端的标准字体大小为16px*/ +html { + font-size: 16px; +} +@media only screen and (min-width : 320px) { +} +/*当屏幕宽度大于480像素时，将采用以下字体大小为标准大小，下同*/ +/* @media only screen and (min-width : 480px) { + html { + font-size: 18px; + } +} */ +/* @media only screen and (min-width : 768px) { + html { + font-size: 18px; + } +} */ +/* @media only screen and (min-width : 992px) { + html { + font-size: 20px; + } +} */ +@media only screen and (min-width : 1600px) { + html { + font-size: 18px; + } +} + +html, body { + height: 100%; +} +body { + background-color: #f5f7f9 !important; + margin: 0 !important; +} +* { + box-sizing: border-box; +} + +span, +a, +button, +input, +div { + font-family: 'SansRegular'; +} + +.sansRegular { + font-family: 'SansRegular'; +} +.sansBold { + font-family: 'SansBold'; +} +.sansSemiBold { + font-family: 'SansSemiBold'; +} + +b, +em, +strong { + font-family: 'SansBold'; +} + +code { + background-color: #fefbec; +} + +ol { + padding-inline-start: 15px; +} \ No newline at end of file