Begin porting the web POC to react native

package.json

@@ -13,10 +13,13 @@
   },
   "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",
+    "prop-types": "^15.7.2",
     "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",

src/CONFIG.js

@@ -1,8 +1,10 @@
 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 {
+    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',

src/CONST.js

@@ -0,0 +1,5 @@
+const CONST = {
+    CLOUDFRONT_URL: 'https://d2k5nsl2zxldvw.cloudfront.net',
+};
+
+export default CONST;

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>
         );
     }
 }

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} />;
+        }
+    };
+}

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
+};

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));
 }
 
 /**
@@ -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 {

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,

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);
     },
 
     /**