diff --git a/src/components/WithStoreSubscribeToState.js b/src/components/WithStoreSubscribeToState.js index 1f2df4837c05..ffc9346ec214 100644 --- 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 this.wrappedComponent = el} - bind={this.bind} - />; + return ( + this.wrappedComponent = el} + bind={this.bind.bind(this)} + /> + ); } }; } diff --git a/src/page/HomePage/SidebarLink.js b/src/page/HomePage/SidebarLink.js index 73953e46a445..21d69e7e8e7a 100644 --- 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,19 +18,13 @@ 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() { @@ -39,7 +32,7 @@ class SidebarLink extends React.Component { {this.props.reportName} - {this.state.hasUnread && ( + {this.state.isUnread && ( - Unread )} diff --git a/src/store/Store.js b/src/store/Store.js index b385301b892a..c668608fb2fe 100644 --- 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,