verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chore: Migrate E2EHowItWorksView to hooks (#4416) 

* remove navigation obligatory

* remove the obliglatory to use theme with the withTheme HOC

* migrate E2EHowItWorksView to hooks

* remove navigate options

* adds non-null assertion because theme is injected
This commit is contained in:
Gleidson Daniel Silva 2022-08-11 11:50:03 -03:00 committed by Diego Mello
parent 5800cc10d4
commit 4a5c15ce66
5 changed files with 57 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/containers/HeaderButton/Common.tsx
View File

@ -1,7 +1,8 @@
import React from 'react';
import { StackActions, useNavigation } from '@react-navigation/native';
import { isIOS } from '../../lib/methods/helpers';
import I18n from '../../i18n';
import { isIOS } from '../../lib/methods/helpers';
import Container from './HeaderButtonContainer';
import Item, { IHeaderButtonItem } from './HeaderButtonItem';
@ -18,13 +19,22 @@ export const Drawer = React.memo(
)
);
export const CloseModal = React.memo(
({ navigation, testID, onPress = () => navigation?.pop(), ...props }: IHeaderButtonCommon) => (
export const CloseModal = React.memo(({ testID, onPress, ...props }: IHeaderButtonCommon) => {
const { dispatch } = useNavigation();
return (
<Container left>
<Item iconName='close' onPress={onPress} testID={testID} {...props} />
<Item
iconName='close'
onPress={arg => {
if (onPress) return onPress(arg);
dispatch(StackActions.pop());
}}
testID={testID}
{...props}
/>
</Container>
)
);
);
});
export const CancelModal = React.memo(({ onPress, testID, ...props }: IHeaderButtonCommon) => (
<Container left>

28
app/containers/markdown/index.tsx
View File

@ -22,14 +22,14 @@ import { formatText } from './formatText';
import { IUserMention, IUserChannel, TOnLinkPress } from './interfaces';
import { TGetCustomEmoji } from '../../definitions/IEmoji';
import { formatHyperlink } from './formatHyperlink';
import { TSupportedThemes } from '../../theme';
import { TSupportedThemes, withTheme } from '../../theme';
import { themes } from '../../lib/constants';
export { default as MarkdownPreview } from './Preview';
interface IMarkdownProps {
msg?: string | null;
theme: TSupportedThemes;
theme?: TSupportedThemes;
md?: MarkdownAST;
mentions?: IUserMention[];
getCustomEmoji?: TGetCustomEmoji;
@ -158,9 +158,9 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
style={[
{
...styles.codeInline,
color: themes[theme].bodyText,
backgroundColor: themes[theme].bannerBackground,
borderColor: themes[theme].bannerBackground
color: themes[theme!].bodyText,
backgroundColor: themes[theme!].bannerBackground,
borderColor: themes[theme!].bannerBackground
},
...style
]}
@ -177,9 +177,9 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
style={[
{
...styles.codeBlock,
color: themes[theme].bodyText,
backgroundColor: themes[theme].bannerBackground,
borderColor: themes[theme].bannerBackground
color: themes[theme!].bodyText,
backgroundColor: themes[theme!].bannerBackground,
borderColor: themes[theme!].bannerBackground
},
...style
]}
@ -200,7 +200,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
return null;
}
return (
<Text style={[styles.text, style, { color: themes[theme].bodyText }]} numberOfLines={numberOfLines}>
<Text style={[styles.text, style, { color: themes[theme!].bodyText }]} numberOfLines={numberOfLines}>
{children}
</Text>
);
@ -209,7 +209,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
renderLink = ({ children, href }: any) => {
const { theme, onLinkPress } = this.props;
return (
<MarkdownLink link={href} theme={theme} onLinkPress={onLinkPress}>
<MarkdownLink link={href} theme={theme!} onLinkPress={onLinkPress}>
{children}
</MarkdownLink>
);
@ -261,7 +261,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
// @ts-ignore
const textStyle = styles[`heading${level}Text`];
return (
<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme].bodyText }]}>
<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme!].bodyText }]}>
{children}
</Text>
);
@ -289,13 +289,13 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
renderBlockQuote = ({ children }: { children: JSX.Element }) => {
const { theme } = this.props;
return <MarkdownBlockQuote theme={theme}>{children}</MarkdownBlockQuote>;
return <MarkdownBlockQuote theme={theme!}>{children}</MarkdownBlockQuote>;
};
renderTable = ({ children, numColumns }: { children: JSX.Element; numColumns: number }) => {
const { theme } = this.props;
return (
<MarkdownTable numColumns={numColumns} theme={theme}>
<MarkdownTable numColumns={numColumns} theme={theme!}>
{children}
</MarkdownTable>
);
@ -354,4 +354,4 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
}
}
export default Markdown;
export default withTheme(Markdown);

