Rename unsubscribeFromState to unbind

Expensify · Aug 9, 2020 · cbc7368 · cbc7368
1 parent 04b5751
commit cbc7368
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 25 deletions.
diff --git a/src/components/WithStoreSubscribeToState.js b/src/components/WithStoreSubscribeToState.js
@@ -25,7 +25,7 @@ export default function (mapStoreToStates) {
             // Subscribe each of the state properties to the proper store key
             _.each(mapStoreToStates, (mapStoreToState, propertyName) => {
                 const {key, path} = mapStoreToState;
-                this.bind(key, propertyName, path, this.wrappedComponent);
+                this.bind(key, propertyName, path, null, this.wrappedComponent);
             });
 
             // Call any loaders that will fill the store with their initial data
@@ -37,7 +37,7 @@ export default function (mapStoreToStates) {
         }
 
         componentWillUnmount() {
-            _.each(this.subscriptionIDs, Store.unsubscribeFromState);
+            _.each(this.subscriptionIDs, Store.unbind);
         }
 
         /**
@@ -49,20 +49,22 @@ export default function (mapStoreToStates) {
          * @param {string} path
          * @param {object} component
          */
-        bind(key, propertyName, path, component) {
-            this.subscriptionIDs.push(Store.bind(key, propertyName, path, null, component));
+        bind(key, propertyName, path, defaultValue, component) {
+            this.subscriptionIDs.push(Store.bind(key, propertyName, path, defaultValue, component));
         }
 
         render() {
             // Spreading props and state is necessary in an HOC where the data cannot be predicted
-            return <WrappedComponent
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...this.props}
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...this.state}
-                ref={el => this.wrappedComponent = el}
-                bind={this.bind}
-            />;
+            return (
+                <WrappedComponent
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...this.props}
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...this.state}
+                    ref={el => this.wrappedComponent = el}
+                    bind={this.bind.bind(this)}
+                />
+            );
         }
     };
 }
diff --git a/src/page/HomePage/SidebarLink.js b/src/page/HomePage/SidebarLink.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Text, View} from 'react-native';
-import _ from 'underscore';
 import {Link} from '../../lib/Router';
 import * as Store from '../../store/Store';
 import STOREKEYS from '../../store/STOREKEYS';
@@ -19,27 +18,21 @@ class SidebarLink extends React.Component {
     constructor(props) {
         super(props);
 
-        this.subscriptionIDS = [];
-
         this.state = {
-            hasUnread: false,
+            isUnread: false,
         };
     }
 
     componentDidMount() {
-        this.subscriptionIDS.push(Store.bind(`${STOREKEYS.REPORT}_${this.props.reportID}`, 'hasUnread', 'hasUnread', false, this));
-    }
-
-    componentWillUnmount() {
-        _.each(this.subscriptionIDS, Store.unsubscribeFromState);
+        this.props.bind(`${STOREKEYS.REPORT}_${this.props.reportID}`, 'isUnread', 'hasUnread', false, this);
     }
 
     render() {
         return (
             <View>
                 <Link to={`/${this.props.reportID}`} style={{padding: 10, textDecorationLine: 'none'}}>
                     <Text>{this.props.reportName}</Text>
-                    {this.state.hasUnread && (
+                    {this.state.isUnread && (
                         <Text>- Unread</Text>
                     )}
                 </Link>

diff --git a/src/store/Store.js b/src/store/Store.js
@@ -31,7 +31,7 @@ const callbackToStateMapping = {};
  * @param {string} path a specific path of the store object to map to the state
  * @param {mixed} defaultValue to return if the there is nothing from the store
  * @param {object} reactComponent whose setState() method will be called with any changed data
- * @returns {number} an ID to use when calling unsubscribeFromState
+ * @returns {number} an ID to use when calling unbind
  */
 function bind(keyPattern, statePropertyName, path, defaultValue, reactComponent) {
     const subscriptionID = lastSubscriptionID++;
@@ -50,7 +50,7 @@ function bind(keyPattern, statePropertyName, path, defaultValue, reactComponent)
  *
  * @param {string} subscriptionID
  */
-function unsubscribeFromState(subscriptionID) {
+function unbind(subscriptionID) {
     if (!callbackToStateMapping[subscriptionID]) {
         return;
     }
@@ -161,7 +161,7 @@ function merge(key, val) {
 
 export {
     bind,
-    unsubscribeFromState,
+    unbind,
     set,
     multiSet,
     get,