From 6d7dd9a3c4cde0fa6b7992db1dc48dba761aa4f6 Mon Sep 17 00:00:00 2001 From: Jon Evans Date: Sat, 25 Mar 2017 01:50:44 +0000 Subject: [PATCH] v3.0.0 --- CHANGELOG.md | 8 ++++ OLD_DEMO.js | 23 ------------ demo/components/StockApp.js | 14 +++++++ demo/components/StocksTable/StocksTable.js | 29 +++++++++++++++ .../StocksTable/StocksTableContainer.js | 16 ++++++++ demo/components/StocksTable/index.js | 5 +++ demo/components/TraderCTA/TraderCTA.js | 35 ++++++++++++++++++ .../TraderCTA/TraderCTAContainer.js | 16 ++++++++ demo/components/TraderCTA/index.js | 5 +++ demo/components/style.scss | 7 ++++ demo/index.html | 6 +-- demo/index.js | 8 ++-- demo/records/StockRecord.js | 9 +++++ demo/records/StocksRecord.js | 12 ++++++ demo/records/TraderRecord.js | 6 +++ demo/reducers/index.js | 7 ++++ demo/reducers/stocksReducer.js | 37 +++++++++++++++++++ demo/reducers/traderReducer.js | 20 ++++++++++ demo/stock/components/StockApp.js | 0 demo/stock/reducers/index.js | 0 demo/webpack.config.js | 2 +- package.json | 4 +- src/components/synapse.js | 5 ++- 23 files changed, 240 insertions(+), 34 deletions(-) delete mode 100644 OLD_DEMO.js create mode 100644 demo/components/StockApp.js create mode 100644 demo/components/StocksTable/StocksTable.js create mode 100644 demo/components/StocksTable/StocksTableContainer.js create mode 100644 demo/components/StocksTable/index.js create mode 100644 demo/components/TraderCTA/TraderCTA.js create mode 100644 demo/components/TraderCTA/TraderCTAContainer.js create mode 100644 demo/components/TraderCTA/index.js create mode 100644 demo/components/style.scss create mode 100644 demo/records/StockRecord.js create mode 100644 demo/records/StocksRecord.js create mode 100644 demo/records/TraderRecord.js create mode 100644 demo/reducers/index.js create mode 100644 demo/reducers/stocksReducer.js create mode 100644 demo/reducers/traderReducer.js delete mode 100644 demo/stock/components/StockApp.js delete mode 100644 demo/stock/reducers/index.js diff --git a/CHANGELOG.md b/CHANGELOG.md index c467617..5ee839f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ # Changelog +### v0.3.0 +> Release Date: 25/03/2017 +* Removed old demo page in favour of slow buildout via webpack2 +* Fixed stateless components not working as expected +* Adding in groundwork for reverse explicit mode +* Minor adjustments +* Doc update + ### v0.2.0 > Release Date: 31/01/2016 * Added in start of demo page diff --git a/OLD_DEMO.js b/OLD_DEMO.js deleted file mode 100644 index 40b3b46..0000000 --- a/OLD_DEMO.js +++ /dev/null @@ -1,23 +0,0 @@ -import ReactDOM from 'react-dom'; -import React from 'react'; -import { createStore, applyMiddleware, compose, combineReducers } from 'redux'; -import { Provider } from 'redux-synapse'; -import thunkMiddleware from 'redux-thunk'; -import reducers from './reducers'; -import App from './components/App'; - -const composeEnhancers = typeof window !== 'undefined' - && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? - window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ - : compose; - -const createStoreWithMiddleware = composeEnhancers(applyMiddleware(thunkMiddleware))(createStore); -const store = createStoreWithMiddleware(combineReducers(reducers)); - -ReactDOM.render( - - - , - document.getElementById('app') -); - diff --git a/demo/components/StockApp.js b/demo/components/StockApp.js new file mode 100644 index 0000000..c4a8732 --- /dev/null +++ b/demo/components/StockApp.js @@ -0,0 +1,14 @@ +import React from 'react'; +import TraderCTA from './TraderCTA'; +import StocksTable from './StocksTable'; +import './style.scss'; + +export default function StockApp() { + return ( +
+

Synape Demo Page for Stock Application (In Progress)

