Add a chat switcher to the LHN

src/Expensify.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 // import {Beforeunload} from 'react-beforeunload';
 import SignInPage from './page/SignInPage';
-import HomePage from './page/HomePage/HomePage';
+import HomePage from './page/home/HomePage';
 import Ion from './lib/Ion';
 import * as ActiveClientManager from './lib/ActiveClientManager';
 import {verifyAuthToken} from './lib/actions/Session';

src/components/AnchorForCommentsOnly/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import _ from 'underscore';
+import {StyleSheet} from 'react-native';
 
 /**
  * Text based component that is passed a URL to open onPress
@@ -38,18 +38,18 @@ const AnchorForCommentsOnly = ({
     children,
     style,
     ...props
-}) => {
-    // If the style prop is an array of styles, we need to mix them all together
-    const mergedStyles = !_.isArray(style) ? style : _.reduce(style, (finalStyles, s) => ({
-        ...finalStyles,
-        ...s
-    }), {});
-
-    return (
+}) => (
+    <a
+        style={StyleSheet.flatten(style)}
+        href={href}
+        rel={rel}
+        target={target}
         // eslint-disable-next-line react/jsx-props-no-spreading
-        <a style={mergedStyles} href={href} rel={rel} target={target} {...props}>{children}</a>
-    );
-};
+        {...props}
+    >
+        {children}
+    </a>
+);
 
 AnchorForCommentsOnly.propTypes = propTypes;
 AnchorForCommentsOnly.defaultProps = defaultProps;

src/components/AnchorForCommentsOnly/index.native.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import _ from 'underscore';
-import {Linking, Text} from 'react-native';
+import {Linking, StyleSheet, Text} from 'react-native';
 
 /**
  * Text based component that is passed a URL to open onPress
@@ -40,18 +39,10 @@ const AnchorForCommentsOnly = ({
     children,
     style,
     ...props
-}) => {
-    // If the style prop is an array of styles, we need to mix them all together
-    const mergedStyles = !_.isArray(style) ? style : _.reduce(style, (finalStyles, s) => ({
-        ...finalStyles,
-        ...s
-    }), {});
-
-    return (
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        <Text style={[mergedStyles]} onPress={() => Linking.openURL(href)} {...props}>{children}</Text>
-    );
-};
+}) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <Text style={StyleSheet.flatten(style)} onPress={() => Linking.openURL(href)} {...props}>{children}</Text>
+);
 
 AnchorForCommentsOnly.propTypes = propTypes;
 AnchorForCommentsOnly.defaultProps = defaultProps;

src/components/TextInputWithFocusStyles.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import {TextInput, StyleSheet} from 'react-native';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+
+const propTypes = {
+    // A ref to forward to the text input
+    forwardedRef: PropTypes.func.isRequired,
+
+    // Styles to apply to the text input when it has focus
+    // eslint-disable-next-line react/forbid-prop-types
+    styleFocusIn: PropTypes.any,
+
+    // Styles to apply to the text input when it does not have focus
+    // eslint-disable-next-line react/forbid-prop-types
+    styleFocusOut: PropTypes.any,
+
+    // General styles to apply to the text input
+    // eslint-disable-next-line react/forbid-prop-types
+    style: PropTypes.any,
+
+    // A function to call when the input has been blurred
+    onBlur: PropTypes.func.isRequired,
+
+    // A function to call when the input has gotten focus
+    onFocus: PropTypes.func.isRequired,
+};
+const defaultProps = {
+    styleFocusIn: null,
+    styleFocusOut: null,
+    style: null,
+};
+
+class TextInputWithFocusStyles extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isFocused: false,
+        };
+    }
+
+    render() {
+        // Make full objects out of both the style coming from props, and the style we have in the state
+        const propStyles = StyleSheet.flatten(this.props.style);
+        const focusedStyle = this.state.isFocused
+            ? StyleSheet.flatten(this.props.styleFocusIn)
+            : StyleSheet.flatten(this.props.styleFocusOut);
+
+        // Merge the two styles together
+        const style = StyleSheet.compose(propStyles, focusedStyle);
+
+        // Omit the props that are used in this intermediary component and only pass down the props that
+        // are necessary
+        const propsToPassToTextInput = _.omit(this.props, [
+            'focusInStyle',
+            'focusOutStyle',
+            'onFocus',
+            'onBlur',
+            'style',
+        ]);
+        return (
+            <TextInput
+                ref={this.props.forwardedRef}
+                style={style}
+                onFocus={() => {
+                    this.setState({isFocused: true});
+                    this.props.onFocus();
+                }}
+                onBlur={() => {
+                    this.setState({isFocused: false});
+                    this.props.onBlur();
+                }}
+                /* eslint-disable-next-line react/jsx-props-no-spreading */
+                {...propsToPassToTextInput}
+            />
+        );
+    }
+}
+
+TextInputWithFocusStyles.propTypes = propTypes;
+TextInputWithFocusStyles.defaultProps = defaultProps;
+
+export default React.forwardRef((props, ref) => (
+    /* eslint-disable-next-line react/jsx-props-no-spreading */
+    <TextInputWithFocusStyles {...props} forwardedRef={ref} />
+));

