[FIX] TypeScript's errors raised by HOCs (RocketChat#3535)

Co-authored-by: AlexAlexandre <alexalexandrejr@gmail.com> Co-authored-by: Diego Mello <diegolmello@gmail.com>
NextiaDev · Jan 17, 2022 · 2db91a1 · 2db91a1
1 parent 06e41e3
commit 2db91a1
Show file tree

Hide file tree

Showing 73 changed files with 409 additions and 410 deletions.
diff --git a/app/AppContainer.tsx b/app/AppContainer.tsx
@@ -3,7 +3,7 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { connect } from 'react-redux';
 
-import { SetUsernameStackParamList, StackParamList } from './navigationTypes';
+import { SetUsernameStackParamList, StackParamList } from './definitions/navigationTypes';
 import Navigation from './lib/Navigation';
 import { defaultHeader, getActiveRouteName, navigationTheme } from './utils/navigation';
 import { ROOT_INSIDE, ROOT_LOADING, ROOT_OUTSIDE, ROOT_SET_USERNAME } from './actions/app';

diff --git a/app/containers/BackgroundContainer/index.tsx b/app/containers/BackgroundContainer/index.tsx
@@ -6,9 +6,9 @@ import sharedStyles from '../../views/Styles';
 import { themes } from '../../constants/colors';
 
 interface IBackgroundContainer {
-	text: string;
-	theme: string;
-	loading: boolean;
+	text?: string;
+	theme?: string;
+	loading?: boolean;
 }
 
 const styles = StyleSheet.create({
@@ -35,8 +35,8 @@ const styles = StyleSheet.create({
 const BackgroundContainer = ({ theme, text, loading }: IBackgroundContainer) => (
 	<View style={styles.container}>
 		<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
-		{text ? <Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text> : null}
-		{loading ? <ActivityIndicator style={styles.text} color={themes[theme].auxiliaryTintColor} /> : null}
+		{text ? <Text style={[styles.text, { color: themes[theme!].auxiliaryTintColor }]}>{text}</Text> : null}
+		{loading ? <ActivityIndicator style={styles.text} color={themes[theme!].auxiliaryTintColor} /> : null}
 	</View>
 );
 

diff --git a/app/containers/HeaderButton/Common.tsx b/app/containers/HeaderButton/Common.tsx
@@ -29,29 +29,29 @@ export const CloseModal = React.memo(
 export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
 	<Container left>
 		{isIOS ? (
-			<Item title={I18n.t('Cancel')} onPress={onPress} testID={testID} />
+			<Item title={I18n.t('Cancel')} onPress={onPress!} testID={testID} />
 		) : (
-			<Item iconName='close' onPress={onPress} testID={testID} />
+			<Item iconName='close' onPress={onPress!} testID={testID} />
 		)}
 	</Container>
 ));
 
 // Right
 export const More = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
 	<Container>
-		<Item iconName='kebab' onPress={onPress} testID={testID} />
+		<Item iconName='kebab' onPress={onPress!} testID={testID} />
 	</Container>
 ));
 
 export const Download = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
 	<Container>
-		<Item iconName='download' onPress={onPress} testID={testID} {...props} />
+		<Item iconName='download' onPress={onPress!} testID={testID} {...props} />
 	</Container>
 ));
 
 export const Preferences = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
 	<Container>
-		<Item iconName='settings' onPress={onPress} testID={testID} {...props} />
+		<Item iconName='settings' onPress={onPress!} testID={testID} {...props} />
 	</Container>
 ));
 