+ + +
+ ); +} diff --git a/demo/components/StocksTable/StocksTable.js b/demo/components/StocksTable/StocksTable.js new file mode 100644 index 0000000..ad35088 --- /dev/null +++ b/demo/components/StocksTable/StocksTable.js @@ -0,0 +1,29 @@ +import React, { PropTypes } from 'react'; + +export default class StocksTable extends React.Component { + static propTypes = { + stocks: PropTypes.any.isRequired, + addStock: PropTypes.func.isRequired, + }; + + constructor(props) { + super(props); + } + + renderStocks = () => { + return this.props.stocks.map((p, i) => { + return ( +

{p.name}

+ ); + }); + } + + render() { + return ( +
+

Stocks Table

+ {this.renderStocks()} +
+ ); + } +} diff --git a/demo/components/StocksTable/StocksTableContainer.js b/demo/components/StocksTable/StocksTableContainer.js new file mode 100644 index 0000000..23e39da --- /dev/null +++ b/demo/components/StocksTable/StocksTableContainer.js @@ -0,0 +1,16 @@ +export const mapStateToProps = (state) => { + return { + stocks: state.stocks.allStocks, + }; +}; + +export const mapDispatchToProps = (dispatch) => { + return { + addStock: (name, currentValue, previousValue) => dispatch({ + type: 'ADD_STOCK', + name, + currentValue, + previousValue, + }), + }; +}; diff --git a/demo/components/StocksTable/index.js b/demo/components/StocksTable/index.js new file mode 100644 index 0000000..896a7e0 --- /dev/null +++ b/demo/components/StocksTable/index.js @@ -0,0 +1,5 @@ +import { synapse } from 'redux-synapse'; +import StocksTable from './StocksTable'; +import { mapStateToProps, mapDispatchToProps } from './StocksTableContainer'; + +export default synapse(mapStateToProps, mapDispatchToProps, ['stocks'])(StocksTable); diff --git a/demo/components/TraderCTA/TraderCTA.js b/demo/components/TraderCTA/TraderCTA.js new file mode 100644 index 0000000..60cb657 --- /dev/null +++ b/demo/components/TraderCTA/TraderCTA.js @@ -0,0 +1,35 @@ +import React, { PropTypes } from 'react'; + +export default class TraderCTA extends React.Component { + static propTypes = { + name: PropTypes.string.isRequired, + setName: PropTypes.func.isRequired, + setAccountValue: PropTypes.func.isRequired, + }; + + constructor(props) { + super(props); + this.state = { + name: props.name, + }; + } + + handleChange = (e) => { + this.setState({ + name: e.target.value, + }); + } + + handleClick = () => { + this.props.setName(this.state.name); + } + + render() { + return ( +
+ + +
+ ); + } +} diff --git a/demo/components/TraderCTA/TraderCTAContainer.js b/demo/components/TraderCTA/TraderCTAContainer.js new file mode 100644 index 0000000..9a2fe76 --- /dev/null +++ b/demo/components/TraderCTA/TraderCTAContainer.js @@ -0,0 +1,16 @@ +export const mapStateToProps = (state) => { + return { + name: state.trader.name, + accountValue: state.trader.accountValue, + }; +}; + +export const mapDispatchToProps = (dispatch) => { + return { + setName: (name) => dispatch({ + type: 'SET_TRADER_NAME', + name, + }), + setAccountValue: () => {}, + }; +}; diff --git a/demo/components/TraderCTA/index.js b/demo/components/TraderCTA/index.js new file mode 100644 index 0000000..27e1c89 --- /dev/null +++ b/demo/components/TraderCTA/index.js @@ -0,0 +1,5 @@ +import { synapse } from 'redux-synapse'; +import TraderCTA from './TraderCTA'; +import { mapStateToProps, mapDispatchToProps } from './TraderCTAContainer'; + +export default synapse(mapStateToProps, mapDispatchToProps, ['trader'])(TraderCTA); diff --git a/demo/components/style.scss b/demo/components/style.scss new file mode 100644 index 0000000..e1a8f0c --- /dev/null +++ b/demo/components/style.scss @@ -0,0 +1,7 @@ +$font-stack: Helvetica, sans-serif; +$primary-color: red; + +body { + font: 100% $font-stack; + color: $primary-color; +} diff --git a/demo/index.html b/demo/index.html index 2dc1f52..cda2df0 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,13 +1,13 @@ - Synapse Todo Demo + Synapse Demo
-

Loading Synapse Demo...

+

=Loading=

