Chore: evaluate `InviteUsersView` (#4100)

This commit is contained in:
Gerzon Z 2022-05-13 09:02:01 -04:00 committed by GitHub
parent 4d4a5cffd9
commit 311b346347
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 48 additions and 69 deletions

View File

@ -101,7 +101,7 @@ const ChatsStackNavigator = () => {
options={SearchMessagesView.navigationOptions} options={SearchMessagesView.navigationOptions}
/> />
<ChatsStack.Screen name='SelectedUsersView' component={SelectedUsersView} /> <ChatsStack.Screen name='SelectedUsersView' component={SelectedUsersView} />
<ChatsStack.Screen name='InviteUsersView' component={InviteUsersView} options={InviteUsersView.navigationOptions} /> <ChatsStack.Screen name='InviteUsersView' component={InviteUsersView} />
<ChatsStack.Screen <ChatsStack.Screen
name='InviteUsersEditView' name='InviteUsersEditView'
component={InviteUsersEditView} component={InviteUsersEditView}

View File

@ -129,7 +129,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
options={SearchMessagesView.navigationOptions} options={SearchMessagesView.navigationOptions}
/> />
<ModalStack.Screen name='SelectedUsersView' component={SelectedUsersView} /> <ModalStack.Screen name='SelectedUsersView' component={SelectedUsersView} />
<ModalStack.Screen name='InviteUsersView' component={InviteUsersView} options={InviteUsersView.navigationOptions} /> <ModalStack.Screen name='InviteUsersView' component={InviteUsersView} />
<ModalStack.Screen name='AddChannelTeamView' component={AddChannelTeamView} /> <ModalStack.Screen name='AddChannelTeamView' component={AddChannelTeamView} />
<ModalStack.Screen <ModalStack.Screen
name='AddExistingChannelView' name='AddExistingChannelView'

View File

@ -1,11 +1,9 @@
import { StackNavigationOptions } from '@react-navigation/stack'; import React, { useEffect } from 'react';
import moment from 'moment'; import moment from 'moment';
import React from 'react';
import { ScrollView, Share, View } from 'react-native'; import { ScrollView, Share, View } from 'react-native';
import { connect } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { inviteLinksClear, inviteLinksCreate } from '../../actions/inviteLinks'; import { inviteLinksClear, inviteLinksCreate } from '../../actions/inviteLinks';
import { themes } from '../../lib/constants';
import Button from '../../containers/Button'; import Button from '../../containers/Button';
import Markdown from '../../containers/markdown'; import Markdown from '../../containers/markdown';
import SafeAreaView from '../../containers/SafeAreaView'; import SafeAreaView from '../../containers/SafeAreaView';
@ -13,57 +11,48 @@ import StatusBar from '../../containers/StatusBar';
import RCTextInput from '../../containers/TextInput'; import RCTextInput from '../../containers/TextInput';
import { IApplicationState, IBaseScreen } from '../../definitions'; import { IApplicationState, IBaseScreen } from '../../definitions';
import I18n from '../../i18n'; import I18n from '../../i18n';
import { TInvite } from '../../reducers/inviteLinks';
import { ChatsStackParamList } from '../../stacks/types'; import { ChatsStackParamList } from '../../stacks/types';
import { withTheme } from '../../theme'; import { useTheme } from '../../theme';
import { events, logEvent } from '../../utils/log'; import { events, logEvent } from '../../utils/log';
import scrollPersistTaps from '../../utils/scrollPersistTaps'; import scrollPersistTaps from '../../utils/scrollPersistTaps';
import styles from './styles'; import styles from './styles';
interface IInviteUsersViewProps extends IBaseScreen<ChatsStackParamList, 'InviteUsersView'> { type IInviteUsersViewProps = IBaseScreen<ChatsStackParamList, 'InviteUsersView'>;
timeDateFormat: string;
invite: TInvite;
}
class InviteUsersView extends React.Component<IInviteUsersViewProps, any> {
static navigationOptions = (): StackNavigationOptions => ({
title: I18n.t('Invite_users')
});
private rid: string; const InviteUsersView = ({ route, navigation }: IInviteUsersViewProps): React.ReactElement => {
const rid = route.params?.rid;
const timeDateFormat = useSelector((state: IApplicationState) => state.settings.Message_TimeAndDateFormat as string);
const invite = useSelector((state: IApplicationState) => state.inviteLinks.invite);
const { colors, theme } = useTheme();
const dispatch = useDispatch();
constructor(props: IInviteUsersViewProps) { useEffect(() => {
super(props); navigation.setOptions({
this.rid = props.route.params?.rid; title: I18n.t('Invite_users')
} });
}, []);
componentDidMount() { useEffect(() => {
const { dispatch } = this.props; dispatch(inviteLinksCreate(rid));
dispatch(inviteLinksCreate(this.rid)); return () => {
} dispatch(inviteLinksClear());
};
}, []);
componentWillUnmount() { const share = () => {
const { dispatch } = this.props;
dispatch(inviteLinksClear());
}
share = () => {
logEvent(events.IU_SHARE); logEvent(events.IU_SHARE);
const { invite } = this.props;
if (!invite || !invite.url) { if (!invite || !invite.url) {
return; return;
} }
Share.share({ message: invite.url }); Share.share({ message: invite.url });
}; };
edit = () => { const edit = () => {
logEvent(events.IU_GO_IU_EDIT); logEvent(events.IU_GO_IU_EDIT);
const { navigation } = this.props; navigation.navigate('InviteUsersEditView', { rid });
navigation.navigate('InviteUsersEditView', { rid: this.rid });
}; };
linkExpirationText = () => { const linkExpirationText = () => {
const { timeDateFormat, invite } = this.props;
if (!invite || !invite.url) { if (!invite || !invite.url) {
return null; return null;
} }
@ -90,38 +79,28 @@ class InviteUsersView extends React.Component<IInviteUsersViewProps, any> {
return I18n.t('Your_invite_link_will_never_expire'); return I18n.t('Your_invite_link_will_never_expire');
}; };
renderExpiration = () => { const renderExpiration = () => {
const { theme } = this.props; const expirationMessage = linkExpirationText();
const expirationMessage = this.linkExpirationText();
return <Markdown msg={expirationMessage} theme={theme} />; return <Markdown msg={expirationMessage} theme={theme} />;
}; };
render() { return (
const { theme, invite } = this.props; <SafeAreaView style={{ backgroundColor: colors.backgroundColor }}>
return ( <ScrollView
<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }}> {...scrollPersistTaps}
{/* @ts-ignore*/} style={{ backgroundColor: colors.auxiliaryBackground }}
<ScrollView showsVerticalScrollIndicator={false}>
{...scrollPersistTaps} <StatusBar />
style={{ backgroundColor: themes[theme].auxiliaryBackground }} <View style={styles.innerContainer}>
showsVerticalScrollIndicator={false}> <RCTextInput label={I18n.t('Invite_Link')} theme={theme} value={invite && invite.url} editable={false} />
<StatusBar /> {renderExpiration()}
<View style={styles.innerContainer}> <View style={[styles.divider, { backgroundColor: colors.separatorColor }]} />
<RCTextInput label={I18n.t('Invite_Link')} theme={theme} value={invite && invite.url} editable={false} /> <Button title={I18n.t('Share_Link')} type='primary' onPress={share} theme={theme} />
{this.renderExpiration()} <Button title={I18n.t('Edit_Invite')} type='secondary' onPress={edit} theme={theme} />
<View style={[styles.divider, { backgroundColor: themes[theme].separatorColor }]} /> </View>
<Button title={I18n.t('Share_Link')} type='primary' onPress={this.share} theme={theme} /> </ScrollView>
<Button title={I18n.t('Edit_Invite')} type='secondary' onPress={this.edit} theme={theme} /> </SafeAreaView>
</View> );
</ScrollView> };
</SafeAreaView>
);
}
}
const mapStateToProps = (state: IApplicationState) => ({ export default InviteUsersView;
timeDateFormat: state.settings.Message_TimeAndDateFormat as string,
invite: state.inviteLinks.invite
});
export default connect(mapStateToProps)(withTheme(InviteUsersView));