Page MenuHomePhabricator
Differential D9172

[native] Lift `hardwareBack` to `ConnectedChatThreadList`
ClosedPublic
Actions

Authored by atul on Sep 12 2023, 4:51 PM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Apr 9, 8:03 AM
Unknown Object (File)
Mar 18 2025, 5:39 AM
Unknown Object (File)
Mar 18 2025, 5:39 AM
Unknown Object (File)
Mar 18 2025, 5:38 AM
Unknown Object (File)
Mar 18 2025, 5:22 AM
Unknown Object (File)
Mar 11 2025, 6:05 AM
Unknown Object (File)
Feb 24 2025, 10:22 PM
Unknown Object (File)
Feb 24 2025, 7:05 AM
View All Files
Subscribers
ashoat

Details

Reviewers
ginsu
tomek
rohan
Commits
rCOMMbc069c45e99f: [native] Lift `hardwareBack` to `ConnectedChatThreadList`
Summary

This diff is just one step in the process of converting ChatThreadList into a functional component. When this work is done, we will be able to avoid a lot of re-rendering and hopefully improve performance quite a bit.

Depends on D9171

Test Plan

ChatThreadList + search experience continue to work as expected.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Revision Contents
Changeset List

PathSize
native/
chat/
39 lines

Diff 31087

View Options

native/chat/chat-thread-list.react.js

