[IMPROVE] - migrating the RoomHeader container

app/containers/RoomHeader/RoomHeader.tsx

@@ -1,8 +1,6 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import {
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-	View, Text, StyleSheet, TouchableOpacity
-} from 'react-native';
 
 import I18n from '../../i18n';
 import sharedStyles from '../../views/Styles';
@@ -17,7 +15,7 @@ const HIT_SLOP = {
 const TITLE_SIZE = 16;
 const SUBTITLE_SIZE = 12;
 
-const getSubTitleSize = scale => SUBTITLE_SIZE * scale;
+const getSubTitleSize = (scale: number) => SUBTITLE_SIZE * scale;
 
 const styles = StyleSheet.create({
 	container: {
@@ -41,9 +39,42 @@ const styles = StyleSheet.create({
 	}
 });
 
-const SubTitle = React.memo(({
+type TRoomHeaderSubTitle = {
-	usersTyping, subtitle, renderFunc, theme, scale
+	usersTyping: [];
-}) => {
+	theme: string;
+	subtitle: string;
+	renderFunc: any;
+	scale: number;
+};
+
+type TRoomHeaderHeaderTitle = {
+	title: string;
+	tmid: string;
+	prid: string;
+	scale: number;
+	theme: string;
+	testID: string;
+};
+
+interface IRoomHeader {
+	title: string;
+	subtitle: string;
+	type: string;
+	width: number;
+	height: number;
+	prid: string;
+	tmid: string;
+	teamMain: boolean;
+	status: string;
+	theme: string;
+	usersTyping: [];
+	isGroupChat: boolean;
+	parentTitle: string;
+	onPress: Function;
+	testID: string;
+}
+
+const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, theme, scale }: TRoomHeaderSubTitle) => {
 	const fontSize = getSubTitleSize(scale);
 	// typing
 	if (usersTyping.length) {
@@ -69,6 +100,7 @@ const SubTitle = React.memo(({
 	// subtitle
 	if (subtitle) {
 		return (
+			// @ts-ignore
 			<Markdown
 				preview
 				msg={subtitle}
@@ -82,17 +114,7 @@ const SubTitle = React.memo(({
 	return null;
 });
 
-SubTitle.propTypes = {
+const HeaderTitle = React.memo(({ title, tmid, prid, scale, theme, testID }: TRoomHeaderHeaderTitle) => {
-	usersTyping: PropTypes.array,
-	theme: PropTypes.string,
-	subtitle: PropTypes.string,
-	renderFunc: PropTypes.func,
-	scale: PropTypes.number
-};
-
-const HeaderTitle = React.memo(({
-	title, tmid, prid, scale, theme, testID
-}) => {
 	const titleStyle = { fontSize: TITLE_SIZE * scale, color: themes[theme].headerTitleColor };
 	if (!tmid && !prid) {
 		return (
@@ -107,6 +129,7 @@ const HeaderTitle = React.memo(({
 	}
 
 	return (
+		// @ts-ignore
 		<Markdown
 			preview
 			msg={title}
@@ -118,18 +141,9 @@ const HeaderTitle = React.memo(({
 	);
 });
 
-HeaderTitle.propTypes = {
-	title: PropTypes.string,
-	tmid: PropTypes.string,
-	prid: PropTypes.string,
-	scale: PropTypes.number,
-	theme: PropTypes.string,
-	testID: PropTypes.string
-};
-
 const Header = React.memo(({
 	title, subtitle, parentTitle, type, status, usersTyping, width, height, prid, tmid, onPress, theme, isGroupChat, teamMain, testID
-}) => {
+}: IRoomHeader) => {
 	const portrait = height > width;
 	let scale = 1;
 
@@ -157,6 +171,7 @@ const Header = React.memo(({
 			accessibilityLabel={title}
 			onPress={handleOnPress}
 			style={styles.container}
+			// @ts-ignore
 			disabled={tmid}
 			hitSlop={HIT_SLOP}
 		>
@@ -182,26 +197,4 @@ const Header = React.memo(({
 	);
 });
 
-Header.propTypes = {
-	title: PropTypes.string.isRequired,
-	subtitle: PropTypes.string,
-	type: PropTypes.string.isRequired,
-	width: PropTypes.number.isRequired,
-	height: PropTypes.number.isRequired,
-	prid: PropTypes.string,
-	tmid: PropTypes.string,
-	teamMain: PropTypes.bool,
-	status: PropTypes.string,
-	theme: PropTypes.string,
-	usersTyping: PropTypes.array,
-	isGroupChat: PropTypes.bool,
-	parentTitle: PropTypes.string,
-	onPress: PropTypes.func,
-	testID: PropTypes.string
-};
-
-Header.defaultProps = {
-	usersTyping: []
-};
-
 export default withTheme(Header);

app/containers/RoomHeader/index.tsx

@@ -7,30 +7,31 @@ import RoomHeader from './RoomHeader';
 import { withDimensions } from '../../dimensions';
 import I18n from '../../i18n';
 
-class RoomHeaderContainer extends Component {
+interface IRoomHeaderContainerProps {
-	static propTypes = {
+	title: string;
-		title: PropTypes.string,
+	subtitle: string;
-		subtitle: PropTypes.string,
+	type: string;
-		type: PropTypes.string,
+	prid: string;
-		prid: PropTypes.string,
+	tmid: string;
-		tmid: PropTypes.string,
+	teamMain: boolean;
-		teamMain: PropTypes.bool,
+	usersTyping: string;
-		usersTyping: PropTypes.string,
+	status: string;
-		status: PropTypes.string,
+	statusText: string;
-		statusText: PropTypes.string,
+	connecting: boolean;
-		connecting: PropTypes.bool,
+	connected: boolean;
-		connected: PropTypes.bool,
+	roomUserId: string;
-		roomUserId: PropTypes.string,
+	widthOffset: number;
-		widthOffset: PropTypes.number,
+	onPress(): void;
-		onPress: PropTypes.func,
+	width: number;
-		width: PropTypes.number,
+	height: number;
-		height: PropTypes.number,
+	parentTitle: string;
-		parentTitle: PropTypes.string,
+	isGroupChat: boolean;
-		isGroupChat: PropTypes.bool,
+	testID: string;
-		testID: PropTypes.string
+}
-	};
 
-	shouldComponentUpdate(nextProps) {
+class RoomHeaderContainer extends Component<IRoomHeaderContainerProps, any> {
+
+	shouldComponentUpdate(nextProps: IRoomHeaderContainerProps) {
 		const {
 			type, title, subtitle, status, statusText, connecting, connected, onPress, usersTyping, width, height, teamMain
 		} = this.props;
@@ -129,12 +130,10 @@ class RoomHeaderContainer extends Component {
 	}
 }
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state: any, ownProps: any) => {
 	let statusText;
 	let status = 'offline';
-	const {
+	const { roomUserId, type, visitor = {}, tmid } = ownProps;
-		roomUserId, type, visitor = {}, tmid
-	} = ownProps;
 
 	if (state.meteor.connected) {
 		if ((type === 'd' || (tmid && roomUserId)) && state.activeUsers[roomUserId]) {