v3.0.0

glitch100 · Mar 25, 2017 · 6d7dd9a · 6d7dd9a
1 parent e171569
commit 6d7dd9a
Show file tree

Hide file tree

Showing 23 changed files with 240 additions and 34 deletions.
diff --git 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
diff --git a/demo/components/StockApp.js 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 (
+    <div>
+      <p>Synape Demo Page for Stock Application (In Progress)</p>
+      <TraderCTA />
+      <StocksTable />
+    </div>
+  );
+}
diff --git a/demo/components/StocksTable/StocksTable.js 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 key={i}>{p.name}</p>
+      );
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <h2>Stocks Table</h2>
+        {this.renderStocks()}
+      </div>
+    );
+  }
+}
diff --git a/demo/components/StocksTable/StocksTableContainer.js 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
@@ -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
@@ -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 (
+      <div>
+        <input type="text" onChange={this.handleChange} value={this.state.name} />
+        <button onClick={this.handleClick}>Set Name</button>
+      </div>
+    );
+  }
+}
diff --git a/demo/components/TraderCTA/TraderCTAContainer.js 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
@@ -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
@@ -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
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Synapse Todo Demo</title>
+    <title>Synapse Demo</title>
     <meta charset="utf-8"/>
   </head>
   <body>
     <div id="app">
-      <h1>Loading Synapse Demo...</h1>
+      <h1>=Loading=</h1>
     </div>
-    <script src="./dist/bundle.js" ></script>
+    <script src="./dist/app.bundle.js" ></script>
   </body>
 </html>
diff --git 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(
   <Provider store={store}>

diff --git a/demo/records/StockRecord.js 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/demo/stock/reducers/index.js b/demo/stock/reducers/index.js
diff --git 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
@@ -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 ([email protected])",
   "license": "MIT",

diff --git 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,