From bef1ed1a871bd6be962f2b06fd97112151705b43 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sat, 8 Aug 2020 15:16:55 -0600
Subject: [PATCH 01/44] Remove all async and clean up pages

---
 package-lock.json              | 25 ++++++++++++--
 package.json                   |  2 ++
 src/CONFIG.js                  |  1 +
 src/Expensify.js               | 30 ++++++++--------
 src/lib/ActiveClientManager.js | 32 ++++++++++--------
 src/lib/PersistentStorage.js   |  2 +-
 src/lib/Str.js                 |  7 ++--
 src/page/HomePage/HomePage.js  | 62 +++++++++++++---------------------
 src/page/SignInPage.js         | 30 ++++++----------
 src/store/Store.js             | 12 +++++++
 webpack.config.js              | 11 +++++-
 11 files changed, 117 insertions(+), 97 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c6cdf54af695..d207e358dc56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7083,8 +7083,7 @@
     "html-entities": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.3.1.tgz",
-      "integrity": "sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==",
-      "dev": true
+      "integrity": "sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA=="
     },
     "html-escaper": {
       "version": "2.0.2",
@@ -11720,6 +11719,15 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-beforeunload": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-beforeunload/-/react-beforeunload-2.2.2.tgz",
+      "integrity": "sha512-U2ZMbVj58ziIYEwQAKJTsCbe9jXyltnKIrU47OTqk8amXzopL/S4fK7kqg0ph8O4aQoSy5ydvKL+KLg+jIUe0Q==",
+      "requires": {
+        "prop-types": "^15.7.2",
+        "use-latest": "^1.1.0"
+      }
+    },
     "react-devtools-core": {
       "version": "4.8.2",
       "resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.8.2.tgz",
@@ -14101,6 +14109,19 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "use-isomorphic-layout-effect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.0.0.tgz",
+      "integrity": "sha512-JMwJ7Vd86NwAt1jH7q+OIozZSIxA4ND0fx6AsOe2q1H8ooBUp5aN6DvVCqZiIaYU6JaMRJGyR0FO7EBCIsb/Rg=="
+    },
+    "use-latest": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.1.0.tgz",
+      "integrity": "sha512-gF04d0ZMV3AMB8Q7HtfkAWe+oq1tFXP6dZKwBHQF5nVXtGsh2oAYeeqma5ZzxtlpOcW8Ro/tLcfmEodjDeqtuw==",
+      "requires": {
+        "use-isomorphic-layout-effect": "^1.0.0"
+      }
+    },
     "use-subscription": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.4.1.tgz",
diff --git a/package.json b/package.json
index 4c8aa9e1a702..7736f5996e48 100644
--- a/package.json
+++ b/package.json
@@ -13,10 +13,12 @@
   },
   "dependencies": {
     "@react-native-community/async-storage": "^1.11.0",
+    "html-entities": "^1.3.1",
     "jquery": "^3.5.1",
     "lodash.get": "^4.4.2",
     "moment": "^2.27.0",
     "react": "^16.13.1",
+    "react-beforeunload": "^2.2.2",
     "react-dom": "^16.13.1",
     "react-native": "0.63.2",
     "react-native-web": "^0.13.5",
diff --git a/src/CONFIG.js b/src/CONFIG.js
index 7dcfe5902d07..f04eb75339f5 100644
--- a/src/CONFIG.js
+++ b/src/CONFIG.js
@@ -1,5 +1,6 @@
 import {Platform} from 'react-native';
 
+// eslint-disable-next-line no-undef
 const IS_IN_PRODUCTION = Platform.OS === 'web' ? process.env.NODE_ENV === 'production' : !__DEV__;
 
 export default {
diff --git a/src/Expensify.js b/src/Expensify.js
index 306b7c468529..cb1862799217 100644
--- a/src/Expensify.js
+++ b/src/Expensify.js
@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import {Beforeunload} from 'react-beforeunload';
 import SignInPage from './page/SignInPage';
 import HomePage from './page/HomePage/HomePage';
 import * as Store from './store/Store';
@@ -24,7 +25,7 @@ export default class Expensify extends Component {
         };
     }
 
-    async componentDidMount() {
+    componentDidMount() {
         // Listen for when the app wants to redirect to a specific URL
         Store.subscribe(STOREKEYS.APP_REDIRECT_TO, (redirectTo) => {
             this.setState({redirectTo});
@@ -34,25 +35,22 @@ export default class Expensify extends Component {
         verifyAuthToken();
 
         // Initialize this client as being an active client
-        await ActiveClientManager.init();
-
-        // TODO: Refactor window events
-        // window.addEventListener('beforeunload', () => {
-        //   ActiveClientManager.removeClient();
-        // });
+        ActiveClientManager.init();
     }
 
     render() {
         return (
-            <Router>
-                {/* If there is ever a property for redirecting, we do the redirect here */}
-                {this.state.redirectTo && <Redirect to={this.state.redirectTo} />}
-
-                <Switch>
-                    <Route path="/signin" component={SignInPage} />
-                    <Route path="/" component={HomePage} />
-                </Switch>
-            </Router>
+            <Beforeunload onBeforeunload={ActiveClientManager.removeClient}>
+                <Router>
+                    {/* If there is ever a property for redirecting, we do the redirect here */}
+                    {this.state.redirectTo && <Redirect to={this.state.redirectTo} />}
+
+                    <Switch>
+                        <Route path="/signin" component={SignInPage} />
+                        <Route path="/" component={HomePage} />
+                    </Switch>
+                </Router>
+            </Beforeunload>
         );
     }
 }
diff --git a/src/lib/ActiveClientManager.js b/src/lib/ActiveClientManager.js
index dabd2958f4eb..cfc10f804de5 100644
--- a/src/lib/ActiveClientManager.js
+++ b/src/lib/ActiveClientManager.js
@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import Guid from './Guid';
 import * as Store from '../store/Store';
 import STOREKEYS from '../store/STOREKEYS';
@@ -6,33 +7,34 @@ const clientID = Guid();
 
 /**
  * Add our client ID to the list of active IDs
+ *
+ * @returns {Promise}
  */
-const init = async () => {
-    const activeClientIDs = (await Store.get(STOREKEYS.ACTIVE_CLIENT_IDS)) || [];
-    activeClientIDs.push(clientID);
-    Store.set(STOREKEYS.ACTIVE_CLIENT_IDS, activeClientIDs);
-};
+const init = () => Store.merge(STOREKEYS.ACTIVE_CLIENT_IDS, clientID);
 
 /**
  * Remove this client ID from the array of active client IDs when this client is exited
+ *
+ * @returns {Promise}
  */
 function removeClient() {
-    const activeClientIDs = Store.get(STOREKEYS.ACTIVE_CLIENT_IDS) || [];
-    const newActiveClientIDs = activeClientIDs.filter(activeClientID => activeClientID !== clientID);
-    Store.set(STOREKEYS.ACTIVE_CLIENT_IDS, newActiveClientIDs);
+    return Store.get(STOREKEYS.ACTIVE_CLIENT_IDS)
+        .then(activeClientIDs => _.without(activeClientIDs, clientID))
+        .then(newActiveClientIDs => Store.set(STOREKEYS.ACTIVE_CLIENT_IDS, newActiveClientIDs));
 }
 
 /**
  * Checks if the current client is the leader (the first one in the list of active clients)
  *
- * @returns {boolean}
+ * @returns {Promise}
  */
 function isClientTheLeader() {
-    const activeClientIDs = Store.get(STOREKEYS.ACTIVE_CLIENT_IDS) || [];
-    if (!activeClientIDs.length) {
-        return false;
-    }
-    return activeClientIDs[0] === clientID;
+    return Store.get(STOREKEYS.ACTIVE_CLIENT_IDS)
+        .then(activeClientIDs => _.first(activeClientIDs) === clientID);
 }
 
-export {init, removeClient, isClientTheLeader};
+export {
+    init,
+    removeClient,
+    isClientTheLeader
+};
diff --git a/src/lib/PersistentStorage.js b/src/lib/PersistentStorage.js
index 0416366dcbf4..a884c23d35e4 100644
--- a/src/lib/PersistentStorage.js
+++ b/src/lib/PersistentStorage.js
@@ -33,7 +33,7 @@ function multiGet(keys) {
             ...finalData,
             [keyValuePair[0]]: JSON.parse(keyValuePair[1]),
         }), {}))
-        .catch(err => console.error(`Unable to get item from persistent storage. Keys: ${JSON.stringify(keys)} Error: ${err}`));
+        .catch(err => console.error(`Unable to get item from persistent storage. Error: ${err}`, keys));
 }
 
 /**
diff --git a/src/lib/Str.js b/src/lib/Str.js
index b768528bc0c5..d8f97dba2df9 100644
--- a/src/lib/Str.js
+++ b/src/lib/Str.js
@@ -1,7 +1,8 @@
-/* globals $, _ */
-
+import _ from 'underscore';
+import {AllHtmlEntities} from 'html-entities';
 import Guid from './Guid';
 
