chore: Migrate RoomsListView to hooks (#6502)

Author: diegolmello

app/actions/actionsTypes.ts

@@ -12,13 +12,7 @@ function createRequestTypes(base = {}, types = defaultTypes): Record<string, str
 export const LOGIN = createRequestTypes('LOGIN', [...defaultTypes, 'SET_SERVICES', 'SET_PREFERENCE', 'SET_LOCAL_AUTHENTICATED']);
 export const SHARE = createRequestTypes('SHARE', ['SET_PARAMS']);
 export const USER = createRequestTypes('USER', ['SET', 'CLEAR']);
-export const ROOMS = createRequestTypes('ROOMS', [
-	...defaultTypes,
-	'REFRESH',
-	'SET_SEARCH',
-	'OPEN_SEARCH_HEADER',
-	'CLOSE_SEARCH_HEADER'
-]);
+export const ROOMS = createRequestTypes('ROOMS', [...defaultTypes, 'REFRESH']);
 export const ROOM = createRequestTypes('ROOM', [
 	'SUBSCRIBE',
 	'UNSUBSCRIBE',

app/actions/rooms.ts

@@ -45,22 +45,3 @@ export function roomsRefresh(): Action {
 		type: ROOMS.REFRESH
 	};
 }
-
-export function setSearch(searchText: string): ISetSearch {
-	return {
-		type: ROOMS.SET_SEARCH,
-		searchText
-	};
-}
-
-export function openSearchHeader(): Action {
-	return {
-		type: ROOMS.OPEN_SEARCH_HEADER
-	};
-}
-
-export function closeSearchHeader(): Action {
-	return {
-		type: ROOMS.CLOSE_SEARCH_HEADER
-	};
-}

app/containers/Header/index.tsx

@@ -26,7 +26,8 @@ const Header = ({ options, navigation, route }: IHeader) => {
 		route.name === 'RoomsListView' ||
 		route.name === 'ShareListView' ||
 		route.name === 'ShareView' ||
-		route.name === 'AttachmentView';
+		route.name === 'AttachmentView' ||
+		route.name === 'DrawerNavigator';
 
 	const handleOnLayout = ({
 		nativeEvent: {

app/containers/RoomHeader/RoomHeader.tsx

@@ -11,6 +11,7 @@ import { TUserStatus, IOmnichannelSource } from '../../definitions';
 import { useTheme } from '../../theme';
 import { useAppSelector } from '../../lib/hooks';
 import useStatusAccessibilityLabel from '../../lib/hooks/useStatusAccessibilityLabel';
+import { IUsersTyping } from '../../reducers/usersTyping';
 
 const HIT_SLOP = {
 	top: 5,
@@ -46,7 +47,7 @@ const styles = StyleSheet.create({
 });
 
 type TRoomHeaderSubTitle = {
-	usersTyping: [];
+	usersTyping: IUsersTyping;
 	subtitle?: string;
 	renderFunc?: () => React.ReactElement;
 	scale: number;
@@ -71,7 +72,7 @@ interface IRoomHeader {
 	tmid?: string;
 	teamMain?: boolean;
 	status?: TUserStatus;
-	usersTyping: [];
+	usersTyping: IUsersTyping;
 	isGroupChat?: boolean;
 	parentTitle?: string;
 	onPress: Function;

app/containers/RoomItem/RoomItem.tsx

@@ -47,9 +47,6 @@ const RoomItem = ({
 	swipeEnabled = true,
 	onPress,
 	onLongPress,
-	toggleFav,
-	toggleRead,
-	hideChannel,
 	teamMain,
 	autoJoin,
 	showAvatar,
@@ -80,11 +77,8 @@ const RoomItem = ({
 			onLongPress={onLongPress}
 			width={width}
 			favorite={favorite}
-			toggleFav={toggleFav}
 			isRead={isRead}
 			rid={rid}
-			toggleRead={toggleRead}
-			hideChannel={hideChannel}
 			testID={testID}
 			type={type}
 			isFocused={!!isFocused}

app/containers/RoomItem/Touchable.tsx

@@ -20,6 +20,10 @@ import { LeftActions, RightActions } from './Actions';
 import { ITouchableProps } from './interfaces';
 import { useTheme } from '../../theme';
 import I18n from '../../i18n';
+import { toggleFav } from '../../lib/methods/toggleFav';
+import { toggleRead } from '../../lib/methods/toggleRead';
+import { hideRoom } from '../../lib/methods/hideRoom';
+import { useAppSelector } from '../../lib/hooks/useAppSelector';
 
 const Touchable = ({
 	children,
@@ -31,15 +35,12 @@ const Touchable = ({
 	favorite,
 	isRead,
 	rid,
-	toggleFav,
-	toggleRead,
-	hideChannel,
 	isFocused,
 	swipeEnabled,
 	displayMode
 }: ITouchableProps): React.ReactElement => {
 	const { colors } = useTheme();
-
+	const serverVersion = useAppSelector(state => state.server.version);
 	const rowOffSet = useSharedValue(0);
 	const transX = useSharedValue(0);
 	const rowState = useSharedValue(0); // 0: closed, 1: right opened, -1: left opened
@@ -52,22 +53,16 @@ const Touchable = ({
 	};
 
 	const handleToggleFav = () => {
-		if (toggleFav) {
-			toggleFav(rid, favorite);
-		}
+		toggleFav(rid, favorite);
 		close();
 	};
 
 	const handleToggleRead = () => {
-		if (toggleRead) {
-			toggleRead(rid, isRead);
-		}
+		toggleRead(rid, isRead, serverVersion);
 	};
 
 	const handleHideChannel = () => {
-		if (hideChannel) {
-			hideChannel(rid, type);
-		}
+		hideRoom(rid, type);
 	};
 
 	const onToggleReadPress = () => {

app/containers/RoomItem/index.tsx

@@ -15,9 +15,6 @@ const RoomItemContainer = React.memo(
 		onPress,
 		onLongPress,
 		width,
-		toggleFav,
-		toggleRead,
-		hideChannel,
 		isFocused,
 		showLastMessage,
 		username,
@@ -73,9 +70,6 @@ const RoomItemContainer = React.memo(
 				favorite={item.f}
 				rid={item.rid}
 				userId={userId}
-				toggleFav={toggleFav}
-				toggleRead={toggleRead}
-				hideChannel={hideChannel}
 				testID={testID}
 				type={item.t}
 				isFocused={isFocused}

app/containers/RoomItem/interfaces.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import Animated from 'react-native-reanimated';
 
 import { TSupportedThemes } from '../../theme';
-import { TUserStatus, ILastMessage, SubscriptionType, IOmnichannelSource } from '../../definitions';
+import { TUserStatus, ILastMessage, SubscriptionType, IOmnichannelSource, ISubscription } from '../../definitions';
 
 export interface ILeftActionsProps {
 	transX: Animated.SharedValue<number>;
@@ -156,3 +156,8 @@ export interface IIconOrAvatar {
 	showLastMessage: boolean;
 	sourceType: IOmnichannelSource;
 }
+
+export interface IRoomItem extends ISubscription {
+	search?: boolean;
+	outside?: boolean;
+}

app/definitions/redux/index.ts

@@ -44,6 +44,10 @@ import { ITroubleshootingNotification } from '../../reducers/troubleshootingNoti
 import { TActionTroubleshootingNotification } from '../../actions/troubleshootingNotification';
 import { ISupportedVersionsState } from '../../reducers/supportedVersions';
 import { IInAppFeedbackState } from '../../reducers/inAppFeedback';
+import { IRooms } from '../../reducers/rooms';
+import { IPreferences } from '../IPreferences';
+import { ICustomEmojis } from '../IEmoji';
+import { IUsersTyping } from '../../reducers/usersTyping';
 
 export interface IApplicationState {
 	settings: TSettingsState;
@@ -54,12 +58,12 @@ export interface IApplicationState {
 	app: IApp;
 	createChannel: ICreateChannel;
 	room: IRoom;
-	rooms: any;
-	sortPreferences: any;
+	rooms: IRooms;
+	sortPreferences: IPreferences;
 	share: IShare;
-	customEmojis: any;
+	customEmojis: ICustomEmojis;
 	activeUsers: IActiveUsers;
-	usersTyping: any;
+	usersTyping: IUsersTyping;
 	inviteLinks: IInviteLinks;
 	createDiscussion: ICreateDiscussion;
 	inquiry: IInquiry;

app/ee/omnichannel/containers/OmnichannelHeader/index.tsx

@@ -1,41 +1,36 @@
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo } from 'react';
 import { View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { shallowEqual } from 'react-redux';
 
 import * as List from '../../../../containers/List';
 import styles from './styles';
-import { themes } from '../../../../lib/constants';
 import { useTheme } from '../../../../theme';
-import { IUser } from '../../../../definitions';
 import { showConfirmationAlert } from '../../../../lib/methods/helpers/info';
 import I18n from '../../../../i18n';
 import { changeLivechatStatus, isOmnichannelStatusAvailable } from '../../lib';
 import OmnichannelQueue from './OmnichannelQueue';
 import { isOmnichannelModuleAvailable } from '../../../../lib/methods';
 import Switch from '../../../../containers/Switch';
+import { useAppSelector } from '../../../../lib/hooks/useAppSelector';
+import { getUserSelector } from '../../../../selectors/login';
+import { events, logEvent } from '../../../../lib/methods/helpers/log';
+import { getInquiryQueueSelector } from '../../selectors/inquiry';
 
-interface IOmnichannelStatus {
-	searching: boolean;
-	goQueue: () => void;
-	queueSize: number;
-	inquiryEnabled: boolean;
-	user: IUser;
-}
+const OmnichannelStatus = memo(() => {
+	const { colors } = useTheme();
+	const { roles, statusLivechat } = useAppSelector(state => getUserSelector(state), shallowEqual);
+	const inquiryEnabled = useAppSelector(state => state.inquiry.enabled);
+	const queueSize = useAppSelector(state => getInquiryQueueSelector(state).length);
+	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
+	const navigation = useNavigation<any>();
 
-const OmnichannelStatus = memo(({ searching, goQueue, queueSize, user }: IOmnichannelStatus) => {
-	const { theme } = useTheme();
-	const [status, setStatus] = useState(isOmnichannelStatusAvailable(user));
-
-	useEffect(() => {
-		setStatus(isOmnichannelStatusAvailable(user));
-	}, [user.statusLivechat]);
-
-	if (searching || !(isOmnichannelModuleAvailable() && user?.roles?.includes('livechat-agent'))) {
+	if (!(isOmnichannelModuleAvailable() && roles?.includes('livechat-agent'))) {
 		return null;
 	}
 
 	const toggleLivechat = async () => {
-		// if not-available, prompt to change to available
-		if (!isOmnichannelStatusAvailable(user)) {
+		if (!isOmnichannelStatusAvailable(statusLivechat)) {
 			showConfirmationAlert({
 				message: I18n.t('Omnichannel_enable_alert'),
 				confirmationText: I18n.t('Yes'),
@@ -49,29 +44,42 @@ const OmnichannelStatus = memo(({ searching, goQueue, queueSize, user }: IOmnich
 			});
 		} else {
 			try {
-				setStatus(v => !v);
 				await changeLivechatStatus();
 			} catch {
-				setStatus(v => !v);
+				// Do nothing
 			}
 		}
 	};
 
+	const goQueue = () => {
+		logEvent(events.RL_GO_QUEUE);
+
+		if (!inquiryEnabled) {
+			return;
+		}
+
+		if (isMasterDetail) {
+			navigation.navigate('ModalStackNavigator', { screen: 'QueueListView' });
+		} else {
+			navigation.navigate('QueueListView');
+		}
+	};
+
 	return (
 		<>
 			<List.Item
 				title='Omnichannel'
-				color={themes[theme].fontDefault}
+				color={colors.fontDefault}
 				onPress={toggleLivechat}
-				additionalAcessibilityLabel={status}
+				additionalAcessibilityLabel={statusLivechat}
 				right={() => (
 					<View style={styles.omnichannelRightContainer}>
-						<Switch value={status} onValueChange={toggleLivechat} />
+						<Switch value={isOmnichannelStatusAvailable(statusLivechat)} onValueChange={toggleLivechat} />
 					</View>
 				)}
 			/>
 			<List.Separator />
-			{status ? <OmnichannelQueue queueSize={queueSize} onPress={goQueue} /> : null}
+			{isOmnichannelStatusAvailable(statusLivechat) ? <OmnichannelQueue queueSize={queueSize} onPress={goQueue} /> : null}
 		</>
 	);
 });