Move onDiscussionpress logic on message, update SearchHeader and DiscussionDetails component, add useLayoutEffect at DiscussionsView

app/containers/SearchHeader.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import I18n from '../i18n';
 import { useTheme } from '../theme';
 import sharedStyles from '../views/Styles';
 import { themes } from '../constants/colors';
@@ -21,11 +22,10 @@ const styles = StyleSheet.create({
 
 interface ISearchHeaderProps {
 	onSearchChangeText?: (text: string) => void;
-	placeholder: string;
 	testID: string;
 }
 
-const SearchHeader = ({ onSearchChangeText, placeholder, testID }: ISearchHeaderProps) => {
+const SearchHeader = ({ onSearchChangeText, testID }: ISearchHeaderProps): JSX.Element => {
 	const { theme } = useTheme();
 	const isLight = theme === 'light';
 	const { isLandscape } = useOrientation();
@@ -37,7 +37,7 @@ const SearchHeader = ({ onSearchChangeText, placeholder, testID }: ISearchHeader
 			<TextInput
 				autoFocus
 				style={[styles.title, isLight && { color: themes[theme].headerTitleColor }, { fontSize: titleFontSize }]}
-				placeholder={placeholder}
+				placeholder={I18n.t('Search')}
 				onChangeText={onSearchChangeText}
 				theme={theme}
 				testID={testID}

app/containers/message/Message.tsx

@@ -102,11 +102,11 @@ const MessageTouchable = React.memo((props: IMessageTouchable & IMessage) => {
 			</View>
 		);
 	}
-	const { onPress, onLongPress, onDiscussionPress } = useContext(MessageContext);
+	const { onPress, onLongPress } = useContext(MessageContext);
 	return (
 		<Touchable
 			onLongPress={onLongPress}
-			onPress={() => (props.type === 'discussion-created' ? onDiscussionPress() : onPress())}
+			onPress={onPress}
 			disabled={(props.isInfo && !props.isThreadReply) || props.archived || props.isTemp}
 			style={{ backgroundColor: props.highlighted ? themes[props.theme].headerBackground : null }}>
 			<View>

app/containers/message/index.tsx

@@ -147,6 +147,12 @@ class MessageContainer extends React.Component<IMessageContainerProps> {
 			if ((item.tlm || item.tmid) && !isThreadRoom) {
 				this.onThreadPress();
 			}
+
+			const { onDiscussionPress } = this.props;
+
+			if (onDiscussionPress) {
+				onDiscussionPress(item);
+			}
 		},
 		300,
 		true

app/views/DiscussionsView/DiscussionDetails.tsx

@@ -34,11 +34,11 @@ interface IDiscussionDetails {
 	user: {
 		id: string;
 	};
-	time: string;
+	date: string;
 	style: ViewStyle;
 }
 
-const DiscussionDetails = ({ item, time, style }: IDiscussionDetails) => {
+const DiscussionDetails = ({ item, date, style }: IDiscussionDetails) => {
 	const { theme } = useTheme();
 	let { dcount } = item;
 
@@ -59,7 +59,7 @@ const DiscussionDetails = ({ item, time, style }: IDiscussionDetails) => {
 				<View style={styles.detailContainer}>
 					<CustomIcon name={'clock'} size={24} color={themes[theme!].auxiliaryText} />
 					<Text style={[styles.detailText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
-						{time}
+						{date}
 					</Text>
 				</View>
 			</View>

app/views/DiscussionsView/Item.tsx

@@ -89,18 +89,20 @@ const Item = ({ item, baseUrl, user, onPress }: IItem): JSX.Element => {
 						<Text style={[styles.time, { color: themes[theme!].auxiliaryText }]}>{messageTime!}</Text>
 					</View>
 					<View style={styles.messageContainer}>
-						{/* @ts-ignore */}
+						{makeThreadName(item) && item && username ? (
+							/* @ts-ignore */
 							<Markdown
 								msg={makeThreadName(item)!}
 								baseUrl={baseUrl}
-							username={username!}
+								username={username}
-							theme={theme!}
+								theme={theme}
 								numberOfLines={2}
 								style={[styles.markdown]}
 								preview
 							/>
+						) : null}
 					</View>
-					<DiscussionDetails item={item} user={user} time={messageDate!} style={styles.discussionDetails} />
+					<DiscussionDetails item={item} user={user} date={messageDate!} style={styles.discussionDetails} />
 				</View>
 			</View>
 		</Touchable>

app/views/DiscussionsView/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
 import { FlatList } from 'react-native';
 import { useSelector } from 'react-redux';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -127,11 +127,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
 					</HeaderButton.Container>
 				),
 				headerTitle: () => (
-					<SearchHeader
+					<SearchHeader onSearchChangeText={onSearchChangeText} testID='discussion-messages-view-search-header' />
-						placeholder='Search Messages'
-						onSearchChangeText={onSearchChangeText}
-						testID='discussion-messages-view-search-header'
-					/>
 				),
 				headerTitleContainerStyle: {
 					left: headerTitlePosition.left,
@@ -169,7 +165,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
 		load();
 	}, []);
 
-	useEffect(() => {
+	useLayoutEffect(() => {
 		const options = setHeader();
 		navigation.setOptions(options);
 	}, [navigation, isSearching]);
@@ -192,7 +188,6 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
 			{...{
 				item,
 				user,
-				navigation,
 				baseUrl
 			}}
 			onPress={onDiscussionPress}
@@ -213,9 +208,6 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
 				style={{ backgroundColor: themes[theme!].backgroundColor }}
 				contentContainerStyle={styles.contentContainer}
 				onEndReachedThreshold={0.5}
-				maxToRenderPerBatch={5}
-				windowSize={10}
-				initialNumToRender={7}
 				removeClippedSubviews={isIOS}
 				onEndReached={() => (searchTotal || total) > API_FETCH_COUNT ?? load()}
 				ItemSeparatorComponent={List.Separator}

app/views/TeamChannelsView.tsx

@@ -218,11 +218,7 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
 					</HeaderButton.Container>
 				),
 				headerTitle: () => (
-					<SearchHeader
+					<SearchHeader onSearchChangeText={this.onSearchChangeText} testID='team-channels-view-search-header' />
-						onSearchChangeText={this.onSearchChangeText}
-						placeholder='Search Channels'
-						testID='team-channels-view-search-header'
-					/>
 				),
 				headerTitleContainerStyle: {
 					left: headerTitlePosition.left,

app/views/ThreadMessagesView/index.tsx

@@ -145,11 +145,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 					</HeaderButton.Container>
 				),
 				headerTitle: () => (
-					<SearchHeader
+					<SearchHeader onSearchChangeText={this.onSearchChangeText} testID='thread-messages-view-search-header' />
-						onSearchChangeText={this.onSearchChangeText}
-						placeholder='Search'
-						testID='thread-messages-view-search-header'
-					/>
 				),
 				headerTitleContainerStyle: {
 					left: headerTitlePosition.left,