- + diff --git a/demo/index.js b/demo/index.js index b0c1a8a..3d40ae7 100644 --- a/demo/index.js +++ b/demo/index.js @@ -3,16 +3,16 @@ import React from 'react'; import { createStore, applyMiddleware, compose, combineReducers } from 'redux'; import { Provider } from 'redux-synapse'; import thunkMiddleware from 'redux-thunk'; -import reducers from './stock/reducers'; -import StockApp from './stock/components/StockApp'; +import reducers from './reducers'; +import StockApp from './components/StockApp'; const composeEnhancers = typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose; -const createStoreWithMiddleware = composeEnhancers(applyMiddleware(thunkMiddleware))(createStore); -const store = createStoreWithMiddleware(combineReducers(reducers)); +const createComposedStore = composeEnhancers(applyMiddleware(thunkMiddleware))(createStore); +const store = createComposedStore(combineReducers(reducers)); ReactDOM.render( diff --git a/demo/records/StockRecord.js b/demo/records/StockRecord.js new file mode 100644 index 0000000..77c57c0 --- /dev/null +++ b/demo/records/StockRecord.js @@ -0,0 +1,9 @@ +import { Record, List } from 'immutable'; + +export default Record({ + name: '', + currentValue: 0, + previousValue: 0, + valueDifference: 0, + bidHistory: List(), +}); diff --git a/demo/records/StocksRecord.js b/demo/records/StocksRecord.js new file mode 100644 index 0000000..89bf9a3 --- /dev/null +++ b/demo/records/StocksRecord.js @@ -0,0 +1,12 @@ +import { Record, List } from 'immutable'; + +const OptionsRecord = Record({ + updateSpeedMs: 2500, +}); + +export default Record({ + stockTotalValue: 0, + allStocks: List(), + options: new OptionsRecord(), +}); + diff --git a/demo/records/TraderRecord.js b/demo/records/TraderRecord.js new file mode 100644 index 0000000..7c105b2 --- /dev/null +++ b/demo/records/TraderRecord.js @@ -0,0 +1,6 @@ +import { Record } from 'immutable'; + +export default Record({ + name: 'NONE_SET', + accountValue: 0, +}); diff --git a/demo/reducers/index.js b/demo/reducers/index.js new file mode 100644 index 0000000..6987918 --- /dev/null +++ b/demo/reducers/index.js @@ -0,0 +1,7 @@ +import trader from './traderReducer'; +import stocks from './stockSReducer'; + +export default { + trader, + stocks, +}; diff --git a/demo/reducers/stocksReducer.js b/demo/reducers/stocksReducer.js new file mode 100644 index 0000000..777aa80 --- /dev/null +++ b/demo/reducers/stocksReducer.js @@ -0,0 +1,37 @@ +import StocksRecord from '../records/StocksRecord'; +import StockRecord from '../records/StockRecord'; +import { List } from 'immutable'; + +const defaultState = new StocksRecord({ + allStocks: List([ + new StockRecord({ + name: 'FTSE', + currentValue: 1000, + previousValue: 750, + valueDifference: 250, + bidHistory: List([ + 0, + ]), + }), + ]), +}); + +const stock = (state = defaultState, action) => { + let newState; + switch (action.type) { + case 'SET_UPDATE_SPEED': + newState = state.setIn(['options', 'updateSpeedMs'], action.updateSpeedMs); + prepareNotification(['stock-options']); + return newState; + case 'ADD_STOCK': + let allStocks = state.allStocks; + allStocks = allStocks.push(new StockRecord(action.stock)); + newState = state.set('allStocks', allStocks); + prepareNotification(['stocks']); + return newState; + default: + return state; + } +}; + +export default stock; diff --git a/demo/reducers/traderReducer.js b/demo/reducers/traderReducer.js new file mode 100644 index 0000000..9737b98 --- /dev/null +++ b/demo/reducers/traderReducer.js @@ -0,0 +1,20 @@ +import TraderRecord from '../records/TraderRecord'; +import { prepareNotification } from 'redux-synapse'; + +const trader = (state = new TraderRecord(), action) => { + let newState; + switch (action.type) { + case 'SET_TRADER_VALUE': + newState = state.set('accountValue', action.accountValue); + prepareNotification(['trader']); + return newState; + case 'SET_TRADER_NAME': + newState = state.set('name', action.name); + prepareNotification(['trader']); + return newState; + default: + return state; + } +}; + +export default trader; diff --git a/demo/stock/components/StockApp.js b/demo/stock/components/StockApp.js deleted file mode 100644 index e69de29..0000000 diff --git a/demo/stock/reducers/index.js b/demo/stock/reducers/index.js deleted file mode 100644 index e69de29..0000000 diff --git a/demo/webpack.config.js b/demo/webpack.config.js index 24a2f16..4b16b0e 100644 --- a/demo/webpack.config.js +++ b/demo/webpack.config.js @@ -29,7 +29,7 @@ const config = { ], }, output: { - path: __dirname + '/stock/dist', + path: __dirname + '/dist', filename: '[name].bundle.js', }, resolve: { diff --git a/package.json b/package.json index 8122a1d..b792676 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "redux-synapse", - "version": "0.2.1", + "version": "0.3.0", "main": "lib/index.js", "files": [ "src", @@ -22,7 +22,7 @@ "watch:demo": "webpack --watch ./demo --config ./demo/webpack.config.js", "lint": "eslint ./src", "test": "jest", - "test:tc": "jest --runInBand", + "test:tc": "jest --runInBand" }, "author": "Jon Evans (glitch100@gmail.com)", "license": "MIT", diff --git a/src/components/synapse.js b/src/components/synapse.js index 9e6246d..9b55f5f 100644 --- a/src/components/synapse.js +++ b/src/components/synapse.js @@ -36,7 +36,10 @@ export default (mapStateToProps, mapDispatchToProps, pathArray) => { class Synapse extends Component { constructor(props, context) { super(props, context); - this.oldProps = msp(context.store.getState(), props); + this.oldProps = { + ...msp(context.store.getState(), props), + ...mapDispatchToProps ? mapDispatchToProps(context.store.dispatch) : {}, + }; synapseProps = this.oldProps; this.state = { version: 0,