Chore: Hooks - migrate RoomHeader to hook (#4200)

* roomHeader hook

* minor tweak

* Fix ts stuffs

* fix colors

* refactor

app/containers/RoomHeader/RoomHeader.stories.js

@@ -8,6 +8,7 @@ import Header from '../Header';
 import { longText } from '../../../storybook/utils';
 import { ThemeContext } from '../../theme';
 import { store } from '../../../storybook/stories';
+import { colors } from '../../lib/constants';
 import RoomHeaderComponent from './RoomHeader';
 
 const stories = storiesOf('RoomHeader', module).addDecorator(story => <Provider store={store}>{story()}</Provider>);
@@ -82,7 +83,7 @@ stories.add('thread', () => (
 ));
 
 const ThemeStory = ({ theme }) => (
-	<ThemeContext.Provider value={{ theme }}>
+	<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
 		<HeaderExample title={() => <RoomHeader subtitle='subtitle' />} />
 	</ThemeContext.Provider>
 );

app/containers/RoomHeader/RoomHeader.tsx

@@ -3,7 +3,6 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import I18n from '../../i18n';
 import sharedStyles from '../../views/Styles';
-import { themes } from '../../lib/constants';
 import { MarkdownPreview } from '../markdown';
 import RoomTypeIcon from '../RoomTypeIcon';
 import { TUserStatus, IOmnichannelSource } from '../../definitions';
@@ -44,39 +43,39 @@ const styles = StyleSheet.create({
 
 type TRoomHeaderSubTitle = {
 	usersTyping: [];
-	subtitle: string;
+	subtitle?: string;
 	renderFunc?: () => React.ReactElement;
 	scale: number;
 };
 
 type TRoomHeaderHeaderTitle = {
-	title: string;
+	title?: string;
-	tmid: string;
+	tmid?: string;
-	prid: string;
+	prid?: string;
 	scale: number;
-	testID: string;
+	testID?: string;
 };
 
 interface IRoomHeader {
-	title: string;
+	title?: string;
-	subtitle: string;
+	subtitle?: string;
 	type: string;
 	width: number;
 	height: number;
-	prid: string;
+	prid?: string;
-	tmid: string;
+	tmid?: string;
-	teamMain: boolean;
+	teamMain?: boolean;
 	status: TUserStatus;
 	usersTyping: [];
-	isGroupChat: boolean;
+	isGroupChat?: boolean;
-	parentTitle: string;
+	parentTitle?: string;
-	onPress: () => void;
+	onPress: Function;
-	testID: string;
+	testID?: string;
 	sourceType?: IOmnichannelSource;
 }
 
 const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoomHeaderSubTitle) => {
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 	const fontSize = getSubTitleSize(scale);
 	// typing
 	if (usersTyping.length) {
@@ -87,7 +86,7 @@ const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoom
 			usersText = usersTyping.join(', ');
 		}
 		return (
-			<Text style={[styles.subtitle, { fontSize, color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+			<Text style={[styles.subtitle, { fontSize, color: colors.auxiliaryText }]} numberOfLines={1}>
 				<Text style={styles.typingUsers}>{usersText} </Text>
 				{usersTyping.length > 1 ? I18n.t('are_typing') : I18n.t('is_typing')}...
 			</Text>
@@ -101,15 +100,15 @@ const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoom
 
 	// subtitle
 	if (subtitle) {
-		return <MarkdownPreview msg={subtitle} style={[styles.subtitle, { fontSize, color: themes[theme].auxiliaryText }]} />;
+		return <MarkdownPreview msg={subtitle} style={[styles.subtitle, { fontSize, color: colors.auxiliaryText }]} />;
 	}
 
 	return null;
 });
 
 const HeaderTitle = React.memo(({ title, tmid, prid, scale, testID }: TRoomHeaderHeaderTitle) => {
-	const { theme } = useTheme();
+	const { colors } = useTheme();
-	const titleStyle = { fontSize: TITLE_SIZE * scale, color: themes[theme].headerTitleColor };
+	const titleStyle = { fontSize: TITLE_SIZE * scale, color: colors.headerTitleColor };
 	if (!tmid && !prid) {
 		return (
 			<Text style={[styles.title, titleStyle]} numberOfLines={1} testID={testID}>
@@ -139,7 +138,7 @@ const Header = React.memo(
 		usersTyping = [],
 		sourceType
 	}: IRoomHeader) => {
-		const { theme } = useTheme();
+		const { colors } = useTheme();
 		const portrait = height > width;
 		let scale = 1;
 
@@ -154,7 +153,7 @@ const Header = React.memo(
 			renderFunc = () => (
 				<View style={styles.titleContainer}>
 					<RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} teamMain={teamMain} />
-					<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+					<Text style={[styles.subtitle, { color: colors.auxiliaryText }]} numberOfLines={1}>
 						{parentTitle}
 					</Text>
 				</View>

app/containers/RoomHeader/index.tsx

@@ -1,117 +1,56 @@
-import { dequal } from 'dequal';
+import React from 'react';
-import React, { Component } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
-import { connect } from 'react-redux';
 
-import { IApplicationState, TUserStatus, IOmnichannelSource } from '../../definitions';
+import { IApplicationState, TUserStatus, IOmnichannelSource, IVisitor } from '../../definitions';
-import { withDimensions } from '../../dimensions';
+import { useDimensions } from '../../dimensions';
 import I18n from '../../i18n';
 import RoomHeader from './RoomHeader';
 
 interface IRoomHeaderContainerProps {
-	title: string;
+	title?: string;
-	subtitle: string;
+	subtitle?: string;
 	type: string;
-	prid: string;
+	prid?: string;
-	tmid: string;
+	tmid?: string;
-	teamMain: boolean;
+	teamMain?: boolean;
-	usersTyping: [];
+	roomUserId?: string | null;
-	status: TUserStatus;
+	onPress: Function;
-	statusText: string;
+	parentTitle?: string;
-	connecting: boolean;
+	isGroupChat?: boolean;
-	connected: boolean;
+	testID?: string;
-	roomUserId: string;
-	widthOffset: number;
-	onPress(): void;
-	width: number;
-	height: number;
-	parentTitle: string;
-	isGroupChat: boolean;
-	testID: string;
 	sourceType?: IOmnichannelSource;
+	visitor?: IVisitor;
 }
 
-class RoomHeaderContainer extends Component<IRoomHeaderContainerProps, any> {
+const RoomHeaderContainer = React.memo(
-	shouldComponentUpdate(nextProps: IRoomHeaderContainerProps) {
+	({
-		const {
+		isGroupChat,
-			type,
+		onPress,
-			title,
+		parentTitle,
-			subtitle,
+		prid,
-			status,
+		roomUserId,
-			statusText,
+		subtitle: subtitleProp,
-			connecting,
+		teamMain,
-			connected,
+		testID,
-			onPress,
+		title,
-			usersTyping,
+		tmid,
-			width,
+		type,
-			height,
+		sourceType,
-			teamMain,
+		visitor
-			sourceType
+	}: IRoomHeaderContainerProps) => {
-		} = this.props;
+		let subtitle: string | undefined;
-		if (nextProps.type !== type) {
+		let status: TUserStatus = 'offline';
-			return true;
+		let statusText: string | undefined;
-		}
+		const { width, height } = useDimensions();
-		if (nextProps.title !== title) {
-			return true;
-		}
-		if (nextProps.subtitle !== subtitle) {
-			return true;
-		}
-		if (nextProps.status !== status) {
-			return true;
-		}
-		if (nextProps.statusText !== statusText) {
-			return true;
-		}
-		if (nextProps.connecting !== connecting) {
-			return true;
-		}
-		if (nextProps.connected !== connected) {
-			return true;
-		}
-		if (nextProps.width !== width) {
-			return true;
-		}
-		if (nextProps.height !== height) {
-			return true;
-		}
-		if (!dequal(nextProps.usersTyping, usersTyping)) {
-			return true;
-		}
-		if (!dequal(nextProps.sourceType, sourceType)) {
-			return true;
-		}
-		if (nextProps.onPress !== onPress) {
-			return true;
-		}
-		if (nextProps.teamMain !== teamMain) {
-			return true;
-		}
-		return false;
-	}
 
-	render() {
+		const connecting = useSelector((state: IApplicationState) => state.meteor.connecting || state.server.loading);
-		const {
+		const usersTyping = useSelector((state: IApplicationState) => state.usersTyping, shallowEqual);
-			title,
+		const connected = useSelector((state: IApplicationState) => state.meteor.connected);
-			subtitle: subtitleProp,
+		const activeUser = useSelector(
-			type,
+			(state: IApplicationState) => (roomUserId ? state.activeUsers?.[roomUserId] : undefined),
-			teamMain,
+			shallowEqual
-			prid,
+		);
-			tmid,
-			status = 'offline',
-			statusText,
-			connecting,
-			connected,
-			usersTyping,
-			onPress,
-			width,
-			height,
-			parentTitle,
-			isGroupChat,
-			testID,
-			sourceType
-		} = this.props;
 
-		let subtitle;
 		if (connecting) {
 			subtitle = I18n.t('Connecting');
 		} else if (!connected) {
@@ -120,6 +59,17 @@ class RoomHeaderContainer extends Component<IRoomHeaderContainerProps, any> {
 			subtitle = subtitleProp;
 		}
 
+		if (connected) {
+			if ((type === 'd' || (tmid && roomUserId)) && activeUser) {
+				const { status: statusActiveUser, statusText: statusTextActiveUser } = activeUser;
+				status = statusActiveUser;
+				statusText = statusTextActiveUser;
+			} else if (type === 'l' && visitor?.status) {
+				const { status: statusVisitor } = visitor;
+				status = statusVisitor;
+			}
+		}
+
 		return (
 			<RoomHeader
 				prid={prid}
@@ -140,28 +90,6 @@ class RoomHeaderContainer extends Component<IRoomHeaderContainerProps, any> {
 			/>
 		);
 	}
-}
+);
 
-const mapStateToProps = (state: IApplicationState, ownProps: any) => {
+export default RoomHeaderContainer;
-	let statusText = '';
-	let status = 'offline';
-	const { roomUserId, type, visitor = {}, tmid } = ownProps;
-
-	if (state.meteor.connected) {
-		if ((type === 'd' || (tmid && roomUserId)) && state.activeUsers[roomUserId]) {
-			({ status, statusText } = state.activeUsers[roomUserId]);
-		} else if (type === 'l' && visitor?.status) {
-			({ status } = visitor);
-		}
-	}
-
-	return {
-		connecting: state.meteor.connecting || state.server.loading,
-		connected: state.meteor.connected,
-		usersTyping: state.usersTyping,
-		status: status as TUserStatus,
-		statusText
-	};
-};
-
-export default connect(mapStateToProps)(withDimensions(RoomHeaderContainer));

app/views/RoomView/index.tsx

@@ -624,7 +624,6 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 			),
 			headerTitle: () => (
 				<RoomHeader
-					rid={rid}
 					prid={prid}
 					tmid={tmid}
 					title={title}