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}
/>
<ChatsStack.Screen name='SelectedUsersView' component={SelectedUsersView} />
<ChatsStack.Screen name='InviteUsersView' component={InviteUsersView} options={InviteUsersView.navigationOptions} />
<ChatsStack.Screen name='InviteUsersView' component={InviteUsersView} />
<ChatsStack.Screen
name='InviteUsersEditView'
component={InviteUsersEditView}

View File

@ -129,7 +129,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
options={SearchMessagesView.navigationOptions}
/>
<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='AddExistingChannelView'

View File

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