[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

@@ -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}>

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}>

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);