From da8177c631ffcb51ac37bd64574d039c1135d28d Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 11:01:30 -0600
Subject: [PATCH] Show the list of report names as decent links

Fixes https://github.com/AndrewGable/ReactNativeChat/issues/24
Fixes https://github.com/AndrewGable/ReactNativeChat/issues/21
Fixes https://github.com/AndrewGable/ReactNativeChat/issues/20
---
 src/components/WithStoreSubscribeToState.js | 32 ++++++++++++++-----
 src/page/HomePage/SidebarLink.js            | 35 ++++++++++++++++++---
 src/style/StyleSheet.js                     |  5 +++
 3 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/src/components/WithStoreSubscribeToState.js b/src/components/WithStoreSubscribeToState.js
index de8fe0a2202c..1f2df4837c05 100644
--- a/src/components/WithStoreSubscribeToState.js
+++ b/src/components/WithStoreSubscribeToState.js
@@ -23,13 +23,10 @@ export default function (mapStoreToStates) {
 
         componentDidMount() {
             // Subscribe each of the state properties to the proper store key
-            this.subscriptionIDs = _.reduce(mapStoreToStates, (finalResult, mapStoreToState, propertyName) => {
+            _.each(mapStoreToStates, (mapStoreToState, propertyName) => {
                 const {key, path} = mapStoreToState;
-                return [
-                    ...finalResult,
-                    Store.bind(key, propertyName, path, null, this.wrappedComponent),
-                ];
-            }, []);
+                this.bind(key, propertyName, path, this.wrappedComponent);
+            });
 
             // Call any loaders that will fill the store with their initial data
             _.each(mapStoreToStates, (mapStoreToState) => {
@@ -43,10 +40,29 @@ export default function (mapStoreToStates) {
             _.each(this.subscriptionIDs, Store.unsubscribeFromState);
         }
 
+        /**
+         * A method that is convenient to bind the state to the store. Typically used when you can't pass
+         * mapStoreToStates to this HOC. All subscriptions will automatically be unbound when unmounted
+         *
+         * @param {string} key
+         * @param {string} propertyName
+         * @param {string} path
+         * @param {object} component
+         */
+        bind(key, propertyName, path, component) {
+            this.subscriptionIDs.push(Store.bind(key, propertyName, path, null, component));
+        }
+
         render() {
             // Spreading props and state is necessary in an HOC where the data cannot be predicted
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            return <WrappedComponent {...this.props} {...this.state} ref={el => this.wrappedComponent = el} />;
+            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}
+            />;
         }
     };
 }
diff --git a/src/page/HomePage/SidebarLink.js b/src/page/HomePage/SidebarLink.js
index 87daf8f35ead..61d168267221 100644
--- a/src/page/HomePage/SidebarLink.js
+++ b/src/page/HomePage/SidebarLink.js
@@ -1,6 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {Text, View} from 'react-native';
 import {Link} from '../../lib/Router';
+import * as Store from '../../store/Store';
+import STOREKEYS from '../../store/STOREKEYS';
+import WithStoreSubscribeToState from '../../components/WithStoreSubscribeToState';
 
 const propTypes = {
     // The ID of the report for this link
@@ -11,14 +15,37 @@ const propTypes = {
 };
 
 class SidebarLink extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.subscriptionIDS = [];
+
+        this.state = {
+            hasUnread: false,
+        };
+    }
+
+    componentDidMount() {
+        this.subscriptionIDS.push(Store.bind(`${STOREKEYS.REPORT}_${this.props.reportID}`, 'hasUnread', 'hasUnread', false, this));
+    }
+
+    componentWillUnmount() {
+
+    }
+
     render() {
         return (
-            <Link to={`/${this.props.reportID}`}>
-                {this.props.reportName}
-            </Link>
+            <View>
+                <Link to={`/${this.props.reportID}`} style={{padding: 10, textDecorationLine: 'none'}}>
+                    <Text>{this.props.reportName}</Text>
+                    {this.state.hasUnread && (
+                        <Text>- Unread</Text>
+                    )}
+                </Link>
+            </View>
         );
     }
 }
 SidebarLink.propTypes = propTypes;
 
-export default SidebarLink;
+export default WithStoreSubscribeToState()(SidebarLink);
diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index 42a7f046da34..e8b3d146d97b 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -37,6 +37,11 @@ const styles = StyleSheet.create({
     navText: {
         padding: 8,
     },
+    // @TODO I can't get this style to work in `SidebarLink.js`
+    sidebarLink: {
+        padding: 8,
+        textDecorationLine: 'none',
+    },
 });
 
 export default styles;