Chore: evaluate `InviteUsersView` (#4100)
This commit is contained in:
parent
4d4a5cffd9
commit
311b346347
|
@ -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}
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue