verdnatura-chat/app/views/RoomsListView/index.js

220 lines
5.8 KiB
JavaScript
Raw Normal View History

import ActionButton from 'react-native-action-button';
2017-08-11 18:18:09 +00:00
import { ListView } from 'realm/react-native';
2017-08-03 18:23:43 +00:00
import React from 'react';
2017-08-05 18:16:32 +00:00
import PropTypes from 'prop-types';
import Icon from 'react-native-vector-icons/Ionicons';
import { Platform, View, TextInput, SafeAreaView, FlatList } from 'react-native';
2017-08-13 01:35:09 +00:00
import { connect } from 'react-redux';
import * as actions from '../../actions';
import * as server from '../../actions/connect';
import database from '../../lib/realm';
import RocketChat from '../../lib/rocketchat';
import RoomItem from '../../presentation/RoomItem';
import Banner from '../../containers/Banner';
import { goRoom } from '../../containers/routes/NavigationService';
import Header from '../../containers/Header';
import RoomsListHeader from './Header';
import styles from './styles';
2018-03-02 21:31:44 +00:00
import debounce from '../../utils/debounce';
2017-08-03 18:23:43 +00:00
2017-08-11 18:18:09 +00:00
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
2017-08-13 01:35:09 +00:00
@connect(state => ({
user: state.login.user,
server: state.server.server,
login: state.login,
Site_Url: state.settings.Site_Url,
canShowList: state.login.token || state.login.user.token,
searchText: state.rooms.searchText
2017-08-13 01:35:09 +00:00
}), dispatch => ({
2017-08-17 01:06:31 +00:00
login: () => dispatch(actions.login()),
connect: () => dispatch(server.connectRequest())
2017-08-13 01:35:09 +00:00
}))
2017-08-14 18:02:53 +00:00
2017-08-09 01:40:55 +00:00
export default class RoomsListView extends React.Component {
2017-08-05 18:16:32 +00:00
static propTypes = {
navigation: PropTypes.object.isRequired,
user: PropTypes.object,
Site_Url: PropTypes.string,
server: PropTypes.string,
searchText: PropTypes.string
2017-08-10 14:59:07 +00:00
}
2017-08-09 16:19:17 +00:00
static navigationOptions = ({ navigation }) => ({
header: <Header subview={<RoomsListHeader navigation={navigation} />} />
});
2017-08-03 18:23:43 +00:00
constructor(props) {
super(props);
2017-08-10 16:16:32 +00:00
this.state = {
2017-11-20 22:18:00 +00:00
dataSource: ds.cloneWithRows([]),
2017-11-18 20:17:24 +00:00
searchText: ''
2017-08-10 16:16:32 +00:00
};
this._keyExtractor = this._keyExtractor.bind(this);
this.data = database.objects('subscriptions').sorted('roomUpdatedAt', true);
2017-08-21 00:11:46 +00:00
}
2017-11-20 22:18:00 +00:00
componentDidMount() {
this.data.addListener(this.updateState);
this.props.navigation.setParams({
createChannel: () => this._createChannel()
});
2017-11-20 22:18:00 +00:00
this.updateState();
2017-08-13 01:35:09 +00:00
}
componentWillReceiveProps(props) {
if (this.props.server !== props.server) {
this.data.removeListener(this.updateState);
this.data = database.objects('subscriptions').sorted('roomUpdatedAt', true);
this.data.addListener(this.updateState);
} else if (this.props.searchText !== props.searchText) {
this.search(props.searchText);
}
}
2018-03-02 21:31:44 +00:00
2017-08-09 16:19:17 +00:00
componentWillUnmount() {
2018-03-02 21:31:44 +00:00
this.updateState.stop();
this.data.removeAllListeners();
2017-08-12 20:52:55 +00:00
}
onSearchChangeText(text) {
this.setState({ searchText: text });
this.search(text);
}
2018-03-02 21:31:44 +00:00
updateState = debounce(() => {
this.forceUpdate();
}, 1000);
2018-03-02 21:31:44 +00:00
async search(text) {
2017-08-10 16:16:32 +00:00
const searchText = text.trim();
if (searchText === '') {
2018-03-02 21:31:44 +00:00
delete this.oldPromise;
return this.setState({
2018-03-02 21:31:44 +00:00
search: false
});
}
2017-08-09 18:01:54 +00:00
2018-03-02 21:31:44 +00:00
let data = this.data.filtered('name CONTAINS[c] $0', searchText).slice(0, 7);
const usernames = data.map(sub => sub.map);
try {
if (data.length < 7) {
if (this.oldPromise) {
this.oldPromise('cancel');
}
const { users, rooms } = await Promise.race([
RocketChat.spotlight(searchText, usernames, { users: true, rooms: true }),
new Promise((resolve, reject) => this.oldPromise = reject)
]);
data = data.concat(users.map(user => ({
...user,
rid: user.username,
name: user.username,
t: 'd',
search: true
})), rooms.map(room => ({
rid: room._id,
...room,
search: true
})));
delete this.oldPromise;
}
2017-08-10 16:16:32 +00:00
this.setState({
2018-03-02 21:31:44 +00:00
search: data
2017-08-10 16:16:32 +00:00
});
2018-03-02 21:31:44 +00:00
} catch (e) {
// alert(JSON.stringify(e));
}
}
2017-08-10 16:16:32 +00:00
2018-03-02 21:31:44 +00:00
_onPressItem = async(item = {}) => {
2017-08-10 16:16:32 +00:00
// if user is using the search we need first to join/create room
2018-03-02 21:31:44 +00:00
if (!item.search) {
return this.props.navigation.navigate({ routeName: 'Room', params: { room: item, ...item } });
2017-08-10 16:16:32 +00:00
}
2018-03-02 21:31:44 +00:00
if (item.t === 'd') {
const sub = await RocketChat.createDirectMessageAndWait(item.username);
return goRoom({ room: sub, name: sub.name });
}
return goRoom(item);
2017-08-05 18:16:32 +00:00
}
_createChannel() {
this.props.navigation.navigate('SelectUsers');
}
_keyExtractor(item) {
return item.rid.replace(this.props.user.id, '').trim();
}
2017-08-10 16:16:32 +00:00
renderSearchBar = () => (
<View style={styles.searchBoxView}>
<TextInput
underlineColorAndroid='transparent'
style={styles.searchBox}
value={this.state.searchText}
onChangeText={text => this.onSearchChangeText(text)}
returnKeyType='search'
placeholder='Search'
2017-08-10 20:31:14 +00:00
clearButtonMode='while-editing'
blurOnSubmit
/>
</View>
2017-08-10 16:16:32 +00:00
);
renderItem = ({ item }) => {
const id = item.rid.replace(this.props.user.id, '').trim();
return (<RoomItem
alert={item.alert}
unread={item.unread}
userMentions={item.userMentions}
favorite={item.f}
lastMessage={item.lastMessage}
2017-08-21 16:16:23 +00:00
name={item.name}
_updatedAt={item.roomUpdatedAt}
key={item._id}
id={id}
2017-08-21 16:16:23 +00:00
type={item.t}
2017-08-21 00:11:46 +00:00
baseUrl={this.props.Site_Url}
onPress={() => this._onPressItem(item)}
/>);
}
2017-08-11 18:18:09 +00:00
renderList = () => (
<FlatList
2018-03-02 21:31:44 +00:00
data={this.state.search ? this.state.search : this.data}
keyExtractor={this._keyExtractor}
2017-08-11 18:18:09 +00:00
dataSource={this.state.dataSource}
style={styles.list}
renderItem={this.renderItem}
ListHeaderComponent={Platform.OS === 'ios' ? this.renderSearchBar : null}
contentOffset={Platform.OS === 'ios' ? { x: 0, y: 38 } : {}}
2017-08-12 20:52:55 +00:00
enableEmptySections
2017-08-14 18:02:53 +00:00
keyboardShouldPersistTaps='always'
2017-08-11 18:18:09 +00:00
/>
)
renderCreateButtons = () => (
<ActionButton buttonColor='rgba(231,76,60,1)'>
<ActionButton.Item buttonColor='#9b59b6' title='Create Channel' onPress={() => { this._createChannel(); }} >
<Icon name='md-chatbubbles' style={styles.actionButtonIcon} />
</ActionButton.Item>
</ActionButton>
);
render = () => (
2017-08-21 00:11:46 +00:00
<View style={styles.container}>
<Banner />
2017-11-13 12:49:19 +00:00
<SafeAreaView style={styles.safeAreaView}>
{this.renderList()}
{Platform.OS === 'android' && this.renderCreateButtons()}
2017-11-13 12:49:19 +00:00
</SafeAreaView>
2017-08-21 00:11:46 +00:00
</View>)
2017-08-03 18:23:43 +00:00
}