diff --git a/app/containers/HeaderButton/HeaderButtonItem.tsx b/app/containers/HeaderButton/HeaderButtonItem.tsx
@@ -8,12 +8,12 @@ import { themes } from '../../constants/colors';
 import sharedStyles from '../../views/Styles';
 
 interface IHeaderButtonItem {
-	title: string;
-	iconName: string;
-	onPress(): void;
-	testID: string;
-	theme: string;
-	badge(): void;
+	title?: string;
+	iconName?: string;
+	onPress: <T>(arg: T) => void;
+	testID?: string;
+	theme?: string;
+	badge?(): void;
 }
 
 export const BUTTON_HIT_SLOP = {
@@ -44,9 +44,9 @@ const Item = ({ title, iconName, onPress, testID, theme, badge }: IHeaderButtonI
 	<Touchable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={styles.container}>
 		<>
 			{iconName ? (
-				<CustomIcon name={iconName} size={24} color={themes[theme].headerTintColor} />
+				<CustomIcon name={iconName} size={24} color={themes[theme!].headerTintColor} />
 			) : (
-				<Text style={[styles.title, { color: themes[theme].headerTintColor }]}>{title}</Text>
+				<Text style={[styles.title, { color: themes[theme!].headerTintColor }]}>{title}</Text>
 			)}
 			{badge ? badge() : null}
 		</>

diff --git a/app/containers/List/ListContainer.tsx b/app/containers/List/ListContainer.tsx
@@ -11,10 +11,10 @@ const styles = StyleSheet.create({
 });
 
 interface IListContainer {
-	children: JSX.Element;
+	children: React.ReactNode;
+	testID?: string;
 }
 const ListContainer = React.memo(({ children, ...props }: IListContainer) => (
-	// @ts-ignore
 	<ScrollView
 		contentContainerStyle={styles.container}
 		scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444

diff --git a/app/containers/List/ListHeader.tsx b/app/containers/List/ListHeader.tsx
@@ -20,13 +20,13 @@ const styles = StyleSheet.create({
 
 interface IListHeader {
 	title: string;
-	theme: string;
-	translateTitle: boolean;
+	theme?: string;
+	translateTitle?: boolean;
 }
 
 const ListHeader = React.memo(({ title, theme, translateTitle = true }: IListHeader) => (
 	<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>

diff --git a/app/containers/List/ListIcon.tsx b/app/containers/List/ListIcon.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { themes } from '../../constants/colors';
 import { CustomIcon } from '../../lib/Icons';
 import { withTheme } from '../../theme';
 import { ICON_SIZE } from './constants';
 
 interface IListIcon {
-	theme: string;
+	theme?: string;
 	name: string;
-	color: string;
-	style: object;
-	testID: string;
+	color?: string;
+	style?: StyleProp<ViewStyle>;
+	testID?: string;
 }
 
 const styles = StyleSheet.create({
@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
 
 const ListIcon = React.memo(({ theme, name, color, style, testID }: IListIcon) => (
 	<View style={[styles.icon, style]}>
-		<CustomIcon name={name} color={color ?? themes[theme].auxiliaryText} size={ICON_SIZE} testID={testID} />
+		<CustomIcon name={name} color={color ?? themes[theme!].auxiliaryText} size={ICON_SIZE} testID={testID} />
 	</View>
 ));
 

diff --git a/app/containers/List/ListInfo.tsx b/app/containers/List/ListInfo.tsx
@@ -20,13 +20,13 @@ const styles = StyleSheet.create({
 
 interface IListHeader {
 	info: string;
-	theme: string;
-	translateInfo: boolean;
+	theme?: string;
+	translateInfo?: boolean;
 }
 
 const ListInfo = React.memo(({ info, theme, translateInfo = true }: IListHeader) => (
 	<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>
 ));
 

diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx
@@ -56,11 +56,11 @@ const styles = StyleSheet.create({
 interface IListItemContent {
 	title?: string;
 	subtitle?: string;
-	left?: Function;
-	right?: Function;
+	left?: () => JSX.Element | null;
+	right?: () => JSX.Element | null;
 	disabled?: boolean;
 	testID?: string;
-	theme: string;
+	theme?: string;
 	color?: string;
 	translateTitle?: boolean;
 	translateSubtitle?: boolean;
@@ -89,15 +89,15 @@ const Content = React.memo(
 			{left ? <View style={styles.leftContainer}>{left()}</View> : null}
 			<View style={styles.textContainer}>
 				<View style={styles.textAlertContainer}>
-					<Text style={[styles.title, { color: color || themes[theme].titleText }]} numberOfLines={1}>
+					<Text style={[styles.title, { color: color || themes[theme!].titleText }]} numberOfLines={1}>
 						{translateTitle ? I18n.t(title) : title}
 					</Text>
 					{alert ? (
-						<CustomIcon style={[styles.alertIcon, { color: themes[theme].dangerColor }]} size={ICON_SIZE} name='info' />
+						<CustomIcon style={[styles.alertIcon, { color: themes[theme!].dangerColor }]} size={ICON_SIZE} name='info' />
 					) : null}
 				</View>
 				{subtitle ? (
-					<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+					<Text style={[styles.subtitle, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
 						{translateSubtitle ? I18n.t(subtitle) : subtitle}
 					</Text>
 				) : null}
@@ -112,38 +112,39 @@ const Content = React.memo(
 	)
 );
 
-interface IListItemButton {
+interface IListButtonPress {
+	onPress?: Function;
+}
+
+interface IListItemButton extends IListButtonPress {
 	title?: string;
-	onPress: Function;
 	disabled?: boolean;
-	theme: string;
-	backgroundColor: string;
+	theme?: string;
+	backgroundColor?: string;
 	underlayColor?: string;
 }
 
-const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => (
+const Button = React.memo<IListItemButton>(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => (
 	<Touch
-		onPress={() => onPress(props.title)}
-		style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
+		onPress={() => onPress!(props.title)}
+		style={{ backgroundColor: backgroundColor || themes[props.theme!].backgroundColor }}
 		underlayColor={underlayColor}
 		enabled={!props.disabled}
-		theme={props.theme}>
+		theme={props.theme!}>
 		<Content {...props} />
 	</Touch>
 ));
 
-interface IListItem {
-	onPress: Function;
-	theme: string;
-	backgroundColor: string;
+interface IListItem extends IListItemContent, IListButtonPress {
+	backgroundColor?: string;
 }
 
-const ListItem = React.memo(({ ...props }: IListItem) => {
+const ListItem = React.memo<IListItem>(({ ...props }: IListItem) => {
 	if (props.onPress) {
 		return <Button {...props} />;
 	}
 	return (
-		<View style={{ backgroundColor: props.backgroundColor || themes[props.theme].backgroundColor }}>
+		<View style={{ backgroundColor: props.backgroundColor || themes[props.theme!].backgroundColor }}>
 			<Content {...props} />
 		</View>
 	);

diff --git a/app/containers/List/ListSection.tsx b/app/containers/List/ListSection.tsx
@@ -11,9 +11,9 @@ const styles = StyleSheet.create({
 });
 
 interface IListSection {
-	children: JSX.Element;
-	title: string;
-	translateTitle: boolean;
+	children: React.ReactNode;
+	title?: string;
+	translateTitle?: boolean;
 }
 
 const ListSection = React.memo(({ children, title, translateTitle }: IListSection) => (

diff --git a/app/containers/List/ListSeparator.tsx b/app/containers/List/ListSeparator.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
@@ -11,12 +11,12 @@ const styles = StyleSheet.create({
 });
 
 interface IListSeparator {
-	style: object;
-	theme: string;
+	style?: ViewStyle;
+	theme?: string;
 }
 
 const ListSeparator = React.memo(({ style, theme }: IListSeparator) => (
-	<View style={[styles.separator, style, { backgroundColor: themes[theme].separatorColor }]} />
+	<View style={[styles.separator, style, { backgroundColor: themes[theme!].separatorColor }]} />
 ));
 
 ListSeparator.displayName = 'List.Separator';

diff --git a/app/containers/Loading.tsx b/app/containers/Loading.tsx
@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
 
 interface ILoadingProps {
 	visible: boolean;
-	theme: string;
+	theme?: string;
 }
 
 class Loading extends React.PureComponent<ILoadingProps, any> {
@@ -97,7 +97,7 @@ class Loading extends React.PureComponent<ILoadingProps, any> {
 
 		const opacityAnimation = opacity.interpolate({
 			inputRange: [0, 1],
-			outputRange: [0, themes[theme].backdropOpacity],
+			outputRange: [0, themes[theme!].backdropOpacity],
 			extrapolate: 'clamp'
 		});
 
@@ -109,7 +109,7 @@ class Loading extends React.PureComponent<ILoadingProps, any> {
 							{
 								// @ts-ignore
 								...StyleSheet.absoluteFill,
-								backgroundColor: themes[theme].backdropColor,
+								backgroundColor: themes[theme!].backdropColor,
 								opacity: opacityAnimation
 							}
 						]}

diff --git a/app/containers/MessageActions/Header.tsx b/app/containers/MessageActions/Header.tsx
@@ -17,7 +17,7 @@ interface IHeader {
 	server: string;
 	message: object;
 	isMasterDetail: boolean;
-	theme: string;
+	theme?: string;
 }
 
 interface THeaderItem {
@@ -117,19 +117,19 @@ const Header = React.memo(({ handleReaction, server, message, isMasterDetail, th
 	const onReaction = ({ emoji }: { emoji: IEmoji }) => handleReaction(emoji, message);
 
 	const renderItem = useCallback(
-		({ item }) => <HeaderItem item={item} onReaction={onReaction} server={server} theme={theme} />,
+		({ item }) => <HeaderItem item={item} onReaction={onReaction} server={server} theme={theme!} />,
 		[]
 	);
 
-	const renderFooter = useCallback(() => <HeaderFooter onReaction={onReaction} theme={theme} />, []);
+	const renderFooter = useCallback(() => <HeaderFooter onReaction={onReaction} theme={theme!} />, []);
 
 	return (
-		<View style={[styles.container, { backgroundColor: themes[theme].focusedBackground }]}>
+		<View style={[styles.container, { backgroundColor: themes[theme!].focusedBackground }]}>
 			<FlatList
 				data={items}
 				renderItem={renderItem}
 				ListFooterComponent={renderFooter}
-				style={{ backgroundColor: themes[theme].focusedBackground }}
+				style={{ backgroundColor: themes[theme!].focusedBackground }}
 				keyExtractor={keyExtractor}
 				showsHorizontalScrollIndicator={false}
 				scrollEnabled={false}

diff --git a/app/containers/MessageActions/index.tsx b/app/containers/MessageActions/index.tsx
@@ -18,7 +18,7 @@ import events from '../../utils/log/events';
 
 interface IMessageActions {
 	room: {
-		rid: string | number;
+		rid: string;
 		autoTranslateLanguage: any;
 		autoTranslate: any;
 		reactWhenReadOnly: any;

diff --git a/app/containers/MessageBox/CommandsPreview/Item.tsx b/app/containers/MessageBox/CommandsPreview/Item.tsx
@@ -14,7 +14,7 @@ interface IMessageBoxCommandsPreviewItem {
 		id: string;
 		value: string;
 	};
-	theme: string;
+	theme?: string;
 }
 
 const Item = ({ item, theme }: IMessageBoxCommandsPreviewItem) => {
@@ -37,7 +37,7 @@ const Item = ({ item, theme }: IMessageBoxCommandsPreviewItem) => {
 					{loading ? <ActivityIndicator theme={theme} /> : null}
 				</FastImage>
 			) : (
-				<CustomIcon name='attach' size={36} color={themes[theme].actionTintColor} />
+				<CustomIcon name='attach' size={36} color={themes[theme!].actionTintColor} />
 			)}
 		</TouchableOpacity>
 	);