6
app/stacks/InsideStack.tsx
View File

@ -282,11 +282,7 @@ const E2ESaveYourPasswordStackNavigator = () => {
component={E2ESaveYourPasswordView}
options={E2ESaveYourPasswordView.navigationOptions}
/>
<E2ESaveYourPasswordStack.Screen
name='E2EHowItWorksView'
component={E2EHowItWorksView}
options={E2EHowItWorksView.navigationOptions}
/>
<E2ESaveYourPasswordStack.Screen name='E2EHowItWorksView' component={E2EHowItWorksView} />
</E2ESaveYourPasswordStack.Navigator>
);
};

2
app/stacks/MasterDetailStack/index.tsx
View File

@ -200,7 +200,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
component={E2ESaveYourPasswordView}
options={E2ESaveYourPasswordView.navigationOptions}
/>
<ModalStack.Screen name='E2EHowItWorksView' component={E2EHowItWorksView} options={E2EHowItWorksView.navigationOptions} />
<ModalStack.Screen name='E2EHowItWorksView' component={E2EHowItWorksView} />
<ModalStack.Screen
name='E2EEnterYourPasswordView'
component={E2EEnterYourPasswordView}

55
app/views/E2EHowItWorksView.tsx
View File

@ -1,20 +1,18 @@
import React from 'react';
import React, { useEffect } from 'react';
import { StyleSheet } from 'react-native';
import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
import SafeAreaView from '../containers/SafeAreaView';
import { themes } from '../lib/constants';
import * as HeaderButton from '../containers/HeaderButton';
import Markdown from '../containers/markdown';
import { withTheme } from '../theme';
import SafeAreaView from '../containers/SafeAreaView';
import I18n from '../i18n';
import { E2ESaveYourPasswordStackParamList } from '../stacks/types';
import { IBaseScreen } from '../definitions';
import { useTheme } from '../theme';
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 44,
paddingTop: 32
padding: 16
},
info: {
fontSize: 14,
@ -22,31 +20,28 @@ const styles = StyleSheet.create({
}
});
type TE2EHowItWorksViewProps = IBaseScreen<E2ESaveYourPasswordStackParamList, 'E2EHowItWorksView'>;
const E2EHowItWorksView = (): React.ReactElement => {
const { setOptions } = useNavigation();
const { colors } = useTheme();
const { params } = useRoute<RouteProp<E2ESaveYourPasswordStackParamList, 'E2EHowItWorksView'>>();
class E2EHowItWorksView extends React.Component<TE2EHowItWorksViewProps, any> {
static navigationOptions = ({ route, navigation }: Pick<TE2EHowItWorksViewProps, 'navigation' | 'route'>) => {
const showCloseModal = route.params?.showCloseModal;
return {
useEffect(() => {
setOptions({
title: I18n.t('How_It_Works'),
headerLeft: showCloseModal ? () => <HeaderButton.CloseModal navigation={navigation} /> : undefined
};
};
headerLeft: params?.showCloseModal ? () => <HeaderButton.CloseModal /> : undefined
});
}, []);
render() {
const { theme } = this.props;
const infoStyle = [styles.info, { color: colors.bodyText }];
const infoStyle = [styles.info, { color: themes[theme].bodyText }];
return (
<SafeAreaView style={[styles.container, { backgroundColor: colors.backgroundColor }]} testID='e2e-how-it-works-view'>
<Markdown msg={I18n.t('E2E_How_It_Works_info1')} style={infoStyle} />
<Markdown msg={I18n.t('E2E_How_It_Works_info2')} style={infoStyle} />
<Markdown msg={I18n.t('E2E_How_It_Works_info3')} style={infoStyle} />
<Markdown msg={I18n.t('E2E_How_It_Works_info4')} style={infoStyle} />
</SafeAreaView>
);
};
return (
<SafeAreaView style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]} testID='e2e-how-it-works-view'>
<Markdown msg={I18n.t('E2E_How_It_Works_info1')} style={infoStyle} theme={theme} />
<Markdown msg={I18n.t('E2E_How_It_Works_info2')} style={infoStyle} theme={theme} />
<Markdown msg={I18n.t('E2E_How_It_Works_info3')} style={infoStyle} theme={theme} />
<Markdown msg={I18n.t('E2E_How_It_Works_info4')} style={infoStyle} theme={theme} />
</SafeAreaView>
);
}
}
export default withTheme(E2EHowItWorksView);
export default E2EHowItWorksView;