From b1ffffb04b677be7b3aac4506494fe6a87fa60ec Mon Sep 17 00:00:00 2001 From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Date: Mon, 23 May 2022 14:33:58 -0300 Subject: [PATCH] Chore: Migration to Hooks - QueueListView (#4171) * Chore: Migration to Hooks - QueueListView * minor tweaks * minor tweaks --- app/ee/omnichannel/views/QueueListView.tsx | 156 ++++++++------------- app/stacks/InsideStack.tsx | 2 +- app/stacks/MasterDetailStack/index.tsx | 6 +- 3 files changed, 64 insertions(+), 100 deletions(-) diff --git a/app/ee/omnichannel/views/QueueListView.tsx b/app/ee/omnichannel/views/QueueListView.tsx index 9d6eab96a..7e5ff2c13 100644 --- a/app/ee/omnichannel/views/QueueListView.tsx +++ b/app/ee/omnichannel/views/QueueListView.tsx @@ -1,16 +1,15 @@ -import React from 'react'; -import { CompositeNavigationProp } from '@react-navigation/native'; +import React, { useEffect, useRef } from 'react'; +import { CompositeNavigationProp, useNavigation } from '@react-navigation/native'; import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack'; import { FlatList, ListRenderItem } from 'react-native'; -import { connect } from 'react-redux'; -import { dequal } from 'dequal'; +import { shallowEqual, useSelector } from 'react-redux'; import I18n from '../../../i18n'; import RoomItem, { ROW_HEIGHT } from '../../../containers/RoomItem'; import { isIOS, isTablet } from '../../../utils/deviceInfo'; import { getUserSelector } from '../../../selectors/login'; -import { TSupportedThemes, withTheme } from '../../../theme'; -import { withDimensions } from '../../../dimensions'; +import { useTheme } from '../../../theme'; +import { useDimensions } from '../../../dimensions'; import SafeAreaView from '../../../containers/SafeAreaView'; import StatusBar from '../../../containers/StatusBar'; import { goRoom } from '../../../utils/goRoom'; @@ -18,34 +17,15 @@ import * as HeaderButton from '../../../containers/HeaderButton'; import { events, logEvent } from '../../../utils/log'; import { getInquiryQueueSelector } from '../selectors/inquiry'; import { IOmnichannelRoom, IApplicationState } from '../../../definitions'; -import { DisplayMode, MAX_SIDEBAR_WIDTH, themes } from '../../../lib/constants'; +import { MAX_SIDEBAR_WIDTH } from '../../../lib/constants'; import { ChatsStackParamList } from '../../../stacks/types'; import { MasterDetailInsideStackParamList } from '../../../stacks/MasterDetailStack/types'; -import { TSettingsValues } from '../../../reducers/settings'; import { getRoomAvatar, getRoomTitle, getUidDirectMessage } from '../../../lib/methods'; -interface INavigationOptions { - isMasterDetail: boolean; - navigation: CompositeNavigationProp< - StackNavigationProp, - StackNavigationProp - >; -} - -interface IQueueListView extends INavigationOptions { - user: { - id: string; - username: string; - token: string; - }; - width: number; - queued: IOmnichannelRoom[]; - server: string; - useRealName?: TSettingsValues; - theme: TSupportedThemes; - showAvatar: any; - displayMode: DisplayMode; -} +type TNavigation = CompositeNavigationProp< + StackNavigationProp, + StackNavigationProp +>; const INITIAL_NUM_TO_RENDER = isTablet ? 20 : 12; const getItemLayout = (data: IOmnichannelRoom[] | null | undefined, index: number) => ({ @@ -55,33 +35,46 @@ const getItemLayout = (data: IOmnichannelRoom[] | null | undefined, index: numbe }); const keyExtractor = (item: IOmnichannelRoom) => item.rid; -class QueueListView extends React.Component { - private getScrollRef?: React.Ref>; +const QueueListView = React.memo(() => { + const navigation = useNavigation(); + const getScrollRef = useRef>(null); + const { theme, colors } = useTheme(); + const { width } = useDimensions(); - private onEndReached: ((info: { distanceFromEnd: number }) => void) | null | undefined; + const { userId, token, username } = useSelector( + (state: IApplicationState) => ({ + userId: getUserSelector(state).id, + username: getUserSelector(state).username, + token: getUserSelector(state).token + }), + shallowEqual + ); - static navigationOptions = ({ navigation, isMasterDetail }: INavigationOptions) => { + const { showAvatar, displayMode } = useSelector( + (state: IApplicationState) => ({ + showAvatar: state.sortPreferences.showAvatar, + displayMode: state.sortPreferences.displayMode + }), + shallowEqual + ); + + const isMasterDetail = useSelector((state: IApplicationState) => state.app.isMasterDetail); + const server = useSelector((state: IApplicationState) => state.server.server); + const useRealName = useSelector((state: IApplicationState) => state.settings.UI_Use_Real_Name); + const queued = useSelector((state: IApplicationState) => getInquiryQueueSelector(state)); + + useEffect(() => { const options: StackNavigationOptions = { title: I18n.t('Queued_chats') }; if (isMasterDetail) { options.headerLeft = () => ; } - return options; - }; + navigation.setOptions(options); + }, [isMasterDetail, navigation]); - shouldComponentUpdate(nextProps: IQueueListView) { - const { queued } = this.props; - if (!dequal(nextProps.queued, queued)) { - return true; - } - - return false; - } - - onPressItem = (item = {} as IOmnichannelRoom) => { + const onPressItem = (item = {} as IOmnichannelRoom) => { logEvent(events.QL_GO_ROOM); - const { navigation, isMasterDetail } = this.props; if (isMasterDetail) { navigation.navigate('DrawerNavigator'); } else { @@ -98,19 +91,8 @@ class QueueListView extends React.Component { }); }; - renderItem: ListRenderItem = ({ item }) => { - const { - user: { id: userId, username, token }, - server, - useRealName, - theme, - isMasterDetail, - width, - showAvatar, - displayMode - } = this.props; + const renderItem: ListRenderItem = ({ item }) => { const id = getUidDirectMessage(item); - return ( { username={username} token={token} baseUrl={server} - onPress={this.onPressItem} + onPress={onPressItem} testID={`queue-list-view-item-${item.name}`} width={isMasterDetail ? MAX_SIDEBAR_WIDTH : width} useRealName={useRealName} @@ -135,39 +117,25 @@ class QueueListView extends React.Component { ); }; - render() { - const { queued, theme } = this.props; - return ( - - - - - ); - } -} - -const mapStateToProps = (state: IApplicationState) => ({ - user: getUserSelector(state), - isMasterDetail: state.app.isMasterDetail, - server: state.server.server, - useRealName: state.settings.UI_Use_Real_Name, - queued: getInquiryQueueSelector(state), - showAvatar: state.sortPreferences.showAvatar, - displayMode: state.sortPreferences.displayMode + return ( + + + + + ); }); -export default connect(mapStateToProps)(withDimensions(withTheme(QueueListView))); +export default QueueListView; diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx index 6b903e9c9..71f3b1b07 100644 --- a/app/stacks/InsideStack.tsx +++ b/app/stacks/InsideStack.tsx @@ -133,7 +133,7 @@ const ChatsStackNavigator = () => { /> - + diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx index f33e5fe4b..34b92a2f0 100644 --- a/app/stacks/MasterDetailStack/index.tsx +++ b/app/stacks/MasterDetailStack/index.tsx @@ -148,11 +148,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => { component={DirectoryView} options={props => DirectoryView.navigationOptions!({ ...props, isMasterDetail: true })} /> - QueueListView.navigationOptions!({ ...props, isMasterDetail: true })} - /> +