From a82e3e6c1af04d0491f7a2dfbcd42408258b413b Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
Date: Fri, 27 May 2022 14:18:51 -0300
Subject: [PATCH] [FIX] Navigate to MarkdownTableView using tablets (#4222)

* [FIX] Navigate to MarkdownTableView using tablets

* [FIX] Navigate to MarkdownTableView using tablets

* fix lint

* update yarn.lock

Co-authored-by: Alex Junior <alexalexandrejr@gmail.com>
---
 app/containers/markdown/Table.tsx | 15 +++++++++++++--
 storybook/stories/Markdown.tsx    |  4 +++-
 storybook/stories/index.js        |  3 ++-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/containers/markdown/Table.tsx b/app/containers/markdown/Table.tsx
index 7123d80d9..d45de1683 100644
--- a/app/containers/markdown/Table.tsx
+++ b/app/containers/markdown/Table.tsx
@@ -2,11 +2,12 @@ import React from 'react';
 import { ScrollView, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
 
 import { CELL_WIDTH } from './TableCell';
-import styles from './styles';
 import Navigation from '../../lib/navigation/appNavigation';
+import styles from './styles';
 import I18n from '../../i18n';
 import { TSupportedThemes } from '../../theme';
 import { themes } from '../../lib/constants';
+import { useAppSelector } from '../../lib/hooks';
 
 interface ITable {
 	children: React.ReactElement | null;
@@ -18,6 +19,7 @@ const MAX_HEIGHT = 300;
 
 const Table = React.memo(({ children, numColumns, theme }: ITable) => {
 	const getTableWidth = () => numColumns * CELL_WIDTH;
+	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
 
 	const renderRows = (drawExtraBorders = true) => {
 		const tableStyle: ViewStyle[] = [styles.table, { borderColor: themes[theme].borderColor }];
@@ -33,7 +35,16 @@ const Table = React.memo(({ children, numColumns, theme }: ITable) => {
 		return <View style={tableStyle}>{rows}</View>;
 	};
 
-	const onPress = () => Navigation.navigate('MarkdownTableView', { renderRows, tableWidth: getTableWidth() });
+	const onPress = () => {
+		if (isMasterDetail) {
+			Navigation.navigate('ModalStackNavigator', {
+				screen: 'MarkdownTableView',
+				params: { renderRows, tableWidth: getTableWidth() }
+			});
+		} else {
+			Navigation.navigate('MarkdownTableView', { renderRows, tableWidth: getTableWidth() });
+		}
+	};
 
 	return (
 		<TouchableOpacity onPress={onPress}>
diff --git a/storybook/stories/Markdown.tsx b/storybook/stories/Markdown.tsx
index e4902cddb..f6cb6c30f 100644
--- a/storybook/stories/Markdown.tsx
+++ b/storybook/stories/Markdown.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
 import { storiesOf } from '@storybook/react-native';
+import { Provider } from 'react-redux';
 
 import Markdown, { MarkdownPreview } from '../../app/containers/markdown';
 import { themes } from '../../app/lib/constants';
 import { TGetCustomEmoji, IEmoji } from '../../app/definitions/IEmoji';
+import { store } from '.';
 
 const theme = 'light';
 
@@ -42,7 +44,7 @@ const getCustomEmoji: TGetCustomEmoji = content => {
 	return customEmoji;
 };
 
-const stories = storiesOf('Markdown', module);
+const stories = storiesOf('Markdown', module).addDecorator(story => <Provider store={store}>{story()}</Provider>);
 
 stories.add('Text', () => (
 	<View style={styles.container}>
diff --git a/storybook/stories/index.js b/storybook/stories/index.js
index 55a1468e6..0c3a1a0e9 100644
--- a/storybook/stories/index.js
+++ b/storybook/stories/index.js
@@ -42,6 +42,7 @@ const reducers = combineReducers({
 		settings: {}
 	}),
 	meteor: () => ({ connected: true }),
-	activeUsers: () => ({ abc: { status: 'online', statusText: 'dog' } })
+	activeUsers: () => ({ abc: { status: 'online', statusText: 'dog' } }),
+	app: () => ({ isMasterDetail: false })
 });
 export const store = createStore(reducers);