Chore: evaluate Header components - TypeScript (#3918)

* update: Header components

app/containers/Header/index.tsx

@@ -5,12 +5,11 @@ import { StyleSheet, View } from 'react-native';
 import { themes } from '../../constants/colors';
 import { themedHeader } from '../../utils/navigation';
 import { isIOS, isTablet } from '../../utils/deviceInfo';
-import { withTheme } from '../../theme';
+import { useTheme } from '../../theme';
 
-// Get from https://github.com/react-navigation/react-navigation/blob/master/packages/stack/src/views/Header/HeaderSegment.tsx#L69
 export const headerHeight = isIOS ? 44 : 56;
 
-export const getHeaderHeight = (isLandscape: boolean) => {
+export const getHeaderHeight = (isLandscape: boolean): number => {
 	if (isIOS) {
 		if (isLandscape && !isTablet) {
 			return 32;
@@ -28,7 +27,13 @@ interface IHeaderTitlePosition {
 	numIconsRight: number;
 }
 
-export const getHeaderTitlePosition = ({ insets, numIconsRight }: IHeaderTitlePosition) => ({
+export const getHeaderTitlePosition = ({
+	insets,
+	numIconsRight
+}: IHeaderTitlePosition): {
+	left: number;
+	right: number;
+} => ({
 	left: insets.left + 60,
 	right: insets.right + Math.max(45 * numIconsRight, 15)
 });
@@ -43,13 +48,14 @@ const styles = StyleSheet.create({
 });
 
 interface IHeader {
-	theme: string;
-	headerLeft(): void;
-	headerTitle(): void;
-	headerRight(): void;
+	headerLeft: () => React.ReactElement | null;
+	headerTitle: () => React.ReactElement;
+	headerRight: () => React.ReactElement | null;
 }
 
-const Header = ({ theme, headerLeft, headerTitle, headerRight }: IHeader) => (
+const Header = ({ headerLeft, headerTitle, headerRight }: IHeader): React.ReactElement => {
+	const { theme } = useTheme();
+	return (
 		<SafeAreaView style={{ backgroundColor: themes[theme].headerBackground }} edges={['top', 'left', 'right']}>
 			<View style={[styles.container, { ...themedHeader(theme).headerStyle }]}>
 				{headerLeft ? headerLeft() : null}
@@ -57,6 +63,7 @@ const Header = ({ theme, headerLeft, headerTitle, headerRight }: IHeader) => (
 				{headerRight ? headerRight() : null}
 			</View>
 		</SafeAreaView>
-);
+	);
+};
 
-export default withTheme(Header);
+export default Header;

app/containers/List/ListHeader.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../constants/colors';
 import I18n from '../../i18n';
-import { withTheme } from '../../theme';
+import { useTheme } from '../../theme';
 import { PADDING_HORIZONTAL } from './constants';
 
 const styles = StyleSheet.create({
@@ -20,18 +20,20 @@ const styles = StyleSheet.create({
 
 interface IListHeader {
 	title: string;
-	theme?: string;
 	translateTitle?: boolean;
 }
 
-const ListHeader = React.memo(({ title, theme, translateTitle = true }: IListHeader) => (
+const ListHeader = React.memo(({ title, translateTitle = true }: IListHeader) => {
+	const { theme } = useTheme();
+	return (
 		<View style={styles.container}>
-		<Text style={[styles.title, { color: themes[theme!].infoText }]} numberOfLines={1}>
+			<Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}>
 				{translateTitle ? I18n.t(title) : title}
 			</Text>
 		</View>
-));
+	);
+});
 
 ListHeader.displayName = 'List.Header';
 
-export default withTheme(ListHeader);
+export default ListHeader;

app/containers/List/ListInfo.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../constants/colors';
-import { withTheme } from '../../theme';
+import { useTheme } from '../../theme';
 import { PADDING_HORIZONTAL } from './constants';
 import I18n from '../../i18n';
 
@@ -18,18 +18,20 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IListHeader {
+interface IListInfo {
 	info: string;
-	theme?: string;
 	translateInfo?: boolean;
 }
 
-const ListInfo = React.memo(({ info, theme, translateInfo = true }: IListHeader) => (
+const ListInfo = React.memo(({ info, translateInfo = true }: IListInfo) => {
+	const { theme } = useTheme();
+	return (
 		<View style={styles.container}>
-		<Text style={[styles.text, { color: themes[theme!].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
+			<Text style={[styles.text, { color: themes[theme].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
 		</View>
-));
+	);
+});
 
 ListInfo.displayName = 'List.Info';
 
-export default withTheme(ListInfo);
+export default ListInfo;

app/views/RoomsListView/Header/Header.tsx

@@ -8,6 +8,7 @@ import { themes } from '../../../constants/colors';
 import { CustomIcon } from '../../../lib/Icons';
 import { isIOS, isTablet } from '../../../utils/deviceInfo';
 import { useOrientation } from '../../../dimensions';
+import { useTheme } from '../../../theme';
 
 const styles = StyleSheet.create({
 	container: {
@@ -38,7 +39,6 @@ interface IRoomHeader {
 	server: string;
 	showServerDropdown: boolean;
 	showSearchHeader: boolean;
-	theme: string;
 	onSearchChangeText: TextInputProps['onChangeText'];
 	onPress: TouchableOpacityProps['onPress'];
 }
@@ -52,10 +52,10 @@ const Header = React.memo(
 		server,
 		showServerDropdown,
 		showSearchHeader,
-		theme,
 		onSearchChangeText,
 		onPress
 	}: IRoomHeader) => {
+		const { theme } = useTheme();
 		const titleColorStyle = { color: themes[theme].headerTitleColor };
 		const isLight = theme === 'light';
 		const { isLandscape } = useOrientation();

app/views/RoomsListView/Header/index.tsx

@@ -59,11 +59,10 @@ class RoomsListHeaderView extends PureComponent<IRoomsListHeaderViewProps, any>
 	};
 
 	render() {
-		const { serverName, showServerDropdown, showSearchHeader, connecting, connected, isFetching, theme, server } = this.props;
+		const { serverName, showServerDropdown, showSearchHeader, connecting, connected, isFetching, server } = this.props;
 
 		return (
 			<Header
-				theme={theme}
 				serverName={serverName}
 				server={server}
 				showServerDropdown={showServerDropdown}

app/views/RoomsListView/ListHeader/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { withTheme } from '../../../theme';
+import { useTheme } from '../../../theme';
 import * as List from '../../../containers/List';
 import { E2E_BANNER_TYPE } from '../../../lib/encryption/constants';
 import { themes } from '../../../constants/colors';
@@ -17,15 +17,16 @@ interface IRoomListHeader {
 	inquiryEnabled: boolean;
 	encryptionBanner: TEncryptionBanner;
 	user: IUser;
-	theme: string;
 }
 
 const ListHeader = React.memo(
-	({ searching, goEncryption, goQueue, queueSize, inquiryEnabled, encryptionBanner, user, theme }: IRoomListHeader) => {
+	({ searching, goEncryption, goQueue, queueSize, inquiryEnabled, encryptionBanner, user }: IRoomListHeader) => {
 		if (searching) {
 			return null;
 		}
 
+		const { theme } = useTheme();
+
 		return (
 			<>
 				{encryptionBanner ? (
@@ -48,7 +49,6 @@ const ListHeader = React.memo(
 				) : null}
 				<List.Separator />
 				<OmnichannelStatus
-					// @ts-ignore // TODO - remove this @ts-ignore after merge omnichannel task
 					searching={searching}
 					goQueue={goQueue}
 					inquiryEnabled={inquiryEnabled}
@@ -60,4 +60,4 @@ const ListHeader = React.memo(
 	}
 );
 
-export default withTheme(ListHeader);
+export default ListHeader;

app/views/RoomsListView/index.tsx

@@ -912,7 +912,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 
 	renderListHeader = () => {
 		const { searching } = this.state;
-		const { queueSize, inquiryEnabled, encryptionBanner, user, theme } = this.props;
+		const { queueSize, inquiryEnabled, encryptionBanner, user } = this.props;
 		return (
 			<ListHeader
 				searching={searching}
@@ -922,7 +922,6 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 				inquiryEnabled={inquiryEnabled}
 				encryptionBanner={encryptionBanner}
 				user={user}
-				theme={theme}
 			/>
 		);
 	};
@@ -934,7 +933,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 			return null;
 		}
 
-		const options = this.getHeader() as any;
+		const options = this.getHeader();
 		return <Header {...options} />;
 	};