Make LHN rows look the same as chatswitcher ones

README.md

@@ -117,7 +117,7 @@ This is a persistent storage solution wrapped in a Pub/Sub library. In general t
 
 - Onyx stores and retrieves data from persistent storage
 - Data is stored as key/value pairs, where the value can be anything from a single piece of data to a complex object
-- Collections of data are usually not stored as a single key (eg. an array with multiple objects), but as individual keys+ID (eg. `report_1234`, `report_4567`, etc.). Store collections as individual keys when a component will bind directly to one of those keys. For example: reports are stored as individual keys because `SidebarLink.js` binds to the individual report keys for each link. However, report actions are stored as an array of objects because nothing binds directly to a single report action.
+- Collections of data are usually not stored as a single key (eg. an array with multiple objects), but as individual keys+ID (eg. `report_1234`, `report_4567`, etc.). Store collections as individual keys when a component will bind directly to one of those keys. For example: reports are stored as individual keys because `ChatLinkRow.js` binds to the individual report keys for each link. However, report actions are stored as an array of objects because nothing binds directly to a single report action.
 - Onyx allows other code to subscribe to changes in data, and then publishes change events whenever data is changed
 - Anything needing to read Onyx data needs to:
     1. Know what key the data is stored in (for web, you can find this by looking in the JS console > Application > local storage)

src/pages/home/sidebar/ChatLinkRow.js

@@ -0,0 +1,131 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+    Image,
+    Text,
+    TouchableOpacity,
+    View,
+} from 'react-native';
+import styles from '../../../styles/StyleSheet';
+import ChatSwitcherOptionPropTypes from './ChatSwitcherOptionPropTypes';
+import ROUTES from '../../../ROUTES';
+import PressableLink from '../../../components/PressableLink';
+
+const propTypes = {
+    // Option to allow the user to choose from can be type 'report' or 'user'
+    option: ChatSwitcherOptionPropTypes.isRequired,
+
+    // Whether this option is currently in focus so we can modify its style
+    optionIsFocused: PropTypes.bool.isRequired,
+
+    // A function that is called when an option is selected. Selected option is passed as a param
+    onSelectRow: PropTypes.func.isRequired,
+
+    // Callback that adds a user to the pending list of Group DM users
+    onAddToGroup: PropTypes.func,
+
+    // A flag to indicate whether this comes from the Chat Switcher so we can display the group button
+    isChatSwitcher: PropTypes.bool,
+};
+
+const defaultProps = {
+    onAddToGroup: () => {},
+    isChatSwitcher: false,
+};
+
+const ChatLinkRow = ({
+    option,
+    optionIsFocused,
+    onSelectRow,
+    onAddToGroup,
+    isChatSwitcher,
+}) => {
+    const isUserRow = option.type === 'user';
+    const textStyle = optionIsFocused
+        ? styles.sidebarLinkActiveText
+        : styles.sidebarLinkText;
+    const textUnreadStyle = option.isUnread
+        ? [textStyle, styles.sidebarLinkTextUnread] : [textStyle];
+    return (
+        <View
+            style={[
+                styles.flexRow,
+                styles.alignItemsCenter,
+                styles.flexJustifySpaceBetween,
+                styles.sidebarLink,
+                styles.sidebarLinkInner,
+                optionIsFocused ? styles.sidebarLinkActive : null
+            ]}
+        >
+            <PressableLink
+                onClick={() => onSelectRow(option)}
+                to={ROUTES.getReportRoute(option.reportID)}
+                style={styles.textDecorationNoLine}
+            >
+                <TouchableOpacity
+                    onPress={() => onSelectRow(option)}
+                    style={[
+                        styles.flexGrow1,
+                        styles.chatSwitcherItemAvatarNameWrapper,
+                    ]}
+                >
+                    <View
+                        style={[
+                            styles.flexRow,
+                            styles.alignItemsCenter,
+                        ]}
+                    >
+                        {
+                            option.icon
+                            && (
+                                <View style={[styles.chatSwitcherAvatar, styles.mr2]}>
+                                    <Image
+                                        source={{uri: option.icon}}
+                                        style={[styles.chatSwitcherAvatarImage]}
+                                    />
+                                </View>
+                            )
+                        }
+                        <View style={[styles.flex1]}>
+                            {option.text === option.alternateText ? (
+                                <Text style={textUnreadStyle} numberOfLines={1}>
+                                    {option.alternateText}
+                                </Text>
+                            ) : (
+                                <>
+                                    <Text style={textUnreadStyle} numberOfLines={1}>
+                                        {option.text}
+                                    </Text>
+                                    <Text style={[textStyle, styles.textMicro]} numberOfLines={1}>
+                                        {option.alternateText}
+                                    </Text>
+                                </>
+                            )}
+                        </View>
+                    </View>
+                </TouchableOpacity>
+            </PressableLink>
+            {isUserRow && isChatSwitcher && (
+                <View>
+                    <TouchableOpacity
+                        style={[styles.chatSwitcherItemButton]}
+                        onPress={() => onAddToGroup(option)}
+                    >
+                        <Text
+                            style={[styles.chatSwitcherItemButtonText]}
+                            numberOfLines={1}
+                        >
+                            Add
+                        </Text>
+                    </TouchableOpacity>
+                </View>
+            )}
+        </View>
+    );
+};
+
+ChatLinkRow.propTypes = propTypes;
+ChatLinkRow.defaultProps = defaultProps;
+ChatLinkRow.displayName = 'ChatLinkRow';
+
+export default ChatLinkRow;

src/pages/home/sidebar/ChatSwitcherList.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {View, FlatList} from 'react-native';
 import styles from '../../../styles/StyleSheet';
 import ChatSwitcherOptionPropTypes from './ChatSwitcherOptionPropTypes';
-import ChatSwitcherRow from './ChatSwitcherRow';
+import ChatLinkRow from './ChatLinkRow';
 import KeyboardSpacer from '../../../components/KeyboardSpacer';
 
 const propTypes = {
@@ -35,11 +35,12 @@ const ChatSwitcherList = ({
             data={options}
             keyExtractor={option => (option.type === 'user' ? option.alternateText : String(option.reportID))}
             renderItem={({item, index}) => (
-                <ChatSwitcherRow
+                <ChatLinkRow
                     option={item}
                     optionIsFocused={index === focusedIndex}
                     onSelectRow={onSelectRow}
                     onAddToGroup={onAddToGroup}
+                    isChatSwitcher="true"
                 />
             )}
             extraData={focusedIndex}