+
 const Str = {
     /**
      * Returns the proper phrase depending on the count that is passed.
@@ -39,7 +40,7 @@ const Str = {
      * @return {String} The decoded string.
      */
     htmlDecode(s) {
-        return $('<textarea/>').html(s).text();
+        return AllHtmlEntities.decode(s);
     },
 
     /**
diff --git a/src/page/HomePage/HomePage.js b/src/page/HomePage/HomePage.js
index f69b28678615..091bf3f91e34 100644
--- a/src/page/HomePage/HomePage.js
+++ b/src/page/HomePage/HomePage.js
@@ -1,8 +1,4 @@
-/**
- * @format
- * @flow strict-local
- */
-import React, {Component} from 'react';
+import React from 'react';
 import {
     SafeAreaView,
     Text,
@@ -12,37 +8,25 @@ import {
 } from 'react-native';
 import {signOut} from '../../store/actions/SessionActions';
 
-export default class App extends Component {
-    constructor(props) {
-        super(props);
-
-        this.signOut = this.signOut.bind(this);
-    }
-
-    async signOut() {
-        await signOut();
-    }
-
-    render() {
-        return (
-            <>
-                <StatusBar barStyle="dark-content" />
-                <SafeAreaView>
-                    <View>
-                        <Text
-                            style={{
-                                fontSize: 20,
-                                margin: 20,
-                                textAlign: 'center',
-                                fontWeight: 'bold',
-                            }}
-                        >
-                            React Native Chat Homepage!
-                        </Text>
-                        <Button onPress={this.signOut} title="Sign Out" />
-                    </View>
-                </SafeAreaView>
-            </>
-        );
-    }
-}
+const App = () => (
+    <>
+        <StatusBar barStyle="dark-content" />
+        <SafeAreaView style={{padding: 20}}>
+            <View>
+                <Text
+                    style={{
+                        fontSize: 20,
+                        margin: 20,
+                        textAlign: 'center',
+                        fontWeight: 'bold',
+                    }}
+                >
+                    React Native Chat Homepage!
+                </Text>
+                <Button onPress={signOut} title="Sign Out" />
+            </View>
+        </SafeAreaView>
+    </>
+);
+App.displayName = 'App';
+export default App;
diff --git a/src/page/SignInPage.js b/src/page/SignInPage.js
index 86d1d6c1d07b..ed742a7e7e5c 100644
--- a/src/page/SignInPage.js
+++ b/src/page/SignInPage.js
@@ -1,8 +1,3 @@
-/**
- * @format
- * @flow strict-local
- */
-
 import React, {Component} from 'react';
 import {
     SafeAreaView,
@@ -20,13 +15,11 @@ export default class App extends Component {
     constructor(props) {
         super(props);
 
-        this.submit = this.submit.bind(this);
         this.sessionChanged = this.sessionChanged.bind(this);
 
         this.state = {
             login: '',
             password: '',
-            // eslint-disable-next-line react/no-unused-state
             error: null,
         };
     }
@@ -47,22 +40,14 @@ export default class App extends Component {
      * @param {object} newSession
      */
     sessionChanged(newSession) {
-        // eslint-disable-next-line react/no-unused-state
         this.setState({error: newSession && newSession.error});
     }
 
-    /**
-     * When the form is submitted, then we trigger our prop callback
-     */
-    submit() {
-        signIn(this.state.login, this.state.password, true);
-    }
-
     render() {
         return (
             <>
                 <StatusBar barStyle="dark-content" />
-                <SafeAreaView>
+                <SafeAreaView style={{padding: 20}}>
                     <View>
                         <Text>Login:</Text>
                         <TextInput
@@ -81,10 +66,15 @@ export default class App extends Component {
                         />
                     </View>
                     <View>
-                        <Button onPress={this.submit} title="Log In" />
-                    {this.state.error && <Text style={{color: 'red'}}>
-                        {this.state.error}
-                    </Text>}
+                        <Button
+                            title="Log In"
+                            onPress={signIn(this.state.login, this.state.password, true)}
+                        />
+                        {this.state.error && (
+                            <Text style={{color: 'red'}}>
+                                {this.state.error}
+                            </Text>
+                        )}
                     </View>
                 </SafeAreaView>
             </>
diff --git a/src/store/Store.js b/src/store/Store.js
index d2c1172e342a..aec77d3d36ae 100644
--- a/src/store/Store.js
+++ b/src/store/Store.js
@@ -135,6 +135,17 @@ function clear() {
     return PersistentStorage.clear();
 }
 
+/**
+ * Merge a new value into an existing value at a key
+ *
+ * @param {string} key
+ * @param {string} val
+ * @returns {Promise}
+ */
+function merge(key, val) {
+    return PersistentStorage.merge(key, val);
+}
+
 export {
     subscribe,
     unsubscribe,
@@ -142,6 +153,7 @@ export {
     multiSet,
     get,
     multiGet,
+    merge,
     clear,
     init
 };
diff --git a/webpack.config.js b/webpack.config.js
index 49ef0a83b29d..adad06b326af 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -28,9 +28,18 @@ module.exports = {
             // Transpiles and lints all the JS
             {
                 test: /\.js$/,
+                enforce: 'pre',
+                loader: 'eslint-loader',
                 exclude: /node_modules|\.native.js$/,
-                use: ['babel-loader', 'eslint-loader'],
+                options: {
+                    cache: true,
+                },
             },
+            {
+                test: /\.js$/,
+                loader: 'babel-loader',
+                exclude: /node_modules|\.native.js$/,
+            }
         ],
     },
     resolve: {

From 7a8f83ba9226fcc160a2bf2c20c6c127726eff9e Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sat, 8 Aug 2020 15:19:05 -0600
Subject: [PATCH 02/44] Fix an error with merge

---
 src/lib/PersistentStorage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/PersistentStorage.js b/src/lib/PersistentStorage.js
index a884c23d35e4..906fc36f4a7f 100644
--- a/src/lib/PersistentStorage.js
+++ b/src/lib/PersistentStorage.js
@@ -82,7 +82,7 @@ function clear() {
  * @returns {Promise}
  */
 function merge(key, val) {
-    return AsyncStorage.mergeItem(key, val);
+    return AsyncStorage.mergeItem(key, JSON.stringify(val));
 }
 
 export {

From d9cb5b33c7c9a4692177572932546e175478d8e6 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sat, 8 Aug 2020 16:15:15 -0600
Subject: [PATCH 03/44] Add some style to the header

---
 src/page/HomePage/Header.js | 17 +++++++++++++++++
 webpack.config.js           | 12 ++++++------
 2 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 src/page/HomePage/Header.js

diff --git a/src/page/HomePage/Header.js b/src/page/HomePage/Header.js
new file mode 100644
index 000000000000..9e76b1d8d818
--- /dev/null
+++ b/src/page/HomePage/Header.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import {Text} from 'react-native-web';
+import {Button, View} from 'react-native';
+import {signOut} from '../../store/actions/SessionActions';
+import styles from '../../style/StyleSheet';
+
+export default class Header extends React.Component {
+    render() {
+        return (
+            <View style={styles.nav}>
+                <Text style={styles.brand}>Expensify Chat</Text>
+                <Text style={styles.flex1} />
+                <Button onPress={signOut} title="Sign Out" />
+            </View>
+        );
+    }
+}
diff --git a/webpack.config.js b/webpack.config.js
index adad06b326af..b8b938c9a876 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -28,18 +28,18 @@ module.exports = {
             // Transpiles and lints all the JS
             {
                 test: /\.js$/,
-                enforce: 'pre',
+                loader: 'babel-loader',
+                exclude: /node_modules|\.native.js$/,
+            },
+            {
+                test: /\.js$/,
                 loader: 'eslint-loader',
                 exclude: /node_modules|\.native.js$/,
                 options: {
                     cache: true,
+                    emitWarning: true,
                 },
             },
-            {
-                test: /\.js$/,
-                loader: 'babel-loader',
-                exclude: /node_modules|\.native.js$/,
-            }
         ],
     },
     resolve: {

From f55a6d42841dcdb6d65b57fdb69099cf81958850 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sat, 8 Aug 2020 16:23:46 -0600
Subject: [PATCH 04/44] Add styles and display a header

---
 src/lib/md5.js                | 193 ++++++++++++++++++++++++++++++++++
 src/page/HomePage/HomePage.js |  18 +---
 src/style/StyleSheet.js       |  18 ++++
 3 files changed, 214 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/md5.js
 create mode 100644 src/style/StyleSheet.js

diff --git a/src/lib/md5.js b/src/lib/md5.js
new file mode 100644
index 000000000000..f25138db6ac6
--- /dev/null
+++ b/src/lib/md5.js
@@ -0,0 +1,193 @@
+/**
+ * md5 hash implementation
+ * http://www.myersdaily.org/joseph/javascript/md5-text.html
+ *
+ * Expensify modification: Wrap in a function to avoid global
+ * namespace pollution
+ *
+ */
+function md5cycle(x, k) {
+    var a = x[0],
+        b = x[1],
+        c = x[2],
+        d = x[3];
+
+    a = ff(a, b, c, d, k[0], 7, -680876936);
+    d = ff(d, a, b, c, k[1], 12, -389564586);
+    c = ff(c, d, a, b, k[2], 17, 606105819);
+    b = ff(b, c, d, a, k[3], 22, -1044525330);
+    a = ff(a, b, c, d, k[4], 7, -176418897);
+    d = ff(d, a, b, c, k[5], 12, 1200080426);
+    c = ff(c, d, a, b, k[6], 17, -1473231341);
+    b = ff(b, c, d, a, k[7], 22, -45705983);
+    a = ff(a, b, c, d, k[8], 7, 1770035416);
+    d = ff(d, a, b, c, k[9], 12, -1958414417);
+    c = ff(c, d, a, b, k[10], 17, -42063);
+    b = ff(b, c, d, a, k[11], 22, -1990404162);
+    a = ff(a, b, c, d, k[12], 7, 1804603682);
+    d = ff(d, a, b, c, k[13], 12, -40341101);
+    c = ff(c, d, a, b, k[14], 17, -1502002290);
+    b = ff(b, c, d, a, k[15], 22, 1236535329);
+
+    a = gg(a, b, c, d, k[1], 5, -165796510);
+    d = gg(d, a, b, c, k[6], 9, -1069501632);
+    c = gg(c, d, a, b, k[11], 14, 643717713);
+    b = gg(b, c, d, a, k[0], 20, -373897302);
+    a = gg(a, b, c, d, k[5], 5, -701558691);
+    d = gg(d, a, b, c, k[10], 9, 38016083);
+    c = gg(c, d, a, b, k[15], 14, -660478335);
+    b = gg(b, c, d, a, k[4], 20, -405537848);
+    a = gg(a, b, c, d, k[9], 5, 568446438);
+    d = gg(d, a, b, c, k[14], 9, -1019803690);
+    c = gg(c, d, a, b, k[3], 14, -187363961);
+    b = gg(b, c, d, a, k[8], 20, 1163531501);
+    a = gg(a, b, c, d, k[13], 5, -1444681467);
+    d = gg(d, a, b, c, k[2], 9, -51403784);
+    c = gg(c, d, a, b, k[7], 14, 1735328473);
+    b = gg(b, c, d, a, k[12], 20, -1926607734);
+
+    a = hh(a, b, c, d, k[5], 4, -378558);
+    d = hh(d, a, b, c, k[8], 11, -2022574463);
+    c = hh(c, d, a, b, k[11], 16, 1839030562);
+    b = hh(b, c, d, a, k[14], 23, -35309556);
+    a = hh(a, b, c, d, k[1], 4, -1530992060);
+    d = hh(d, a, b, c, k[4], 11, 1272893353);
+    c = hh(c, d, a, b, k[7], 16, -155497632);
+    b = hh(b, c, d, a, k[10], 23, -1094730640);
+    a = hh(a, b, c, d, k[13], 4, 681279174);
+    d = hh(d, a, b, c, k[0], 11, -358537222);
+    c = hh(c, d, a, b, k[3], 16, -722521979);
+    b = hh(b, c, d, a, k[6], 23, 76029189);
+    a = hh(a, b, c, d, k[9], 4, -640364487);
+    d = hh(d, a, b, c, k[12], 11, -421815835);
+    c = hh(c, d, a, b, k[15], 16, 530742520);
+    b = hh(b, c, d, a, k[2], 23, -995338651);
+
+    a = ii(a, b, c, d, k[0], 6, -198630844);
+    d = ii(d, a, b, c, k[7], 10, 1126891415);
+    c = ii(c, d, a, b, k[14], 15, -1416354905);
+    b = ii(b, c, d, a, k[5], 21, -57434055);
+    a = ii(a, b, c, d, k[12], 6, 1700485571);
+    d = ii(d, a, b, c, k[3], 10, -1894986606);
+    c = ii(c, d, a, b, k[10], 15, -1051523);
+    b = ii(b, c, d, a, k[1], 21, -2054922799);
+    a = ii(a, b, c, d, k[8], 6, 1873313359);
+    d = ii(d, a, b, c, k[15], 10, -30611744);
+    c = ii(c, d, a, b, k[6], 15, -1560198380);
+    b = ii(b, c, d, a, k[13], 21, 1309151649);
+    a = ii(a, b, c, d, k[4], 6, -145523070);
+    d = ii(d, a, b, c, k[11], 10, -1120210379);
+    c = ii(c, d, a, b, k[2], 15, 718787259);
+    b = ii(b, c, d, a, k[9], 21, -343485551);
+
+    x[0] = add32(a, x[0]);
+    x[1] = add32(b, x[1]);
+    x[2] = add32(c, x[2]);
+    x[3] = add32(d, x[3]);
+
+}
+
+function cmn(q, a, b, x, s, t) {
+    a = add32(add32(a, q), add32(x, t));
+    return add32((a << s) | (a >>> (32 - s)), b);
+}
+
+function ff(a, b, c, d, x, s, t) {
+    return cmn((b & c) | ((~b) & d), a, b, x, s, t);
+}
+
+function gg(a, b, c, d, x, s, t) {
+    return cmn((b & d) | (c & (~d)), a, b, x, s, t);
+}
+
+function hh(a, b, c, d, x, s, t) {
+    return cmn(b ^ c ^ d, a, b, x, s, t);
+}
+
+function ii(a, b, c, d, x, s, t) {
+    return cmn(c ^ (b | (~d)), a, b, x, s, t);
+}
+
+function md51(s) {
+    var n = s.length,
+        state = [1732584193, -271733879, -1732584194, 271733878],
+        i;
+    for (i = 64; i <= s.length; i += 64) {
+        md5cycle(state, md5blk(s.substring(i - 64, i)));
+    }
+    s = s.substring(i - 64);
+    var tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+    for (i = 0; i < s.length; i++)
+        tail[i >> 2] |= s.charCodeAt(i) << ((i % 4) << 3);
+    tail[i >> 2] |= 0x80 << ((i % 4) << 3);
+    if (i > 55) {
+        md5cycle(state, tail);
+        for (i = 0; i < 16; i++) tail[i] = 0;
+    }
+    tail[14] = n * 8;
+    md5cycle(state, tail);
+    return state;
+}
+
+/* there needs to be support for Unicode here,
+ * unless we pretend that we can redefine the MD-5
+ * algorithm for multi-byte characters (perhaps
+ * by adding every four 16-bit characters and
+ * shortening the sum to 32 bits). Otherwise
+ * I suggest performing MD-5 as if every character
+ * was two bytes--e.g., 0040 0025 = @%--but then
+ * how will an ordinary MD-5 sum be matched?
+ * There is no way to standardize text to something
+ * like UTF-8 before transformation; speed cost is
+ * utterly prohibitive. The JavaScript standard
+ * itself needs to look at this: it should start
+ * providing access to strings as preformed UTF-8
+ * 8-bit unsigned value arrays.
+ */
+function md5blk(s) { /* I figured global was faster.   */
+    var md5blks = [],
+        i; /* Andy King said do it this way. */
+    for (i = 0; i < 64; i += 4) {
+        md5blks[i >> 2] = s.charCodeAt(i) + (s.charCodeAt(i + 1) << 8) + (s.charCodeAt(i + 2) << 16) + (s.charCodeAt(i + 3) << 24);
+    }
+    return md5blks;
+}
+
+var hex_chr = '0123456789abcdef'.split('');
+
+function rhex(n) {
+    var s = '',
+        j = 0;
+    for (; j < 4; j++)
+        s += hex_chr[(n >> (j * 8 + 4)) & 0x0F] + hex_chr[(n >> (j * 8)) & 0x0F];
+    return s;
+}
+
+function hex(x) {
+    for (var i = 0; i < x.length; i++)
+        x[i] = rhex(x[i]);
+    return x.join('');
+}
+
+function md5(s) {
+    return hex(md51(s));
+}
+
+/* this function is much faster,
+ so if possible we use it. Some IEs
+ are the only ones I know of that
+ need the idiotic second function,
+ generated by an if clause.  */
+
+function add32(a, b) {
+    return (a + b) & 0xFFFFFFFF;
+}
+
+if (md5('hello') != '5d41402abc4b2a76b9719d911017c592') {
+    function add32(x, y) {
+        var lsw = (x & 0xFFFF) + (y & 0xFFFF),
+            msw = (x >> 16) + (y >> 16) + (lsw >> 16);
+        return (msw << 16) | (lsw & 0xFFFF);
+    }
+}
+export default md5;
diff --git a/src/page/HomePage/HomePage.js b/src/page/HomePage/HomePage.js
index 091bf3f91e34..a136930b977e 100644
--- a/src/page/HomePage/HomePage.js
+++ b/src/page/HomePage/HomePage.js
@@ -1,29 +1,17 @@
 import React from 'react';
 import {
     SafeAreaView,
-    Text,
     StatusBar,
     View,
-    Button
 } from 'react-native';
-import {signOut} from '../../store/actions/SessionActions';
+import Header from './Header';
 
 const App = () => (
     <>
         <StatusBar barStyle="dark-content" />
-        <SafeAreaView style={{padding: 20}}>
+        <SafeAreaView>
             <View>
-                <Text
-                    style={{
-                        fontSize: 20,
-                        margin: 20,
-                        textAlign: 'center',
-                        fontWeight: 'bold',
-                    }}
-                >
-                    React Native Chat Homepage!
-                </Text>
-                <Button onPress={signOut} title="Sign Out" />
+                <Header />
             </View>
         </SafeAreaView>
     </>
diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
new file mode 100644
index 000000000000..80423a08eb81
--- /dev/null
+++ b/src/style/StyleSheet.js
@@ -0,0 +1,18 @@
+import {StyleSheet} from 'react-native-web';
+
+const styles = StyleSheet.create({
+    nav: {
+        flexDirection: 'row',
+        backgroundColor: '#efefef',
+        padding: 20,
+    },
+    brand: {
+        fontSize: 25,
+        fontWeight: 'bold',
+    },
+    flex1: {
+        flex: 1,
+    }
+});
+
+export default styles;

From 07db03ad2e901d2ea06b4c5935afe962a9f7e686 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sat, 8 Aug 2020 16:23:56 -0600
Subject: [PATCH 05/44] Add the personal details action

---
 src/CONST.js                                |  5 ++
 src/store/actions/PersonalDetailsActions.js | 82 +++++++++++++++++++++
 2 files changed, 87 insertions(+)
 create mode 100644 src/CONST.js
 create mode 100644 src/store/actions/PersonalDetailsActions.js

diff --git a/src/CONST.js b/src/CONST.js
new file mode 100644
index 000000000000..88147aa0a726
--- /dev/null
+++ b/src/CONST.js
@@ -0,0 +1,5 @@
+const CONST = {
+    CLOUDFRONT_URL: 'https://d2k5nsl2zxldvw.cloudfront.net',
+};
+
+export default CONST;
diff --git a/src/store/actions/PersonalDetailsActions.js b/src/store/actions/PersonalDetailsActions.js
new file mode 100644
index 000000000000..4ce459e46aeb
--- /dev/null
+++ b/src/store/actions/PersonalDetailsActions.js
@@ -0,0 +1,82 @@
+import _ from 'underscore';
+import * as Store from '../Store';
+import {request} from '../../lib/Network';
+import STOREKEYS from '../STOREKEYS';
+import md5 from '../../lib/md5';
+import CONST from '../../CONST';
+
+/**
+ * Returns the URL for a user's avatar and handles someone not having any avatar at all
+ *
+ * @param {object} personalDetails
+ * @param {string} login
+ * @returns {string}
+ */
+function getAvatar(personalDetails, login) {
+    if (personalDetails.detailJSON && personalDetails.detailJSON.avatar) {
+        return personalDetails.detailJSON.avatar.replace(/&d=404$/, '');
+    }
+
+    // There are 8 possible default avatars, so we choose which one this user has based
+    // on a simple hash of their login (which is converted from HEX to INT)
+    const loginHashBucket = (parseInt(md5(login).substring(0, 4), 16) % 8) + 1;
+    return `${CONST.CLOUDFRONT_URL}/images/avatars/avatar_${loginHashBucket}.png`;
+}
+
+/**
+ * Get the personal details for our organization
+ *
+ * return {Promise}
+ */
+function fetch() {
+    const requestPromise = request('Get', {
+        returnValueList: 'personalDetailsList',
+    })
+        .then(data => Store.set(STOREKEYS.PERSONAL_DETAILS, _.reduce(data.personalDetailsList, (finalPersonalDetailObject, personalDetails, login) => {
+            // Form the details into something that has all the data in an easy to use format.
+            const avatarURL = getAvatar(personalDetails, login);
+            const firstName = personalDetails.firstName || '';
+            const lastName = personalDetails.lastName || '';
+            const fullName = `${firstName} ${lastName}`.trim();
+            const displayName = fullName === '' ? login : fullName;
+            const displayNameWithEmail = fullName === '' ? login : `${fullName} (${login})`;
+            return {
+                ...finalPersonalDetailObject,
+                [login]: {
+                    login,
+                    avatarURL,
+                    firstName,
+                    lastName,
+                    fullName,
+                    displayName,
+                    displayNameWithEmail,
+                }
+            };
+        }, {})));
+
+    // Refresh the personal details every 30 minutes
+    setTimeout(fetch, 1000 * 60 * 30);
+    return requestPromise;
+}
+
+/**
+ * Get the timezone of the logged in user
+ *
+ * @returns {Promise}
+ */
+function fetchTimezone() {
+    const requestPromise = request('Get', {
+        returnValueList: 'nameValuePairs',
+        name: 'timeZone',
+    })
+        .then(data => Store.set(STOREKEYS.TIMEZONE, data.nameValuePairs.timeZone.selected || 'America/Los_Angeles'));
+
+    // Refresh the timezone every 30 minutes
+    setTimeout(fetchTimezone, 1000 * 60 * 30);
+    return requestPromise;
+}
+
+export {
+    fetch,
+    fetchTimezone,
+};

From 4496f10a2c4fa1ec4af527092811e593db995095 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sat, 8 Aug 2020 16:41:07 -0600
Subject: [PATCH 06/44] Add personal details to the header

---
 src/lib/md5.js                              |  1 +
 src/page/HomePage/Header.js                 | 32 +++++++++++
 src/store/STOREKEYS.js                      |  3 +
 src/store/actions/PersonalDetailsActions.js | 62 ++++++++++++---------
 src/style/StyleSheet.js                     |  7 +++
 5 files changed, 80 insertions(+), 25 deletions(-)

diff --git a/src/lib/md5.js b/src/lib/md5.js
index f25138db6ac6..bb572097ca88 100644
--- a/src/lib/md5.js
+++ b/src/lib/md5.js
@@ -6,6 +6,7 @@
  * namespace pollution
  *
  */
+/* eslint-disable */
 function md5cycle(x, k) {
     var a = x[0],
         b = x[1],
diff --git a/src/page/HomePage/Header.js b/src/page/HomePage/Header.js
index 9e76b1d8d818..3819cdbb9aba 100644
--- a/src/page/HomePage/Header.js
+++ b/src/page/HomePage/Header.js
@@ -1,15 +1,47 @@
 import React from 'react';
 import {Text} from 'react-native-web';
 import {Button, View} from 'react-native';
+import * as Store from '../../store/Store';
 import {signOut} from '../../store/actions/SessionActions';
+import {fetch as getPersonalDetails} from '../../store/actions/PersonalDetailsActions';
 import styles from '../../style/StyleSheet';
+import STOREKEYS from '../../store/STOREKEYS';
 
 export default class Header extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.updatePersonalDetails = this.updatePersonalDetails.bind(this);
+
+        this.state = {
+            personalDetails: null,
+        };
+    }
+
+    componentDidMount() {
+        Store.subscribe(STOREKEYS.MY_PERSONAL_DETAILS, this.updatePersonalDetails);
+
+        // Get our personal details
+        getPersonalDetails();
+    }
+
+    /**
+     * When there are new personal details, update our state with them
+     *
+     * @param {Object} newPersonalDetails
+     */
+    updatePersonalDetails(newPersonalDetails) {
+        this.setState({personalDetails: newPersonalDetails});
+    }
+
     render() {
         return (
             <View style={styles.nav}>
                 <Text style={styles.brand}>Expensify Chat</Text>
                 <Text style={styles.flex1} />
+                {this.state.personalDetails && (
+                    <Text style={[styles.navText, styles.mr1]}>Welcome {this.state.personalDetails.displayName}!</Text>
+                )}
                 <Button onPress={signOut} title="Sign Out" />
             </View>
         );
diff --git a/src/store/STOREKEYS.js b/src/store/STOREKEYS.js
index c78b0577ff59..72be14905b7e 100644
--- a/src/store/STOREKEYS.js
+++ b/src/store/STOREKEYS.js
@@ -10,4 +10,7 @@ export default {
     REPORTS: 'reports',
     SESSION: 'session',
     LAST_AUTHENTICATED: 'last_authenticated',
+    PERSONAL_DETAILS: 'personal_details',
+    MY_PERSONAL_DETAILS: 'my_personal_details',
+    TIMEZONE: 'timezone',
 };
diff --git a/src/store/actions/PersonalDetailsActions.js b/src/store/actions/PersonalDetailsActions.js
index 4ce459e46aeb..52bb35843566 100644
--- a/src/store/actions/PersonalDetailsActions.js
+++ b/src/store/actions/PersonalDetailsActions.js
@@ -26,33 +26,45 @@ function getAvatar(personalDetails, login) {
 /**
  * Get the personal details for our organization
  *
- * return {Promise}
+ * @returns {Promise}
  */
 function fetch() {
-    const requestPromise = request('Get', {
-        returnValueList: 'personalDetailsList',
-    })
-        .then(data => Store.set(STOREKEYS.PERSONAL_DETAILS, _.reduce(data.personalDetailsList, (finalPersonalDetailObject, personalDetails, login) => {
-            // Form the details into something that has all the data in an easy to use format.
-            const avatarURL = getAvatar(personalDetails, login);
-            const firstName = personalDetails.firstName || '';
-            const lastName = personalDetails.lastName || '';
-            const fullName = `${firstName} ${lastName}`.trim();
-            const displayName = fullName === '' ? login : fullName;
-            const displayNameWithEmail = fullName === '' ? login : `${fullName} (${login})`;
-            return {
-                ...finalPersonalDetailObject,
-                [login]: {
-                    login,
-                    avatarURL,
-                    firstName,
-                    lastName,
-                    fullName,
-                    displayName,
-                    displayNameWithEmail,
-                }
-            };
-        }, {})));
+    let currentLogin;
+    const requestPromise = Store.get(STOREKEYS.SESSION, 'email')
+        .then((login) => {
+            currentLogin = login;
+            return request('Get', {
+                returnValueList: 'personalDetailsList',
+            });
+        })
+        .then((data) => {
+            const allPersonaDetails = _.reduce(data.personalDetailsList, (finalPersonalDetailObject, personalDetails, login) => {
+                // Form the details into something that has all the data in an easy to use format.
+                const avatarURL = getAvatar(personalDetails, login);
+                const firstName = personalDetails.firstName || '';
+                const lastName = personalDetails.lastName || '';
+                const fullName = `${firstName} ${lastName}`.trim();
+                const displayName = fullName === '' ? login : fullName;
+                const displayNameWithEmail = fullName === '' ? login : `${fullName} (${login})`;
+                return {
+                    ...finalPersonalDetailObject,
+                    [login]: {
+                        login,
+                        avatarURL,
+                        firstName,
+                        lastName,
+                        fullName,
+                        displayName,
+                        displayNameWithEmail,
+                    }
+                };
+            }, {});
+            const myPersonalDetails = allPersonaDetails[currentLogin];
+            return Store.multiSet({
+                [STOREKEYS.PERSONAL_DETAILS]: allPersonaDetails,
+                [STOREKEYS.MY_PERSONAL_DETAILS]: myPersonalDetails,
+            });
+        });
 
     // Refresh the personal details every 30 minutes
     setTimeout(fetch, 1000 * 60 * 30);
diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index 80423a08eb81..7664a55559a3 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -1,6 +1,10 @@
 import {StyleSheet} from 'react-native-web';
 
 const styles = StyleSheet.create({
+    // Utility classes
+    mr1: {
+        marginRight: 10,
+    },
     nav: {
         flexDirection: 'row',
         backgroundColor: '#efefef',
@@ -10,6 +14,9 @@ const styles = StyleSheet.create({
         fontSize: 25,
         fontWeight: 'bold',
     },
+    navText: {
+        padding: 8,
+    },
     flex1: {
         flex: 1,
     }

From ae9f52930511e758b1e189174138257143981311 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sat, 8 Aug 2020 17:14:24 -0600
Subject: [PATCH 07/44] WIP on direct binding

---
 src/page/HomePage/Header.js         | 10 +++-
 src/store/Store.js                  | 77 +++++++++++++++++++++++++----
 src/store/actions/SessionActions.js |  4 +-
 3 files changed, 78 insertions(+), 13 deletions(-)

diff --git a/src/page/HomePage/Header.js b/src/page/HomePage/Header.js
index 3819cdbb9aba..b260c6b81851 100644
--- a/src/page/HomePage/Header.js
+++ b/src/page/HomePage/Header.js
@@ -19,12 +19,16 @@ export default class Header extends React.Component {
     }
 
     componentDidMount() {
-        Store.subscribe(STOREKEYS.MY_PERSONAL_DETAILS, this.updatePersonalDetails);
+        Store.subscribeToState(STOREKEYS.MY_PERSONAL_DETAILS, 'personalDetails', 'displayName', '', this);
 
         // Get our personal details
         getPersonalDetails();
     }
 
+    componentWillUnmount() {
+        Store.unsubscribeFromState(STOREKEYS.MY_PERSONAL_DETAILS, this);
+    }
+
     /**
      * When there are new personal details, update our state with them
      *
@@ -40,7 +44,9 @@ export default class Header extends React.Component {
                 <Text style={styles.brand}>Expensify Chat</Text>
                 <Text style={styles.flex1} />
                 {this.state.personalDetails && (
-                    <Text style={[styles.navText, styles.mr1]}>Welcome {this.state.personalDetails.displayName}!</Text>
+                    <Text style={[styles.navText, styles.mr1]}>
+                        {`Welcome ${this.state.personalDetails.displayName}!`}
+                    </Text>
                 )}
                 <Button onPress={signOut} title="Sign Out" />
             </View>
diff --git a/src/store/Store.js b/src/store/Store.js
index aec77d3d36ae..0e55847adf20 100644
--- a/src/store/Store.js
+++ b/src/store/Store.js
@@ -20,6 +20,19 @@ function init() {
     // });
 }
 
+/**
+ * Remove a callback from a regex pattern
+ *
+ * @param {string} keyPattern
+ * @param {function} cb
+ */
+function unsubscribe(keyPattern, cb) {
+    if (!callbackMapping[keyPattern] || !callbackMapping[keyPattern].length) {
+        return;
+    }
+    callbackMapping[keyPattern] = callbackMapping[keyPattern].filter(existingCallback => existingCallback !== cb);
+}
+
 /**
  * Subscribe a regex pattern to trigger a callback when a storage event happens for a key matching that regex
  *
@@ -34,16 +47,43 @@ function subscribe(keyPattern, cb) {
 }
 
 /**
- * Remove a callback from a regex pattern
+ * Holds a mapping of all the react components that want their state subscribed to a store key
+ */
+const callbackToStateMapping = {};
+
+/**
+ * Subscribes a react component's state directly to a store key
  *
  * @param {string} keyPattern
- * @param {function} cb
+ * @param {string} statePropertyName the name of the property in the state to bind the data to
+ * @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
  */
-function unsubscribe(keyPattern, cb) {
-    if (!callbackMapping[keyPattern] || !callbackMapping[keyPattern].length) {
+function subscribeToState(keyPattern, statePropertyName, path, defaultValue, reactComponent) {
+    if (!callbackToStateMapping[keyPattern]) {
+        callbackToStateMapping[keyPattern] = [];
+    }
+    callbackToStateMapping[keyPattern].push({
+        statePropertyName,
+        path,
+        reactComponent,
+        defaultValue,
+    });
+}
+
+/**
+ * Remove the listener for a react component
+ *
+ * @param {string} keyPattern
+ * @param {object} reactComponent
+ */
+function unsubscribeFromState(keyPattern, reactComponent) {
+    if (!callbackToStateMapping[keyPattern] || !callbackToStateMapping[keyPattern].length) {
         return;
     }
-    callbackMapping[keyPattern] = callbackMapping[keyPattern].filter(existingCallback => existingCallback !== cb);
+    callbackToStateMapping[keyPattern] = _.without(callbackToStateMapping[keyPattern],
+        mappedComponent => mappedComponent.reactComponent === reactComponent);
 }
 
 /**
@@ -53,16 +93,33 @@ function unsubscribe(keyPattern, cb) {
  * @param {mixed} data
  */
 function keyChanged(key, data) {
+    console.log('key changed', key, data);
+    // Trigger any callbacks that were added with subscribe()
     _.each(callbackMapping, (callbacks, keyPattern) => {
         const regex = RegExp(keyPattern);
 
         // If there is a callback whose regex matches the key that was changed, then the callback for that regex
         // is called and passed the data that changed
         if (regex.test(key)) {
-            for (let i = 0; i < callbacks.length; i++) {
-                const callback = callbacks[i];
-                callback(data);
-            }
+            _.each(callbacks, cb => cb(data));
+        }
+    });
+
+    // Find components that were added with subscribeToState() and trigger their setState() method with the new data
+    _.each(callbackToStateMapping, (mappedComponents, keyPattern) => {
+        const regex = RegExp(keyPattern);
+
+        // If there is a callback whose regex matches the key that was changed, then the callback for that regex
+        // is called and passed the data that changed
+        if (regex.test(key)) {
+            _.each(mappedComponents, (mappedComponent) => {
+                // Set the state of the react component with either the pathed data, or the data
+                mappedComponent.reactComponent.setState({
+                    [mappedComponent.statePropertyName]: mappedComponent.path
+                        ? lodashGet(data, mappedComponent.path, mappedComponent.defaultValue)
+                        : data || mappedComponent.defaultValue || null,
+                });
+            });
         }
     });
 }
@@ -149,6 +206,8 @@ function merge(key, val) {
 export {
     subscribe,
     unsubscribe,
+    subscribeToState,
+    unsubscribeFromState,
     set,
     multiSet,
     get,
diff --git a/src/store/actions/SessionActions.js b/src/store/actions/SessionActions.js
index 99f2c38746c3..032345c095aa 100644
--- a/src/store/actions/SessionActions.js
+++ b/src/store/actions/SessionActions.js
@@ -68,9 +68,9 @@ function signIn(login, password, useExpensifyLogin = false) {
             authToken = data && data.authToken;
 
             // If we didn't get a 200 response from authenticate, the user needs to sign in again
-            if (data.jsonCode !== 200) {
+            if (!useExpensifyLogin && data.jsonCode !== 200) {
                 // eslint-disable-next-line no-console
-                console.debug('Non-200 from authenticate, going back to sign in page');
+                console.debug('Non-200 from authenticate, going back to sign in page', data.jsonCode);
                 return Store.multiSet({
                     [STOREKEYS.CREDENTIALS]: {},
                     [STOREKEYS.SESSION]: {error: data.message},

From b0a157521e82392facd095bd645f00b5339eed28 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sat, 8 Aug 2020 17:16:25 -0600
Subject: [PATCH 08/44] Implement direct binding

---
 src/page/HomePage/Header.js | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/page/HomePage/Header.js b/src/page/HomePage/Header.js
index b260c6b81851..4df1ab3bcda7 100644
--- a/src/page/HomePage/Header.js
+++ b/src/page/HomePage/Header.js
@@ -11,15 +11,13 @@ export default class Header extends React.Component {
     constructor(props) {
         super(props);
 
-        this.updatePersonalDetails = this.updatePersonalDetails.bind(this);
-
         this.state = {
             personalDetails: null,
         };
     }
 
     componentDidMount() {
-        Store.subscribeToState(STOREKEYS.MY_PERSONAL_DETAILS, 'personalDetails', 'displayName', '', this);
+        Store.subscribeToState(STOREKEYS.MY_PERSONAL_DETAILS, 'name', 'displayName', '', this);
 
         // Get our personal details
         getPersonalDetails();
@@ -29,23 +27,14 @@ export default class Header extends React.Component {
         Store.unsubscribeFromState(STOREKEYS.MY_PERSONAL_DETAILS, this);
     }
 
-    /**
-     * When there are new personal details, update our state with them
-     *
-     * @param {Object} newPersonalDetails
-     */
-    updatePersonalDetails(newPersonalDetails) {
-        this.setState({personalDetails: newPersonalDetails});
-    }
-
     render() {
         return (
             <View style={styles.nav}>
                 <Text style={styles.brand}>Expensify Chat</Text>
                 <Text style={styles.flex1} />
-                {this.state.personalDetails && (
+                {this.state.name && (
                     <Text style={[styles.navText, styles.mr1]}>
-                        {`Welcome ${this.state.personalDetails.displayName}!`}
+                        {`Welcome ${this.state.name}!`}
                     </Text>
                 )}
                 <Button onPress={signOut} title="Sign Out" />

From f9a094ad77b8d17a46b3bd2a4ce58fb332259479 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sat, 8 Aug 2020 20:36:26 -0600
Subject: [PATCH 09/44] Fix unsubscribing

---
 src/page/HomePage/Header.js |  8 ++++---
 src/store/Store.js          | 42 ++++++++++++++++++-------------------
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/page/HomePage/Header.js b/src/page/HomePage/Header.js
index 4df1ab3bcda7..53f00597a311 100644
--- a/src/page/HomePage/Header.js
+++ b/src/page/HomePage/Header.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import {Text} from 'react-native-web';
 import {Button, View} from 'react-native';
+import _ from 'underscore';
 import * as Store from '../../store/Store';
 import {signOut} from '../../store/actions/SessionActions';
 import {fetch as getPersonalDetails} from '../../store/actions/PersonalDetailsActions';
@@ -11,20 +12,21 @@ export default class Header extends React.Component {
     constructor(props) {
         super(props);
 
+        this.subscribedGuids = [];
         this.state = {
-            personalDetails: null,
+            name: null,
         };
     }
 
     componentDidMount() {
-        Store.subscribeToState(STOREKEYS.MY_PERSONAL_DETAILS, 'name', 'displayName', '', this);
+        this.subscribedGuids.push(Store.subscribeToState(STOREKEYS.MY_PERSONAL_DETAILS, 'name', 'displayName', null, this));
 
         // Get our personal details
         getPersonalDetails();
     }
 
     componentWillUnmount() {
-        Store.unsubscribeFromState(STOREKEYS.MY_PERSONAL_DETAILS, this);
+        _.each(this.subscribedGuids, guid => Store.unsubscribeFromState(guid));
     }
 
     render() {
diff --git a/src/store/Store.js b/src/store/Store.js
index 0e55847adf20..e9a8a354103b 100644
--- a/src/store/Store.js
+++ b/src/store/Store.js
@@ -1,6 +1,7 @@
 import lodashGet from 'lodash.get';
 import _ from 'underscore';
 import * as PersistentStorage from '../lib/PersistentStorage';
+import Guid from '../lib/Guid';
 
 // Holds all of the callbacks that have registered for a specific key pattern
 const callbackMapping = {};
@@ -59,31 +60,30 @@ 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 {string} a guid to use when unsubscribing
  */
 function subscribeToState(keyPattern, statePropertyName, path, defaultValue, reactComponent) {
-    if (!callbackToStateMapping[keyPattern]) {
-        callbackToStateMapping[keyPattern] = [];
-    }
-    callbackToStateMapping[keyPattern].push({
+    const guid = Guid();
+    callbackToStateMapping[guid] = {
+        keyPattern,
         statePropertyName,
         path,
         reactComponent,
         defaultValue,
-    });
+    };
+    return guid;
 }
 
 /**
  * Remove the listener for a react component
  *
- * @param {string} keyPattern
- * @param {object} reactComponent
+ * @param {string} guid
  */
-function unsubscribeFromState(keyPattern, reactComponent) {
-    if (!callbackToStateMapping[keyPattern] || !callbackToStateMapping[keyPattern].length) {
+function unsubscribeFromState(guid) {
+    if (!callbackToStateMapping[guid]) {
         return;
     }
-    callbackToStateMapping[keyPattern] = _.without(callbackToStateMapping[keyPattern],
-        mappedComponent => mappedComponent.reactComponent === reactComponent);
+    delete callbackToStateMapping[guid];
 }
 
 /**
@@ -93,7 +93,7 @@ function unsubscribeFromState(keyPattern, reactComponent) {
  * @param {mixed} data
  */
 function keyChanged(key, data) {
-    console.log('key changed', key, data);
+    console.debug('key changed', key, data);
     // Trigger any callbacks that were added with subscribe()
     _.each(callbackMapping, (callbacks, keyPattern) => {
         const regex = RegExp(keyPattern);
@@ -106,19 +106,19 @@ function keyChanged(key, data) {
     });
 
     // Find components that were added with subscribeToState() and trigger their setState() method with the new data
-    _.each(callbackToStateMapping, (mappedComponents, keyPattern) => {
-        const regex = RegExp(keyPattern);
+    _.each(callbackToStateMapping, (mappedComponent) => {
+        const regex = RegExp(mappedComponent.keyPattern);
 
         // If there is a callback whose regex matches the key that was changed, then the callback for that regex
         // is called and passed the data that changed
         if (regex.test(key)) {
-            _.each(mappedComponents, (mappedComponent) => {
-                // Set the state of the react component with either the pathed data, or the data
-                mappedComponent.reactComponent.setState({
-                    [mappedComponent.statePropertyName]: mappedComponent.path
-                        ? lodashGet(data, mappedComponent.path, mappedComponent.defaultValue)
-                        : data || mappedComponent.defaultValue || null,
-                });
+            const newValue = mappedComponent.path
+                ? lodashGet(data, mappedComponent.path, mappedComponent.defaultValue)
+                : data || mappedComponent.defaultValue || null;
+
+            // Set the state of the react component with either the pathed data, or the data
+            mappedComponent.reactComponent.setState({
+                [mappedComponent.statePropertyName]: newValue,
             });
         }
     });

From 0366c4f06859412dec460c54a5a5c5b2f767cfa9 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sat, 8 Aug 2020 20:41:24 -0600
Subject: [PATCH 10/44] Fix infinite session redirect

---
 src/page/SignInPage.js              |  2 +-
 src/store/actions/SessionActions.js | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/page/SignInPage.js b/src/page/SignInPage.js
index ed742a7e7e5c..2080fb918c87 100644
--- a/src/page/SignInPage.js
+++ b/src/page/SignInPage.js
@@ -68,7 +68,7 @@ export default class App extends Component {
                     <View>
                         <Button
                             title="Log In"
-                            onPress={signIn(this.state.login, this.state.password, true)}
+                            onPress={() => signIn(this.state.login, this.state.password, true)}
                         />
                         {this.state.error && (
                             <Text style={{color: 'red'}}>
diff --git a/src/store/actions/SessionActions.js b/src/store/actions/SessionActions.js
index 032345c095aa..0ae852bb91f5 100644
--- a/src/store/actions/SessionActions.js
+++ b/src/store/actions/SessionActions.js
@@ -56,6 +56,7 @@ function setSuccessfulSignInData(data) {
  * @returns {Promise}
  */
 function signIn(login, password, useExpensifyLogin = false) {
+    console.debug('[SIGNIN] Authenticating with expensify login?', useExpensifyLogin ? 'yes' : 'no');
     let authToken;
     return request('Authenticate', {
         useExpensifyLogin,
@@ -65,12 +66,13 @@ function signIn(login, password, useExpensifyLogin = false) {
         partnerUserSecret: password,
     })
         .then((data) => {
+            console.debug('[SIGNIN] Authentication result. Code:', data.jsonCode);
             authToken = data && data.authToken;
 
             // If we didn't get a 200 response from authenticate, the user needs to sign in again
             if (!useExpensifyLogin && data.jsonCode !== 200) {
                 // eslint-disable-next-line no-console
-                console.debug('Non-200 from authenticate, going back to sign in page', data.jsonCode);
+                console.debug('[SIGNIN] Non-200 from authenticate, going back to sign in page');
                 return Store.multiSet({
                     [STOREKEYS.CREDENTIALS]: {},
                     [STOREKEYS.SESSION]: {error: data.message},
@@ -80,15 +82,21 @@ function signIn(login, password, useExpensifyLogin = false) {
 
             // If Expensify login, it's the users first time logging in and we need to create a login for the user
             if (useExpensifyLogin) {
+                console.debug('[SIGNIN] Creating a login');
                 return createLogin(data.authToken, Str.generateDeviceLoginID(), Guid())
-                    .then(() => setSuccessfulSignInData(data));
+                    .then(() => {
+                        console.debug('[SIGNIN] Successful sign in', 2);
+                        return setSuccessfulSignInData(data);
+                    });
             }
 
+            console.debug('[SIGNIN] Successful sign in', 1);
             return setSuccessfulSignInData();
         })
         .then(() => authToken)
         .catch((err) => {
             console.error(err);
+            console.debug('[SIGNIN] Request error');
             return Store.set(STOREKEYS.SESSION, {error: err.message});
         });
 }

From f153fb555802c74944394c77697610611943ffc9 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sat, 8 Aug 2020 21:45:29 -0600
Subject: [PATCH 11/44] Build an HOC for subscribing the state to the store

---
 package.json                                |  1 +
 src/components/WithStoreSubscribeToState.js | 49 +++++++++++++++++++++
 src/page/HomePage/Header.js                 | 32 ++++----------
 src/store/Store.js                          |  3 +-
 src/store/actions/SessionActions.js         |  1 -
 5 files changed, 60 insertions(+), 26 deletions(-)
 create mode 100644 src/components/WithStoreSubscribeToState.js

diff --git a/package.json b/package.json
index 7736f5996e48..c4b68aa1c1c0 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "jquery": "^3.5.1",
     "lodash.get": "^4.4.2",
     "moment": "^2.27.0",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-beforeunload": "^2.2.2",
     "react-dom": "^16.13.1",
diff --git a/src/components/WithStoreSubscribeToState.js b/src/components/WithStoreSubscribeToState.js
new file mode 100644
index 000000000000..2ab4404a3f0b
--- /dev/null
+++ b/src/components/WithStoreSubscribeToState.js
@@ -0,0 +1,49 @@
+/**
+ * This is a higher order component that provides the ability to map a state property directly to
+ * something in the store. That way, as soon as the store changes, the state will be set and the view
+ * will automatically change to reflect the new data.
+ */
+import React from 'react';
+import _ from 'underscore';
+import * as Store from '../store/Store';
+
+export default function (mapStoreToStates) {
+    return WrappedComponent => class WithStoreSubscribeToState extends React.Component {
+        constructor(props) {
+            super(props);
+
+            this.subscribedEventGuids = [];
+
+            // Initialize the state with each of our property names
+            this.state = _.reduce(_.keys(mapStoreToStates), (finalResult, propertyName) => ({
+                ...finalResult,
+                [propertyName]: null,
+            }), {});
+        }
+
+        componentDidMount() {
+            this.subscribedEventGuids = _.reduce(mapStoreToStates, (finalResult, mapStoreToState, propertyName) => {
+                const {key, path} = mapStoreToState;
+                return [
+                    ...finalResult,
+                    Store.subscribeToState(key, propertyName, path, null, this.wrappedComponent),
+                ];
+            }, []);
+
+            _.each(mapStoreToStates, (mapStoreToState) => {
+                if (mapStoreToState.loader) {
+                    mapStoreToState.loader(...mapStoreToState.loaderParams || []);
+                }
+            });
+        }
+
+        componentWillUnmount() {
+            _.each(this.subscribedEventGuids, Store.unsubscribeFromState);
+        }
+
+        render() {
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            return <WrappedComponent {...this.props} {...this.state} ref={el => this.wrappedComponent = el} />;
+        }
+    };
+}
diff --git a/src/page/HomePage/Header.js b/src/page/HomePage/Header.js
index 53f00597a311..b357f8c388d2 100644
--- a/src/page/HomePage/Header.js
+++ b/src/page/HomePage/Header.js
@@ -1,40 +1,19 @@
 import React from 'react';
 import {Text} from 'react-native-web';
 import {Button, View} from 'react-native';
-import _ from 'underscore';
-import * as Store from '../../store/Store';
 import {signOut} from '../../store/actions/SessionActions';
 import {fetch as getPersonalDetails} from '../../store/actions/PersonalDetailsActions';
 import styles from '../../style/StyleSheet';
 import STOREKEYS from '../../store/STOREKEYS';
+import WithStoreSubscribeToState from '../../components/WithStoreSubscribeToState';
 
-export default class Header extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.subscribedGuids = [];
-        this.state = {
-            name: null,
-        };
-    }
-
-    componentDidMount() {
-        this.subscribedGuids.push(Store.subscribeToState(STOREKEYS.MY_PERSONAL_DETAILS, 'name', 'displayName', null, this));
-
-        // Get our personal details
-        getPersonalDetails();
-    }
-
-    componentWillUnmount() {
-        _.each(this.subscribedGuids, guid => Store.unsubscribeFromState(guid));
-    }
-
+class Header extends React.Component {
     render() {
         return (
             <View style={styles.nav}>
                 <Text style={styles.brand}>Expensify Chat</Text>
                 <Text style={styles.flex1} />
-                {this.state.name && (
+                {this.state && this.state.name && (
                     <Text style={[styles.navText, styles.mr1]}>
                         {`Welcome ${this.state.name}!`}
                     </Text>
@@ -44,3 +23,8 @@ export default class Header extends React.Component {
         );
     }
 }
+
+export default WithStoreSubscribeToState({
+    // Map this.state.name to the personal details key in the store and bind it to the displayName property
+    name: {key: STOREKEYS.MY_PERSONAL_DETAILS, path: 'displayName', loader: getPersonalDetails},
+})(Header);
diff --git a/src/store/Store.js b/src/store/Store.js
index e9a8a354103b..5e574a5f105f 100644
--- a/src/store/Store.js
+++ b/src/store/Store.js
@@ -93,7 +93,8 @@ function unsubscribeFromState(guid) {
  * @param {mixed} data
  */
 function keyChanged(key, data) {
-    console.debug('key changed', key, data);
+    console.debug('[STORE] key changed', key, data);
+
     // Trigger any callbacks that were added with subscribe()
     _.each(callbackMapping, (callbacks, keyPattern) => {
         const regex = RegExp(keyPattern);
diff --git a/src/store/actions/SessionActions.js b/src/store/actions/SessionActions.js
index 0ae852bb91f5..492f7504c213 100644
--- a/src/store/actions/SessionActions.js
+++ b/src/store/actions/SessionActions.js
@@ -147,7 +147,6 @@ function verifyAuthToken() {
 
             return request('Get', {returnValueList: 'account'}).then((data) => {
                 if (data.jsonCode === 200) {
-                    console.debug('We have valid auth token');
                     return Store.set(STOREKEYS.SESSION, data);
                 }
 

From 307dfd21cee5f3056eed7384f50749c96dbc76ef Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sat, 8 Aug 2020 21:46:37 -0600
Subject: [PATCH 12/44] Add a little more comment

---
 src/page/HomePage/Header.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/page/HomePage/Header.js b/src/page/HomePage/Header.js
index b357f8c388d2..639899fb4f2a 100644
--- a/src/page/HomePage/Header.js
+++ b/src/page/HomePage/Header.js
@@ -26,5 +26,6 @@ class Header extends React.Component {
 
 export default WithStoreSubscribeToState({
     // Map this.state.name to the personal details key in the store and bind it to the displayName property
+    // and load it with data from getPersonalDetails()
     name: {key: STOREKEYS.MY_PERSONAL_DETAILS, path: 'displayName', loader: getPersonalDetails},
 })(Header);

From e31528beaf55d08fadef22e8e5dd15ea7d923606 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sat, 8 Aug 2020 22:08:33 -0600
Subject: [PATCH 13/44] Add initial sidebar and main views and lay them out

---
 .../HomePage/{Header.js => HeaderView.js}     |  6 ++---
 src/page/HomePage/HomePage.js                 |  9 +++++++-
 src/page/HomePage/MainView.js                 | 13 +++++++++++
 src/page/HomePage/SidebarView.js              | 13 +++++++++++
 src/style/StyleSheet.js                       | 22 +++++++++++++++----
 5 files changed, 55 insertions(+), 8 deletions(-)
 rename src/page/HomePage/{Header.js => HeaderView.js} (91%)
 create mode 100644 src/page/HomePage/MainView.js
 create mode 100644 src/page/HomePage/SidebarView.js

diff --git a/src/page/HomePage/Header.js b/src/page/HomePage/HeaderView.js
similarity index 91%
rename from src/page/HomePage/Header.js
rename to src/page/HomePage/HeaderView.js
index 639899fb4f2a..466840fb8a49 100644
--- a/src/page/HomePage/Header.js
+++ b/src/page/HomePage/HeaderView.js
@@ -7,10 +7,10 @@ import styles from '../../style/StyleSheet';
 import STOREKEYS from '../../store/STOREKEYS';
 import WithStoreSubscribeToState from '../../components/WithStoreSubscribeToState';
 
-class Header extends React.Component {
+class HeaderView extends React.Component {
     render() {
         return (
-            <View style={styles.nav}>
+            <View style={[styles.nav, styles.flexRow]}>
                 <Text style={styles.brand}>Expensify Chat</Text>
                 <Text style={styles.flex1} />
                 {this.state && this.state.name && (
@@ -28,4 +28,4 @@ export default WithStoreSubscribeToState({
     // Map this.state.name to the personal details key in the store and bind it to the displayName property
     // and load it with data from getPersonalDetails()
     name: {key: STOREKEYS.MY_PERSONAL_DETAILS, path: 'displayName', loader: getPersonalDetails},
-})(Header);
+})(HeaderView);
diff --git a/src/page/HomePage/HomePage.js b/src/page/HomePage/HomePage.js
index a136930b977e..c1bd3d3b93dc 100644
--- a/src/page/HomePage/HomePage.js
+++ b/src/page/HomePage/HomePage.js
@@ -4,7 +4,10 @@ import {
     StatusBar,
     View,
 } from 'react-native';
-import Header from './Header';
+import styles from '../../style/StyleSheet';
+import Header from './HeaderView';
+import Sidebar from './SidebarView';
+import Main from './MainView';
 
 const App = () => (
     <>
@@ -12,6 +15,10 @@ const App = () => (
         <SafeAreaView>
             <View>
                 <Header />
+                <View style={[styles.flexRow, styles.mainContentWrapper]}>
+                    <Sidebar />
+                    <Main />
+                </View>
             </View>
         </SafeAreaView>
     </>
diff --git a/src/page/HomePage/MainView.js b/src/page/HomePage/MainView.js
new file mode 100644
index 000000000000..feacfb7dffa6
--- /dev/null
+++ b/src/page/HomePage/MainView.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import {View, Text} from 'react-native';
+import styles from '../../style/StyleSheet';
+
+function MainView() {
+    return (
+        <View style={[styles.flexGrow4, styles.p1]}>
+            <Text>Main View</Text>
+        </View>
+    );
+}
+
+export default MainView;
diff --git a/src/page/HomePage/SidebarView.js b/src/page/HomePage/SidebarView.js
new file mode 100644
index 000000000000..c86ea29506da
--- /dev/null
+++ b/src/page/HomePage/SidebarView.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import {View, Text} from 'react-native';
+import styles from '../../style/StyleSheet';
+
+function SidebarView() {
+    return (
+        <View style={[styles.flexGrow1, styles.p1]}>
+            <Text>Sidebar View</Text>
+        </View>
+    );
+}
+
+export default SidebarView;
diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index 7664a55559a3..034f438eea70 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -5,8 +5,22 @@ const styles = StyleSheet.create({
     mr1: {
         marginRight: 10,
     },
-    nav: {
+    p1: {
+        padding: 10,
+    },
+    flex1: {
+        flex: 1,
+    },
+    flexRow: {
         flexDirection: 'row',
+    },
+    flexGrow1: {
+        flexGrow: 1,
+    },
+    flexGrow4: {
+        flexGrow: 4,
+    },
+    nav: {
         backgroundColor: '#efefef',
         padding: 20,
     },
@@ -17,9 +31,9 @@ const styles = StyleSheet.create({
     navText: {
         padding: 8,
     },
-    flex1: {
-        flex: 1,
-    }
+    mainContentWrapper: {
+        height: 'calc(100vh - 73px)',
+    },
 });
 
 export default styles;

From a5cbde69031b9e99cd988075769fda7d0de1eb23 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sat, 8 Aug 2020 22:24:18 -0600
Subject: [PATCH 14/44] List reports in the sidebar

---
 src/CONFIG.js                      |  1 +
 src/lib/Router/index.js            |  4 ++-
 src/page/HomePage/SidebarView.js   | 27 +++++++++++++-----
 src/store/actions/ReportActions.js | 45 +++++++++++++++---------------
 4 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/src/CONFIG.js b/src/CONFIG.js
index f04eb75339f5..44ff19f20faa 100644
--- a/src/CONFIG.js
+++ b/src/CONFIG.js
@@ -4,6 +4,7 @@ import {Platform} from 'react-native';
 const IS_IN_PRODUCTION = Platform.OS === 'web' ? process.env.NODE_ENV === 'production' : !__DEV__;
 
 export default {
+    IS_IN_PRODUCTION,
     PUSHER: {
         APP_KEY: IS_IN_PRODUCTION ? '268df511a204fbb60884' : 'ac6d22b891daae55283a',
         AUTH_URL: IS_IN_PRODUCTION ? 'https://www.expensify.com' : 'https://www.expensify.com.dev',
diff --git a/src/lib/Router/index.js b/src/lib/Router/index.js
index 02a430d7d165..559d562c046e 100644
--- a/src/lib/Router/index.js
+++ b/src/lib/Router/index.js
@@ -1,6 +1,7 @@
 import {
-    BrowserRouter as Router,
+    HashRouter as Router,
     Link,
+    NavLink,
     Route,
     Redirect,
     Switch,
@@ -9,6 +10,7 @@ import {
 
 export {
     Link,
+    NavLink,
     Route,
     Redirect,
     Router,
diff --git a/src/page/HomePage/SidebarView.js b/src/page/HomePage/SidebarView.js
index c86ea29506da..017085509c8b 100644
--- a/src/page/HomePage/SidebarView.js
+++ b/src/page/HomePage/SidebarView.js
@@ -1,13 +1,26 @@
 import React from 'react';
 import {View, Text} from 'react-native';
+import {NavLink} from '../../lib/Router';
+import _ from 'underscore';
 import styles from '../../style/StyleSheet';
+import WithStoreSubscribeToState from '../../components/WithStoreSubscribeToState';
+import STOREKEYS from '../../store/STOREKEYS';
+import {fetchAll} from '../../store/actions/ReportActions';
 
-function SidebarView() {
-    return (
-        <View style={[styles.flexGrow1, styles.p1]}>
-            <Text>Sidebar View</Text>
-        </View>
-    );
+class SidebarView extends React.Component {
+    render() {
+        return (
+            <View style={[styles.flexGrow1, styles.p1]}>
+                {this.state && this.state.reports && this.state.reports.length > 0 && _.map(this.state.reports, (report) => (
+                    <View key={report.reportID}>
+                        <NavLink to={`/${report.reportID}`}>{report.reportName}</NavLink>
+                    </View>
+                ))}
+            </View>
+        );
+    }
 }
 
-export default SidebarView;
+export default WithStoreSubscribeToState({
+    reports: {key: STOREKEYS.REPORTS, loader: fetchAll},
+})(SidebarView);
diff --git a/src/store/actions/ReportActions.js b/src/store/actions/ReportActions.js
index 8e6fb67c106c..dbf7dc8b79e5 100644
--- a/src/store/actions/ReportActions.js
+++ b/src/store/actions/ReportActions.js
@@ -5,6 +5,9 @@ import {request, delayedWrite} from '../../lib/Network';
 import STOREKEYS from '../STOREKEYS';
 import ExpensiMark from '../../lib/ExpensiMark';
 import Guid from '../../lib/Guid';
+import CONFIG from '../../CONFIG';
+
+// @TODO implement pusher
 // import * as pusher from '../../lib/pusher';
 
 /**
@@ -48,9 +51,7 @@ function updateReportWithNewAction(reportID, reportAction) {
             }
             return reportHistory;
         })
-        .then((reportHistory) => {
-            return Store.set(`${STOREKEYS.REPORT}_${reportID}_history`, reportHistory.sort(sortReportActions));
-        });
+        .then(reportHistory => Store.set(`${STOREKEYS.REPORT}_${reportID}_history`, reportHistory.sort(sortReportActions)));
 }
 
 /**
@@ -64,7 +65,7 @@ function hasUnreadHistoryItems(accountID, report) {
     const usersLastReadActionID = report.reportNameValuePairs[`lastReadActionID_${accountID}`];
     if (!usersLastReadActionID || report.reportActionList.length === 0) {
         return false;
-    };
+    }
 
     // Find the most recent sequence number from the report history
     const highestSequenceNumber = _.chain(report.reportActionList)
@@ -94,6 +95,9 @@ function initPusher() {
 
 /**
  * Get a single report
+ *
+ * @param {string} reportID
+ * @returns {Promise}
  */
 function fetch(reportID) {
     let fetchedReport;
@@ -120,8 +124,7 @@ function fetch(reportID) {
  * @returns {Promise}
  */
 function fetchAll() {
-    // @TODO Figure out how to tell if we are in production
-    if (IS_IN_PRODUCTION) {
+    if (CONFIG.IS_IN_PRODUCTION) {
         return request('Get', {
             returnValueList: 'reportStuff',
             reportIDList: '63212778,63212795,63212764,63212607',
@@ -146,12 +149,13 @@ function fetchAll() {
             _.each(data.reportListBeta, report => fetch(report.reportID));
             return data;
         })
-        .then(data => Store.set(STOREKEYS.REPORTS, _.values(data.reports)));
+        .then(data => Store.set(STOREKEYS.REPORTS, _.values(data.reportListBeta)));
 }
 
 /**
  * Get the history of a report
  *
+ * @param {string} reportID
  * @returns {Promise}
  */
 function fetchHistory(reportID) {
@@ -174,7 +178,7 @@ function addHistoryItem(reportID, commentText) {
     const guid = Guid();
     const historyKey = `${STOREKEYS.REPORT}_${reportID}_history`;
 
-    Store.multiGet([historyKey, STOREKEYS.SESSION, STOREKEYS.PERSONAL_DETAILS])
+    return Store.multiGet([historyKey, STOREKEYS.SESSION, STOREKEYS.PERSONAL_DETAILS])
         .then((values) => {
             const reportHistory = values[historyKey];
             const email = values[STOREKEYS.SESSION].email || '';
@@ -216,12 +220,10 @@ function addHistoryItem(reportID, commentText) {
                 }
             ]);
         })
-        .then(() => {
-            return delayedWrite('Report_AddComment', {
-                reportID,
-                reportComment: commentText,
-            });
-        });
+        .then(() => delayedWrite('Report_AddComment', {
+            reportID,
+            reportComment: commentText,
+        }));
 }
 
 /**
@@ -241,14 +243,13 @@ function updateLastReadActionID(accountID, reportID, sequenceNumber) {
             [`lastReadActionID_${accountID}`]: sequenceNumber,
         }
     })
-        .then(() => {
-            // Update the lastReadActionID on the report optimistically
-            return delayedWrite('Report_SetLastReadActionID', {
-                accountID,
-                reportID,
-                sequenceNumber,
-            });
-        });
+
+        // Update the lastReadActionID on the report optimistically
+        .then(() => delayedWrite('Report_SetLastReadActionID', {
+            accountID,
+            reportID,
+            sequenceNumber,
+        }));
 }
 
 export {

From 2490b9c7b6ea887706356dea7b7636ac043f7215 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 08:07:47 -0600
Subject: [PATCH 15/44] Update src/page/HomePage/HeaderView.js

Co-authored-by: Andrew Gable <andrewgable@gmail.com>
---
 src/page/HomePage/HeaderView.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/page/HomePage/HeaderView.js b/src/page/HomePage/HeaderView.js
index 466840fb8a49..63f7bc3a5c30 100644
--- a/src/page/HomePage/HeaderView.js
+++ b/src/page/HomePage/HeaderView.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import {Text} from 'react-native-web';
-import {Button, View} from 'react-native';
+import {Button, View, Text} from 'react-native';
 import {signOut} from '../../store/actions/SessionActions';
 import {fetch as getPersonalDetails} from '../../store/actions/PersonalDetailsActions';
 import styles from '../../style/StyleSheet';

From a02d9925eae5c0687e1984d0e0c9f3cc6f11941a Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 08:07:55 -0600
Subject: [PATCH 16/44] Update src/style/StyleSheet.js

Co-authored-by: Andrew Gable <andrewgable@gmail.com>
---
 src/style/StyleSheet.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index 034f438eea70..0924c4fab96b 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -1,4 +1,4 @@
-import {StyleSheet} from 'react-native-web';
+import {StyleSheet} from 'react-native';
 
 const styles = StyleSheet.create({
     // Utility classes

From a3de49eeb355abd85db093d4250ad492b83a1826 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 08:10:52 -0600
Subject: [PATCH 17/44] Fix typo

---
 src/store/actions/PersonalDetailsActions.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/store/actions/PersonalDetailsActions.js b/src/store/actions/PersonalDetailsActions.js
index 52bb35843566..548756b7204f 100644
--- a/src/store/actions/PersonalDetailsActions.js
+++ b/src/store/actions/PersonalDetailsActions.js
@@ -38,7 +38,7 @@ function fetch() {
             });
         })
         .then((data) => {
-            const allPersonaDetails = _.reduce(data.personalDetailsList, (finalPersonalDetailObject, personalDetails, login) => {
+            const allPersonalDetails = _.reduce(data.personalDetailsList, (finalPersonalDetailObject, personalDetails, login) => {
                 // Form the details into something that has all the data in an easy to use format.
                 const avatarURL = getAvatar(personalDetails, login);
                 const firstName = personalDetails.firstName || '';
@@ -59,9 +59,9 @@ function fetch() {
                     }
                 };
             }, {});
-            const myPersonalDetails = allPersonaDetails[currentLogin];
+            const myPersonalDetails = allPersonalDetails[currentLogin];
             return Store.multiSet({
-                [STOREKEYS.PERSONAL_DETAILS]: allPersonaDetails,
+                [STOREKEYS.PERSONAL_DETAILS]: allPersonalDetails,
                 [STOREKEYS.MY_PERSONAL_DETAILS]: myPersonalDetails,
             });
         });

From 2f8016b8d984c47330fc0553f8f484774e70cfe6 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 08:53:46 -0600
Subject: [PATCH 18/44] Use Link instead of NavLink

---
 src/lib/Router/index.js          | 2 --
 src/page/HomePage/SidebarView.js | 6 +++---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/lib/Router/index.js b/src/lib/Router/index.js
index 559d562c046e..15923a042e87 100644
--- a/src/lib/Router/index.js
+++ b/src/lib/Router/index.js
@@ -1,7 +1,6 @@
 import {
     HashRouter as Router,
     Link,
-    NavLink,
     Route,
     Redirect,
     Switch,
@@ -10,7 +9,6 @@ import {
 
 export {
     Link,
-    NavLink,
     Route,
     Redirect,
     Router,
diff --git a/src/page/HomePage/SidebarView.js b/src/page/HomePage/SidebarView.js
index 017085509c8b..f6b2c6595108 100644
--- a/src/page/HomePage/SidebarView.js
+++ b/src/page/HomePage/SidebarView.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import {View, Text} from 'react-native';
-import {NavLink} from '../../lib/Router';
+import {View} from 'react-native';
+import {Link} from '../../lib/Router';
 import _ from 'underscore';
 import styles from '../../style/StyleSheet';
 import WithStoreSubscribeToState from '../../components/WithStoreSubscribeToState';
@@ -13,7 +13,7 @@ class SidebarView extends React.Component {
             <View style={[styles.flexGrow1, styles.p1]}>
                 {this.state && this.state.reports && this.state.reports.length > 0 && _.map(this.state.reports, (report) => (
                     <View key={report.reportID}>
-                        <NavLink to={`/${report.reportID}`}>{report.reportName}</NavLink>
+                        <Link to={`/${report.reportID}`}>{report.reportName}</Link>
                     </View>
                 ))}
             </View>

From 67ee483234728a2d9be4f8489aa7ab22e8af7f86 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 08:59:44 -0600
Subject: [PATCH 19/44] Use a simple subscription ID

Fixes https://github.com/AndrewGable/ReactNativeChat/issues/11
---
 src/components/WithStoreSubscribeToState.js |  9 ++++++---
 src/store/Store.js                          | 21 +++++++++++----------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/WithStoreSubscribeToState.js b/src/components/WithStoreSubscribeToState.js
index 2ab4404a3f0b..d45e04a69499 100644
--- a/src/components/WithStoreSubscribeToState.js
+++ b/src/components/WithStoreSubscribeToState.js
@@ -12,7 +12,7 @@ export default function (mapStoreToStates) {
         constructor(props) {
             super(props);
 
-            this.subscribedEventGuids = [];
+            this.subscriptionIDs = [];
 
             // Initialize the state with each of our property names
             this.state = _.reduce(_.keys(mapStoreToStates), (finalResult, propertyName) => ({
@@ -22,7 +22,8 @@ export default function (mapStoreToStates) {
         }
 
         componentDidMount() {
-            this.subscribedEventGuids = _.reduce(mapStoreToStates, (finalResult, mapStoreToState, propertyName) => {
+            // Subscribe each of the state properties to the proper store key
+            this.subscriptionIDs = _.reduce(mapStoreToStates, (finalResult, mapStoreToState, propertyName) => {
                 const {key, path} = mapStoreToState;
                 return [
                     ...finalResult,
@@ -30,6 +31,7 @@ export default function (mapStoreToStates) {
                 ];
             }, []);
 
+            // Call any loaders that will fill the store with their initial data
             _.each(mapStoreToStates, (mapStoreToState) => {
                 if (mapStoreToState.loader) {
                     mapStoreToState.loader(...mapStoreToState.loaderParams || []);
@@ -38,10 +40,11 @@ export default function (mapStoreToStates) {
         }
 
         componentWillUnmount() {
-            _.each(this.subscribedEventGuids, Store.unsubscribeFromState);
+            _.each(this.subscriptionIDs, Store.unsubscribeFromState);
         }
 
         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} />;
         }
diff --git a/src/store/Store.js b/src/store/Store.js
index 5e574a5f105f..34dc44c536a2 100644
--- a/src/store/Store.js
+++ b/src/store/Store.js
@@ -6,6 +6,9 @@ import Guid from '../lib/Guid';
 // Holds all of the callbacks that have registered for a specific key pattern
 const callbackMapping = {};
 
+// Keeps track of the last subscription ID that was used
+let lastSubscriptionID = 0;
+
 /**
  * Initialize the store with actions and listening for storage events
  */
@@ -47,9 +50,7 @@ function subscribe(keyPattern, cb) {
     callbackMapping[keyPattern].push(cb);
 }
 
-/**
- * Holds a mapping of all the react components that want their state subscribed to a store key
- */
+// Holds a mapping of all the react components that want their state subscribed to a store key
 const callbackToStateMapping = {};
 
 /**
@@ -63,27 +64,27 @@ const callbackToStateMapping = {};
  * @returns {string} a guid to use when unsubscribing
  */
 function subscribeToState(keyPattern, statePropertyName, path, defaultValue, reactComponent) {
-    const guid = Guid();
-    callbackToStateMapping[guid] = {
+    const subscriptionID = lastSubscriptionID++;
+    callbackToStateMapping[subscriptionID] = {
         keyPattern,
         statePropertyName,
         path,
         reactComponent,
         defaultValue,
     };
-    return guid;
+    return subscriptionID;
 }
 
 /**
  * Remove the listener for a react component
  *
- * @param {string} guid
+ * @param {string} subscriptionID
  */
-function unsubscribeFromState(guid) {
-    if (!callbackToStateMapping[guid]) {
+function unsubscribeFromState(subscriptionID) {
+    if (!callbackToStateMapping[subscriptionID]) {
         return;
     }
-    delete callbackToStateMapping[guid];
+    delete callbackToStateMapping[subscriptionID];
 }
 
 /**

From e42283d1bff10d38f3b1c7cf541884d41584ca0f Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 09:01:31 -0600
Subject: [PATCH 20/44] Rename subscribeToState to bind

Fixes https://github.com/AndrewGable/ReactNativeChat/issues/13
---
 src/components/WithStoreSubscribeToState.js | 2 +-
 src/store/Store.js                          | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/WithStoreSubscribeToState.js b/src/components/WithStoreSubscribeToState.js
index d45e04a69499..de8fe0a2202c 100644
--- a/src/components/WithStoreSubscribeToState.js
+++ b/src/components/WithStoreSubscribeToState.js
@@ -27,7 +27,7 @@ export default function (mapStoreToStates) {
                 const {key, path} = mapStoreToState;
                 return [
                     ...finalResult,
-                    Store.subscribeToState(key, propertyName, path, null, this.wrappedComponent),
+                    Store.bind(key, propertyName, path, null, this.wrappedComponent),
                 ];
             }, []);
 
diff --git a/src/store/Store.js b/src/store/Store.js
index 34dc44c536a2..ff36ff783f62 100644
--- a/src/store/Store.js
+++ b/src/store/Store.js
@@ -63,7 +63,7 @@ const callbackToStateMapping = {};
  * @param {object} reactComponent whose setState() method will be called with any changed data
  * @returns {string} a guid to use when unsubscribing
  */
-function subscribeToState(keyPattern, statePropertyName, path, defaultValue, reactComponent) {
+function bind(keyPattern, statePropertyName, path, defaultValue, reactComponent) {
     const subscriptionID = lastSubscriptionID++;
     callbackToStateMapping[subscriptionID] = {
         keyPattern,
@@ -107,7 +107,7 @@ function keyChanged(key, data) {
         }
     });
 
-    // Find components that were added with subscribeToState() and trigger their setState() method with the new data
+    // Find components that were added with bind() and trigger their setState() method with the new data
     _.each(callbackToStateMapping, (mappedComponent) => {
         const regex = RegExp(mappedComponent.keyPattern);
 
@@ -208,7 +208,7 @@ function merge(key, val) {
 export {
     subscribe,
     unsubscribe,
-    subscribeToState,
+    bind,
     unsubscribeFromState,
     set,
     multiSet,

From b2a9b7ede9de9ea9f337ef42d7f121420f83a9ab Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 10:03:56 -0600
Subject: [PATCH 21/44] Trigger key changed after storage is set

---
 src/store/Store.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/store/Store.js b/src/store/Store.js
index ff36ff783f62..272c9a668c58 100644
--- a/src/store/Store.js
+++ b/src/store/Store.js
@@ -134,12 +134,11 @@ function keyChanged(key, data) {
  * @returns {Promise}
  */
 function set(key, val) {
-    // The storage event doesn't trigger for the current window, so just call keyChanged() manually to mimic
-    // the storage event
-    keyChanged(key, val);
-
     // Write the thing to persistent storage, which will trigger a storage event for any other tabs open on this domain
-    return PersistentStorage.set(key, val);
+    return PersistentStorage.set(key, val)
+        .then(() => {
+            keyChanged(key, val);
+        });
 }
 
 /**

From 8df561fc22c3fc27a8bbc247cd4ec198320a3279 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 10:14:55 -0600
Subject: [PATCH 22/44] Move the sidebar link into it's own component

---
 src/page/HomePage/SidebarLink.js | 24 ++++++++++++++++++++++++
 src/page/HomePage/SidebarView.js |  6 ++----
 2 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 src/page/HomePage/SidebarLink.js

diff --git a/src/page/HomePage/SidebarLink.js b/src/page/HomePage/SidebarLink.js
new file mode 100644
index 000000000000..87daf8f35ead
--- /dev/null
+++ b/src/page/HomePage/SidebarLink.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Link} from '../../lib/Router';
+
+const propTypes = {
+    // The ID of the report for this link
+    reportID: PropTypes.number.isRequired,
+
+    // The name of the report to use as the text for this link
+    reportName: PropTypes.string.isRequired,
+};
+
+class SidebarLink extends React.Component {
+    render() {
+        return (
+            <Link to={`/${this.props.reportID}`}>
+                {this.props.reportName}
+            </Link>
+        );
+    }
+}
+SidebarLink.propTypes = propTypes;
+
+export default SidebarLink;
diff --git a/src/page/HomePage/SidebarView.js b/src/page/HomePage/SidebarView.js
index f6b2c6595108..f166f7571289 100644
--- a/src/page/HomePage/SidebarView.js
+++ b/src/page/HomePage/SidebarView.js
@@ -1,20 +1,18 @@
 import React from 'react';
 import {View} from 'react-native';
-import {Link} from '../../lib/Router';
 import _ from 'underscore';
 import styles from '../../style/StyleSheet';
 import WithStoreSubscribeToState from '../../components/WithStoreSubscribeToState';
 import STOREKEYS from '../../store/STOREKEYS';
 import {fetchAll} from '../../store/actions/ReportActions';
+import SidebarLink from './SidebarLink';
 
 class SidebarView extends React.Component {
     render() {
         return (
             <View style={[styles.flexGrow1, styles.p1]}>
                 {this.state && this.state.reports && this.state.reports.length > 0 && _.map(this.state.reports, (report) => (
-                    <View key={report.reportID}>
-                        <Link to={`/${report.reportID}`}>{report.reportName}</Link>
-                    </View>
+                    <SidebarLink key={report.reportID} reportID={report.reportID} reportName={report.reportName} />
                 ))}
             </View>
         );

From 74d5455e2746c5c69111718804b00077687d0143 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 10:32:06 -0600
Subject: [PATCH 23/44] remove calc() from styles

Fixes https://github.com/AndrewGable/ReactNativeChat/issues/20
---
 src/page/HomePage/HomePage.js | 6 +++---
 src/style/StyleSheet.js       | 9 ++++++---
 web/index.html                | 9 +++++++++
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/page/HomePage/HomePage.js b/src/page/HomePage/HomePage.js
index c1bd3d3b93dc..2d3b08ff7f2b 100644
--- a/src/page/HomePage/HomePage.js
+++ b/src/page/HomePage/HomePage.js
@@ -12,10 +12,10 @@ import Main from './MainView';
 const App = () => (
     <>
         <StatusBar barStyle="dark-content" />
-        <SafeAreaView>
-            <View>
+        <SafeAreaView style={[styles.flex1, styles.h100p]}>
+            <View style={[styles.flexColumn, styles.h100p]}>
                 <Header />
-                <View style={[styles.flexRow, styles.mainContentWrapper]}>
+                <View style={[styles.flex1, styles.flexRow]}>
                     <Sidebar />
                     <Main />
                 </View>
diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index 0924c4fab96b..42a7f046da34 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -8,12 +8,18 @@ const styles = StyleSheet.create({
     p1: {
         padding: 10,
     },
+    h100p: {
+        height: '100%',
+    },
     flex1: {
         flex: 1,
     },
     flexRow: {
         flexDirection: 'row',
     },
+    flexColumn: {
+        flexDirection: 'column',
+    },
     flexGrow1: {
         flexGrow: 1,
     },
@@ -31,9 +37,6 @@ const styles = StyleSheet.create({
     navText: {
         padding: 8,
     },
-    mainContentWrapper: {
-        height: 'calc(100vh - 73px)',
-    },
 });
 
 export default styles;
diff --git a/web/index.html b/web/index.html
index 858c3771fe96..6dc7b6a3902e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2,6 +2,15 @@
 <html lang="en">
 <head>
     <title>Chat</title>
+    <style>
+        html,
+        body,
+        #root,
+        #root > div,
+        #root > div > div {
+            height: 100% !important;
+        }
+    </style>
 </head>
 <body>
     <div id="root"></div>

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 24/44] 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;

From f2ed6a80db592dcd2831d79b87ef8e9d2ef418f4 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 11:18:46 -0600
Subject: [PATCH 25/44] Remvoe subscribe and unsubscribe for now

Fixes https://github.com/AndrewGable/ReactNativeChat/issues/12
---
 src/Expensify.js                 | 39 ++++++++++++---------------
 src/page/HomePage/SidebarLink.js |  3 ++-
 src/page/SignInPage.js           | 30 +++++----------------
 src/store/Store.js               | 45 +-------------------------------
 src/style/StyleSheet.js          |  1 +
 5 files changed, 27 insertions(+), 91 deletions(-)

diff --git a/src/Expensify.js b/src/Expensify.js
index cb1862799217..8650aad20c74 100644
--- a/src/Expensify.js
+++ b/src/Expensify.js
@@ -6,6 +6,7 @@ import * as Store from './store/Store';
 import * as ActiveClientManager from './lib/ActiveClientManager';
 import {verifyAuthToken} from './store/actions/SessionActions';
 import STOREKEYS from './store/STOREKEYS';
+import WithStoreSubscribeToState from './components/WithStoreSubscribeToState';
 import {
     Route,
     Router,
@@ -16,34 +17,13 @@ import {
 // Initialize the store when the app loads for the first time
 Store.init();
 
-export default class Expensify extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            redirectTo: null,
-        };
-    }
-
-    componentDidMount() {
-        // Listen for when the app wants to redirect to a specific URL
-        Store.subscribe(STOREKEYS.APP_REDIRECT_TO, (redirectTo) => {
-            this.setState({redirectTo});
-        });
-
-        // Verify that our authToken is OK to use
-        verifyAuthToken();
-
-        // Initialize this client as being an active client
-        ActiveClientManager.init();
-    }
-
+class Expensify extends Component {
     render() {
         return (
             <Beforeunload onBeforeunload={ActiveClientManager.removeClient}>
                 <Router>
                     {/* If there is ever a property for redirecting, we do the redirect here */}
-                    {this.state.redirectTo && <Redirect to={this.state.redirectTo} />}
+                    {this.state && this.state.redirectTo && <Redirect to={this.state.redirectTo} />}
 
                     <Switch>
                         <Route path="/signin" component={SignInPage} />
@@ -54,3 +34,16 @@ export default class Expensify extends Component {
         );
     }
 }
+
+export default WithStoreSubscribeToState({
+    redirectTo: {
+        key: STOREKEYS.APP_REDIRECT_TO,
+        loader: () => {
+            // Verify that our authToken is OK to use
+            verifyAuthToken();
+
+            // Initialize this client as being an active client
+            ActiveClientManager.init();
+        }
+    },
+})(Expensify);
diff --git a/src/page/HomePage/SidebarLink.js b/src/page/HomePage/SidebarLink.js
index 61d168267221..73953e46a445 100644
--- a/src/page/HomePage/SidebarLink.js
+++ b/src/page/HomePage/SidebarLink.js
@@ -1,6 +1,7 @@
 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';
@@ -30,7 +31,7 @@ class SidebarLink extends React.Component {
     }
 
     componentWillUnmount() {
-
+        _.each(this.subscriptionIDS, Store.unsubscribeFromState);
     }
 
     render() {
diff --git a/src/page/SignInPage.js b/src/page/SignInPage.js
index 2080fb918c87..5ae9cabeb44d 100644
--- a/src/page/SignInPage.js
+++ b/src/page/SignInPage.js
@@ -10,39 +10,18 @@ import {
 import * as Store from '../store/Store';
 import {signIn} from '../store/actions/SessionActions';
 import STOREKEYS from '../store/STOREKEYS';
+import WithStoreSubscribeToState from '../components/WithStoreSubscribeToState';
 
-export default class App extends Component {
+class App extends Component {
     constructor(props) {
         super(props);
 
-        this.sessionChanged = this.sessionChanged.bind(this);
-
         this.state = {
             login: '',
             password: '',
-            error: null,
         };
     }
 
-    componentDidMount() {
-        // Listen for changes to our session
-        Store.subscribe(STOREKEYS.SESSION, this.sessionChanged);
-        Store.get(STOREKEYS.SESSION, 'error').then(error => this.setState({error}));
-    }
-
-    componentWillUnmount() {
-        Store.unsubscribe(STOREKEYS.SESSION, this.sessionChanged);
-    }
-
-    /**
-     * When the session changes, change which page the user sees
-     *
-     * @param {object} newSession
-     */
-    sessionChanged(newSession) {
-        this.setState({error: newSession && newSession.error});
-    }
-
     render() {
         return (
             <>
@@ -81,3 +60,8 @@ export default class App extends Component {
         );
     }
 }
+
+export default WithStoreSubscribeToState({
+    // Bind this.state.error to the error in the session object
+    error: {key: STOREKEYS.SESSION, path: 'error', defaultValue: null},
+})(App);
diff --git a/src/store/Store.js b/src/store/Store.js
index 272c9a668c58..1e76680769cc 100644
--- a/src/store/Store.js
+++ b/src/store/Store.js
@@ -1,10 +1,6 @@
 import lodashGet from 'lodash.get';
 import _ from 'underscore';
 import * as PersistentStorage from '../lib/PersistentStorage';
-import Guid from '../lib/Guid';
-
-// Holds all of the callbacks that have registered for a specific key pattern
-const callbackMapping = {};
 
 // Keeps track of the last subscription ID that was used
 let lastSubscriptionID = 0;
@@ -24,32 +20,6 @@ function init() {
     // });
 }
 
-/**
- * Remove a callback from a regex pattern
- *
- * @param {string} keyPattern
- * @param {function} cb
- */
-function unsubscribe(keyPattern, cb) {
-    if (!callbackMapping[keyPattern] || !callbackMapping[keyPattern].length) {
-        return;
-    }
-    callbackMapping[keyPattern] = callbackMapping[keyPattern].filter(existingCallback => existingCallback !== cb);
-}
-
-/**
- * Subscribe a regex pattern to trigger a callback when a storage event happens for a key matching that regex
- *
- * @param {string} keyPattern
- * @param {function} cb
- */
-function subscribe(keyPattern, cb) {
-    if (!callbackMapping[keyPattern]) {
-        callbackMapping[keyPattern] = [];
-    }
-    callbackMapping[keyPattern].push(cb);
-}
-
 // Holds a mapping of all the react components that want their state subscribed to a store key
 const callbackToStateMapping = {};
 
@@ -61,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 {string} a guid to use when unsubscribing
+ * @returns {number} an ID to use when calling unsubscribeFromState
  */
 function bind(keyPattern, statePropertyName, path, defaultValue, reactComponent) {
     const subscriptionID = lastSubscriptionID++;
@@ -96,17 +66,6 @@ function unsubscribeFromState(subscriptionID) {
 function keyChanged(key, data) {
     console.debug('[STORE] key changed', key, data);
 
-    // Trigger any callbacks that were added with subscribe()
-    _.each(callbackMapping, (callbacks, keyPattern) => {
-        const regex = RegExp(keyPattern);
-
-        // If there is a callback whose regex matches the key that was changed, then the callback for that regex
-        // is called and passed the data that changed
-        if (regex.test(key)) {
-            _.each(callbacks, cb => cb(data));
-        }
-    });
-
     // Find components that were added with bind() and trigger their setState() method with the new data
     _.each(callbackToStateMapping, (mappedComponent) => {
         const regex = RegExp(mappedComponent.keyPattern);
@@ -205,8 +164,6 @@ function merge(key, val) {
 }
 
 export {
-    subscribe,
-    unsubscribe,
     bind,
     unsubscribeFromState,
     set,
diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index e8b3d146d97b..ae57a3c7cfad 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -37,6 +37,7 @@ const styles = StyleSheet.create({
     navText: {
         padding: 8,
     },
+
     // @TODO I can't get this style to work in `SidebarLink.js`
     sidebarLink: {
         padding: 8,

From 04b5751aa51ba1ccd4bfd04250f5a396cff60a91 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 11:20:44 -0600
Subject: [PATCH 26/44] Only create regex object when binding

Fixes https://github.com/AndrewGable/ReactNativeChat/issues/17
---
 src/store/Store.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/store/Store.js b/src/store/Store.js
index 1e76680769cc..b385301b892a 100644
--- a/src/store/Store.js
+++ b/src/store/Store.js
@@ -36,7 +36,7 @@ const callbackToStateMapping = {};
 function bind(keyPattern, statePropertyName, path, defaultValue, reactComponent) {
     const subscriptionID = lastSubscriptionID++;
     callbackToStateMapping[subscriptionID] = {
-        keyPattern,
+        regex: RegExp(keyPattern),
         statePropertyName,
         path,
         reactComponent,
@@ -68,11 +68,7 @@ function keyChanged(key, data) {
 
     // Find components that were added with bind() and trigger their setState() method with the new data
     _.each(callbackToStateMapping, (mappedComponent) => {
-        const regex = RegExp(mappedComponent.keyPattern);
-
-        // If there is a callback whose regex matches the key that was changed, then the callback for that regex
-        // is called and passed the data that changed
-        if (regex.test(key)) {
+        if (mappedComponent.regex.test(key)) {
             const newValue = mappedComponent.path
                 ? lodashGet(data, mappedComponent.path, mappedComponent.defaultValue)
                 : data || mappedComponent.defaultValue || null;

From cbc73682ea17ee5c74a176333c97007debac7ae9 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 11:27:28 -0600
Subject: [PATCH 27/44] Rename unsubscribeFromState to unbind

---
 src/components/WithStoreSubscribeToState.js | 26 +++++++++++----------
 src/page/HomePage/SidebarLink.js            | 13 +++--------
 src/store/Store.js                          |  6 ++---
 3 files changed, 20 insertions(+), 25 deletions(-)

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 <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
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 {
             <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
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,

From 9b8a3b8f367d2d589f17971e35b1768f4ed43aca Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 11:30:53 -0600
Subject: [PATCH 28/44] Reorder the params for binding

Fixes https://github.com/AndrewGable/ReactNativeChat/issues/30
---
 src/components/WithStoreSubscribeToState.js | 8 ++++----
 src/page/HomePage/SidebarLink.js            | 2 +-
 src/store/Store.js                          | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/WithStoreSubscribeToState.js b/src/components/WithStoreSubscribeToState.js
index ffc9346ec214..f4511ac1cad3 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, null, this.wrappedComponent);
+                this.bind(key, path, null, propertyName, this.wrappedComponent);
             });
 
             // Call any loaders that will fill the store with their initial data
@@ -45,12 +45,12 @@ export default function (mapStoreToStates) {
          * mapStoreToStates to this HOC. All subscriptions will automatically be unbound when unmounted
          *
          * @param {string} key
-         * @param {string} propertyName
          * @param {string} path
+         * @param {string} propertyName
          * @param {object} component
          */
-        bind(key, propertyName, path, defaultValue, component) {
-            this.subscriptionIDs.push(Store.bind(key, propertyName, path, defaultValue, component));
+        bind(key, path, defaultValue, propertyName, component) {
+            this.subscriptionIDs.push(Store.bind(key, path, defaultValue, propertyName, component));
         }
 
         render() {
diff --git a/src/page/HomePage/SidebarLink.js b/src/page/HomePage/SidebarLink.js
index 21d69e7e8e7a..29671f7e93aa 100644
--- a/src/page/HomePage/SidebarLink.js
+++ b/src/page/HomePage/SidebarLink.js
@@ -24,7 +24,7 @@ class SidebarLink extends React.Component {
     }
 
     componentDidMount() {
-        this.props.bind(`${STOREKEYS.REPORT}_${this.props.reportID}`, 'isUnread', 'hasUnread', false, this);
+        this.props.bind(`${STOREKEYS.REPORT}_${this.props.reportID}`, 'hasUnread', false, 'isUnread', this);
     }
 
     render() {
diff --git a/src/store/Store.js b/src/store/Store.js
index c668608fb2fe..cdfa7fab2e2c 100644
--- a/src/store/Store.js
+++ b/src/store/Store.js
@@ -27,13 +27,13 @@ const callbackToStateMapping = {};
  * Subscribes a react component's state directly to a store key
  *
  * @param {string} keyPattern
- * @param {string} statePropertyName the name of the property in the state to bind the data to
  * @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 {string} statePropertyName the name of the property in the state to bind the data to
  * @param {object} reactComponent whose setState() method will be called with any changed data
  * @returns {number} an ID to use when calling unbind
  */
-function bind(keyPattern, statePropertyName, path, defaultValue, reactComponent) {
+function bind(keyPattern, path, defaultValue, statePropertyName, reactComponent) {
     const subscriptionID = lastSubscriptionID++;
     callbackToStateMapping[subscriptionID] = {
         regex: RegExp(keyPattern),

From 9a26bc38c996fe70a57a7e824ef9fbc0e27a39c0 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 11:40:20 -0600
Subject: [PATCH 29/44] Remove persistent storage

Fixes https://github.com/AndrewGable/ReactNativeChat/issues/15
---
 src/lib/PersistentStorage.js     | 95 --------------------------------
 src/page/HomePage/SidebarLink.js |  1 -
 src/page/SignInPage.js           |  1 -
 src/store/Store.js               | 37 ++++++++++---
 4 files changed, 28 insertions(+), 106 deletions(-)
 delete mode 100644 src/lib/PersistentStorage.js

diff --git a/src/lib/PersistentStorage.js b/src/lib/PersistentStorage.js
deleted file mode 100644
index 906fc36f4a7f..000000000000
--- a/src/lib/PersistentStorage.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * This module is an abstraction around a persistent storage system. This file can be modified to use whatever
- * persistent storage method is desired.
- */
-import AsyncStorage from '@react-native-community/async-storage';
-import _ from 'underscore';
-
-/**
- * Get a key from storage
- *
- * @param {string} key
- * @returns {Promise}
- */
-function get(key) {
-    return AsyncStorage.getItem(key)
-        .then(val => JSON.parse(val))
-        .catch(err => console.error(`Unable to get item from persistent storage. Key: ${key} Error: ${err}`));
-}
-
-/**
- * Get the data for multiple keys
- *
- * @param {string[]} keys
- * @returns {Promise}
- */
-function multiGet(keys) {
-    // AsyncStorage returns the data in an array format like:
-    // [ ['@MyApp_user', 'myUserValue'], ['@MyApp_key', 'myKeyValue'] ]
-    // This method will transform the data into a better JSON format like:
-    // {'@MyApp_user': 'myUserValue', '@MyApp_key': 'myKeyValue'}
-    return AsyncStorage.multiGet(keys)
-        .then(arrayOfData => _.reduce(arrayOfData, (finalData, keyValuePair) => ({
-            ...finalData,
-            [keyValuePair[0]]: JSON.parse(keyValuePair[1]),
-        }), {}))
-        .catch(err => console.error(`Unable to get item from persistent storage. Error: ${err}`, keys));
-}
-
-/**
- * Write a key to storage
- *
- * @param {string} key
- * @param {mixed} val
- * @returns {Promise}
- */
-function set(key, val) {
-    return AsyncStorage.setItem(key, JSON.stringify(val));
-}
-
-/**
- * Set multiple keys at once
- *
- * @param {object} data where the keys and values will be stored
- * @returns {Promise|Promise<void>|*}
- */
-function multiSet(data) {
-    // AsyncStorage expenses the data in an array like:
-    // [["@MyApp_user", "value_1"], ["@MyApp_key", "value_2"]]
-    // This method will transform the params from a better JSON format like:
-    // {'@MyApp_user': 'myUserValue', '@MyApp_key': 'myKeyValue'}
-    const keyValuePairs = _.reduce(data, (finalArray, val, key) => ([
-        ...finalArray,
-        [key, JSON.stringify(val)],
-    ]), []);
-    return AsyncStorage.multiSet(keyValuePairs);
-}
-
-/**
- * Empty out the storage (like when the user signs out)
- *
- * @returns {Promise}
- */
-function clear() {
-    return AsyncStorage.clear();
-}
-
-/**
- * Merges `val` into an existing key. Best used when updating an existing object
- *
- * @param {string} key
- * @param {mixed} val
- * @returns {Promise}
- */
-function merge(key, val) {
-    return AsyncStorage.mergeItem(key, JSON.stringify(val));
-}
-
-export {
-    get,
-    multiGet,
-    set,
-    multiSet,
-    merge,
-    clear,
-};
diff --git a/src/page/HomePage/SidebarLink.js b/src/page/HomePage/SidebarLink.js
index 29671f7e93aa..255c49d78bc4 100644
--- a/src/page/HomePage/SidebarLink.js
+++ b/src/page/HomePage/SidebarLink.js
@@ -2,7 +2,6 @@ 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';
 
diff --git a/src/page/SignInPage.js b/src/page/SignInPage.js
index 5ae9cabeb44d..7c3d543fffb9 100644
--- a/src/page/SignInPage.js
+++ b/src/page/SignInPage.js
@@ -7,7 +7,6 @@ import {
     TextInput,
     View,
 } from 'react-native';
-import * as Store from '../store/Store';
 import {signIn} from '../store/actions/SessionActions';
 import STOREKEYS from '../store/STOREKEYS';
 import WithStoreSubscribeToState from '../components/WithStoreSubscribeToState';
diff --git a/src/store/Store.js b/src/store/Store.js
index cdfa7fab2e2c..ecedf4bc2976 100644
--- a/src/store/Store.js
+++ b/src/store/Store.js
@@ -1,6 +1,6 @@
 import lodashGet from 'lodash.get';
 import _ from 'underscore';
-import * as PersistentStorage from '../lib/PersistentStorage';
+import AsyncStorage from '@react-native-community/async-storage';
 
 // Keeps track of the last subscription ID that was used
 let lastSubscriptionID = 0;
@@ -68,7 +68,7 @@ function keyChanged(key, data) {
 
     // Find components that were added with bind() and trigger their setState() method with the new data
     _.each(callbackToStateMapping, (mappedComponent) => {
-        if (mappedComponent.regex.test(key)) {
+        if (mappedComponent && mappedComponent.regex.test(key)) {
             const newValue = mappedComponent.path
                 ? lodashGet(data, mappedComponent.path, mappedComponent.defaultValue)
                 : data || mappedComponent.defaultValue || null;
@@ -90,7 +90,7 @@ function keyChanged(key, data) {
  */
 function set(key, val) {
     // Write the thing to persistent storage, which will trigger a storage event for any other tabs open on this domain
-    return PersistentStorage.set(key, val)
+    return AsyncStorage.setItem(key, JSON.stringify(val))
         .then(() => {
             keyChanged(key, val);
         });
@@ -106,13 +106,15 @@ function set(key, val) {
  * @returns {*}
  */
 function get(key, extraPath, defaultValue) {
-    return PersistentStorage.get(key)
+    return AsyncStorage.getItem(key)
+        .then(val => JSON.parse(val))
         .then((val) => {
             if (extraPath) {
                 return lodashGet(val, extraPath, defaultValue);
             }
             return val;
-        });
+        })
+        .catch(err => console.error(`Unable to get item from persistent storage. Key: ${key} Error: ${err}`));
 }
 
 /**
@@ -122,7 +124,16 @@ function get(key, extraPath, defaultValue) {
  * @returns {Promise}
  */
 function multiGet(keys) {
-    return PersistentStorage.multiGet(keys);
+    // AsyncStorage returns the data in an array format like:
+    // [ ['@MyApp_user', 'myUserValue'], ['@MyApp_key', 'myKeyValue'] ]
+    // This method will transform the data into a better JSON format like:
+    // {'@MyApp_user': 'myUserValue', '@MyApp_key': 'myKeyValue'}
+    return AsyncStorage.multiGet(keys)
+        .then(arrayOfData => _.reduce(arrayOfData, (finalData, keyValuePair) => ({
+            ...finalData,
+            [keyValuePair[0]]: JSON.parse(keyValuePair[1]),
+        }), {}))
+        .catch(err => console.error(`Unable to get item from persistent storage. Error: ${err}`, keys));
 }
 
 /**
@@ -133,7 +144,15 @@ function multiGet(keys) {
  * @returns {Promise}
  */
 function multiSet(data) {
-    return PersistentStorage.multiSet(data)
+    // AsyncStorage expenses the data in an array like:
+    // [["@MyApp_user", "value_1"], ["@MyApp_key", "value_2"]]
+    // This method will transform the params from a better JSON format like:
+    // {'@MyApp_user': 'myUserValue', '@MyApp_key': 'myKeyValue'}
+    const keyValuePairs = _.reduce(data, (finalArray, val, key) => ([
+        ...finalArray,
+        [key, JSON.stringify(val)],
+    ]), []);
+    return AsyncStorage.multiSet(keyValuePairs)
         .then(() => {
             _.each(data, (val, key) => keyChanged(key, val));
         });
@@ -145,7 +164,7 @@ function multiSet(data) {
  * @returns {Promise}
  */
 function clear() {
-    return PersistentStorage.clear();
+    return AsyncStorage.clear();
 }
 
 /**
@@ -156,7 +175,7 @@ function clear() {
  * @returns {Promise}
  */
 function merge(key, val) {
-    return PersistentStorage.merge(key, val);
+    return AsyncStorage.mergeItem(key, JSON.stringify(val));
 }
 
 export {

From af2333f4700a88825d56625673d4e319d2eafc05 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 11:48:23 -0600
Subject: [PATCH 30/44] Use merge in as many places as possible

Fixes https://github.com/AndrewGable/ReactNativeChat/issues/29
---
 src/lib/ActiveClientManager.js              |  4 ++--
 src/store/STOREKEYS.js                      |  2 +-
 src/store/actions/PersonalDetailsActions.js |  2 +-
 src/store/actions/SessionActions.js         | 10 +++++-----
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/lib/ActiveClientManager.js b/src/lib/ActiveClientManager.js
index cfc10f804de5..e73b0d2c05bd 100644
--- a/src/lib/ActiveClientManager.js
+++ b/src/lib/ActiveClientManager.js
@@ -10,7 +10,7 @@ const clientID = Guid();
  *
  * @returns {Promise}
  */
-const init = () => Store.merge(STOREKEYS.ACTIVE_CLIENT_IDS, clientID);
+const init = () => Store.merge(STOREKEYS.ACTIVE_CLIENT_IDS, {clientID});
 
 /**
  * Remove this client ID from the array of active client IDs when this client is exited
@@ -19,7 +19,7 @@ const init = () => Store.merge(STOREKEYS.ACTIVE_CLIENT_IDS, clientID);
  */
 function removeClient() {
     return Store.get(STOREKEYS.ACTIVE_CLIENT_IDS)
-        .then(activeClientIDs => _.without(activeClientIDs, clientID))
+        .then(activeClientIDs => _.omit(activeClientIDs, clientID))
         .then(newActiveClientIDs => Store.set(STOREKEYS.ACTIVE_CLIENT_IDS, newActiveClientIDs));
 }
 
diff --git a/src/store/STOREKEYS.js b/src/store/STOREKEYS.js
index 72be14905b7e..0bfdb0723c70 100644
--- a/src/store/STOREKEYS.js
+++ b/src/store/STOREKEYS.js
@@ -12,5 +12,5 @@ export default {
     LAST_AUTHENTICATED: 'last_authenticated',
     PERSONAL_DETAILS: 'personal_details',
     MY_PERSONAL_DETAILS: 'my_personal_details',
-    TIMEZONE: 'timezone',
 };
+.set
diff --git a/src/store/actions/PersonalDetailsActions.js b/src/store/actions/PersonalDetailsActions.js
index 548756b7204f..fe4628cd6877 100644
--- a/src/store/actions/PersonalDetailsActions.js
+++ b/src/store/actions/PersonalDetailsActions.js
@@ -81,7 +81,7 @@ function fetchTimezone() {
         returnValueList: 'nameValuePairs',
         name: 'timeZone',
     })
-        .then(data => Store.set(STOREKEYS.TIMEZONE, data.nameValuePairs.timeZone.selected || 'America/Los_Angeles'));
+        .then(data => Store.merge(STOREKEYS.MY_PERSONAL_DETAILS, {timezone: data.nameValuePairs.timeZone.selected || 'America/Los_Angeles'}));
 
     // Refresh the timezone every 30 minutes
     setTimeout(fetchTimezone, 1000 * 60 * 30);
diff --git a/src/store/actions/SessionActions.js b/src/store/actions/SessionActions.js
index 492f7504c213..1a168175c2b2 100644
--- a/src/store/actions/SessionActions.js
+++ b/src/store/actions/SessionActions.js
@@ -31,7 +31,7 @@ function createLogin(authToken, login, password) {
         partnerUserID: login,
         partnerUserSecret: password,
     }).then(() => Store.set(STOREKEYS.CREDENTIALS, {login, password}))
-        .catch(err => Store.set(STOREKEYS.SESSION, {error: err}));
+        .catch(err => Store.merge(STOREKEYS.SESSION, {error: err}));
 }
 
 /**
@@ -97,7 +97,7 @@ function signIn(login, password, useExpensifyLogin = false) {
         .catch((err) => {
             console.error(err);
             console.debug('[SIGNIN] Request error');
-            return Store.set(STOREKEYS.SESSION, {error: err.message});
+            return Store.merge(STOREKEYS.SESSION, {error: err.message});
         });
 }
 
@@ -113,7 +113,7 @@ function deleteLogin(authToken, login) {
         partnerName: CONFIG.EXPENSIFY.PARTNER_NAME,
         partnerPassword: CONFIG.EXPENSIFY.PARTNER_PASSWORD,
         partnerUserID: login,
-    }).catch(err => Store.set(STOREKEYS.SESSION, {error: err.message}));
+    }).catch(err => Store.merge(STOREKEYS.SESSION, {error: err.message}));
 }
 
 /**
@@ -126,7 +126,7 @@ function signOut() {
         .then(() => Store.multiGet([STOREKEYS.SESSION, STOREKEYS.CREDENTIALS]))
         .then(data => deleteLogin(data.session.authToken, data.credentials.login))
         .then(Store.clear)
-        .catch(err => Store.set(STOREKEYS.SESSION, {error: err.message}));
+        .catch(err => Store.merge(STOREKEYS.SESSION, {error: err.message}));
 }
 
 /**
@@ -147,7 +147,7 @@ function verifyAuthToken() {
 
             return request('Get', {returnValueList: 'account'}).then((data) => {
                 if (data.jsonCode === 200) {
-                    return Store.set(STOREKEYS.SESSION, data);
+                    return Store.merge(STOREKEYS.SESSION, data);
                 }
 
                 // If the auth token is bad and we didn't have credentials saved, we want them to go to the sign in page

From cad8207141b30e99f583d697cf3c82c3e4479265 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 12:09:03 -0600
Subject: [PATCH 31/44] Remove weird code

---
 src/store/STOREKEYS.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/store/STOREKEYS.js b/src/store/STOREKEYS.js
index 0bfdb0723c70..d39d3f27c124 100644
--- a/src/store/STOREKEYS.js
+++ b/src/store/STOREKEYS.js
@@ -13,4 +13,3 @@ export default {
     PERSONAL_DETAILS: 'personal_details',
     MY_PERSONAL_DETAILS: 'my_personal_details',
 };
-.set

From 2130a644e1bd3423a8a006725a68be53ea47a4a8 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 12:47:09 -0600
Subject: [PATCH 32/44] Improve the styles in the sidebar

---
 src/page/HomePage/HeaderView.js  | 13 ++++++++++---
 src/page/HomePage/HomePage.js    |  7 +++++--
 src/page/HomePage/SidebarLink.js | 19 +++++++++++++------
 src/style/StyleSheet.js          | 24 +++++++++++++++++-------
 web/index.html                   |  4 ++++
 5 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/src/page/HomePage/HeaderView.js b/src/page/HomePage/HeaderView.js
index 63f7bc3a5c30..b3cff9f2d44e 100644
--- a/src/page/HomePage/HeaderView.js
+++ b/src/page/HomePage/HeaderView.js
@@ -12,9 +12,15 @@ class HeaderView extends React.Component {
             <View style={[styles.nav, styles.flexRow]}>
                 <Text style={styles.brand}>Expensify Chat</Text>
                 <Text style={styles.flex1} />
-                {this.state && this.state.name && (
+                {this.state && this.state.activeReportName && (
+                    <Text style={[styles.navText]}>
+                        {this.state.activeReportName}
+                    </Text>
+                )}
+                <Text style={styles.flex1} />
+                {this.state && this.state.userDisplayName && (
                     <Text style={[styles.navText, styles.mr1]}>
-                        {`Welcome ${this.state.name}!`}
+                        {`Welcome ${this.state.userDisplayName}!`}
                     </Text>
                 )}
                 <Button onPress={signOut} title="Sign Out" />
@@ -26,5 +32,6 @@ class HeaderView extends React.Component {
 export default WithStoreSubscribeToState({
     // Map this.state.name to the personal details key in the store and bind it to the displayName property
     // and load it with data from getPersonalDetails()
-    name: {key: STOREKEYS.MY_PERSONAL_DETAILS, path: 'displayName', loader: getPersonalDetails},
+    userDisplayName: {key: STOREKEYS.MY_PERSONAL_DETAILS, path: 'displayName', loader: getPersonalDetails},
+    activeReportName: {key: STOREKEYS.ACTIVE_REPORT, path: 'reportName'},
 })(HeaderView);
diff --git a/src/page/HomePage/HomePage.js b/src/page/HomePage/HomePage.js
index 2d3b08ff7f2b..71530d80be66 100644
--- a/src/page/HomePage/HomePage.js
+++ b/src/page/HomePage/HomePage.js
@@ -4,6 +4,7 @@ import {
     StatusBar,
     View,
 } from 'react-native';
+import {Route} from '../../lib/Router';
 import styles from '../../style/StyleSheet';
 import Header from './HeaderView';
 import Sidebar from './SidebarView';
@@ -16,8 +17,10 @@ const App = () => (
             <View style={[styles.flexColumn, styles.h100p]}>
                 <Header />
                 <View style={[styles.flex1, styles.flexRow]}>
-                    <Sidebar />
-                    <Main />
+                    <Route path="/:reportID?">
+                        <Sidebar />
+                        <Main />
+                    </Route>
                 </View>
             </View>
         </SafeAreaView>
diff --git a/src/page/HomePage/SidebarLink.js b/src/page/HomePage/SidebarLink.js
index 255c49d78bc4..f8589f3824e3 100644
--- a/src/page/HomePage/SidebarLink.js
+++ b/src/page/HomePage/SidebarLink.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Text, View} from 'react-native';
-import {Link} from '../../lib/Router';
+import _ from 'underscore';
+import {Link, withRouter} from '../../lib/Router';
 import STOREKEYS from '../../store/STOREKEYS';
+import styles from '../../style/StyleSheet';
 import WithStoreSubscribeToState from '../../components/WithStoreSubscribeToState';
 
 const propTypes = {
@@ -27,12 +29,17 @@ class SidebarLink extends React.Component {
     }
 
     render() {
+        const paramsReportID = parseInt(this.props.match.params.reportID, 10);
+        const isReportActive = paramsReportID === this.props.reportID;
+        const linkWrapperActiveStyle = isReportActive && styles.sidebarLinkActive;
+        const linkActiveStyle = isReportActive && styles.sidebarLinkActiveAnchor || styles.sidebarLink;
+        const textActiveStyle = isReportActive && styles.sidebarLinkActiveText || styles.sidebarLinkText;
         return (
-            <View>
-                <Link to={`/${this.props.reportID}`} style={{padding: 10, textDecorationLine: 'none'}}>
-                    <Text>{this.props.reportName}</Text>
+            <View style={linkWrapperActiveStyle}>
+                <Link to={`/${this.props.reportID}`} style={linkActiveStyle}>
+                    <Text style={textActiveStyle}>{this.props.reportName}</Text>
                     {this.state.isUnread && (
-                        <Text>- Unread</Text>
+                        <Text style={textActiveStyle}>- Unread</Text>
                     )}
                 </Link>
             </View>
@@ -41,4 +48,4 @@ class SidebarLink extends React.Component {
 }
 SidebarLink.propTypes = propTypes;
 
-export default WithStoreSubscribeToState()(SidebarLink);
+export default withRouter(WithStoreSubscribeToState()(SidebarLink));
diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index ae57a3c7cfad..8d80f8942b88 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -1,6 +1,4 @@
-import {StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
+const styles = {
     // Utility classes
     mr1: {
         marginRight: 10,
@@ -37,12 +35,24 @@ const styles = StyleSheet.create({
     navText: {
         padding: 8,
     },
-
-    // @TODO I can't get this style to work in `SidebarLink.js`
     sidebarLink: {
-        padding: 8,
+        padding: '.5rem 1rem',
+        textDecorationLine: 'none',
+    },
+    sidebarLinkActive: {
+        backgroundColor: '#007bff',
+        borderRadius: '.25rem',
+    },
+    sidebarLinkActiveAnchor: {
+        padding: '.5rem 1rem',
         textDecorationLine: 'none',
     },
-});
+    sidebarLinkText: {
+        color: '#007bff',
+    },
+    sidebarLinkActiveText: {
+        color: '#ffffff',
+    },
+};
 
 export default styles;
diff --git a/web/index.html b/web/index.html
index 6dc7b6a3902e..6db3633ebce1 100644
--- a/web/index.html
+++ b/web/index.html
@@ -10,6 +10,10 @@
         #root > div > div {
             height: 100% !important;
         }
+        body {
+            font-size: 1rem;
+            line-height: 1.5;
+        }
     </style>
 </head>
 <body>

From 99e3a73109965abbe1086be1d629919e7eb29ab5 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 13:43:43 -0600
Subject: [PATCH 33/44] Add a report view and show the report name

---
 src/components/WithStoreSubscribeToState.js | 23 +++++++++--
 src/lib/ExpensiMark.js                      | 15 ++++---
 src/lib/Network.js                          |  6 +++
 src/page/HomePage/HomePage.js               | 10 ++---
 src/page/HomePage/MainView.js               | 15 ++++---
 src/page/HomePage/Report/ReportView.js      | 44 +++++++++++++++++++++
 src/page/HomePage/SidebarLink.js            | 12 ++++--
 src/page/HomePage/SidebarView.js            |  3 +-
 src/store/actions/PersonalDetailsActions.js |  9 +++--
 9 files changed, 108 insertions(+), 29 deletions(-)
 create mode 100644 src/page/HomePage/Report/ReportView.js

diff --git a/src/components/WithStoreSubscribeToState.js b/src/components/WithStoreSubscribeToState.js
index f4511ac1cad3..10d86fad13f3 100644
--- a/src/components/WithStoreSubscribeToState.js
+++ b/src/components/WithStoreSubscribeToState.js
@@ -13,6 +13,8 @@ export default function (mapStoreToStates) {
             super(props);
 
             this.subscriptionIDs = [];
+            this.bind = this.bind.bind(this);
+            this.unbind = this.unbind.bind(this);
 
             // Initialize the state with each of our property names
             this.state = _.reduce(_.keys(mapStoreToStates), (finalResult, propertyName) => ({
@@ -37,7 +39,7 @@ export default function (mapStoreToStates) {
         }
 
         componentWillUnmount() {
-            _.each(this.subscriptionIDs, Store.unbind);
+            this.unbind();
         }
 
         /**
@@ -46,11 +48,25 @@ export default function (mapStoreToStates) {
          *
          * @param {string} key
          * @param {string} path
+         * @param {mixed} defaultValue
          * @param {string} propertyName
          * @param {object} component
+         * @param {boolean} fillWithData whether or not we want to fill the state with existing data from the
+         *                  store
          */
-        bind(key, path, defaultValue, propertyName, component) {
+        bind(key, path, defaultValue, propertyName, component, fillWithData) {
             this.subscriptionIDs.push(Store.bind(key, path, defaultValue, propertyName, component));
+            if (fillWithData) {
+                Store.get(key, path, defaultValue)
+                    .then(data => this.wrappedComponent.setState({[propertyName]: data}));
+            }
+        }
+
+        /**
+         * Unsubscribe from any subscriptions
+         */
+        unbind() {
+            _.each(this.subscriptionIDs, Store.unbind);
         }
 
         render() {
@@ -62,7 +78,8 @@ export default function (mapStoreToStates) {
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...this.state}
                     ref={el => this.wrappedComponent = el}
-                    bind={this.bind.bind(this)}
+                    bind={this.bind}
+                    unbind={this.unbind}
                 />
             );
         }
diff --git a/src/lib/ExpensiMark.js b/src/lib/ExpensiMark.js
index ea49c834a25f..4ddf63a1fdeb 100644
--- a/src/lib/ExpensiMark.js
+++ b/src/lib/ExpensiMark.js
@@ -17,16 +17,19 @@ export default class ExpensiMark {
             },
             {
                 /**
-                 * Use \b in this case because it will match on words, letters, and _: https://www.rexegg.com/regex-boundaries.html#wordboundary
+                 * Use \b in this case because it will match on words, letters, and _:
+                 * https://www.rexegg.com/regex-boundaries.html#wordboundary
                  * The !_blank is to prevent the `target="_blank">` section of the link replacement from being captured
-                 * Additionally, something like `\b\_([^<>]*?)\_\b` doesn't work because it won't replace `_https://www.test.com_`
+                 * Additionally, something like `\b\_([^<>]*?)\_\b` doesn't work because it won't replace
+                 * `_https://www.test.com_`
                  */
                 name: 'italic',
                 regex: '(?!_blank">)\\b\\_(.*?)\\_\\b',
                 replacement: '<em>$1</em>',
             },
             {
-                // Use \B in this case because \b doesn't match * or ~. \B will match everything that \b doesn't, so it works for * and ~: https://www.rexegg.com/regex-boundaries.html#notb
+                // Use \B in this case because \b doesn't match * or ~. \B will match everything that \b doesn't, so it
+                // works for * and ~: https://www.rexegg.com/regex-boundaries.html#notb
                 name: 'bold',
                 regex: '\\B\\*(.*?)\\*\\B',
                 replacement: '<strong>$1</strong>',
@@ -52,12 +55,12 @@ export default class ExpensiMark {
      */
     replace(text) {
         // This ensures that any html the user puts into the comment field shows as raw html
-        text = Str.safeEscape(text);
+        let safeText = Str.safeEscape(text);
 
         this.rules.forEach((rule) => {
-            text = text.replace(new RegExp(rule.regex, 'g'), rule.replacement);
+            safeText = safeText.replace(new RegExp(rule.regex, 'g'), rule.replacement);
         });
 
-        return text;
+        return safeText;
     }
 }
diff --git a/src/lib/Network.js b/src/lib/Network.js
index f915b6318a4e..f6f21e97f897 100644
--- a/src/lib/Network.js
+++ b/src/lib/Network.js
@@ -26,6 +26,12 @@ function request(command, data, type = 'post') {
             body: formData,
         }))
         .then(response => response.json())
+        .then((responseData) => {
+            if (responseData.jsonCode === 200) {
+                return responseData;
+            }
+            console.error('[API] Error', responseData);
+        })
         // eslint-disable-next-line no-unused-vars
         .catch(() => isAppOffline = true);
 }
diff --git a/src/page/HomePage/HomePage.js b/src/page/HomePage/HomePage.js
index 71530d80be66..1e6ba115569e 100644
--- a/src/page/HomePage/HomePage.js
+++ b/src/page/HomePage/HomePage.js
@@ -15,13 +15,13 @@ const App = () => (
         <StatusBar barStyle="dark-content" />
         <SafeAreaView style={[styles.flex1, styles.h100p]}>
             <View style={[styles.flexColumn, styles.h100p]}>
-                <Header />
-                <View style={[styles.flex1, styles.flexRow]}>
-                    <Route path="/:reportID?">
+                <Route path="/:reportID?">
+                    <Header />
+                    <View style={[styles.flex1, styles.flexRow]}>
                         <Sidebar />
                         <Main />
-                    </Route>
-                </View>
+                    </View>
+                </Route>
             </View>
         </SafeAreaView>
     </>
diff --git a/src/page/HomePage/MainView.js b/src/page/HomePage/MainView.js
index feacfb7dffa6..33d9b0c54bfd 100644
--- a/src/page/HomePage/MainView.js
+++ b/src/page/HomePage/MainView.js
@@ -1,13 +1,12 @@
 import React from 'react';
-import {View, Text} from 'react-native';
+import {View} from 'react-native';
 import styles from '../../style/StyleSheet';
+import ReportView from './Report/ReportView';
 
-function MainView() {
-    return (
-        <View style={[styles.flexGrow4, styles.p1]}>
-            <Text>Main View</Text>
-        </View>
-    );
-}
+const MainView = () => (
+    <View style={[styles.flexGrow4, styles.p1]}>
+        <ReportView />
+    </View>
+);
 
 export default MainView;
diff --git a/src/page/HomePage/Report/ReportView.js b/src/page/HomePage/Report/ReportView.js
new file mode 100644
index 000000000000..1850d10e48c8
--- /dev/null
+++ b/src/page/HomePage/Report/ReportView.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import {View, Text} from 'react-native';
+import PropTypes from 'prop-types';
+import {withRouter} from '../../../lib/Router';
+import WithStoreSubscribeToState from '../../../components/WithStoreSubscribeToState';
+import STOREKEYS from '../../../store/STOREKEYS';
+
+const propTypes = {
+    // These are from WithStoreSubscribeToState
+    bind: PropTypes.func.isRequired,
+    unbind: PropTypes.func.isRequired,
+
+    // These are from withRouter
+    // eslint-disable-next-line react/forbid-prop-types
+    match: PropTypes.object.isRequired,
+};
+
+class ReportView extends React.Component {
+    componentDidMount() {
+        this.props.bind(`${STOREKEYS.REPORT}_${this.props.match.params.reportID}`, null, null, 'report', this, true);
+    }
+
+    componentDidUpdate(prevProps) {
+        // If the report changed, then we need to re-bind to the store
+        if (prevProps.match.params.reportID !== this.props.match.params.reportID) {
+            this.props.unbind();
+            const key = `${STOREKEYS.REPORT}_${this.props.match.params.reportID}`;
+            this.props.bind(key, null, null, 'report', this, true);
+        }
+    }
+
+    render() {
+        return (
+            <View>
+                <Text>
+                    {this.state && this.state.report && this.state.report.reportName}
+                </Text>
+            </View>
+        );
+    }
+}
+ReportView.propTypes = propTypes;
+
+export default withRouter(WithStoreSubscribeToState()(ReportView));
diff --git a/src/page/HomePage/SidebarLink.js b/src/page/HomePage/SidebarLink.js
index f8589f3824e3..b0ab96295581 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, withRouter} from '../../lib/Router';
 import STOREKEYS from '../../store/STOREKEYS';
 import styles from '../../style/StyleSheet';
@@ -13,6 +12,13 @@ const propTypes = {
 
     // The name of the report to use as the text for this link
     reportName: PropTypes.string.isRequired,
+
+    // These are from WithStoreSubscribeToState
+    bind: PropTypes.func.isRequired,
+
+    // These are from withRouter
+    // eslint-disable-next-line react/forbid-prop-types
+    match: PropTypes.object.isRequired,
 };
 
 class SidebarLink extends React.Component {
@@ -32,8 +38,8 @@ class SidebarLink extends React.Component {
         const paramsReportID = parseInt(this.props.match.params.reportID, 10);
         const isReportActive = paramsReportID === this.props.reportID;
         const linkWrapperActiveStyle = isReportActive && styles.sidebarLinkActive;
-        const linkActiveStyle = isReportActive && styles.sidebarLinkActiveAnchor || styles.sidebarLink;
-        const textActiveStyle = isReportActive && styles.sidebarLinkActiveText || styles.sidebarLinkText;
+        const linkActiveStyle = isReportActive ? styles.sidebarLinkActiveAnchor : styles.sidebarLink;
+        const textActiveStyle = isReportActive ? styles.sidebarLinkActiveText : styles.sidebarLinkText;
         return (
             <View style={linkWrapperActiveStyle}>
                 <Link to={`/${this.props.reportID}`} style={linkActiveStyle}>
diff --git a/src/page/HomePage/SidebarView.js b/src/page/HomePage/SidebarView.js
index f166f7571289..4a44b14e16e7 100644
--- a/src/page/HomePage/SidebarView.js
+++ b/src/page/HomePage/SidebarView.js
@@ -9,9 +9,10 @@ import SidebarLink from './SidebarLink';
 
 class SidebarView extends React.Component {
     render() {
+        const reports = this.state && this.state.reports;
         return (
             <View style={[styles.flexGrow1, styles.p1]}>
-                {this.state && this.state.reports && this.state.reports.length > 0 && _.map(this.state.reports, (report) => (
+                {_.map(reports, report => (
                     <SidebarLink key={report.reportID} reportID={report.reportID} reportName={report.reportName} />
                 ))}
             </View>
diff --git a/src/store/actions/PersonalDetailsActions.js b/src/store/actions/PersonalDetailsActions.js
index fe4628cd6877..e0d72a94b77f 100644
--- a/src/store/actions/PersonalDetailsActions.js
+++ b/src/store/actions/PersonalDetailsActions.js
@@ -38,7 +38,7 @@ function fetch() {
             });
         })
         .then((data) => {
-            const allPersonalDetails = _.reduce(data.personalDetailsList, (finalPersonalDetailObject, personalDetails, login) => {
+            const allPersonalDetails = _.reduce(data.personalDetailsList, (finalObject, personalDetails, login) => {
                 // Form the details into something that has all the data in an easy to use format.
                 const avatarURL = getAvatar(personalDetails, login);
                 const firstName = personalDetails.firstName || '';
@@ -47,7 +47,7 @@ function fetch() {
                 const displayName = fullName === '' ? login : fullName;
                 const displayNameWithEmail = fullName === '' ? login : `${fullName} (${login})`;
                 return {
-                    ...finalPersonalDetailObject,
+                    ...finalObject,
                     [login]: {
                         login,
                         avatarURL,
@@ -81,7 +81,10 @@ function fetchTimezone() {
         returnValueList: 'nameValuePairs',
         name: 'timeZone',
     })
-        .then(data => Store.merge(STOREKEYS.MY_PERSONAL_DETAILS, {timezone: data.nameValuePairs.timeZone.selected || 'America/Los_Angeles'}));
+        .then((data) => {
+            const timezone = data.nameValuePairs.timeZone.selected || 'America/Los_Angeles';
+            Store.merge(STOREKEYS.MY_PERSONAL_DETAILS, {timezone});
+        });
 
     // Refresh the timezone every 30 minutes
     setTimeout(fetchTimezone, 1000 * 60 * 30);

From 3b8fcaf75e9826af12485cc1b738d263b4d701f4 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 14:01:51 -0600
Subject: [PATCH 34/44] Show the report name on the header

---
 src/Expensify.js                            |  5 ++++-
 src/components/WithStoreSubscribeToState.js | 10 +++++-----
 src/page/HomePage/HeaderView.js             |  9 ++++-----
 src/page/HomePage/MainView.js               |  2 +-
 src/page/HomePage/Report/ReportView.js      |  9 +++++++--
 src/page/HomePage/SidebarView.js            |  2 +-
 src/store/STOREKEYS.js                      |  2 +-
 src/style/StyleSheet.js                     |  6 ++++++
 8 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/Expensify.js b/src/Expensify.js
index 8650aad20c74..d0c76e596fb3 100644
--- a/src/Expensify.js
+++ b/src/Expensify.js
@@ -44,6 +44,9 @@ export default WithStoreSubscribeToState({
 
             // Initialize this client as being an active client
             ActiveClientManager.init();
-        }
+        },
+
+        // This must be set to false or else the app will always redirect the path in the Store on refresh
+        preventPrefillOfData: true,
     },
 })(Expensify);
diff --git a/src/components/WithStoreSubscribeToState.js b/src/components/WithStoreSubscribeToState.js
index 10d86fad13f3..d58506380dfd 100644
--- a/src/components/WithStoreSubscribeToState.js
+++ b/src/components/WithStoreSubscribeToState.js
@@ -26,8 +26,8 @@ export default function (mapStoreToStates) {
         componentDidMount() {
             // Subscribe each of the state properties to the proper store key
             _.each(mapStoreToStates, (mapStoreToState, propertyName) => {
-                const {key, path} = mapStoreToState;
-                this.bind(key, path, null, propertyName, this.wrappedComponent);
+                const {key, path, preventPrefillOfData} = mapStoreToState;
+                this.bind(key, path, null, propertyName, this.wrappedComponent, preventPrefillOfData);
             });
 
             // Call any loaders that will fill the store with their initial data
@@ -51,12 +51,12 @@ export default function (mapStoreToStates) {
          * @param {mixed} defaultValue
          * @param {string} propertyName
          * @param {object} component
-         * @param {boolean} fillWithData whether or not we want to fill the state with existing data from the
+         * @param {boolean} preventPrefillOfData whether or not we want to fill the state with existing data from the
          *                  store
          */
-        bind(key, path, defaultValue, propertyName, component, fillWithData) {
+        bind(key, path, defaultValue, propertyName, component, preventPrefillOfData) {
             this.subscriptionIDs.push(Store.bind(key, path, defaultValue, propertyName, component));
-            if (fillWithData) {
+            if (!preventPrefillOfData) {
                 Store.get(key, path, defaultValue)
                     .then(data => this.wrappedComponent.setState({[propertyName]: data}));
             }
diff --git a/src/page/HomePage/HeaderView.js b/src/page/HomePage/HeaderView.js
index b3cff9f2d44e..940bf65c464a 100644
--- a/src/page/HomePage/HeaderView.js
+++ b/src/page/HomePage/HeaderView.js
@@ -11,10 +11,9 @@ class HeaderView extends React.Component {
         return (
             <View style={[styles.nav, styles.flexRow]}>
                 <Text style={styles.brand}>Expensify Chat</Text>
-                <Text style={styles.flex1} />
-                {this.state && this.state.activeReportName && (
-                    <Text style={[styles.navText]}>
-                        {this.state.activeReportName}
+                {this.state && this.state.currentReportName && (
+                    <Text style={[styles.navText, styles.ml1]}>
+                        {this.state.currentReportName}
                     </Text>
                 )}
                 <Text style={styles.flex1} />
@@ -33,5 +32,5 @@ export default WithStoreSubscribeToState({
     // Map this.state.name to the personal details key in the store and bind it to the displayName property
     // and load it with data from getPersonalDetails()
     userDisplayName: {key: STOREKEYS.MY_PERSONAL_DETAILS, path: 'displayName', loader: getPersonalDetails},
-    activeReportName: {key: STOREKEYS.ACTIVE_REPORT, path: 'reportName'},
+    currentReportName: {key: STOREKEYS.CURRENT_REPORT, path: 'reportName'},
 })(HeaderView);
diff --git a/src/page/HomePage/MainView.js b/src/page/HomePage/MainView.js
index 33d9b0c54bfd..c4bbc1d238da 100644
--- a/src/page/HomePage/MainView.js
+++ b/src/page/HomePage/MainView.js
@@ -4,7 +4,7 @@ import styles from '../../style/StyleSheet';
 import ReportView from './Report/ReportView';
 
 const MainView = () => (
-    <View style={[styles.flexGrow4, styles.p1]}>
+    <View style={[styles.flex4, styles.p1]}>
         <ReportView />
     </View>
 );
diff --git a/src/page/HomePage/Report/ReportView.js b/src/page/HomePage/Report/ReportView.js
index 1850d10e48c8..0e87c1de7283 100644
--- a/src/page/HomePage/Report/ReportView.js
+++ b/src/page/HomePage/Report/ReportView.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import {View, Text} from 'react-native';
 import PropTypes from 'prop-types';
+import * as Store from '../../../store/Store';
 import {withRouter} from '../../../lib/Router';
 import WithStoreSubscribeToState from '../../../components/WithStoreSubscribeToState';
 import STOREKEYS from '../../../store/STOREKEYS';
@@ -17,7 +18,7 @@ const propTypes = {
 
 class ReportView extends React.Component {
     componentDidMount() {
-        this.props.bind(`${STOREKEYS.REPORT}_${this.props.match.params.reportID}`, null, null, 'report', this, true);
+        this.props.bind(`${STOREKEYS.REPORT}_${this.props.match.params.reportID}`, null, null, 'report', this);
     }
 
     componentDidUpdate(prevProps) {
@@ -25,11 +26,15 @@ class ReportView extends React.Component {
         if (prevProps.match.params.reportID !== this.props.match.params.reportID) {
             this.props.unbind();
             const key = `${STOREKEYS.REPORT}_${this.props.match.params.reportID}`;
-            this.props.bind(key, null, null, 'report', this, true);
+            this.props.bind(key, null, null, 'report', this);
         }
     }
 
     render() {
+        // Update the current report in the store so any other components can update
+        if (this.state && this.state.report) {
+            Store.set(STOREKEYS.CURRENT_REPORT, this.state.report);
+        }
         return (
             <View>
                 <Text>
diff --git a/src/page/HomePage/SidebarView.js b/src/page/HomePage/SidebarView.js
index 4a44b14e16e7..f957f9862a3d 100644
--- a/src/page/HomePage/SidebarView.js
+++ b/src/page/HomePage/SidebarView.js
@@ -11,7 +11,7 @@ class SidebarView extends React.Component {
     render() {
         const reports = this.state && this.state.reports;
         return (
-            <View style={[styles.flexGrow1, styles.p1]}>
+            <View style={[styles.flex1, styles.p1]}>
                 {_.map(reports, report => (
                     <SidebarLink key={report.reportID} reportID={report.reportID} reportName={report.reportName} />
                 ))}
diff --git a/src/store/STOREKEYS.js b/src/store/STOREKEYS.js
index d39d3f27c124..2362788851e2 100644
--- a/src/store/STOREKEYS.js
+++ b/src/store/STOREKEYS.js
@@ -6,7 +6,7 @@ export default {
     APP_REDIRECT_TO: 'app_redirectTo',
     CREDENTIALS: 'credentials',
     REPORT: 'report',
-    ACTIVE_REPORT: 'active_report',
+    CURRENT_REPORT: 'current_report',
     REPORTS: 'reports',
     SESSION: 'session',
     LAST_AUTHENTICATED: 'last_authenticated',
diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index 8d80f8942b88..091350014b2a 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -3,6 +3,9 @@ const styles = {
     mr1: {
         marginRight: 10,
     },
+    ml1: {
+        marginLeft: 10,
+    },
     p1: {
         padding: 10,
     },
@@ -12,6 +15,9 @@ const styles = {
     flex1: {
         flex: 1,
     },
+    flex4: {
+        flex: 4,
+    },
     flexRow: {
         flexDirection: 'row',
     },

From 1843eb7b0d6cf83086b4563dffd844015a385ece Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 14:25:23 -0600
Subject: [PATCH 35/44] Load the report history when looking at a report

---
 src/components/WithStoreSubscribeToState.js   | 18 ++++----
 src/page/HomePage/Report/ReportHistoryView.js | 43 +++++++++++++++++++
 src/page/HomePage/Report/ReportView.js        | 11 +++--
 3 files changed, 58 insertions(+), 14 deletions(-)
 create mode 100644 src/page/HomePage/Report/ReportHistoryView.js

diff --git a/src/components/WithStoreSubscribeToState.js b/src/components/WithStoreSubscribeToState.js
index d58506380dfd..d777d3ad4502 100644
--- a/src/components/WithStoreSubscribeToState.js
+++ b/src/components/WithStoreSubscribeToState.js
@@ -26,15 +26,8 @@ export default function (mapStoreToStates) {
         componentDidMount() {
             // Subscribe each of the state properties to the proper store key
             _.each(mapStoreToStates, (mapStoreToState, propertyName) => {
-                const {key, path, preventPrefillOfData} = mapStoreToState;
-                this.bind(key, path, null, propertyName, this.wrappedComponent, preventPrefillOfData);
-            });
-
-            // Call any loaders that will fill the store with their initial data
-            _.each(mapStoreToStates, (mapStoreToState) => {
-                if (mapStoreToState.loader) {
-                    mapStoreToState.loader(...mapStoreToState.loaderParams || []);
-                }
+                const {key, path, preventPrefillOfData, loader, loaderParams} = mapStoreToState;
+                this.bind(key, path, null, propertyName, this.wrappedComponent, preventPrefillOfData, loader, loaderParams);
             });
         }
 
@@ -53,13 +46,18 @@ export default function (mapStoreToStates) {
          * @param {object} component
          * @param {boolean} preventPrefillOfData whether or not we want to fill the state with existing data from the
          *                  store
+         * @param {function} [loader] a function to call to load data from the API
+         * @param {mixed[]} [loaderParams] any parameters to pass to the loader function
          */
-        bind(key, path, defaultValue, propertyName, component, preventPrefillOfData) {
+        bind(key, path, defaultValue, propertyName, component, preventPrefillOfData, loader, loaderParams) {
             this.subscriptionIDs.push(Store.bind(key, path, defaultValue, propertyName, component));
             if (!preventPrefillOfData) {
                 Store.get(key, path, defaultValue)
                     .then(data => this.wrappedComponent.setState({[propertyName]: data}));
             }
+            if (loader) {
+                loader(...loaderParams || []);
+            }
         }
 
         /**
diff --git a/src/page/HomePage/Report/ReportHistoryView.js b/src/page/HomePage/Report/ReportHistoryView.js
new file mode 100644
index 000000000000..a7c699fe7ff0
--- /dev/null
+++ b/src/page/HomePage/Report/ReportHistoryView.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import {View, Text} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../../../style/StyleSheet';
+import {fetchHistory} from '../../../store/actions/ReportActions';
+import WithStoreSubscribeToState from '../../../components/WithStoreSubscribeToState';
+import STOREKEYS from '../../../store/STOREKEYS';
+
+const propTypes = {
+    // The ID of the report being looked at
+    reportID: PropTypes.string.isRequired,
+
+    // These are from WithStoreSubscribeToState
+    bind: PropTypes.func.isRequired,
+};
+
+class ReportHistoryView extends React.Component {
+    componentDidMount() {
+        // Bind this.state.reportHistory to the history in the store
+        // and call fetchHistory to load it with data
+        this.props.bind(
+            `${STOREKEYS.REPORT}_${this.props.reportID}_history`,
+            null,
+            null,
+            'reportHistory',
+            this,
+            null,
+            fetchHistory,
+            [this.props.reportID]
+        );
+    }
+
+    render() {
+        return (
+            <View style={styles.flexColumn}>
+                <Text>Report History View</Text>
+            </View>
+        );
+    }
+}
+ReportHistoryView.propTypes = propTypes;
+
+export default WithStoreSubscribeToState()(ReportHistoryView);
diff --git a/src/page/HomePage/Report/ReportView.js b/src/page/HomePage/Report/ReportView.js
index 0e87c1de7283..b45f26ac45de 100644
--- a/src/page/HomePage/Report/ReportView.js
+++ b/src/page/HomePage/Report/ReportView.js
@@ -1,10 +1,12 @@
 import React from 'react';
-import {View, Text} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import * as Store from '../../../store/Store';
 import {withRouter} from '../../../lib/Router';
 import WithStoreSubscribeToState from '../../../components/WithStoreSubscribeToState';
 import STOREKEYS from '../../../store/STOREKEYS';
+import styles from '../../../style/StyleSheet';
+import ReportHistoryView from './ReportHistoryView';
 
 const propTypes = {
     // These are from WithStoreSubscribeToState
@@ -35,11 +37,12 @@ class ReportView extends React.Component {
         if (this.state && this.state.report) {
             Store.set(STOREKEYS.CURRENT_REPORT, this.state.report);
         }
+
         return (
             <View>
-                <Text>
-                    {this.state && this.state.report && this.state.report.reportName}
-                </Text>
+                <View style={styles.flexGrow1}>
+                    <ReportHistoryView reportID={this.props.match.params.reportID} />
+                </View>
             </View>
         );
     }

From fb063ceb42879bfc462bd1c87007d8acde2720f5 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 14:26:32 -0600
Subject: [PATCH 36/44] Rename the HOC to WithStore

---
 src/Expensify.js                                            | 4 ++--
 .../{WithStoreSubscribeToState.js => WithStore.js}          | 2 +-
 src/page/HomePage/HeaderView.js                             | 4 ++--
 src/page/HomePage/Report/ReportHistoryView.js               | 6 +++---
 src/page/HomePage/Report/ReportView.js                      | 6 +++---
 src/page/HomePage/SidebarLink.js                            | 6 +++---
 src/page/HomePage/SidebarView.js                            | 4 ++--
 src/page/SignInPage.js                                      | 4 ++--
 8 files changed, 18 insertions(+), 18 deletions(-)
 rename src/components/{WithStoreSubscribeToState.js => WithStore.js} (97%)

diff --git a/src/Expensify.js b/src/Expensify.js
index d0c76e596fb3..f339b6548b70 100644
--- a/src/Expensify.js
+++ b/src/Expensify.js
@@ -6,7 +6,7 @@ import * as Store from './store/Store';
 import * as ActiveClientManager from './lib/ActiveClientManager';
 import {verifyAuthToken} from './store/actions/SessionActions';
 import STOREKEYS from './store/STOREKEYS';
-import WithStoreSubscribeToState from './components/WithStoreSubscribeToState';
+import WithStore from './components/WithStore';
 import {
     Route,
     Router,
@@ -35,7 +35,7 @@ class Expensify extends Component {
     }
 }
 
-export default WithStoreSubscribeToState({
+export default WithStore({
     redirectTo: {
         key: STOREKEYS.APP_REDIRECT_TO,
         loader: () => {
diff --git a/src/components/WithStoreSubscribeToState.js b/src/components/WithStore.js
similarity index 97%
rename from src/components/WithStoreSubscribeToState.js
rename to src/components/WithStore.js
index d777d3ad4502..4e42d3c2d34c 100644
--- a/src/components/WithStoreSubscribeToState.js
+++ b/src/components/WithStore.js
@@ -8,7 +8,7 @@ import _ from 'underscore';
 import * as Store from '../store/Store';
 
 export default function (mapStoreToStates) {
-    return WrappedComponent => class WithStoreSubscribeToState extends React.Component {
+    return WrappedComponent => class WithStore extends React.Component {
         constructor(props) {
             super(props);
 
diff --git a/src/page/HomePage/HeaderView.js b/src/page/HomePage/HeaderView.js
index 940bf65c464a..12e1af1c9d92 100644
--- a/src/page/HomePage/HeaderView.js
+++ b/src/page/HomePage/HeaderView.js
@@ -4,7 +4,7 @@ import {signOut} from '../../store/actions/SessionActions';
 import {fetch as getPersonalDetails} from '../../store/actions/PersonalDetailsActions';
 import styles from '../../style/StyleSheet';
 import STOREKEYS from '../../store/STOREKEYS';
-import WithStoreSubscribeToState from '../../components/WithStoreSubscribeToState';
+import WithStore from '../../components/WithStore';
 
 class HeaderView extends React.Component {
     render() {
@@ -28,7 +28,7 @@ class HeaderView extends React.Component {
     }
 }
 
-export default WithStoreSubscribeToState({
+export default WithStore({
     // Map this.state.name to the personal details key in the store and bind it to the displayName property
     // and load it with data from getPersonalDetails()
     userDisplayName: {key: STOREKEYS.MY_PERSONAL_DETAILS, path: 'displayName', loader: getPersonalDetails},
diff --git a/src/page/HomePage/Report/ReportHistoryView.js b/src/page/HomePage/Report/ReportHistoryView.js
index a7c699fe7ff0..eb7375c6161b 100644
--- a/src/page/HomePage/Report/ReportHistoryView.js
+++ b/src/page/HomePage/Report/ReportHistoryView.js
@@ -3,14 +3,14 @@ import {View, Text} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../../style/StyleSheet';
 import {fetchHistory} from '../../../store/actions/ReportActions';
-import WithStoreSubscribeToState from '../../../components/WithStoreSubscribeToState';
+import WithStore from '../../../components/WithStore';
 import STOREKEYS from '../../../store/STOREKEYS';
 
 const propTypes = {
     // The ID of the report being looked at
     reportID: PropTypes.string.isRequired,
 
-    // These are from WithStoreSubscribeToState
+    // These are from WithStore
     bind: PropTypes.func.isRequired,
 };
 
@@ -40,4 +40,4 @@ class ReportHistoryView extends React.Component {
 }
 ReportHistoryView.propTypes = propTypes;
 
-export default WithStoreSubscribeToState()(ReportHistoryView);
+export default WithStore()(ReportHistoryView);
diff --git a/src/page/HomePage/Report/ReportView.js b/src/page/HomePage/Report/ReportView.js
index b45f26ac45de..87aff20060d1 100644
--- a/src/page/HomePage/Report/ReportView.js
+++ b/src/page/HomePage/Report/ReportView.js
@@ -3,13 +3,13 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import * as Store from '../../../store/Store';
 import {withRouter} from '../../../lib/Router';
-import WithStoreSubscribeToState from '../../../components/WithStoreSubscribeToState';
+import WithStore from '../../../components/WithStore';
 import STOREKEYS from '../../../store/STOREKEYS';
 import styles from '../../../style/StyleSheet';
 import ReportHistoryView from './ReportHistoryView';
 
 const propTypes = {
-    // These are from WithStoreSubscribeToState
+    // These are from WithStore
     bind: PropTypes.func.isRequired,
     unbind: PropTypes.func.isRequired,
 
@@ -49,4 +49,4 @@ class ReportView extends React.Component {
 }
 ReportView.propTypes = propTypes;
 
-export default withRouter(WithStoreSubscribeToState()(ReportView));
+export default withRouter(WithStore()(ReportView));
diff --git a/src/page/HomePage/SidebarLink.js b/src/page/HomePage/SidebarLink.js
index b0ab96295581..6430bb321f56 100644
--- a/src/page/HomePage/SidebarLink.js
+++ b/src/page/HomePage/SidebarLink.js
@@ -4,7 +4,7 @@ import {Text, View} from 'react-native';
 import {Link, withRouter} from '../../lib/Router';
 import STOREKEYS from '../../store/STOREKEYS';
 import styles from '../../style/StyleSheet';
-import WithStoreSubscribeToState from '../../components/WithStoreSubscribeToState';
+import WithStore from '../../components/WithStore';
 
 const propTypes = {
     // The ID of the report for this link
@@ -13,7 +13,7 @@ const propTypes = {
     // The name of the report to use as the text for this link
     reportName: PropTypes.string.isRequired,
 
-    // These are from WithStoreSubscribeToState
+    // These are from WithStore
     bind: PropTypes.func.isRequired,
 
     // These are from withRouter
@@ -54,4 +54,4 @@ class SidebarLink extends React.Component {
 }
 SidebarLink.propTypes = propTypes;
 
-export default withRouter(WithStoreSubscribeToState()(SidebarLink));
+export default withRouter(WithStore()(SidebarLink));
diff --git a/src/page/HomePage/SidebarView.js b/src/page/HomePage/SidebarView.js
index f957f9862a3d..9483d61d3608 100644
--- a/src/page/HomePage/SidebarView.js
+++ b/src/page/HomePage/SidebarView.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import styles from '../../style/StyleSheet';
-import WithStoreSubscribeToState from '../../components/WithStoreSubscribeToState';
+import WithStore from '../../components/WithStore';
 import STOREKEYS from '../../store/STOREKEYS';
 import {fetchAll} from '../../store/actions/ReportActions';
 import SidebarLink from './SidebarLink';
@@ -20,6 +20,6 @@ class SidebarView extends React.Component {
     }
 }
 
-export default WithStoreSubscribeToState({
+export default WithStore({
     reports: {key: STOREKEYS.REPORTS, loader: fetchAll},
 })(SidebarView);
diff --git a/src/page/SignInPage.js b/src/page/SignInPage.js
index 7c3d543fffb9..60024f2a5abc 100644
--- a/src/page/SignInPage.js
+++ b/src/page/SignInPage.js
@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 import {signIn} from '../store/actions/SessionActions';
 import STOREKEYS from '../store/STOREKEYS';
-import WithStoreSubscribeToState from '../components/WithStoreSubscribeToState';
+import WithStore from '../components/WithStore';
 
 class App extends Component {
     constructor(props) {
@@ -60,7 +60,7 @@ class App extends Component {
     }
 }
 
-export default WithStoreSubscribeToState({
+export default WithStore({
     // Bind this.state.error to the error in the session object
     error: {key: STOREKEYS.SESSION, path: 'error', defaultValue: null},
 })(App);

From 732ac89242577fe314e1a13e2bc4398fd540f40e Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 14:58:05 -0600
Subject: [PATCH 37/44] Do better at prefilling data from the right keys

---
 src/Expensify.js                              |  3 ---
 src/components/WithStore.js                   | 20 ++++++++++++-------
 src/page/HomePage/HeaderView.js               | 13 ++++++++++--
 src/page/HomePage/Report/ReportHistoryView.js | 12 +++++++++++
 src/page/HomePage/Report/ReportView.js        |  5 +++--
 src/page/HomePage/SidebarLink.js              |  2 +-
 src/page/HomePage/SidebarView.js              |  6 +++++-
 7 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/src/Expensify.js b/src/Expensify.js
index f339b6548b70..92cdfeda3329 100644
--- a/src/Expensify.js
+++ b/src/Expensify.js
@@ -45,8 +45,5 @@ export default WithStore({
             // Initialize this client as being an active client
             ActiveClientManager.init();
         },
-
-        // This must be set to false or else the app will always redirect the path in the Store on refresh
-        preventPrefillOfData: true,
     },
 })(Expensify);
diff --git a/src/components/WithStore.js b/src/components/WithStore.js
index 4e42d3c2d34c..5daf1fb7a99b 100644
--- a/src/components/WithStore.js
+++ b/src/components/WithStore.js
@@ -26,8 +26,14 @@ export default function (mapStoreToStates) {
         componentDidMount() {
             // Subscribe each of the state properties to the proper store key
             _.each(mapStoreToStates, (mapStoreToState, propertyName) => {
-                const {key, path, preventPrefillOfData, loader, loaderParams} = mapStoreToState;
-                this.bind(key, path, null, propertyName, this.wrappedComponent, preventPrefillOfData, loader, loaderParams);
+                const {
+                    key,
+                    path,
+                    prefillWithKey,
+                    loader,
+                    loaderParams
+                } = mapStoreToState;
+                this.bind(key, path, null, propertyName, this.wrappedComponent, prefillWithKey, loader, loaderParams);
             });
         }
 
@@ -44,16 +50,16 @@ export default function (mapStoreToStates) {
          * @param {mixed} defaultValue
          * @param {string} propertyName
          * @param {object} component
-         * @param {boolean} preventPrefillOfData whether or not we want to fill the state with existing data from the
+         * @param {boolean} prefillWithKey whether or not we want to fill the state with existing data from the
          *                  store
          * @param {function} [loader] a function to call to load data from the API
          * @param {mixed[]} [loaderParams] any parameters to pass to the loader function
          */
-        bind(key, path, defaultValue, propertyName, component, preventPrefillOfData, loader, loaderParams) {
+        bind(key, path, defaultValue, propertyName, component, prefillWithKey, loader, loaderParams) {
             this.subscriptionIDs.push(Store.bind(key, path, defaultValue, propertyName, component));
-            if (!preventPrefillOfData) {
-                Store.get(key, path, defaultValue)
-                    .then(data => this.wrappedComponent.setState({[propertyName]: data}));
+            if (prefillWithKey) {
+                Store.get(prefillWithKey, path, defaultValue)
+                    .then(data => component.setState({[propertyName]: data}));
             }
             if (loader) {
                 loader(...loaderParams || []);
diff --git a/src/page/HomePage/HeaderView.js b/src/page/HomePage/HeaderView.js
index 12e1af1c9d92..f671b4c5c151 100644
--- a/src/page/HomePage/HeaderView.js
+++ b/src/page/HomePage/HeaderView.js
@@ -31,6 +31,15 @@ class HeaderView extends React.Component {
 export default WithStore({
     // Map this.state.name to the personal details key in the store and bind it to the displayName property
     // and load it with data from getPersonalDetails()
-    userDisplayName: {key: STOREKEYS.MY_PERSONAL_DETAILS, path: 'displayName', loader: getPersonalDetails},
-    currentReportName: {key: STOREKEYS.CURRENT_REPORT, path: 'reportName'},
+    userDisplayName: {
+        key: STOREKEYS.MY_PERSONAL_DETAILS,
+        path: 'displayName',
+        loader: getPersonalDetails,
+        prefillWithKey: STOREKEYS.MY_PERSONAL_DETAILS,
+    },
+    currentReportName: {
+        key: STOREKEYS.CURRENT_REPORT,
+        path: 'reportName',
+        prefillWithKey: STOREKEYS.CURRENT_REPORT,
+    },
 })(HeaderView);
diff --git a/src/page/HomePage/Report/ReportHistoryView.js b/src/page/HomePage/Report/ReportHistoryView.js
index eb7375c6161b..4806b65289ab 100644
--- a/src/page/HomePage/Report/ReportHistoryView.js
+++ b/src/page/HomePage/Report/ReportHistoryView.js
@@ -12,10 +12,22 @@ const propTypes = {
 
     // These are from WithStore
     bind: PropTypes.func.isRequired,
+    unbind: PropTypes.func.isRequired,
 };
 
 class ReportHistoryView extends React.Component {
     componentDidMount() {
+        this.bindToStore();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.reportID !== this.props.reportID) {
+            this.props.unbind();
+            this.bindToStore();
+        }
+    }
+
+    bindToStore() {
         // Bind this.state.reportHistory to the history in the store
         // and call fetchHistory to load it with data
         this.props.bind(
diff --git a/src/page/HomePage/Report/ReportView.js b/src/page/HomePage/Report/ReportView.js
index 87aff20060d1..c1ff5532215a 100644
--- a/src/page/HomePage/Report/ReportView.js
+++ b/src/page/HomePage/Report/ReportView.js
@@ -20,7 +20,8 @@ const propTypes = {
 
 class ReportView extends React.Component {
     componentDidMount() {
-        this.props.bind(`${STOREKEYS.REPORT}_${this.props.match.params.reportID}`, null, null, 'report', this);
+        const key = `${STOREKEYS.REPORT}_${this.props.match.params.reportID}`;
+        this.props.bind(`${key}$`, null, null, 'report', this, key);
     }
 
     componentDidUpdate(prevProps) {
@@ -28,7 +29,7 @@ class ReportView extends React.Component {
         if (prevProps.match.params.reportID !== this.props.match.params.reportID) {
             this.props.unbind();
             const key = `${STOREKEYS.REPORT}_${this.props.match.params.reportID}`;
-            this.props.bind(key, null, null, 'report', this);
+            this.props.bind(`${key}$`, null, null, 'report', this, key);
         }
     }
 
diff --git a/src/page/HomePage/SidebarLink.js b/src/page/HomePage/SidebarLink.js
index 6430bb321f56..ff1aa0bd7c10 100644
--- a/src/page/HomePage/SidebarLink.js
+++ b/src/page/HomePage/SidebarLink.js
@@ -31,7 +31,7 @@ class SidebarLink extends React.Component {
     }
 
     componentDidMount() {
-        this.props.bind(`${STOREKEYS.REPORT}_${this.props.reportID}`, 'hasUnread', false, 'isUnread', this);
+        this.props.bind(`${STOREKEYS.REPORT}_${this.props.reportID}$`, 'hasUnread', false, 'isUnread', this);
     }
 
     render() {
diff --git a/src/page/HomePage/SidebarView.js b/src/page/HomePage/SidebarView.js
index 9483d61d3608..c5135e9acce0 100644
--- a/src/page/HomePage/SidebarView.js
+++ b/src/page/HomePage/SidebarView.js
@@ -21,5 +21,9 @@ class SidebarView extends React.Component {
 }
 
 export default WithStore({
-    reports: {key: STOREKEYS.REPORTS, loader: fetchAll},
+    reports: {
+        key: STOREKEYS.REPORTS,
+        loader: fetchAll,
+        prefillWithKey: STOREKEYS.REPORTS,
+    },
 })(SidebarView);

From c9e45c17ce1b0252feeb26cbe405faaa9cc0be8b Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 15:19:31 -0600
Subject: [PATCH 38/44] Improve the signature of bind

---
 src/components/WithStore.js                   | 55 +++++++++----------
 src/page/HomePage/Report/ReportHistoryView.js | 17 +++---
 src/page/HomePage/Report/ReportView.js        | 23 ++++++--
 src/page/HomePage/SidebarLink.js              |  9 ++-
 4 files changed, 61 insertions(+), 43 deletions(-)

diff --git a/src/components/WithStore.js b/src/components/WithStore.js
index 5daf1fb7a99b..21d321c16273 100644
--- a/src/components/WithStore.js
+++ b/src/components/WithStore.js
@@ -24,17 +24,7 @@ export default function (mapStoreToStates) {
         }
 
         componentDidMount() {
-            // Subscribe each of the state properties to the proper store key
-            _.each(mapStoreToStates, (mapStoreToState, propertyName) => {
-                const {
-                    key,
-                    path,
-                    prefillWithKey,
-                    loader,
-                    loaderParams
-                } = mapStoreToState;
-                this.bind(key, path, null, propertyName, this.wrappedComponent, prefillWithKey, loader, loaderParams);
-            });
+            this.bindStoreToStates(mapStoreToStates, this.wrappedComponent);
         }
 
         componentWillUnmount() {
@@ -45,25 +35,34 @@ export default function (mapStoreToStates) {
          * 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} path
-         * @param {mixed} defaultValue
-         * @param {string} propertyName
+         * @param {object} mapping
          * @param {object} component
-         * @param {boolean} prefillWithKey whether or not we want to fill the state with existing data from the
-         *                  store
-         * @param {function} [loader] a function to call to load data from the API
-         * @param {mixed[]} [loaderParams] any parameters to pass to the loader function
          */
-        bind(key, path, defaultValue, propertyName, component, prefillWithKey, loader, loaderParams) {
-            this.subscriptionIDs.push(Store.bind(key, path, defaultValue, propertyName, component));
-            if (prefillWithKey) {
-                Store.get(prefillWithKey, path, defaultValue)
-                    .then(data => component.setState({[propertyName]: data}));
-            }
-            if (loader) {
-                loader(...loaderParams || []);
-            }
+        bind(mapping, component) {
+            this.bindStoreToStates(mapping, component);
+        }
+
+        bindStoreToStates(statesToStoreMap, component) {
+            // Subscribe each of the state properties to the proper store key
+            _.each(statesToStoreMap, (stateToStoreMap, propertyName) => {
+                const {
+                    key,
+                    path,
+                    prefillWithKey,
+                    loader,
+                    loaderParams,
+                    defaultValue,
+                } = stateToStoreMap;
+
+                this.subscriptionIDs.push(Store.bind(key, path, defaultValue, propertyName, component));
+                if (prefillWithKey) {
+                    Store.get(prefillWithKey, path, defaultValue)
+                        .then(data => component.setState({[propertyName]: data}));
+                }
+                if (loader) {
+                    loader(...loaderParams || []);
+                }
+            });
         }
 
         /**
diff --git a/src/page/HomePage/Report/ReportHistoryView.js b/src/page/HomePage/Report/ReportHistoryView.js
index 4806b65289ab..6fecbdfe032f 100644
--- a/src/page/HomePage/Report/ReportHistoryView.js
+++ b/src/page/HomePage/Report/ReportHistoryView.js
@@ -30,16 +30,13 @@ class ReportHistoryView extends React.Component {
     bindToStore() {
         // Bind this.state.reportHistory to the history in the store
         // and call fetchHistory to load it with data
-        this.props.bind(
-            `${STOREKEYS.REPORT}_${this.props.reportID}_history`,
-            null,
-            null,
-            'reportHistory',
-            this,
-            null,
-            fetchHistory,
-            [this.props.reportID]
-        );
+        this.props.bind({
+            reportHistory: {
+                key: `${STOREKEYS.REPORT}_${this.props.reportID}_history`,
+                loader: fetchHistory,
+                loaderParams: [this.props.reportID],
+            }
+        }, this);
     }
 
     render() {
diff --git a/src/page/HomePage/Report/ReportView.js b/src/page/HomePage/Report/ReportView.js
index c1ff5532215a..267c51814f97 100644
--- a/src/page/HomePage/Report/ReportView.js
+++ b/src/page/HomePage/Report/ReportView.js
@@ -20,20 +20,35 @@ const propTypes = {
 
 class ReportView extends React.Component {
     componentDidMount() {
-        const key = `${STOREKEYS.REPORT}_${this.props.match.params.reportID}`;
-        this.props.bind(`${key}$`, null, null, 'report', this, key);
+        this.bindToStore();
     }
 
     componentDidUpdate(prevProps) {
         // If the report changed, then we need to re-bind to the store
         if (prevProps.match.params.reportID !== this.props.match.params.reportID) {
             this.props.unbind();
-            const key = `${STOREKEYS.REPORT}_${this.props.match.params.reportID}`;
-            this.props.bind(`${key}$`, null, null, 'report', this, key);
+            this.bindToStore();
         }
     }
 
+    /**
+     * Bind our state to our store. This can't be done with an HOC because props can't be accessed to make the key
+     */
+    bindToStore() {
+        const key = `${STOREKEYS.REPORT}_${this.props.match.params.reportID}`;
+        this.props.bind({
+            report: {
+                // Bind to only the data for the report (which is why there is a $ at the end)
+                key: `${key}$`,
+
+                // Prefill it with the key of the report exactly (because prefilling doesn't work with the regex patterns)
+                prefillWithKey: key,
+            }
+        }, this);
+    }
+
     render() {
+        console.log(this.state);
         // Update the current report in the store so any other components can update
         if (this.state && this.state.report) {
             Store.set(STOREKEYS.CURRENT_REPORT, this.state.report);
diff --git a/src/page/HomePage/SidebarLink.js b/src/page/HomePage/SidebarLink.js
index ff1aa0bd7c10..e445bfa5d35a 100644
--- a/src/page/HomePage/SidebarLink.js
+++ b/src/page/HomePage/SidebarLink.js
@@ -31,7 +31,14 @@ class SidebarLink extends React.Component {
     }
 
     componentDidMount() {
-        this.props.bind(`${STOREKEYS.REPORT}_${this.props.reportID}$`, 'hasUnread', false, 'isUnread', this);
+        this.props.bind({
+            isUnread: {
+                // Bind to ONLY the report object, not the comments (that's why a $ is added at the end of the key name)
+                key: `${STOREKEYS.REPORT}_${this.props.reportID}$`,
+                path: 'hasUnread',
+                defaultValue: false,
+            },
+        }, this);
     }
 
     render() {

From 545be1f8b1e9fee9ca36ff170990417da86c01d3 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 15:26:17 -0600
Subject: [PATCH 39/44] Add a view for displaying history items

---
 src/page/HomePage/Report/ReportHistoryItem.js | 18 ++++++++++++++++++
 src/page/HomePage/Report/ReportHistoryView.js | 12 +++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 src/page/HomePage/Report/ReportHistoryItem.js

diff --git a/src/page/HomePage/Report/ReportHistoryItem.js b/src/page/HomePage/Report/ReportHistoryItem.js
new file mode 100644
index 000000000000..f1e572c6b4c0
--- /dev/null
+++ b/src/page/HomePage/Report/ReportHistoryItem.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import {View, Text} from 'react-native';
+
+const propTypes = {
+};
+
+class ReportHistoryItem extends React.Component {
+    render() {
+        return (
+            <View>
+                <Text>Report History Item</Text>
+            </View>
+        );
+    }
+}
+ReportHistoryItem.propTypes = propTypes;
+
+export default ReportHistoryItem;
diff --git a/src/page/HomePage/Report/ReportHistoryView.js b/src/page/HomePage/Report/ReportHistoryView.js
index 6fecbdfe032f..17ed38914d83 100644
--- a/src/page/HomePage/Report/ReportHistoryView.js
+++ b/src/page/HomePage/Report/ReportHistoryView.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import {View, Text} from 'react-native';
 import PropTypes from 'prop-types';
+import _ from 'underscore';
 import styles from '../../../style/StyleSheet';
 import {fetchHistory} from '../../../store/actions/ReportActions';
 import WithStore from '../../../components/WithStore';
 import STOREKEYS from '../../../store/STOREKEYS';
+import ReportHistoryItem from './ReportHistoryItem';
 
 const propTypes = {
     // The ID of the report being looked at
@@ -42,7 +44,15 @@ class ReportHistoryView extends React.Component {
     render() {
         return (
             <View style={styles.flexColumn}>
-                <Text>Report History View</Text>
+                {this.state && this.state.reportHistory && this.state.reportHistory.length === 0 && (
+                    <Text>Be the first person to comment!</Text>
+                )}
+                {this.state && this.state.reportHistory && this.state.reportHistory.length > 0 && _.map(this.state.reportHistory, reportHistoryItem => (
+                    <ReportHistoryItem
+                        key={reportHistoryItem.sequenceNumber}
+                        data={reportHistoryItem}
+                    />
+                ))}
             </View>
         );
     }

From 1807767ca25fc61fe0a65a4029ce1df75c96131b Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 15:33:09 -0600
Subject: [PATCH 40/44] Add some more views for displaying history items

---
 .../Report/HistoryFragmentPropTypes.js        | 27 +++++++++++++++++++
 src/page/HomePage/Report/ReportHistoryItem.js |  9 +++++--
 .../Report/ReportHistoryItemSingle.js         | 22 +++++++++++++++
 .../Report/ReportHistoryPropsTypes.js         | 20 ++++++++++++++
 src/page/HomePage/Report/ReportHistoryView.js |  2 +-
 5 files changed, 77 insertions(+), 3 deletions(-)
 create mode 100644 src/page/HomePage/Report/HistoryFragmentPropTypes.js
 create mode 100644 src/page/HomePage/Report/ReportHistoryItemSingle.js
 create mode 100644 src/page/HomePage/Report/ReportHistoryPropsTypes.js

diff --git a/src/page/HomePage/Report/HistoryFragmentPropTypes.js b/src/page/HomePage/Report/HistoryFragmentPropTypes.js
new file mode 100644
index 000000000000..9b495a399e70
--- /dev/null
+++ b/src/page/HomePage/Report/HistoryFragmentPropTypes.js
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+
+export default PropTypes.shape({
+    // The type of the history fragment. Used to render a corresponding component
+    type: PropTypes.string.isRequired,
+
+    // The text content of the fragment.
+    text: PropTypes.string.isRequired,
+
+    // Used to apply additional styling. Style refers to a predetermined constant and not a class name. e.g. 'normal' or 'strong'
+    style: PropTypes.string,
+
+    // ID of a report
+    reportID: PropTypes.number,
+
+    // ID of a policy
+    policyID: PropTypes.string,
+
+    // The target of a link fragment e.g. '_blank'
+    target: PropTypes.string,
+
+    // The destination of a link fragment e.g. 'https://www.expensify.com'
+    href: PropTypes.string,
+
+    // An additional avatar url - not the main avatar url but used within a message.
+    iconUrl: PropTypes.string,
+});
diff --git a/src/page/HomePage/Report/ReportHistoryItem.js b/src/page/HomePage/Report/ReportHistoryItem.js
index f1e572c6b4c0..b1d04628f420 100644
--- a/src/page/HomePage/Report/ReportHistoryItem.js
+++ b/src/page/HomePage/Report/ReportHistoryItem.js
@@ -1,14 +1,19 @@
 import React from 'react';
-import {View, Text} from 'react-native';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import ReportHistoryItemSingle from './ReportHistoryItemSingle';
+import ReportHistoryPropsTypes from './ReportHistoryPropsTypes';
 
 const propTypes = {
+    // All the data of the history item
+    historyItem: PropTypes.shape(ReportHistoryPropsTypes).isRequired,
 };
 
 class ReportHistoryItem extends React.Component {
     render() {
         return (
             <View>
-                <Text>Report History Item</Text>
+                <ReportHistoryItemSingle historyItem={this.props.historyItem} />
             </View>
         );
     }
diff --git a/src/page/HomePage/Report/ReportHistoryItemSingle.js b/src/page/HomePage/Report/ReportHistoryItemSingle.js
new file mode 100644
index 000000000000..af109c04cb56
--- /dev/null
+++ b/src/page/HomePage/Report/ReportHistoryItemSingle.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import {View, Text} from 'react-native';
+import PropTypes from 'prop-types';
+import ReportHistoryPropsTypes from './ReportHistoryPropsTypes';
+
+const propTypes = {
+    // All the data of the history item
+    historyItem: PropTypes.shape(ReportHistoryPropsTypes).isRequired,
+};
+
+class ReportHistoryItemSingle extends React.Component {
+    render() {
+        return (
+            <View>
+                <Text>Single history item</Text>
+            </View>
+        );
+    }
+}
+ReportHistoryItemSingle.propTypes = propTypes;
+
+export default ReportHistoryItemSingle;
diff --git a/src/page/HomePage/Report/ReportHistoryPropsTypes.js b/src/page/HomePage/Report/ReportHistoryPropsTypes.js
new file mode 100644
index 000000000000..3d03f869ea4e
--- /dev/null
+++ b/src/page/HomePage/Report/ReportHistoryPropsTypes.js
@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+
+import HistoryFragmentPropTypes from './HistoryFragmentPropTypes';
+
+export default {
+    // Name of the action e.g. ADDCOMMENT
+    actionName: PropTypes.string.isRequired,
+
+    // Person who created the action
+    person: PropTypes.arrayOf(HistoryFragmentPropTypes).isRequired,
+
+    // ID of the report action
+    sequenceNumber: PropTypes.number.isRequired,
+
+    // Unix timestamp
+    timestamp: PropTypes.number.isRequired,
+
+    // Report history message
+    message: PropTypes.arrayOf(HistoryFragmentPropTypes).isRequired,
+};
diff --git a/src/page/HomePage/Report/ReportHistoryView.js b/src/page/HomePage/Report/ReportHistoryView.js
index 17ed38914d83..42e4b8daddb1 100644
--- a/src/page/HomePage/Report/ReportHistoryView.js
+++ b/src/page/HomePage/Report/ReportHistoryView.js
@@ -50,7 +50,7 @@ class ReportHistoryView extends React.Component {
                 {this.state && this.state.reportHistory && this.state.reportHistory.length > 0 && _.map(this.state.reportHistory, reportHistoryItem => (
                     <ReportHistoryItem
                         key={reportHistoryItem.sequenceNumber}
-                        data={reportHistoryItem}
+                        historyItem={reportHistoryItem}
                     />
                 ))}
             </View>

From 22aa79e6d4fa5fdbe2f99f726dc254c2a8d6e18c Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 16:04:43 -0600
Subject: [PATCH 41/44] Display history fragments

---
 ...s.js => ReportHistoryFragmentPropTypes.js} |  0
 .../HomePage/Report/ReportHistoryItemDate.js  | 24 +++++
 .../Report/ReportHistoryItemFragment.js       | 96 +++++++++++++++++++
 .../Report/ReportHistoryItemMessage.js        | 30 ++++++
 .../Report/ReportHistoryItemSingle.js         |  5 +-
 .../Report/ReportHistoryPropsTypes.js         |  2 +-
 src/page/HomePage/Report/ReportHistoryView.js | 11 ++-
 src/page/HomePage/Report/ReportView.js        |  4 +-
 8 files changed, 165 insertions(+), 7 deletions(-)
 rename src/page/HomePage/Report/{HistoryFragmentPropTypes.js => ReportHistoryFragmentPropTypes.js} (100%)
 create mode 100644 src/page/HomePage/Report/ReportHistoryItemDate.js
 create mode 100644 src/page/HomePage/Report/ReportHistoryItemFragment.js
 create mode 100644 src/page/HomePage/Report/ReportHistoryItemMessage.js

diff --git a/src/page/HomePage/Report/HistoryFragmentPropTypes.js b/src/page/HomePage/Report/ReportHistoryFragmentPropTypes.js
similarity index 100%
rename from src/page/HomePage/Report/HistoryFragmentPropTypes.js
rename to src/page/HomePage/Report/ReportHistoryFragmentPropTypes.js
diff --git a/src/page/HomePage/Report/ReportHistoryItemDate.js b/src/page/HomePage/Report/ReportHistoryItemDate.js
new file mode 100644
index 000000000000..801fcf692406
--- /dev/null
+++ b/src/page/HomePage/Report/ReportHistoryItemDate.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Text} from 'react-native';
+import DateUtils from '../../../lib/DateUtils';
+
+const propTypes = {
+    // UTC timestamp for when the action was created
+    timestamp: PropTypes.number.isRequired,
+};
+
+class ReportHistoryItemDate extends React.Component {
+    render() {
+        return (
+            <Text className="chat-item__date">
+                {DateUtils.timestampToRelative(this.props.timestamp)}
+            </Text>
+        );
+    }
+}
+
+ReportHistoryItemDate.propTypes = propTypes;
+ReportHistoryItemDate.displayName = 'ReportHistoryItemDate';
+
+export default ReportHistoryItemDate;
diff --git a/src/page/HomePage/Report/ReportHistoryItemFragment.js b/src/page/HomePage/Report/ReportHistoryItemFragment.js
new file mode 100644
index 000000000000..ab1b78e01593
--- /dev/null
+++ b/src/page/HomePage/Report/ReportHistoryItemFragment.js
@@ -0,0 +1,96 @@
+import React from 'react';
+import {Text} from 'react-native';
+import Str from '../../../lib/Str';
+import ReportHistoryFragmentPropTypes from './ReportHistoryFragmentPropTypes';
+
+const propTypes = {
+    // The message fragment needing to be displayed
+    fragment: ReportHistoryFragmentPropTypes.isRequired,
+};
+
+const ReportHistoryItemFragment = ({fragment}) => {
+    const styleClass = fragment.style === 'strong' ? 'quote' : '';
+    switch (fragment.type) {
+        case 'COMMENT':
+            return <Text>{Str.htmlDecode(fragment.text)}</Text>;
+            // return fragment.html
+            //     ? (
+            //         <Text
+            //             dangerouslySetInnerHTML={{__html: Str.nl2br(fragment.html)}}
+            //         />
+            //         // <ClickCapturer
+            //         //     html={fragment.html}
+            //         //     onImageClick={(img) => {
+            //         //         const src = get(img, ['dataset', 'expensifySource'], img.src);
+            //         //         PubSub.publish(EVENT.REPORT.SHOW_ATTACHMENT, {src});
+            //         //     }}
+            //         // />
+            //     )
+            //     : <Text>{Str.htmlDecode(fragment.text)}</Text>;
+        case 'TEXT':
+            return <Text className={styleClass}>{Str.htmlDecode(fragment.text)}</Text>;
+        case 'LINK':
+            return <Text>LINK</Text>;
+            // return (
+            //     <a
+            //         className={styleClass}
+            //         href={fragment.href}
+            //         rel="noopener noreferrer"
+            //         target={fragment.target}
+            //     >
+            //         {Str.htmlDecode(fragment.text)}
+            //     </a>
+            // );
+        case 'INTEGRATION_COMMENT':
+            return <Text>REPORT_LINK</Text>;
+            // return (
+            //     <div>
+            //         <div className="history-integration-item">
+            //             <div className="history-integration-item__icon">
+            //                 <img
+            //                     className="avatar"
+            //                     src={fragment.iconUrl}
+            //                     alt="Integration Icon"
+            //                 />
+            //             </div>
+            //             <div
+            //                 dangerouslySetInnerHTML={{__html: Str.nl2br(fragment.text)}}
+            //             />
+            //         </div>
+            //     </div>
+            // );
+        case 'REPORT_LINK':
+            return <Text>REPORT_LINK</Text>;
+            // return (
+            //     <ChangePageLink
+            //         text={fragment.text}
+            //         ariaLabel={`navigate to report ${fragment.text}`}
+            //         page="report"
+            //         param={{pageReportID: fragment.reportID, keepCollection: true}}
+            //     />
+            // );
+        case 'POLICY_LINK':
+            return <Text>POLICY_LINK</Text>;
+            // return (
+            //     <ChangePageLink
+            //         ariaLabel={`navigate to policy ${fragment.text}`}
+            //         text={fragment.text}
+            //         page="policy"
+            //         param={{policyID: fragment.policyID}}
+            //     />
+            // );
+
+        // If we have a message fragment type of OLD_MESSAGE this means we have not yet converted this over to the new data structure
+        // So we simply set this message as inner html and render it like we did before. This wil allow us to convert messages over to the new
+        // structure without needing to do it all at once.
+        case 'OLD_MESSAGE':
+            return <Text>OLD_MESSAGE</Text>;
+        default:
+            return <Text>fragment.text</Text>;
+    }
+};
+
+ReportHistoryItemFragment.propTypes = propTypes;
+ReportHistoryItemFragment.displayName = 'ReportHistoryItemFragment';
+
+export default ReportHistoryItemFragment;
diff --git a/src/page/HomePage/Report/ReportHistoryItemMessage.js b/src/page/HomePage/Report/ReportHistoryItemMessage.js
new file mode 100644
index 000000000000..304995d22297
--- /dev/null
+++ b/src/page/HomePage/Report/ReportHistoryItemMessage.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import ReportHistoryItemFragment from './ReportHistoryItemFragment';
+import ReportHistoryPropsTypes from './ReportHistoryPropsTypes';
+
+const propTypes = {
+    // The report history item
+    historyItem: PropTypes.shape(ReportHistoryPropsTypes).isRequired,
+};
+
+class ReportHistoryItemMessage extends React.Component {
+    render() {
+        return (
+            <>
+                {_.map(_.compact(this.props.historyItem.message), fragment => (
+                    <ReportHistoryItemFragment
+                        key={_.uniqueId('historyItemFragment', this.props.historyItem.sequenceNumber)}
+                        fragment={fragment}
+                    />
+                ))}
+            </>
+        );
+    }
+}
+
+ReportHistoryItemMessage.propTypes = propTypes;
+ReportHistoryItemMessage.displayName = 'ReportHistoryItemMessage';
+
+export default ReportHistoryItemMessage;
diff --git a/src/page/HomePage/Report/ReportHistoryItemSingle.js b/src/page/HomePage/Report/ReportHistoryItemSingle.js
index af109c04cb56..b0214be6614d 100644
--- a/src/page/HomePage/Report/ReportHistoryItemSingle.js
+++ b/src/page/HomePage/Report/ReportHistoryItemSingle.js
@@ -1,7 +1,8 @@
 import React from 'react';
-import {View, Text} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import ReportHistoryPropsTypes from './ReportHistoryPropsTypes';
+import ReportHistoryItemMessage from './ReportHistoryItemMessage';
 
 const propTypes = {
     // All the data of the history item
@@ -12,7 +13,7 @@ class ReportHistoryItemSingle extends React.Component {
     render() {
         return (
             <View>
-                <Text>Single history item</Text>
+                <ReportHistoryItemMessage historyItem={this.props.historyItem} />
             </View>
         );
     }
diff --git a/src/page/HomePage/Report/ReportHistoryPropsTypes.js b/src/page/HomePage/Report/ReportHistoryPropsTypes.js
index 3d03f869ea4e..7b1e7ffd2ebb 100644
--- a/src/page/HomePage/Report/ReportHistoryPropsTypes.js
+++ b/src/page/HomePage/Report/ReportHistoryPropsTypes.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-import HistoryFragmentPropTypes from './HistoryFragmentPropTypes';
+import HistoryFragmentPropTypes from './ReportHistoryFragmentPropTypes';
 
 export default {
     // Name of the action e.g. ADDCOMMENT
diff --git a/src/page/HomePage/Report/ReportHistoryView.js b/src/page/HomePage/Report/ReportHistoryView.js
index 42e4b8daddb1..82e77e4a53cd 100644
--- a/src/page/HomePage/Report/ReportHistoryView.js
+++ b/src/page/HomePage/Report/ReportHistoryView.js
@@ -2,6 +2,7 @@ import React from 'react';
 import {View, Text} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
+import lodashGet from 'lodash.get';
 import styles from '../../../style/StyleSheet';
 import {fetchHistory} from '../../../store/actions/ReportActions';
 import WithStore from '../../../components/WithStore';
@@ -42,12 +43,18 @@ class ReportHistoryView extends React.Component {
     }
 
     render() {
+        const reportHistory = lodashGet(this.state, 'reportHistory');
+
+        // Only display the history items that are comments
+        const filteredHistory = _.filter(reportHistory, historyItem => historyItem.actionName === 'ADDCOMMENT');
+
         return (
             <View style={styles.flexColumn}>
-                {this.state && this.state.reportHistory && this.state.reportHistory.length === 0 && (
+                {filteredHistory.length === 0 && (
                     <Text>Be the first person to comment!</Text>
                 )}
-                {this.state && this.state.reportHistory && this.state.reportHistory.length > 0 && _.map(this.state.reportHistory, reportHistoryItem => (
+                {filteredHistory.length > 0
+                && _.map(filteredHistory, reportHistoryItem => (
                     <ReportHistoryItem
                         key={reportHistoryItem.sequenceNumber}
                         historyItem={reportHistoryItem}
diff --git a/src/page/HomePage/Report/ReportView.js b/src/page/HomePage/Report/ReportView.js
index 267c51814f97..f3b7698e4137 100644
--- a/src/page/HomePage/Report/ReportView.js
+++ b/src/page/HomePage/Report/ReportView.js
@@ -41,14 +41,14 @@ class ReportView extends React.Component {
                 // Bind to only the data for the report (which is why there is a $ at the end)
                 key: `${key}$`,
 
-                // Prefill it with the key of the report exactly (because prefilling doesn't work with the regex patterns)
+                // Prefill it with the key of the report exactly
+                // (because prefilling doesn't work with the regex patterns)
                 prefillWithKey: key,
             }
         }, this);
     }
 
     render() {
-        console.log(this.state);
         // Update the current report in the store so any other components can update
         if (this.state && this.state.report) {
             Store.set(STOREKEYS.CURRENT_REPORT, this.state.report);

From c8384abdcbe99840196bcca83237baaaadcad98e Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 16:13:14 -0600
Subject: [PATCH 42/44] Better comment

---
 src/components/WithStore.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/WithStore.js b/src/components/WithStore.js
index 21d321c16273..a4cf95b89603 100644
--- a/src/components/WithStore.js
+++ b/src/components/WithStore.js
@@ -33,7 +33,11 @@ export default function (mapStoreToStates) {
 
         /**
          * 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
+         * mapStoreToStates to this HOC. For example: if the key that you want to subscribe to has a piece of
+         * information that can only come from the component's props, then you want to use bind() directly from inside
+         * componentDidMount(). All subscriptions will automatically be unbound when unmounted.
+         *
+         * The options passed to bind are the exact same that you would pass to the HOC.
          *
          * @param {object} mapping
          * @param {object} component

From a813cde23f787cf70030e2359dc79efc199f42e5 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Sun, 9 Aug 2020 16:40:34 -0600
Subject: [PATCH 43/44] Fix a semi-broken home page

---
 src/page/HomePage/Report/ReportView.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/page/HomePage/Report/ReportView.js b/src/page/HomePage/Report/ReportView.js
index f3b7698e4137..ea3de2881d9d 100644
--- a/src/page/HomePage/Report/ReportView.js
+++ b/src/page/HomePage/Report/ReportView.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import * as Store from '../../../store/Store';
-import {withRouter} from '../../../lib/Router';
+import {withRouter, Route} from '../../../lib/Router';
 import WithStore from '../../../components/WithStore';
 import STOREKEYS from '../../../store/STOREKEYS';
 import styles from '../../../style/StyleSheet';
@@ -57,7 +57,9 @@ class ReportView extends React.Component {
         return (
             <View>
                 <View style={styles.flexGrow1}>
-                    <ReportHistoryView reportID={this.props.match.params.reportID} />
+                    <Route path="/:reportID" exact>
+                        <ReportHistoryView reportID={this.props.match.params.reportID} />
+                    </Route>
                 </View>
             </View>
         );

From 798135c83b606879d6e0b737ae595d06240cfee1 Mon Sep 17 00:00:00 2001
From: andrew <andrew@expensify.com>
Date: Sun, 9 Aug 2020 17:06:46 -0700
Subject: [PATCH 44/44] Apply mobile fixes

---
 src/Expensify.js                 |  5 +++--
 src/page/HomePage/SidebarLink.js | 10 ++++++----
 src/style/StyleSheet.js          |  9 ++++++---
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/Expensify.js b/src/Expensify.js
index 92cdfeda3329..74b0cb7683de 100644
--- a/src/Expensify.js
+++ b/src/Expensify.js
@@ -20,7 +20,8 @@ Store.init();
 class Expensify extends Component {
     render() {
         return (
-            <Beforeunload onBeforeunload={ActiveClientManager.removeClient}>
+            // TODO: Mobile does not support Beforeunload
+            // <Beforeunload onBeforeunload={ActiveClientManager.removeClient}>
                 <Router>
                     {/* If there is ever a property for redirecting, we do the redirect here */}
                     {this.state && this.state.redirectTo && <Redirect to={this.state.redirectTo} />}
@@ -30,7 +31,7 @@ class Expensify extends Component {
                         <Route path="/" component={HomePage} />
                     </Switch>
                 </Router>
-            </Beforeunload>
+            // </Beforeunload>
         );
     }
 }
diff --git a/src/page/HomePage/SidebarLink.js b/src/page/HomePage/SidebarLink.js
index e445bfa5d35a..4205e3554197 100644
--- a/src/page/HomePage/SidebarLink.js
+++ b/src/page/HomePage/SidebarLink.js
@@ -50,10 +50,12 @@ class SidebarLink extends React.Component {
         return (
             <View style={linkWrapperActiveStyle}>
                 <Link to={`/${this.props.reportID}`} style={linkActiveStyle}>
-                    <Text style={textActiveStyle}>{this.props.reportName}</Text>
-                    {this.state.isUnread && (
-                        <Text style={textActiveStyle}>- Unread</Text>
-                    )}
+                    <View>
+                        <Text style={textActiveStyle}>{this.props.reportName}</Text>
+                        {this.state.isUnread && (
+                            <Text style={textActiveStyle}>- Unread</Text>
+                        )}
+                    </View>
                 </Link>
             </View>
         );
diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index 091350014b2a..7c41d07791ce 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -42,15 +42,18 @@ const styles = {
         padding: 8,
     },
     sidebarLink: {
-        padding: '.5rem 1rem',
+        // TODO: Mobile does not support rem values
+        // padding: '.5rem 1rem',
         textDecorationLine: 'none',
     },
     sidebarLinkActive: {
         backgroundColor: '#007bff',
-        borderRadius: '.25rem',
+        // TODO: Mobile does not support rem values
+        // borderRadius: '.25rem',
     },
     sidebarLinkActiveAnchor: {
-        padding: '.5rem 1rem',
+        // TODO: Mobile does not support rem values
+        // padding: '.5rem 1rem',
         textDecorationLine: 'none',
     },
     sidebarLinkText: {