Chore: Migration to Hooks - QueueListView (#4171)

* Chore: Migration to Hooks - QueueListView

* minor tweaks

* minor tweaks

app/ee/omnichannel/views/QueueListView.tsx

@@ -1,16 +1,15 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
-import { CompositeNavigationProp } from '@react-navigation/native';
+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 { shallowEqual, useSelector } from 'react-redux';
-import { dequal } from 'dequal';
 
 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 { useTheme } from '../../../theme';
-import { withDimensions } from '../../../dimensions';
+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 {
+type TNavigation = CompositeNavigationProp<
-	isMasterDetail: boolean;
+	StackNavigationProp<ChatsStackParamList, 'QueueListView'>,
-	navigation: CompositeNavigationProp<
+	StackNavigationProp<MasterDetailInsideStackParamList>
-		StackNavigationProp<ChatsStackParamList, 'QueueListView'>,
+>;
-		StackNavigationProp<MasterDetailInsideStackParamList>
-	>;
-}
-
-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;
-}
 
 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<IQueueListView, any> {
+const QueueListView = React.memo(() => {
-	private getScrollRef?: React.Ref<FlatList<IOmnichannelRoom>>;
+	const navigation = useNavigation<TNavigation>();
+	const getScrollRef = useRef<FlatList<IOmnichannelRoom>>(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 = () => <HeaderButton.CloseModal navigation={navigation} testID='directory-view-close' />;
 		}
-		return options;
+		navigation.setOptions(options);
-	};
+	}, [isMasterDetail, navigation]);
 
-	shouldComponentUpdate(nextProps: IQueueListView) {
+	const onPressItem = (item = {} as IOmnichannelRoom) => {
-		const { queued } = this.props;
-		if (!dequal(nextProps.queued, queued)) {
-			return true;
-		}
-
-		return false;
-	}
-
-	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<IQueueListView, any> {
 		});
 	};
 
-	renderItem: ListRenderItem<IOmnichannelRoom> = ({ item }) => {
+	const renderItem: ListRenderItem<IOmnichannelRoom> = ({ item }) => {
-		const {
-			user: { id: userId, username, token },
-			server,
-			useRealName,
-			theme,
-			isMasterDetail,
-			width,
-			showAvatar,
-			displayMode
-		} = this.props;
 		const id = getUidDirectMessage(item);
-
 		return (
 			<RoomItem
 				item={item}
@@ -121,7 +103,7 @@ class QueueListView extends React.Component<IQueueListView, any> {
 				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<IQueueListView, any> {
 		);
 	};
 
-	render() {
+	return (
-		const { queued, theme } = this.props;
+		<SafeAreaView testID='queue-list-view' style={{ backgroundColor: colors.backgroundColor }}>
-		return (
+			<StatusBar />
-			<SafeAreaView testID='queue-list-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
+			<FlatList
-				<StatusBar />
+				ref={getScrollRef}
-				<FlatList
+				data={queued}
-					ref={this.getScrollRef}
+				extraData={queued}
-					data={queued}
+				keyExtractor={keyExtractor}
-					extraData={queued}
+				style={{ backgroundColor: colors.backgroundColor }}
-					keyExtractor={keyExtractor}
+				renderItem={renderItem}
-					style={{ backgroundColor: themes[theme].backgroundColor }}
+				getItemLayout={getItemLayout}
-					renderItem={this.renderItem}
+				removeClippedSubviews={isIOS}
-					getItemLayout={getItemLayout}
+				keyboardShouldPersistTaps='always'
-					removeClippedSubviews={isIOS}
+				initialNumToRender={INITIAL_NUM_TO_RENDER}
-					keyboardShouldPersistTaps='always'
+				windowSize={9}
-					initialNumToRender={INITIAL_NUM_TO_RENDER}
+				onEndReachedThreshold={0.5}
-					windowSize={9}
+			/>
-					onEndReached={this.onEndReached}
+		</SafeAreaView>
-					onEndReachedThreshold={0.5}
+	);
-				/>
-			</SafeAreaView>
-		);
-	}
-}
-
-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
 });
 
-export default connect(mapStateToProps)(withDimensions(withTheme(QueueListView)));
+export default QueueListView;

app/stacks/InsideStack.tsx

@@ -133,7 +133,7 @@ const ChatsStackNavigator = () => {
 			/>
 			<ChatsStack.Screen name='MarkdownTableView' component={MarkdownTableView} />
 			<ChatsStack.Screen name='ReadReceiptsView' component={ReadReceiptsView} options={ReadReceiptsView.navigationOptions} />
-			<ChatsStack.Screen name='QueueListView' component={QueueListView} options={QueueListView.navigationOptions} />
+			<ChatsStack.Screen name='QueueListView' component={QueueListView} />
 			<ChatsStack.Screen name='CannedResponsesListView' component={CannedResponsesListView} />
 			<ChatsStack.Screen name='CannedResponseDetail' component={CannedResponseDetail} />
 		</ChatsStack.Navigator>

app/stacks/MasterDetailStack/index.tsx

@@ -148,11 +148,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 					component={DirectoryView}
 					options={props => DirectoryView.navigationOptions!({ ...props, isMasterDetail: true })}
 				/>
-				<ModalStack.Screen
+				<ModalStack.Screen name='QueueListView' component={QueueListView} />
-					name='QueueListView'
-					component={QueueListView}
-					options={props => QueueListView.navigationOptions!({ ...props, isMasterDetail: true })}
-				/>
 				<ModalStack.Screen
 					name='NotificationPrefView'
 					component={NotificationPrefView}