Function unique name, callback unmount.

- Function unique name
- Callback function unmount

Author: bates

README.md

@@ -22,7 +22,7 @@ With this component, you can create data that is stored throughout the session.
 
 When the page is closed, the stored data is deleted. You can think of this data as a **global state**.
 
-You can handle data changes from the ```Session.onSet((data) => {})``` event and set the ```state``` of the components.
+You can handle data changes from the ```Session.onSet(function UniqueName(data) { })``` event and set the ```state``` of the components.
 
 ##### Features
 - Set and get data from all components. 
@@ -48,9 +48,11 @@ class Counter extends Component {
     }
   }
   componentDidMount() {
-    Session.onSet((data) => {
+    const counter = (data) => {
       this.setState({ counter: data["counter"] });
-    });
+    };
+
+    Session.onSet(counter);
   }
   render() {
     return (
@@ -116,7 +118,7 @@ Descriptions and configuration settings for component properties.
 	- ```key``` ```{string}``` session item key.
 	- ```value``` ```{Object|string}``` session item value, if you are using browser storage, it can only take ```{string}```.
 
-- **```Session.gey(key)```  Get session item.**
+- **```Session.get(key)```  Get session item.**
 	- ```key``` ```{string}``` session item key.
 
 - **```Session.remove(key)```  Remove session item by key.**
@@ -126,9 +128,12 @@ Descriptions and configuration settings for component properties.
 
 - **```Session.clear()```  Clear all items.**
 
+- **```Session.unmount(callbackName)```  Unmount callback function.**
+	- ```callbackName``` ```{string}``` callback unique name.
+
 ##### Events
 
-- **```Session.onSet((data) => { /* do things */})``` Triggered when session data changes.**
+- **```Session.onSet(function UniqueName(data) { /* do things */ })``` Triggered when session data changes.**
 
 	- ```data``` new data set.
 

index.js

@@ -150,8 +150,25 @@ function () {
   }, {
     key: "onSet",
     value: function onSet(callback) {
-      callback(this.items());
-      this.Callback.push(callback);
+      var filter = this.Callback.filter(function (f) {
+        return f.name === callback.name;
+      });
+
+      if (filter.length === 0) {
+        callback(this.items());
+        this.Callback.push(callback);
+      }
+    }
+    /**
+    * @param {string} callbackName Callback function key.
+    */
+
+  }, {
+    key: "unmount",
+    value: function unmount(callbackName) {
+      this.Callback = this.Callback.filter(function (f) {
+        return f.name !== callbackName;
+      });
     }
   }]);
 

package.json

@@ -1,9 +1,10 @@
 {
   "name": "react-session-api",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Store the data throughout the session and move the data between components. You can easily move state between components.",
   "main": "index.js",
   "scripts": {
+    "start": "npm run storybook",
     "test": "react-scripts test",
     "build": "./node_modules/.bin/babel src --out-file index.js",
     "minify": "./node_modules/.bin/babel --minified src --out-file index.min.js ",

src/index.js

@@ -120,8 +120,17 @@ class SessionStorage {
   * @param {func} callback Triggered when session items set.
   */
   onSet(callback) {
-    callback(this.items())
-    this.Callback.push(callback);
+    const filter = this.Callback.filter(f => f.name === callback.name);
+    if (filter.length === 0) {
+      callback(this.items())
+      this.Callback.push(callback);
+    }
+  }
+  /**
+  * @param {string} callbackName Callback function key.
+  */
+  unmount(callbackName) {
+    this.Callback = this.Callback.filter(f => f.name !== callbackName);
   }
 }
 

stories/components/Counter.js

@@ -9,9 +9,14 @@ class Counter extends Component {
     }
   }
   componentDidMount() {
-    Session.onSet((data) => {
+    const counter = (data) => {
       this.setState({ counter: data["counter"] });
-    });
+    };
+
+    Session.onSet(counter);
+  }
+  componentWillUnmount() {
+    Session.unmount("counter");
   }
   render() {
     return (

stories/components/DecreaseButton.js

@@ -3,17 +3,18 @@ import React from 'react';
 import Session from '../../src'
 
 const DecreaseButton = () => {
-    const onDecrease = () => {
-        let counter = Session.get("counter") - 1;
-        Session.set("counter", counter);
-    }
-    return (
-        <button
-            className="btn btn-sm btn-danger"
-            onClick={(e) => onDecrease()}>
-            Decrease Number
+  const onDecrease = () => {
+    let counter = Session.get("counter") - 1;
+    Session.set("counter", counter);
+  }
+
+  return (
+    <button
+      className="btn btn-sm btn-danger"
+      onClick={(e) => onDecrease()}>
+      Decrease Number
         </button>
-    )
+  )
 }
 
 export default DecreaseButton;