Update examples and add clearHistory

docs/Summary.md

@@ -20,6 +20,7 @@
   * [publish(channel, param)](/docs/api/Publish.md)
   * [setHistoryLimit(limit = 200)](/docs/api/SetHistoryLimit.md)
   * [getHistory()](/docs/api/GetHistory.md)
+  * [clearHistory()](/docs/api/ClearHistory.md)
 * [Change Log](/CHANGELOG.md)
 * [Authors](/docs/Authors.md)
 * [Chat](/docs/Chat.md)

docs/api/ClearHistory.md

@@ -0,0 +1,22 @@
+# `clearHistory()`
+
+Clear the history of published events.
+
+#### Example
+
+Assuming that our application has published one event, here is an example.
+
+```js
+let history = refractionInstance.getHistory();
+/* [{
+  type: 'newMessage',
+  payload: {
+    chatroom: 'refraction-chatroom',
+    sender: 'example_user',
+    message: 'Hi all!',
+  },
+}] */
+refractionInstance.clearHistory();
+history = refractionInstance.getHistory();
+/* [] */
+```

docs/api/GetHistory.md

@@ -1,6 +1,6 @@
 # `getHistory()`
 
-Return the history of published events.
+Returns the history of published events.
 
 #### Returns
 

docs/api/README.md

@@ -9,6 +9,7 @@ Here is the list of methods that you can use on its instance:
 - [publish(channel, param)](/Publish.md)
 - [setHistoryLimit(limit)](/SetHistoryLimit.md)
 - [getHistory()](/GetHistory.md)
+- [clearHistory()](/ClearHistory.md)
 
 ### Importing
 

examples/ReactSimple/components/App.js

@@ -1,15 +1,24 @@
 /* eslint-disable import/no-unresolved */
 import React from 'react';
-import InputContainer from '../containers/InputContainer';
+import Label from './Label';
+import InputName from '../containers/inputs/InputName';
+import InputSurname from '../containers/inputs/InputSurname';
+import InputAddress from '../containers/inputs/InputAddress';
 import LabelContainer from '../containers/LabelContainer';
-import PlayButton from '../containers/PlayButton';
+import PlayButton from '../containers/buttons/PlayButton';
+import ClearButton from '../containers/buttons/ClearButton';
 /* eslint-enable import/no-unresolved */
 
 export default () => (
   <div>
-    <p>Write something in the input field and then Click the button</p>
-    <InputContainer />
+    <p>Write your data and click play.</p>
+    <InputName label="Name: " />
+    <InputSurname label="Surname: " />
+    <InputAddress label="Address: " />
+    <Label text="Name: " />
     <LabelContainer />
-    <PlayButton />
+    <br />
+    <PlayButton text="Play!" />
+    <ClearButton text="Clear History" />
   </div>
 );

examples/ReactSimple/components/Button.js

@@ -9,13 +9,13 @@ export default class Button extends React.Component {
   }
 
   static defaultProps = {
-    text: 'Play!',
+    text: '',
   }
 
   render() {
     const { text, ...others } = this.props;
     return (
-      <button {...others} >{text}</button>
+      <button style={{ marginRight: '4px' }} {...others} >{text}</button>
     );
   }
 }

examples/ReactSimple/components/Input.js

@@ -1,20 +1,26 @@
 /* eslint-disable import/no-unresolved */
 import React from 'react';
+import Label from './Label';
 /* eslint-enable import/no-unresolved */
 
