From d35e41af8b7eae959e1d0b0c13c1791152dc2abc Mon Sep 17 00:00:00 2001 From: "alberto@expensify.com" Date: Thu, 12 Nov 2020 11:01:44 +0100 Subject: [PATCH 1/6] Use the same formatting for LHN and chatswitcher rows --- src/pages/home/sidebar/ChatSwitcherRow.js | 6 +++- src/pages/home/sidebar/SidebarLinks.js | 39 ++++++++++++++++------- 2 files changed, 33 insertions(+), 12 deletions(-) diff --git a/src/pages/home/sidebar/ChatSwitcherRow.js b/src/pages/home/sidebar/ChatSwitcherRow.js index 76dcf4bbbb4a..1b510b278c08 100644 --- a/src/pages/home/sidebar/ChatSwitcherRow.js +++ b/src/pages/home/sidebar/ChatSwitcherRow.js @@ -20,7 +20,11 @@ const propTypes = { onSelectRow: PropTypes.func.isRequired, // Callback that adds a user to the pending list of Group DM users - onAddToGroup: PropTypes.func.isRequired, + onAddToGroup: PropTypes.func, +}; + +const defaultProps = { + onAddToGroup: ()=>{}, }; const ChatSwitcherRow = ({ diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 0fef983705a3..76be46d9117c 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -3,6 +3,7 @@ import {View, ScrollView} from 'react-native'; import _ from 'underscore'; import PropTypes from 'prop-types'; import lodashOrderby from 'lodash.orderby'; +import get from 'lodash.get'; import styles from '../../../styles/StyleSheet'; import Text from '../../../components/Text'; import SidebarLink from './SidebarLink'; @@ -12,6 +13,8 @@ import ChatSwitcherView from './ChatSwitcherView'; import SafeAreaInsetPropTypes from '../../SafeAreaInsetPropTypes'; import compose from '../../../libs/compose'; import {withRouter} from '../../../libs/Router'; +import ChatSwitcher from "../../../../../Web-Expensify/concierge/js/app/chat/switcher/ChatSwitcher"; +import ChatSwitcherRow from "./ChatSwitcherRow"; const propTypes = { // These are from withRouter @@ -34,10 +37,13 @@ const propTypes = { })), isChatSwitcherActive: PropTypes.bool, + + personalDetails: PropTypes.object, }; const defaultProps = { reports: {}, isChatSwitcherActive: false, + personalDetails: {}, }; const SidebarLinks = (props) => { @@ -80,17 +86,25 @@ const SidebarLinks = (props) => { {/* A report will not have a report name if it hasn't been fetched from the server yet */} {/* so nothing is rendered */} - {_.map(reportsToDisplay, report => report.reportName && ( - 0} - onLinkClick={onLinkClick} - isActiveReport={report.reportID === reportIDInUrl} - isPinned={report.isPinned} - /> - ))} + {_.map(reportsToDisplay, (report) => { + const participantDetails = report.participants.length === 1 ? get(props.personalDetails, report.participants[0], '') : ''; + const avatarUrl = participantDetails ? participantDetails.avatarURL : '' + return report.reportName && ( + + ); + } + + )} ); @@ -106,5 +120,8 @@ export default compose( reports: { key: IONKEYS.COLLECTION.REPORT, }, + personalDetails: { + key: IONKEYS.PERSONAL_DETAILS, + }, }), )(SidebarLinks); From bc89214c70f26a231b41d4bbfab06c1eb2bd5cbb Mon Sep 17 00:00:00 2001 From: "alberto@expensify.com" Date: Thu, 12 Nov 2020 13:13:55 +0100 Subject: [PATCH 2/6] Hide the Add button for LHN --- src/pages/home/sidebar/ChatSwitcherList.js | 1 + src/pages/home/sidebar/ChatSwitcherRow.js | 89 ++++++++++++---------- src/pages/home/sidebar/SidebarLinks.js | 7 +- 3 files changed, 51 insertions(+), 46 deletions(-) diff --git a/src/pages/home/sidebar/ChatSwitcherList.js b/src/pages/home/sidebar/ChatSwitcherList.js index ed9319f0439a..60e1fa0d6d35 100644 --- a/src/pages/home/sidebar/ChatSwitcherList.js +++ b/src/pages/home/sidebar/ChatSwitcherList.js @@ -40,6 +40,7 @@ const ChatSwitcherList = ({ optionIsFocused={index === focusedIndex} onSelectRow={onSelectRow} onAddToGroup={onAddToGroup} + isChatSwitcher={true} /> )} extraData={focusedIndex} diff --git a/src/pages/home/sidebar/ChatSwitcherRow.js b/src/pages/home/sidebar/ChatSwitcherRow.js index 0cce6fe6b525..617567bf98df 100644 --- a/src/pages/home/sidebar/ChatSwitcherRow.js +++ b/src/pages/home/sidebar/ChatSwitcherRow.js @@ -8,8 +8,8 @@ import { } from 'react-native'; import styles from '../../../styles/StyleSheet'; import ChatSwitcherOptionPropTypes from './ChatSwitcherOptionPropTypes'; -import ROUTES from "../../../ROUTES"; -import PressableLink from "../../../components/PressableLink"; +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' @@ -23,10 +23,13 @@ const propTypes = { // Callback that adds a user to the pending list of Group DM users onAddToGroup: PropTypes.func, + + isChatSwitcher: PropTypes.bool }; const defaultProps = { - onAddToGroup: ()=>{}, + onAddToGroup: () => {}, + isChatSwitcher: false, }; const ChatSwitcherRow = ({ @@ -34,6 +37,7 @@ const ChatSwitcherRow = ({ optionIsFocused, onSelectRow, onAddToGroup, + isChatSwitcher, }) => { const isUserRow = option.type === 'user'; const textStyle = optionIsFocused @@ -53,54 +57,54 @@ const ChatSwitcherRow = ({ ]} > onSelectRow(option)} - to={ROUTES.getReportRoute(option.reportID)} - style={styles.textDecorationNoLine} - > - onSelectRow(option)} - style={[ - styles.flexGrow1, - styles.chatSwitcherItemAvatarNameWrapper, - ]} + onClick={() => onSelectRow(option)} + to={ROUTES.getReportRoute(option.reportID)} + style={styles.textDecorationNoLine} > - onSelectRow(option)} style={[ - styles.flexRow, - styles.alignItemsCenter, + styles.flexGrow1, + styles.chatSwitcherItemAvatarNameWrapper, ]} > - { - option.icon - && ( - - - - ) - } - - {option.text === option.alternateText ? ( - - {option.alternateText} - - ) : ( - <> + + { + option.icon + && ( + + + + ) + } + + {option.text === option.alternateText ? ( - {option.text} - - {option.alternateText} - - )} + ) : ( + <> + + {option.text} + + + {option.alternateText} + + + )} + - - + - {isUserRow && ( + {isUserRow && isChatSwitcher && ( { reportID: report.reportID, }} onSelectRow={onLinkClick} - optionIsFocused={false} + optionIsFocused={report.reportID === reportIDInUrl} /> ); - } - )} + })} ); From 9f128dbf62250090aac3562dbfac334e55375269 Mon Sep 17 00:00:00 2001 From: "alberto@expensify.com" Date: Fri, 13 Nov 2020 10:27:28 +0100 Subject: [PATCH 3/6] correctly bold the row when unread messages are there --- src/pages/home/sidebar/ChatSwitcherRow.js | 2 +- src/pages/home/sidebar/SidebarLinks.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/home/sidebar/ChatSwitcherRow.js b/src/pages/home/sidebar/ChatSwitcherRow.js index 617567bf98df..190e677f1833 100644 --- a/src/pages/home/sidebar/ChatSwitcherRow.js +++ b/src/pages/home/sidebar/ChatSwitcherRow.js @@ -24,7 +24,7 @@ const propTypes = { // Callback that adds a user to the pending list of Group DM users onAddToGroup: PropTypes.func, - isChatSwitcher: PropTypes.bool + isChatSwitcher: PropTypes.bool, }; const defaultProps = { diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 835adb9d3f22..b82e726fed66 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -88,6 +88,7 @@ const SidebarLinks = (props) => { const participantDetails = get(report, 'participants.length', 0) === 1 ? get(props.personalDetails, report.participants[0], '') : ''; return report.reportName && ( { icon: participantDetails ? participantDetails.avatarURL : '', login: participantDetails ? participantDetails.login : '', reportID: report.reportID, + isUnread: report.unreadActionCount > 0, }} onSelectRow={onLinkClick} optionIsFocused={report.reportID === reportIDInUrl} From 6977ddc218651d36ea51290a3172a66185ad304f Mon Sep 17 00:00:00 2001 From: "alberto@expensify.com" Date: Fri, 13 Nov 2020 10:56:45 +0100 Subject: [PATCH 4/6] Remane ChatSwitcherRow --- README.md | 2 +- .../{ChatSwitcherRow.js => ChatLinkRow.js} | 11 ++-- src/pages/home/sidebar/ChatSwitcherList.js | 4 +- src/pages/home/sidebar/SidebarLink.js | 61 ------------------- src/pages/home/sidebar/SidebarLinks.js | 4 +- 5 files changed, 11 insertions(+), 71 deletions(-) rename src/pages/home/sidebar/{ChatSwitcherRow.js => ChatLinkRow.js} (94%) delete mode 100644 src/pages/home/sidebar/SidebarLink.js diff --git a/README.md b/README.md index c31a423233e3..c3080f22b771 100644 --- a/README.md +++ b/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) diff --git a/src/pages/home/sidebar/ChatSwitcherRow.js b/src/pages/home/sidebar/ChatLinkRow.js similarity index 94% rename from src/pages/home/sidebar/ChatSwitcherRow.js rename to src/pages/home/sidebar/ChatLinkRow.js index 190e677f1833..1d645f2f3eef 100644 --- a/src/pages/home/sidebar/ChatSwitcherRow.js +++ b/src/pages/home/sidebar/ChatLinkRow.js @@ -24,6 +24,7 @@ const propTypes = { // 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, }; @@ -32,7 +33,7 @@ const defaultProps = { isChatSwitcher: false, }; -const ChatSwitcherRow = ({ +const ChatLinkRow = ({ option, optionIsFocused, onSelectRow, @@ -123,8 +124,8 @@ const ChatSwitcherRow = ({ ); }; -ChatSwitcherRow.propTypes = propTypes; -ChatSwitcherRow.defaultProps = defaultProps; -ChatSwitcherRow.displayName = 'ChatSwitcherRow'; +ChatLinkRow.propTypes = propTypes; +ChatLinkRow.defaultProps = defaultProps; +ChatLinkRow.displayName = 'ChatLinkRow'; -export default ChatSwitcherRow; +export default ChatLinkRow; diff --git a/src/pages/home/sidebar/ChatSwitcherList.js b/src/pages/home/sidebar/ChatSwitcherList.js index 60e1fa0d6d35..58889474edb2 100644 --- a/src/pages/home/sidebar/ChatSwitcherList.js +++ b/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,7 +35,7 @@ const ChatSwitcherList = ({ data={options} keyExtractor={option => (option.type === 'user' ? option.alternateText : String(option.reportID))} renderItem={({item, index}) => ( - { - const linkWrapperActiveStyle = props.isActiveReport && styles.sidebarLinkWrapperActive; - const linkActiveStyle = props.isActiveReport ? styles.sidebarLinkActive : null; - const textActiveStyle = props.isActiveReport ? styles.sidebarLinkActiveText : styles.sidebarLinkText; - const textActiveUnreadStyle = props.isUnread - ? [textActiveStyle, styles.sidebarLinkTextUnread] : [textActiveStyle]; - - return ( - - - - - - {props.reportName} - - - - - - ); -}; - -SidebarLink.displayName = 'SidebarLink'; -SidebarLink.propTypes = propTypes; -SidebarLink.defaultProps = defaultProps; - -export default SidebarLink; diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index b82e726fed66..8734e8f2eae4 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -12,7 +12,7 @@ import ChatSwitcherView from './ChatSwitcherView'; import SafeAreaInsetPropTypes from '../../SafeAreaInsetPropTypes'; import compose from '../../../libs/compose'; import {withRouter} from '../../../libs/Router'; -import ChatSwitcherRow from './ChatSwitcherRow'; +import ChatLinkRow from './ChatLinkRow'; const propTypes = { // These are from withRouter @@ -87,7 +87,7 @@ const SidebarLinks = (props) => { {_.map(reportsToDisplay, (report) => { const participantDetails = get(report, 'participants.length', 0) === 1 ? get(props.personalDetails, report.participants[0], '') : ''; return report.reportName && ( - Date: Fri, 13 Nov 2020 12:02:55 +0100 Subject: [PATCH 5/6] style --- src/pages/home/sidebar/ChatSwitcherList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/sidebar/ChatSwitcherList.js b/src/pages/home/sidebar/ChatSwitcherList.js index 58889474edb2..004597a2a423 100644 --- a/src/pages/home/sidebar/ChatSwitcherList.js +++ b/src/pages/home/sidebar/ChatSwitcherList.js @@ -40,7 +40,7 @@ const ChatSwitcherList = ({ optionIsFocused={index === focusedIndex} onSelectRow={onSelectRow} onAddToGroup={onAddToGroup} - isChatSwitcher={true} + isChatSwitcher="true" /> )} extraData={focusedIndex} From 98d0e8dbe57995b91e55c1a77a53b7cfa39e1464 Mon Sep 17 00:00:00 2001 From: "alberto@expensify.com" Date: Mon, 16 Nov 2020 10:33:54 +0100 Subject: [PATCH 6/6] bold only the main name --- src/pages/home/sidebar/ChatLinkRow.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/sidebar/ChatLinkRow.js b/src/pages/home/sidebar/ChatLinkRow.js index 1d645f2f3eef..b1384fd76faf 100644 --- a/src/pages/home/sidebar/ChatLinkRow.js +++ b/src/pages/home/sidebar/ChatLinkRow.js @@ -96,7 +96,7 @@ const ChatLinkRow = ({ {option.text} - + {option.alternateText}