// @flow // @flow
import IonIcon from '@expo/vector-icons/Ionicons.js'; import IonIcon from '@expo/vector-icons/Ionicons.js';
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { import {
View, View,
FlatList, FlatList,
Platform, Platform,
TextInput,
TouchableWithoutFeedback, TouchableWithoutFeedback,
BackHandler, BackHandler,
} from 'react-native'; } from 'react-native';
import { FloatingAction } from 'react-native-floating-action'; import { FloatingAction } from 'react-native-floating-action';
import Animated from 'react-native-reanimated'; import Animated from 'react-native-reanimated';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { searchUsers as searchUsersEndpoint } from 'lib/actions/user-actions.js'; import { searchUsers as searchUsersEndpoint } from 'lib/actions/user-actions.js';
▲ Show 20 Lines • Show All 110 Lines • ▼ Show 20 Linestype Props = {
+onScroll: (event: ScrollEvent) => void, +onScroll: (event: ScrollEvent) => void,
+onSwipeableWillOpen: (threadInfo: ThreadInfo) => void, +onSwipeableWillOpen: (threadInfo: ThreadInfo) => void,
+composeThread: () => void, +composeThread: () => void,
+onSearchCancel: () => void, +onSearchCancel: () => void,
+onSearchFocus: () => void, +onSearchFocus: () => void,
+renderSearch: ( +renderSearch: (
additionalProps?: $Shape<React.ElementConfig<typeof Search>>, additionalProps?: $Shape<React.ElementConfig<typeof Search>>,
) => React.Node, ) => React.Node,
+onPressItem: (
threadInfo: ThreadInfo,
pendingPersonalThreadUserInfo?: UserInfo,
) => void,
+onPressSeeMoreSidebars: (threadInfo: ThreadInfo) => void,
}; };
class ChatThreadList extends React.PureComponent<Props> { class ChatThreadList extends React.PureComponent<Props> {
searchInput: ?React.ElementRef<typeof TextInput>;
flatList: ?FlatList<Item>; flatList: ?FlatList<Item>;
clearNavigationBlurListener: ?() => mixed; clearNavigationBlurListener: ?() => mixed;
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
} }
componentDidMount() { componentDidMount() {
▲ Show 20 Lines • Show All 80 Lines • ▼ Show 20 Lines onTabPress = () => {
} }
if (this.props.scrollPos.current > 0 && this.flatList) { if (this.props.scrollPos.current > 0 && this.flatList) {
this.flatList.scrollToOffset({ offset: 0, animated: true }); this.flatList.scrollToOffset({ offset: 0, animated: true });
} else if (this.props.route.name === BackgroundChatThreadListRouteName) { } else if (this.props.route.name === BackgroundChatThreadListRouteName) {
this.props.navigation.navigate({ name: HomeChatThreadListRouteName }); this.props.navigation.navigate({ name: HomeChatThreadListRouteName });
} }
}; };
searchInputRef = (searchInput: ?React.ElementRef<typeof TextInput>) => {
this.searchInput = searchInput;
};
renderItem = (row: { item: Item, ... }) => { renderItem = (row: { item: Item, ... }) => {
const item = row.item; const item = row.item;
if (item.type === 'search') { if (item.type === 'search') {
return ( return (
<TouchableWithoutFeedback onPress={this.props.onSearchFocus}> <TouchableWithoutFeedback onPress={this.props.onSearchFocus}>
{this.props.renderSearch({ active: false })} {this.props.renderSearch({ active: false })}
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
); );
} }
if (item.type === 'empty') { if (item.type === 'empty') {
const EmptyItem = item.emptyItem; const EmptyItem = item.emptyItem;
return <EmptyItem />; return <EmptyItem />;
} }
return ( return (
<ChatThreadListItem <ChatThreadListItem
data={item} data={item}
onPressItem={this.onPressItem} onPressItem={this.props.onPressItem}
onPressSeeMoreSidebars={this.onPressSeeMoreSidebars} onPressSeeMoreSidebars={this.props.onPressSeeMoreSidebars}
onSwipeableWillOpen={this.props.onSwipeableWillOpen} onSwipeableWillOpen={this.props.onSwipeableWillOpen}
currentlyOpenedSwipeableId={this.props.openedSwipeableID} currentlyOpenedSwipeableId={this.props.openedSwipeableID}
/> />
); );
}; };
listDataSelector = createSelector( listDataSelector = createSelector(
(props: Props) => props.chatListData, (props: Props) => props.chatListData,
▲ Show 20 Lines • Show All 104 Lines • ▼ Show 20 Lines return (
{floatingAction} {floatingAction}
</View> </View>
); );
} }
flatListRef = (flatList: ?FlatList<Item>) => { flatListRef = (flatList: ?FlatList<Item>) => {
this.flatList = flatList; this.flatList = flatList;
}; };
onPressItem = (
threadInfo: ThreadInfo,
pendingPersonalThreadUserInfo?: UserInfo,
) => {
this.props.onChangeSearchText('');
if (this.searchInput) {
this.searchInput.blur();
}
this.props.navigateToThread({ threadInfo, pendingPersonalThreadUserInfo });
};
onPressSeeMoreSidebars = (threadInfo: ThreadInfo) => {
this.props.onChangeSearchText('');
if (this.searchInput) {
this.searchInput.blur();
}
this.props.navigation.navigate<'SidebarListModal'>({
name: SidebarListModalRouteName,
params: { threadInfo },
});
};
} }
const unboundStyles = { const unboundStyles = {
icon: { icon: {
fontSize: 28, fontSize: 28,
}, },
container: { container: {
flex: 1, flex: 1,
▲ Show 20 Lines • Show All 218 Lines • ▼ Show 20 Lines [
searchStatus, searchStatus,
searchText, searchText,
styles.cancelSearchButton, styles.cancelSearchButton,
styles.search, styles.search,
styles.searchContainer, styles.searchContainer,
], ],
); );
const onPressItem = React.useCallback(
(threadInfo: ThreadInfo, pendingPersonalThreadUserInfo?: UserInfo) => {
onChangeSearchText('');
if (searchInputRef.current) {
searchInputRef.current.blur();
}
navigateToThread({ threadInfo, pendingPersonalThreadUserInfo });
},
[navigateToThread, onChangeSearchText],
);
const onPressSeeMoreSidebars = React.useCallback(
(threadInfo: ThreadInfo) => {
onChangeSearchText('');
if (searchInputRef.current) {
this.searchInputRef.current.blur();
}
navigation.navigate<'SidebarListModal'>({
name: SidebarListModalRouteName,
params: { threadInfo },
});
},
[navigation, onChangeSearchText],
);
return ( return (
<ChatThreadList <ChatThreadList
navigation={navigation} navigation={navigation}
route={route} route={route}
filterThreads={filterThreads} filterThreads={filterThreads}
emptyItem={emptyItem} emptyItem={emptyItem}
chatListData={boundChatListData} chatListData={boundChatListData}
loggedInUserInfo={loggedInUserInfo} loggedInUserInfo={loggedInUserInfo}
Show All 21 Lines <ChatThreadList
onChangeSearchText={onChangeSearchText} onChangeSearchText={onChangeSearchText}
scrollPos={scrollPos} scrollPos={scrollPos}
onScroll={onScroll} onScroll={onScroll}
onSwipeableWillOpen={onSwipeableWillOpen} onSwipeableWillOpen={onSwipeableWillOpen}
composeThread={composeThread} composeThread={composeThread}
onSearchCancel={onSearchCancel} onSearchCancel={onSearchCancel}
onSearchFocus={onSearchFocus} onSearchFocus={onSearchFocus}
renderSearch={renderSearch} renderSearch={renderSearch}
onPressItem={onPressItem}
onPressSeeMoreSidebars={onPressSeeMoreSidebars}
/> />
); );
} }
export default ConnectedChatThreadList; export default ConnectedChatThreadList;