2018-08-31 16:46:33 +00:00
|
|
|
import React, { Component } from 'react';
|
2018-09-25 19:28:42 +00:00
|
|
|
import {
|
2021-01-20 20:43:59 +00:00
|
|
|
View, Text, Animated, Easing, TouchableWithoutFeedback, TouchableOpacity, FlatList
|
2018-09-25 19:28:42 +00:00
|
|
|
} from 'react-native';
|
2018-08-31 16:46:33 +00:00
|
|
|
import PropTypes from 'prop-types';
|
2020-06-15 14:00:46 +00:00
|
|
|
import { connect, batch } from 'react-redux';
|
2018-12-21 10:55:35 +00:00
|
|
|
import equal from 'deep-equal';
|
2020-06-15 14:00:46 +00:00
|
|
|
import { withSafeAreaInsets } from 'react-native-safe-area-context';
|
2018-08-31 16:46:33 +00:00
|
|
|
|
2018-09-25 19:28:42 +00:00
|
|
|
import { toggleServerDropdown as toggleServerDropdownAction } from '../../actions/rooms';
|
2020-06-15 14:00:46 +00:00
|
|
|
import { selectServerRequest as selectServerRequestAction, serverInitAdd as serverInitAddAction } from '../../actions/server';
|
|
|
|
import { appStart as appStartAction, ROOT_NEW_SERVER } from '../../actions/app';
|
2018-08-31 16:46:33 +00:00
|
|
|
import styles from './styles';
|
|
|
|
import RocketChat from '../../lib/rocketchat';
|
|
|
|
import I18n from '../../i18n';
|
2018-10-23 21:39:48 +00:00
|
|
|
import EventEmitter from '../../utils/events';
|
2021-01-20 20:43:59 +00:00
|
|
|
import ServerItem from '../../presentation/ServerItem';
|
2019-09-16 20:26:32 +00:00
|
|
|
import database from '../../lib/database';
|
2019-12-04 16:39:53 +00:00
|
|
|
import { themes } from '../../constants/colors';
|
|
|
|
import { withTheme } from '../../theme';
|
2019-11-25 20:01:17 +00:00
|
|
|
import { KEY_COMMAND, handleCommandSelectServer } from '../../commands';
|
2021-01-20 20:43:59 +00:00
|
|
|
import { isTablet } from '../../utils/deviceInfo';
|
2020-05-08 17:04:37 +00:00
|
|
|
import { localAuthenticate } from '../../utils/localAuthentication';
|
2020-05-04 20:20:45 +00:00
|
|
|
import { showConfirmationAlert } from '../../utils/info';
|
2020-07-30 13:26:17 +00:00
|
|
|
import { logEvent, events } from '../../utils/log';
|
2020-06-15 14:00:46 +00:00
|
|
|
import { headerHeight } from '../../containers/Header';
|
|
|
|
import { goRoom } from '../../utils/goRoom';
|
2020-08-19 17:14:22 +00:00
|
|
|
import UserPreferences from '../../lib/userPreferences';
|
2018-08-31 16:46:33 +00:00
|
|
|
|
|
|
|
const ROW_HEIGHT = 68;
|
|
|
|
const ANIMATION_DURATION = 200;
|
|
|
|
|
2019-03-12 16:23:06 +00:00
|
|
|
class ServerDropdown extends Component {
|
2018-08-31 16:46:33 +00:00
|
|
|
static propTypes = {
|
2019-03-12 16:23:06 +00:00
|
|
|
navigation: PropTypes.object,
|
2020-06-15 14:00:46 +00:00
|
|
|
insets: PropTypes.object,
|
2018-08-31 16:46:33 +00:00
|
|
|
closeServerDropdown: PropTypes.bool,
|
|
|
|
server: PropTypes.string,
|
2019-12-04 16:39:53 +00:00
|
|
|
theme: PropTypes.string,
|
2020-06-15 14:00:46 +00:00
|
|
|
isMasterDetail: PropTypes.bool,
|
|
|
|
appStart: PropTypes.func,
|
2018-08-31 16:46:33 +00:00
|
|
|
toggleServerDropdown: PropTypes.func,
|
2020-06-15 14:00:46 +00:00
|
|
|
selectServerRequest: PropTypes.func,
|
|
|
|
initAdd: PropTypes.func
|
2018-08-31 16:46:33 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-09-16 20:26:32 +00:00
|
|
|
this.state = { servers: [] };
|
2018-08-31 16:46:33 +00:00
|
|
|
this.animatedValue = new Animated.Value(0);
|
|
|
|
}
|
|
|
|
|
2019-09-16 20:26:32 +00:00
|
|
|
async componentDidMount() {
|
|
|
|
const serversDB = database.servers;
|
|
|
|
const observable = await serversDB.collections
|
|
|
|
.get('servers')
|
|
|
|
.query()
|
|
|
|
.observeWithColumns(['name']);
|
|
|
|
|
|
|
|
this.subscription = observable.subscribe((data) => {
|
|
|
|
this.setState({ servers: data });
|
|
|
|
});
|
|
|
|
|
2018-08-31 16:46:33 +00:00
|
|
|
Animated.timing(
|
|
|
|
this.animatedValue,
|
|
|
|
{
|
|
|
|
toValue: 1,
|
|
|
|
duration: ANIMATION_DURATION,
|
2018-12-21 10:55:35 +00:00
|
|
|
easing: Easing.inOut(Easing.quad),
|
2018-08-31 16:46:33 +00:00
|
|
|
useNativeDriver: true
|
2019-10-31 16:21:59 +00:00
|
|
|
}
|
2018-08-31 16:46:33 +00:00
|
|
|
).start();
|
2019-11-25 20:01:17 +00:00
|
|
|
if (isTablet) {
|
|
|
|
EventEmitter.addEventListener(KEY_COMMAND, this.handleCommands);
|
|
|
|
}
|
2018-12-21 10:55:35 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
shouldComponentUpdate(nextProps, nextState) {
|
|
|
|
const { servers } = this.state;
|
2019-12-04 16:39:53 +00:00
|
|
|
const { closeServerDropdown, server, theme } = this.props;
|
|
|
|
if (nextProps.theme !== theme) {
|
|
|
|
return true;
|
|
|
|
}
|
2018-12-21 10:55:35 +00:00
|
|
|
if (nextProps.closeServerDropdown !== closeServerDropdown) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if (nextProps.server !== server) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if (!equal(nextState.servers, servers)) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
2018-08-31 16:46:33 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps) {
|
2018-09-25 19:28:42 +00:00
|
|
|
const { closeServerDropdown } = this.props;
|
|
|
|
if (prevProps.closeServerDropdown !== closeServerDropdown) {
|
2018-08-31 16:46:33 +00:00
|
|
|
this.close();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-02-27 14:26:40 +00:00
|
|
|
componentWillUnmount() {
|
|
|
|
if (this.newServerTimeout) {
|
|
|
|
clearTimeout(this.newServerTimeout);
|
|
|
|
this.newServerTimeout = false;
|
|
|
|
}
|
2019-09-16 20:26:32 +00:00
|
|
|
if (this.subscription && this.subscription.unsubscribe) {
|
|
|
|
this.subscription.unsubscribe();
|
|
|
|
}
|
2019-11-25 20:01:17 +00:00
|
|
|
if (isTablet) {
|
|
|
|
EventEmitter.removeListener(KEY_COMMAND, this.handleCommands);
|
|
|
|
}
|
2018-08-31 16:46:33 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
close = () => {
|
2018-09-25 19:28:42 +00:00
|
|
|
const { toggleServerDropdown } = this.props;
|
2018-08-31 16:46:33 +00:00
|
|
|
Animated.timing(
|
|
|
|
this.animatedValue,
|
|
|
|
{
|
|
|
|
toValue: 0,
|
|
|
|
duration: ANIMATION_DURATION,
|
2018-12-21 10:55:35 +00:00
|
|
|
easing: Easing.inOut(Easing.quad),
|
2018-08-31 16:46:33 +00:00
|
|
|
useNativeDriver: true
|
|
|
|
}
|
2018-09-25 19:28:42 +00:00
|
|
|
).start(() => toggleServerDropdown());
|
2018-08-31 16:46:33 +00:00
|
|
|
}
|
|
|
|
|
2020-06-15 14:00:46 +00:00
|
|
|
navToNewServer = (previousServer) => {
|
|
|
|
const { appStart, initAdd } = this.props;
|
|
|
|
batch(() => {
|
|
|
|
appStart({ root: ROOT_NEW_SERVER });
|
|
|
|
initAdd(previousServer);
|
|
|
|
});
|
|
|
|
}
|
2018-09-25 19:28:42 +00:00
|
|
|
|
2020-06-15 14:00:46 +00:00
|
|
|
addServer = () => {
|
2020-07-30 13:26:17 +00:00
|
|
|
logEvent(events.RL_ADD_SERVER);
|
2020-06-15 14:00:46 +00:00
|
|
|
const { server } = this.props;
|
2018-08-31 16:46:33 +00:00
|
|
|
this.close();
|
|
|
|
setTimeout(() => {
|
2020-06-15 14:00:46 +00:00
|
|
|
this.navToNewServer(server);
|
2018-08-31 16:46:33 +00:00
|
|
|
}, ANIMATION_DURATION);
|
|
|
|
}
|
|
|
|
|
2021-01-21 17:20:28 +00:00
|
|
|
select = async(server, version) => {
|
2018-09-25 19:28:42 +00:00
|
|
|
const {
|
2020-06-15 14:00:46 +00:00
|
|
|
server: currentServer, selectServerRequest, isMasterDetail
|
2018-09-25 19:28:42 +00:00
|
|
|
} = this.props;
|
2018-08-31 16:46:33 +00:00
|
|
|
this.close();
|
2018-10-15 20:22:42 +00:00
|
|
|
if (currentServer !== server) {
|
2020-07-30 13:26:17 +00:00
|
|
|
logEvent(events.RL_CHANGE_SERVER);
|
2020-08-19 17:14:22 +00:00
|
|
|
const userId = await UserPreferences.getStringAsync(`${ RocketChat.TOKEN_KEY }-${ server }`);
|
2020-06-15 14:00:46 +00:00
|
|
|
if (isMasterDetail) {
|
|
|
|
goRoom({ item: {}, isMasterDetail });
|
2019-11-25 20:01:17 +00:00
|
|
|
}
|
2019-06-26 19:50:03 +00:00
|
|
|
if (!userId) {
|
2020-04-01 15:56:08 +00:00
|
|
|
setTimeout(() => {
|
2020-06-15 14:00:46 +00:00
|
|
|
this.navToNewServer(currentServer);
|
2020-04-01 15:56:08 +00:00
|
|
|
this.newServerTimeout = setTimeout(() => {
|
|
|
|
EventEmitter.emit('NewServer', { server });
|
|
|
|
}, ANIMATION_DURATION);
|
|
|
|
}, ANIMATION_DURATION);
|
2018-10-15 20:22:42 +00:00
|
|
|
} else {
|
2020-05-08 17:04:37 +00:00
|
|
|
await localAuthenticate(server);
|
2021-01-21 17:20:28 +00:00
|
|
|
selectServerRequest(server, version);
|
2018-08-31 16:46:33 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-04 20:20:45 +00:00
|
|
|
remove = server => showConfirmationAlert({
|
|
|
|
message: I18n.t('This_will_remove_all_data_from_this_server'),
|
2020-08-25 20:04:18 +00:00
|
|
|
confirmationText: I18n.t('Delete'),
|
2020-05-04 20:20:45 +00:00
|
|
|
onPress: async() => {
|
|
|
|
this.close();
|
|
|
|
try {
|
|
|
|
await RocketChat.removeServer({ server });
|
|
|
|
} catch {
|
|
|
|
// do nothing
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2019-11-25 20:01:17 +00:00
|
|
|
handleCommands = ({ event }) => {
|
|
|
|
const { servers } = this.state;
|
|
|
|
const { navigation } = this.props;
|
|
|
|
const { input } = event;
|
|
|
|
if (handleCommandSelectServer(event)) {
|
|
|
|
if (servers[input - 1]) {
|
|
|
|
this.select(servers[input - 1].id);
|
|
|
|
navigation.navigate('RoomView');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-12-04 16:39:53 +00:00
|
|
|
renderSeparator = () => {
|
|
|
|
const { theme } = this.props;
|
|
|
|
return <View style={[styles.serverSeparator, { backgroundColor: themes[theme].separatorColor }]} />;
|
|
|
|
}
|
2018-08-31 16:46:33 +00:00
|
|
|
|
2018-09-25 19:28:42 +00:00
|
|
|
renderServer = ({ item }) => {
|
2019-12-04 16:39:53 +00:00
|
|
|
const { server, theme } = this.props;
|
2018-09-25 19:28:42 +00:00
|
|
|
|
|
|
|
return (
|
2021-01-20 20:43:59 +00:00
|
|
|
<ServerItem
|
|
|
|
item={item}
|
2021-01-21 17:20:28 +00:00
|
|
|
onPress={() => this.select(item.id, item.version)}
|
2020-07-29 21:03:17 +00:00
|
|
|
onLongPress={() => (item.id === server || this.remove(item.id))}
|
2021-01-20 20:43:59 +00:00
|
|
|
hasCheck={item.id === server}
|
|
|
|
theme={theme}
|
|
|
|
/>
|
2018-09-25 19:28:42 +00:00
|
|
|
);
|
|
|
|
}
|
2018-08-31 16:46:33 +00:00
|
|
|
|
|
|
|
render() {
|
2018-09-25 19:28:42 +00:00
|
|
|
const { servers } = this.state;
|
2020-06-15 14:00:46 +00:00
|
|
|
const { theme, isMasterDetail, insets } = this.props;
|
2018-08-31 16:46:33 +00:00
|
|
|
const maxRows = 4;
|
2018-09-25 19:28:42 +00:00
|
|
|
const initialTop = 41 + (Math.min(servers.length, maxRows) * ROW_HEIGHT);
|
2020-06-15 14:00:46 +00:00
|
|
|
const statusBarHeight = insets?.top ?? 0;
|
|
|
|
const heightDestination = isMasterDetail ? headerHeight + statusBarHeight : 0;
|
2018-08-31 16:46:33 +00:00
|
|
|
const translateY = this.animatedValue.interpolate({
|
|
|
|
inputRange: [0, 1],
|
2020-06-15 14:00:46 +00:00
|
|
|
outputRange: [-initialTop, heightDestination]
|
2018-08-31 16:46:33 +00:00
|
|
|
});
|
|
|
|
const backdropOpacity = this.animatedValue.interpolate({
|
|
|
|
inputRange: [0, 1],
|
2019-12-04 16:39:53 +00:00
|
|
|
outputRange: [0, 0.6]
|
2018-08-31 16:46:33 +00:00
|
|
|
});
|
|
|
|
return (
|
2019-12-04 16:39:53 +00:00
|
|
|
<>
|
|
|
|
<TouchableWithoutFeedback onPress={this.close}>
|
2020-06-15 14:00:46 +00:00
|
|
|
<Animated.View style={[styles.backdrop,
|
|
|
|
{
|
|
|
|
backgroundColor: themes[theme].backdropColor,
|
|
|
|
opacity: backdropOpacity,
|
|
|
|
top: heightDestination
|
|
|
|
}]}
|
|
|
|
/>
|
2019-12-04 16:39:53 +00:00
|
|
|
</TouchableWithoutFeedback>
|
2018-08-31 16:46:33 +00:00
|
|
|
<Animated.View
|
2019-12-04 16:39:53 +00:00
|
|
|
style={[
|
|
|
|
styles.dropdownContainer,
|
|
|
|
{
|
|
|
|
transform: [{ translateY }],
|
|
|
|
backgroundColor: themes[theme].backgroundColor,
|
|
|
|
borderColor: themes[theme].separatorColor
|
|
|
|
}
|
|
|
|
]}
|
2018-08-31 16:46:33 +00:00
|
|
|
testID='rooms-list-header-server-dropdown'
|
|
|
|
>
|
2019-12-04 16:39:53 +00:00
|
|
|
<View
|
|
|
|
style={[
|
|
|
|
styles.dropdownContainerHeader,
|
|
|
|
styles.serverHeader,
|
|
|
|
{ borderColor: themes[theme].separatorColor }
|
|
|
|
]}
|
|
|
|
>
|
|
|
|
<Text style={[styles.serverHeaderText, { color: themes[theme].auxiliaryText }]}>{I18n.t('Server')}</Text>
|
2018-08-31 16:46:33 +00:00
|
|
|
<TouchableOpacity onPress={this.addServer} testID='rooms-list-header-server-add'>
|
2019-12-04 16:39:53 +00:00
|
|
|
<Text style={[styles.serverHeaderAdd, { color: themes[theme].tintColor }]}>{I18n.t('Add_Server')}</Text>
|
2018-08-31 16:46:33 +00:00
|
|
|
</TouchableOpacity>
|
|
|
|
</View>
|
|
|
|
<FlatList
|
|
|
|
style={{ maxHeight: maxRows * ROW_HEIGHT }}
|
2018-09-25 19:28:42 +00:00
|
|
|
data={servers}
|
2018-08-31 16:46:33 +00:00
|
|
|
keyExtractor={item => item.id}
|
|
|
|
renderItem={this.renderServer}
|
|
|
|
ItemSeparatorComponent={this.renderSeparator}
|
2019-11-25 20:01:17 +00:00
|
|
|
keyboardShouldPersistTaps='always'
|
2018-08-31 16:46:33 +00:00
|
|
|
/>
|
|
|
|
</Animated.View>
|
2019-12-04 16:39:53 +00:00
|
|
|
</>
|
2018-08-31 16:46:33 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2019-08-07 13:51:34 +00:00
|
|
|
|
|
|
|
const mapStateToProps = state => ({
|
|
|
|
closeServerDropdown: state.rooms.closeServerDropdown,
|
2020-06-15 14:00:46 +00:00
|
|
|
server: state.server.server,
|
|
|
|
isMasterDetail: state.app.isMasterDetail
|
2019-08-07 13:51:34 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
|
|
toggleServerDropdown: () => dispatch(toggleServerDropdownAction()),
|
2021-01-21 17:20:28 +00:00
|
|
|
selectServerRequest: (server, version) => dispatch(selectServerRequestAction(server, version, true, true)),
|
2020-06-15 14:00:46 +00:00
|
|
|
appStart: params => dispatch(appStartAction(params)),
|
|
|
|
initAdd: previousServer => dispatch(serverInitAddAction(previousServer))
|
2019-08-07 13:51:34 +00:00
|
|
|
});
|
|
|
|
|
2020-06-15 14:00:46 +00:00
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(withSafeAreaInsets(withTheme(ServerDropdown)));
|