sergiodt
/
vn-verdnaturachat
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chore: Hooks app/views/InviteUsersEditView (#4670) 

* Chore: Hooks app/views/InviteUsersEditView

* minor tweak

* switch value name
This commit is contained in:
Reinaldo Neto 2023-02-02 18:41:32 -03:00 committed by GitHub
parent 59c76d3956
commit 68f6eb40de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 131 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/stacks/InsideStack.tsx
View File

@ -105,11 +105,7 @@ const ChatsStackNavigator = () => {
/>
<ChatsStack.Screen name='SelectedUsersView' component={SelectedUsersView} />
<ChatsStack.Screen name='InviteUsersView' component={InviteUsersView} />
<ChatsStack.Screen
name='InviteUsersEditView'
component={InviteUsersEditView}
options={InviteUsersEditView.navigationOptions}
/>
<ChatsStack.Screen name='InviteUsersEditView' component={InviteUsersEditView} />
<ChatsStack.Screen name='MessagesView' component={MessagesView} />
<ChatsStack.Screen name='AutoTranslateView' component={AutoTranslateView} options={AutoTranslateView.navigationOptions} />
<ChatsStack.Screen name='DirectoryView' component={DirectoryView} options={DirectoryView.navigationOptions} />

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

@ -142,11 +142,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
component={AddExistingChannelView}
options={AddExistingChannelView.navigationOptions}
/>
<ModalStack.Screen
name='InviteUsersEditView'
component={InviteUsersEditView}
options={InviteUsersEditView.navigationOptions}
/>
<ModalStack.Screen name='InviteUsersEditView' component={InviteUsersEditView} />
<ModalStack.Screen name='MessagesView' component={MessagesView} />
<ModalStack.Screen name='AutoTranslateView' component={AutoTranslateView} options={AutoTranslateView.navigationOptions} />
<ModalStack.Screen

92
app/views/InviteUsersEditView/Picker.tsx Normal file
View File

@ -0,0 +1,92 @@
import React from 'react';
import { TextInputProps } from 'react-native';
import RNPickerSelect from 'react-native-picker-select';
import { useDispatch } from 'react-redux';
import { inviteLinksSetParams } from '../../actions/inviteLinks';
import { useTheme } from '../../theme';
import { useAppSelector } from '../../lib/hooks';
import I18n from '../../i18n';
import styles from './styles';
import { events, logEvent } from '../../lib/methods/helpers/log';
const OPTIONS = {
days: [
{
label: '1',
value: 1
},
{
label: '7',
value: 7
},
{
label: '15',
value: 15
},
{
label: '30',
value: 30
}
],
maxUses: [
{
label: '1',
value: 1
},
{
label: '5',
value: 5
},
{
label: '10',
value: 10
},
{
label: '25',
value: 25
},
{
label: '50',
value: 50
},
{
label: '100',
value: 100
}
]
};
const Picker = ({ param, first }: { param: 'days' | 'maxUses'; first: string }): JSX.Element => {
const { colors } = useTheme();
const inviteLinkParam = useAppSelector(state => state.inviteLinks[param]);
const dispatch = useDispatch();
const onValueChangePicker = (value: number) => {
logEvent(events.IU_EDIT_SET_LINK_PARAM);
const params = {
[param]: value
};
dispatch(inviteLinksSetParams(params));
};
const textInputStyle: TextInputProps = { style: { ...styles.pickerText, color: colors.actionTintColor } };
const firstEl = [
{
label: I18n.t(first),
value: 0
}
];
return (
<RNPickerSelect
style={{ viewContainer: styles.viewContainer }}
value={inviteLinkParam}
textInputProps={textInputStyle}
useNativeAndroidPickerStyle={false}
onValueChange={value => onValueChangePicker(value)}
items={firstEl.concat(OPTIONS[param])}
/>
);
};
export default Picker;

169
app/views/InviteUsersEditView/index.tsx
View File

@ -1,149 +1,54 @@
import { StackNavigationOptions } from '@react-navigation/stack';
import React from 'react';
import { TextInputProps, View } from 'react-native';
import RNPickerSelect from 'react-native-picker-select';
import { connect } from 'react-redux';
import { StackNavigationProp } from '@react-navigation/stack';
import React, { useLayoutEffect } from 'react';
import { View } from 'react-native';
import { useDispatch } from 'react-redux';
import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
import { inviteLinksCreate, inviteLinksSetParams } from '../../actions/inviteLinks';
import { themes } from '../../lib/constants';
import { inviteLinksCreate } from '../../actions/inviteLinks';
import Button from '../../containers/Button';
import * as List from '../../containers/List';
import SafeAreaView from '../../containers/SafeAreaView';
import StatusBar from '../../containers/StatusBar';
import { IApplicationState, IBaseScreen } from '../../definitions';
import I18n from '../../i18n';
import { ChatsStackParamList } from '../../stacks/types';
import { withTheme } from '../../theme';
import { events, logEvent } from '../../lib/methods/helpers/log';
import styles from './styles';
import Picker from './Picker';
const OPTIONS = {
days: [
{
label: '1',
value: 1
},
{
label: '7',
value: 7
},
{
label: '15',
value: 15
},
{
label: '30',
value: 30
}
],
maxUses: [
{
label: '1',
value: 1
},
{
label: '5',
value: 5
},
{
label: '10',
value: 10
},
{
label: '25',
value: 25
},
{
label: '50',
value: 50
},
{
label: '100',
value: 100
}
]
};
const InviteUsersEditView = () => {
const navigation = useNavigation<StackNavigationProp<ChatsStackParamList, 'InviteUsersEditView'>>();
const { rid } = useRoute<RouteProp<ChatsStackParamList, 'InviteUsersEditView'>>().params;
const dispatch = useDispatch();
interface IInviteUsersEditViewProps extends IBaseScreen<ChatsStackParamList, 'InviteUsersEditView'> {
days: number;
maxUses: number;
}
useLayoutEffect(() => {
navigation.setOptions({
title: I18n.t('Invite_users')
});
}, [navigation]);
class InviteUsersEditView extends React.Component<IInviteUsersEditViewProps, any> {
static navigationOptions = (): StackNavigationOptions => ({
title: I18n.t('Invite_users')
});
private rid: string;
constructor(props: IInviteUsersEditViewProps) {
super(props);
this.rid = props.route.params?.rid;
}
onValueChangePicker = (key: string, value: number) => {
const { dispatch } = this.props;
logEvent(events.IU_EDIT_SET_LINK_PARAM);
const params = {
[key]: value
};
dispatch(inviteLinksSetParams(params));
};
createInviteLink = () => {
const { dispatch, navigation } = this.props;
const createInviteLink = () => {
logEvent(events.IU_EDIT_CREATE_LINK);
dispatch(inviteLinksCreate(this.rid));
dispatch(inviteLinksCreate(rid));
navigation.pop();
};
renderPicker = (key: 'days' | 'maxUses', first: string) => {
const { props } = this;
const { theme } = props;
const textInputStyle: TextInputProps = { style: { ...styles.pickerText, color: themes[theme].actionTintColor } };
const firstEl = [
{
label: I18n.t(first),
value: 0
}
];
return (
<RNPickerSelect
style={{ viewContainer: styles.viewContainer }}
value={props[key]}
textInputProps={textInputStyle}
useNativeAndroidPickerStyle={false}
placeholder={{}}
onValueChange={value => this.onValueChangePicker(key, value)}
items={firstEl.concat(OPTIONS[key])}
/>
);
};
return (
<SafeAreaView>
<List.Container>
<StatusBar />
<List.Section>
<List.Separator />
<List.Item title='Expiration_Days' right={() => <Picker param={'days'} first={'Never'} />} />
<List.Separator />
<List.Item title='Max_number_of_uses' right={() => <Picker param='maxUses' first='No_limit' />} />
<List.Separator />
</List.Section>
<View style={styles.innerContainer}>
<Button title={I18n.t('Generate_New_Link')} type='primary' onPress={createInviteLink} />
</View>
</List.Container>
</SafeAreaView>
);
};
render() {
return (
<SafeAreaView>
<List.Container>
<StatusBar />
<List.Section>
<List.Separator />
<List.Item title='Expiration_Days' right={() => this.renderPicker('days', 'Never')} />
<List.Separator />
<List.Item title='Max_number_of_uses' right={() => this.renderPicker('maxUses', 'No_limit')} />
<List.Separator />
</List.Section>
<View style={styles.innerContainer}>
<Button title={I18n.t('Generate_New_Link')} type='primary' onPress={this.createInviteLink} />
</View>
</List.Container>
</SafeAreaView>
);
}
}
const mapStateToProps = (state: IApplicationState) => ({
days: state.inviteLinks.days,
maxUses: state.inviteLinks.maxUses
});
export default connect(mapStateToProps)(withTheme(InviteUsersEditView));
export default InviteUsersEditView;