From 4d4a5cffd9307d4329c8a79e4d86c4d7ea7eca56 Mon Sep 17 00:00:00 2001
From: Gerzon Z <gerzonzcanario@gmail.com>
Date: Fri, 13 May 2022 08:57:19 -0400
Subject: [PATCH] Chore: evaluate `MarkdownTableView` (#4104)

---
 app/stacks/InsideStack.tsx             |  2 +-
 app/stacks/MasterDetailStack/index.tsx |  2 +-
 app/views/MarkdownTableView.tsx        | 53 ++++++++++++--------------
 3 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx
index 756fd5f2b..f2f8c8d4f 100644
--- a/app/stacks/InsideStack.tsx
+++ b/app/stacks/InsideStack.tsx
@@ -131,7 +131,7 @@ const ChatsStackNavigator = () => {
 				component={AddExistingChannelView}
 				options={AddExistingChannelView.navigationOptions}
 			/>
-			<ChatsStack.Screen name='MarkdownTableView' component={MarkdownTableView} options={MarkdownTableView.navigationOptions} />
+			<ChatsStack.Screen name='MarkdownTableView' component={MarkdownTableView} />
 			<ChatsStack.Screen name='ReadReceiptsView' component={ReadReceiptsView} options={ReadReceiptsView.navigationOptions} />
 			<ChatsStack.Screen name='QueueListView' component={QueueListView} options={QueueListView.navigationOptions} />
 			<ChatsStack.Screen name='CannedResponsesListView' component={CannedResponsesListView} />
diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx
index 3b85d9e39..99f3914f4 100644
--- a/app/stacks/MasterDetailStack/index.tsx
+++ b/app/stacks/MasterDetailStack/index.tsx
@@ -166,7 +166,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 				<ModalStack.Screen name='ThreadMessagesView' component={ThreadMessagesView} />
 				<ModalStack.Screen name='DiscussionsView' component={DiscussionsView} />
 				<ModalStack.Screen name='TeamChannelsView' component={TeamChannelsView} options={TeamChannelsView.navigationOptions} />
-				<ModalStack.Screen name='MarkdownTableView' component={MarkdownTableView} options={MarkdownTableView.navigationOptions} />
+				<ModalStack.Screen name='MarkdownTableView' component={MarkdownTableView} />
 				<ModalStack.Screen
 					name='ReadReceiptsView'
 					component={ReadReceiptsView}
diff --git a/app/views/MarkdownTableView.tsx b/app/views/MarkdownTableView.tsx
index de008468e..65c56d729 100644
--- a/app/views/MarkdownTableView.tsx
+++ b/app/views/MarkdownTableView.tsx
@@ -1,43 +1,38 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ScrollView } from 'react-native';
-import { StackNavigationOptions } from '@react-navigation/stack';
-import { RouteProp } from '@react-navigation/native';
 
 import I18n from '../i18n';
 import { isIOS } from '../utils/deviceInfo';
-import { themes } from '../lib/constants';
-import { TSupportedThemes, withTheme } from '../theme';
+import { useTheme } from '../theme';
 import { ChatsStackParamList } from '../stacks/types';
+import { IBaseScreen } from '../definitions';
 
-interface IMarkdownTableViewProps {
-	route: RouteProp<ChatsStackParamList, 'MarkdownTableView'>;
-	theme: TSupportedThemes;
-}
+type IMarkdownTableViewProps = IBaseScreen<ChatsStackParamList, 'MarkdownTableView'>;
 
-class MarkdownTableView extends React.Component<IMarkdownTableViewProps> {
-	static navigationOptions = (): StackNavigationOptions => ({
-		title: I18n.t('Table')
-	});
+const MarkdownTableView = ({ navigation, route }: IMarkdownTableViewProps): React.ReactElement => {
+	const renderRows = route.params?.renderRows;
+	const tableWidth = route.params?.tableWidth;
+	const { colors } = useTheme();
 
-	render() {
-		const { route, theme } = this.props;
-		const renderRows = route.params?.renderRows;
-		const tableWidth = route.params?.tableWidth;
-
-		if (isIOS) {
-			return (
-				<ScrollView style={{ backgroundColor: themes[theme].backgroundColor }} contentContainerStyle={{ width: tableWidth }}>
-					{renderRows()}
-				</ScrollView>
-			);
-		}
+	useEffect(() => {
+		navigation.setOptions({
+			title: I18n.t('Table')
+		});
+	}, []);
 
+	if (isIOS) {
 		return (
-			<ScrollView style={{ backgroundColor: themes[theme].backgroundColor }}>
-				<ScrollView horizontal>{renderRows()}</ScrollView>
+			<ScrollView style={{ backgroundColor: colors.backgroundColor }} contentContainerStyle={{ width: tableWidth }}>
+				{renderRows()}
 			</ScrollView>
 		);
 	}
-}
 
-export default withTheme(MarkdownTableView);
+	return (
+		<ScrollView style={{ backgroundColor: colors.backgroundColor }}>
+			<ScrollView horizontal>{renderRows()}</ScrollView>
+		</ScrollView>
+	);
+};
+
+export default MarkdownTableView;