src/components/withIon.js

@@ -145,7 +145,7 @@ export default function (mapIonToState) {
             }
         }
 
-        withIon.displayName = `WithIon(${getDisplayName(WrappedComponent)})`;
+        withIon.displayName = `withIon(${getDisplayName(WrappedComponent)})`;
         return withIon;
     };
 }

src/lib/KeyboardShortcut/index.js

@@ -0,0 +1,93 @@
+import _ from 'underscore';
+
+const events = {};
+
+/**
+ * Checks if an event for that key is configured and if so, runs it.
+ * @param {Event} event
+ */
+function bindHandlerToKeyupEvent(event) {
+    if (events[event.keyCode] === undefined) {
+        return;
+    }
+
+    // The active callback is the last element in the array
+    const eventCallbacks = events[event.keyCode];
+    const callback = eventCallbacks[eventCallbacks.length - 1];
+
+    const pressedModifiers = _.all(callback.modifiers, (modifier) => {
+        if (modifier === 'shift' && !event.shiftKey) {
+            return false;
+        }
+        if (modifier === 'control' && !event.ctrlKey) {
+            return false;
+        }
+        if (modifier === 'alt' && !event.altKey) {
+            return false;
+        }
+        if (modifier === 'meta' && !event.metaKey) {
+            return false;
+        }
+        return true;
+    });
+
+    if (!pressedModifiers) {
+        return;
+    }
+
+    // If configured to do so, prevent input text control to trigger this event
+    if (!callback.captureOnInputs && (
+        event.target.nodeName === 'INPUT'
+        || event.target.nodeName === 'TEXTAREA'
+        || event.target.contentEditable === 'true'
+    )) {
+        return;
+    }
+
+    if (_.isFunction(callback.callback)) {
+        callback.callback(event);
+    }
+    event.preventDefault();
+}
+
+// Make sure we don't add multiple listeners
+document.removeEventListener('keydown', bindHandlerToKeyupEvent);
+document.addEventListener('keydown', bindHandlerToKeyupEvent);
+
+/**
+ * Module storing the different keyboard shortcut
+ *
+ * We are using a push/pop model where new event are pushed at the end of an
+ * array of events. When the event occur, we trigger the callback of the last
+ * element. This allow us to replace shortcut from a page to a dialog without
+ * having the page having to handle that logic.
+ *
+ * This is also following the convention of the PubSub module.
+ * The "subClass" is used by pages to bind /unbind with no worries
+ */
+const KeyboardShortcut = {
+    /**
+     * Subscribes to a keyboard event.
+     * @param {string} key The key code to watch
+     * @param {function} callback The callback to call
+     * @param {string|array} modifiers Can either be shift or control
+     * @param {bool} captureOnInputs Should we capture the event on inputs too?
+     */
+    subscribe(key, callback, modifiers = 'shift', captureOnInputs = false) {
+        const keyCode = key.charCodeAt(0);
+        if (events[keyCode] === undefined) {
+            events[keyCode] = [];
+        }
+        events[keyCode].push({callback, modifiers: _.isArray(modifiers) ? modifiers : [modifiers], captureOnInputs});
+    },
+
+    /**
+     * Unsubscribes to a keyboard event.
+     * @param {int} keyCode The key code to stop watching
+     */
+    unsubscribe(keyCode) {
+        delete events[keyCode];
+    }
+};
+
+export default KeyboardShortcut;

src/lib/KeyboardShortcut/index.native.js

@@ -0,0 +1,10 @@
+/**
+ * This is a no-op component for native devices because they wouldn't be able to support keyboard shortcuts like
+ * a website.
+ */
+const KeyboardShortcut = {
+    subscribe() {},
+    unsubscribe() {},
+};
+
+export default KeyboardShortcut;

src/lib/Str.js

@@ -61,6 +61,17 @@ const Str = {
     generateDeviceLoginID() {
         return `react-native-chat-${Guid()}`;
     },
+
+    /**
+     * Escapes all special RegExp characters from a string
+     *
+     * @param {String} string The subject
+     *
+     * @returns {String} The escaped string
+     */
+    escapeForRegExp(string) {
+        return string.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
+    },
 };
 
 export default Str;

src/lib/actions/PersonalDetails.js

@@ -78,7 +78,7 @@ function fetch() {
             // Get my personal details so they can be easily accessed and subscribed to on their own key
             myPersonalDetails = allPersonalDetails[currentLogin] || {};
 
-            return Ion.set(IONKEYS.PERSONAL_DETAILS, allPersonalDetails);
+            return Ion.merge(IONKEYS.PERSONAL_DETAILS, allPersonalDetails);
         })
         .then(() => Ion.merge(IONKEYS.MY_PERSONAL_DETAILS, myPersonalDetails))
         .catch((error) => {