-export default class extends React.Component {
+export default class Input extends React.Component {
 
   static propTypes = {
     value: React.PropTypes.string.isRequired,
+    label: React.PropTypes.string,
   }
 
   static defaultProps = {
     value: '',
   }
 
   render() {
+    const { label, ...others } = this.props;
     return (
-      <input {...this.props} />
+      <div>
+        <Label text={label} />
+        <input style={{ marginLeft: 8 }} {...others} />
+      </div>
     );
   }
 }

examples/ReactSimple/components/Label.js

@@ -2,14 +2,17 @@
 import React from 'react';
 /* eslint-enable import/no-unresolved */
 
-export default class extends React.Component {
+export default class Label extends React.Component {
 
   static propTypes = {
     text: React.PropTypes.string.isRequired,
   }
 
   static defaultProps = {
     text: '',
+    style: {
+      display: 'inline-block',
+    },
   }
 
   render() {

examples/ReactSimple/containers/PlayButton.js → examples/ReactSimple/containers/ButtonContainer.js

@@ -3,8 +3,8 @@ import Button from '../components/Button';
 import { connect } from 'refraction-react';
 /* eslint-enable import/no-unresolved */
 
-export default connect({
+export default (func) => connect({
   actions: {
-    onClick: 'play',
+    onClick: func,
   },
 })(Button);

examples/ReactSimple/containers/InputContainer.js

@@ -3,12 +3,12 @@ import Input from '../components/Input';
 import { connect } from 'refraction-react';
 /* eslint-enable import/no-unresolved */
 
-export default connect({
+export default (changeEvent) => connect({
   actions: {
-    onChange: 'onInputChange',
+    onChange: changeEvent,
   },
   subscriptions: {
     // update his own value
-    onInputChange: ({ payload }) => ({ value: payload }),
+    [changeEvent]: ({ payload }) => ({ value: payload }),
   },
 })(Input);

examples/ReactSimple/containers/LabelContainer.js

@@ -5,6 +5,6 @@ import { connect } from 'refraction-react';
 
 export default connect({
   subscriptions: {
-    onInputChange: ({ payload }) => ({ text: payload }),
+    onNameChange: ({ payload }) => ({ text: payload }),
   },
 })(Label);

examples/ReactSimple/containers/buttons/ClearButton.js

@@ -0,0 +1,3 @@
+import getButtonContainer from '../ButtonContainer';
+
+export default getButtonContainer('clear');

examples/ReactSimple/containers/buttons/PlayButton.js

@@ -0,0 +1,3 @@
+import getButtonContainer from '../ButtonContainer';
+
+export default getButtonContainer('play');

examples/ReactSimple/containers/inputs/InputAddress.js

@@ -0,0 +1,3 @@
+import getInputContainer from '../InputContainer';
+
+export default getInputContainer('onAddressChange');

examples/ReactSimple/containers/inputs/InputName.js

@@ -0,0 +1,3 @@
+import getInputContainer from '../InputContainer';
+
+export default getInputContainer('onNameChange');

examples/ReactSimple/containers/inputs/InputSurname.js

@@ -0,0 +1,3 @@
+import getInputContainer from '../InputContainer';
+
+export default getInputContainer('onSurnameChange');

examples/ReactSimple/package.json

@@ -1,6 +1,6 @@
 {
   "name": "refraction-react-example",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Refraction example using react and player",
   "scripts": {
     "start": "node server.js",
@@ -22,7 +22,7 @@
     "react-dom": "15.1.0",
     "refraction-react": "1.0.0",
     "refraction-player": "1.0.0",
-    "refraction": "1.0.0"
+    "refraction": "1.1.0"
   },
   "devDependencies": {
     "babel-core": "6.3.15",

examples/ReactSimple/refraction/index.js

@@ -6,20 +6,43 @@ import play from 'refraction-player';
 
 class Refract extends Refraction {
 
-  onInputChange = (e) => {
-    this.publish('onInputChange', {
+  onNameChange = (e) => {
+    this.publishEvent(e, 'onNameChange');
+  }
+
+  onSurnameChange = (e) => {
+    this.publishEvent(e, 'onSurnameChange');
+  }
+
+  onAddressChange = (e) => {
+    this.publishEvent(e, 'onAddressChange');
+  }
+
+  publishEvent = (e, channel) => {
+    this.publish(channel, {
       type: 'event',
       payload: e,
     });
   }
 
   play = () => {
+    const track = [...this.getHistory()];
+
+    // clear fields
+    this.onNameChange('');
+    this.onSurnameChange('');
+    this.onAddressChange('');
+
     play({
       refraction: this,
-      track: this.getHistory(),
+      track,
     });
   }
 
+  clear = () => {
+    this.clearHistory();
+  }
+
 }
 
 export default new Refract(middlewares);

examples/RxSimple/index.html

@@ -5,10 +5,14 @@
   </head>
   <body>
     <div id="root">
-      <p>Write something in the input field and then Click the button</p>
-      <input id="input" value="" />
-      <p id="label"></p>
-      <button id="button">Play!</button>
+      <p>Write your data and click play.</p>
+      <p>Name: <input id="name" value="" /></p>
+      <p>Surname: <input id="surname" value="" /></p>
+      <p>Address: <input id="address" value="" /></p>
+      <p>Name: <span id="label"></span></p>
+      <br />
+      <button class="button" id="playButton">Play!</button>
+      <button class="button" id="clearButton">Clear History</button>
     </div>
     <script src="/static/bundle.js"></script>
   </body>

examples/RxSimple/index.js

@@ -5,23 +5,34 @@ import refraction from './refraction/';
 /* eslint-enable import/no-unresolved */
 
 (() => {
-  const input = document.getElementById('input');
-  input.onInputChange = ({ payload }) => {
-    input.value = payload;
+  const setButton = (name, action) => {
+    const button = document.getElementById(name);
+    button.onclick = refraction[action];
   };
-  refraction.subscribe(input);
+
+  const setInput = (name, subscription) => {
+    const input = document.getElementById(name);
+    input[subscription] = ({ payload }) => {
+      input.value = payload;
+    };
+    refraction.subscribe(input);
+
+    Rx.Observable
+      .fromEvent(input, 'keydown')
+      .debounce(500)
+      .subscribe(refraction[subscription]);
+  };
+
+  setInput('name', 'onNameChange');
+  setInput('surname', 'onSurnameChange');
+  setInput('address', 'onAddressChange');
+
+  setButton('playButton', 'play');
+  setButton('clearButton', 'clear');
 
   const label = document.getElementById('label');
-  label.onInputChange = ({ payload }) => {
+  label.onNameChange = ({ payload }) => {
     label.innerHTML = payload;
   };
   refraction.subscribe(label);
-
-  const button = document.getElementById('button');
-  button.onclick = refraction.play;
-
-  Rx.Observable
-    .fromEvent(input, 'keydown')
-    .debounce(500)
-    .subscribe(refraction.onInputChange);
 })();

examples/RxSimple/package.json

@@ -1,6 +1,6 @@
 {
   "name": "refraction-rx-example",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Refraction example using Rx",
   "scripts": {
     "start": "node server.js",
@@ -19,7 +19,7 @@
   "dependencies": {
     "rx": "4.1.0",
     "refraction-player": "1.0.0",
-    "refraction": "1.0.0"
+    "refraction": "1.1.0"
   },
   "devDependencies": {
     "babel-core": "6.3.15",

examples/RxSimple/refraction/index.js

@@ -6,20 +6,43 @@ import play from 'refraction-player';
 
 class Refract extends Refraction {
 
-  onInputChange = (e) => {
-    this.publish('onInputChange', {
+  onNameChange = (e) => {
+    this.publishEvent(e, 'onNameChange');
+  }
+
+  onSurnameChange = (e) => {
+    this.publishEvent(e, 'onSurnameChange');
+  }
+
+  onAddressChange = (e) => {
+    this.publishEvent(e, 'onAddressChange');
+  }
+
+  publishEvent = (e, channel) => {
+    this.publish(channel, {
       type: 'event',
       payload: e,
     });
   }
 
   play = () => {
+    const track = [...this.getHistory()];
+
+    // clear fields
+    this.onNameChange('');
+    this.onSurnameChange('');
+    this.onAddressChange('');
+
     play({
       refraction: this,
-      track: this.getHistory(),
+      track,
     });
   }
 
+  clear = () => {
+    this.clearHistory();
+  }
+
 }
 
 export default new Refract(middlewares);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "refraction",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A guard that represent central point of control in your application.",
   "main": "lib/index.js",
   "jsnext:main": "es/index.js",