verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Navigating to created room

This commit is contained in:
Diego Mello 2017-09-23 18:25:06 -03:00
parent 2eeab48879
commit b3f0cc1a4c
5 changed files with 111 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
app/containers/routes/AuthRoutes.js
View File

@ -1,5 +1,6 @@
import React from 'react';
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import { Button } from 'react-native';
import { StackNavigator, DrawerNavigator, NavigationActions } from 'react-navigation';
// import { Platform } from 'react-native';
import Sidebar from '../../containers/Sidebar';
@ -8,11 +9,18 @@ import DrawerMenuButton from '../../presentation/DrawerMenuButton';
import RoomsListView from '../../views/RoomsListView';
import RoomView from '../../views/RoomView';
import CreateChannelView from '../../views/CreateChannelView';
import SelectUsersView from '../../views/selectUsers';
import SelectUsersView from '../../views/SelectUsersView';
const drawerPosition = 'left';
const drawerIconPosition = 'headerLeft';
const backToScreen = (navigation, routeName) => {
const action = NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName })]
});
navigation.dispatch(action);
};
const AuthRoutes = StackNavigator(
{
@ -21,7 +29,7 @@ const AuthRoutes = StackNavigator(
navigationOptions({ navigation }) {
return {
title: 'Rooms',
[drawerIconPosition]: (<DrawerMenuButton navigation={navigation} />)
[drawerIconPosition]: <DrawerMenuButton navigation={navigation} />
};
}
},
@ -29,7 +37,10 @@ const AuthRoutes = StackNavigator(
screen: RoomView,
navigationOptions({ navigation }) {
return {
title: navigation.state.params.title || 'Room'
title: navigation.state.params.title || 'Room',
headerLeft: (
<Button title={'Back'} onPress={() => backToScreen(navigation, 'RoomsList')} />
)
// [drawerIconPosition]: (<DrawerMenuButton navigation={navigation} />)÷
};
}
@ -41,26 +52,31 @@ const AuthRoutes = StackNavigator(
}
},
SelectUsers: {
screen: SelectUsersView
screen: SelectUsersView,
navigationOptions: {
title: 'Select Users'
}
}
},
{}
);
const Routes = DrawerNavigator(
{
Home: {
screen: AuthRoutes,
navigationOptions({ navigation }) {
return {
title: 'Rooms',
[drawerIconPosition]: <DrawerMenuButton navigation={navigation} />
};
}
}
},
{
contentComponent: Sidebar,
drawerPosition
}
);
const Routes = DrawerNavigator({
Home: {
screen: AuthRoutes,
navigationOptions({ navigation }) {
return {
title: 'Rooms',
[drawerIconPosition]: (<DrawerMenuButton navigation={navigation} />)
};
}
}
}, {
contentComponent: Sidebar,
drawerPosition
});
export default Routes;

45
app/views/CreateChannelView.js
View File

@ -6,13 +6,15 @@ import { createChannelRequest } from '../actions/createChannel';
import styles from './Styles';
import KeyboardView from '../presentation/KeyboardView';
@connect(state => ({
result: state.createChannel,
users: state.createChannel.users
}), dispatch => ({
createChannel: data => dispatch(createChannelRequest(data))
}))
@connect(
state => ({
result: state.createChannel,
users: state.createChannel.users
}),
dispatch => ({
createChannel: data => dispatch(createChannelRequest(data))
})
)
export default class CreateChannelView extends React.Component {
static navigationOptions = () => ({
title: 'Create a New Channel'
@ -22,7 +24,7 @@ export default class CreateChannelView extends React.Component {
result: PropTypes.object.isRequired,
users: PropTypes.array.isRequired,
navigation: PropTypes.object.isRequired
}
};
constructor(props) {
super(props);
@ -38,7 +40,7 @@ export default class CreateChannelView extends React.Component {
return;
}
if (this.props.result.result && !this.props.result.failure) {
this.props.navigation.goBack();
this.props.navigation.navigate('Room', { room: this.props.result.result });
this.adding = false;
}
}
@ -59,14 +61,15 @@ export default class CreateChannelView extends React.Component {
}
renderChannelNameError() {
if (!this.props.result.failure || this.props.result.error.error !== 'error-duplicate-channel-name') {
if (
!this.props.result.failure ||
this.props.result.error.error !== 'error-duplicate-channel-name'
) {
return null;
}
return (
<Text style={[styles.label_white, styles.label_error]}>
{this.props.result.error.reason}
</Text>
<Text style={[styles.label_white, styles.label_error]}>{this.props.result.error.reason}</Text>
);
}
@ -112,18 +115,22 @@ export default class CreateChannelView extends React.Component {
flexGrow: 1,
paddingHorizontal: 0,
marginBottom: 20
}]}
}
]}
>
{this.state.type ?
'Everyone can access this channel' :
'Just invited people can access this channel'}
{this.state.type ? (
'Everyone can access this channel'
) : (
'Just invited people can access this channel'
)}
</Text>
<TouchableOpacity
onPress={() => this.submit()}
style={[
styles.buttonContainer_white,
(this.state.channelName.length === 0 || this.props.result.isFetching) ?
styles.disabledButton : styles.enabledButton
this.state.channelName.length === 0 || this.props.result.isFetching
? styles.disabledButton
: styles.enabledButton
]}
>
<Text style={styles.button_white}>

71
app/views/RoomView.js
View File

@ -43,16 +43,18 @@ const styles = StyleSheet.create({
}
});
@connect(state => ({
server: state.server.server,
Site_Url: state.settings.Site_Url,
Message_TimeFormat: state.settings.Message_TimeFormat,
loading: state.messages.isFetching
}), dispatch => ({
actions: bindActionCreators(actions, dispatch),
getMessages: rid => dispatch(messagesRequest({ rid }))
}))
@connect(
state => ({
server: state.server.server,
Site_Url: state.settings.Site_Url,
Message_TimeFormat: state.settings.Message_TimeFormat,
loading: state.messages.isFetching
}),
dispatch => ({
actions: bindActionCreators(actions, dispatch),
getMessages: rid => dispatch(messagesRequest({ rid }))
})
)
export default class RoomView extends React.Component {
static propTypes = {
navigation: PropTypes.object.isRequired,
@ -64,15 +66,21 @@ export default class RoomView extends React.Component {
Site_Url: PropTypes.string,
Message_TimeFormat: PropTypes.string,
loading: PropTypes.bool
}
};
constructor(props) {
super(props);
this.sid = props.navigation.state.params.room.sid;
this.rid = props.rid || realm.objectForPrimaryKey('subscriptions', this.sid).rid;
this.rid =
props.rid ||
props.navigation.state.params.room.rid ||
realm.objectForPrimaryKey('subscriptions', this.sid).rid;
this.data = realm.objects('messages').filtered('_server.id = $0 AND rid = $1', this.props.server, this.rid).sorted('ts', true);
this.data = realm
.objects('messages')
.filtered('_server.id = $0 AND rid = $1', this.props.server, this.rid)
.sorted('ts', true);
this.state = {
slow: false,
dataSource: [],
@ -83,7 +91,10 @@ export default class RoomView extends React.Component {
componentWillMount() {
this.props.navigation.setParams({
title: this.props.name || realm.objectForPrimaryKey('subscriptions', this.sid).name
title:
this.props.name ||
this.props.navigation.state.params.room.name ||
realm.objectForPrimaryKey('subscriptions', this.sid).name
});
this.timer = setTimeout(() => this.setState({ slow: true }), 5000);
this.props.getMessages(this.rid);
@ -103,7 +114,12 @@ export default class RoomView extends React.Component {
onEndReached = () => {
const rowCount = this.state.dataSource.getRowCount();
if (rowCount && this.state.loaded && this.state.loadingMore !== true && this.state.end !== true) {
if (
rowCount &&
this.state.loaded &&
this.state.loadingMore !== true &&
this.state.end !== true
) {
this.setState({
// ...this.state,
loadingMore: true
@ -118,7 +134,7 @@ export default class RoomView extends React.Component {
});
});
}
}
};
updateState = () => {
this.setState({
@ -135,13 +151,12 @@ export default class RoomView extends React.Component {
});
};
renderBanner = () => (this.state.slow && this.props.loading ?
(
renderBanner = () =>
(this.state.slow && this.props.loading ? (
<View style={styles.bannerContainer}>
<Text style={styles.bannerText}>Loading new messages...</Text>
</View>
) : null)
) : null);
renderItem = ({ item }) => (
<Message
@ -152,9 +167,7 @@ export default class RoomView extends React.Component {
/>
);
renderSeparator = () => (
<View style={styles.separator} />
);
renderSeparator = () => <View style={styles.separator} />;
renderFooter = () => {
if (!this.state.joined) {
@ -165,14 +178,8 @@ export default class RoomView extends React.Component {
</View>
);
}
return (
<MessageBox
ref={box => this.box = box}
onSubmit={this.sendMessage}
rid={this.rid}
/>
);
}
return <MessageBox ref={box => (this.box = box)} onSubmit={this.sendMessage} rid={this.rid} />;
};
renderHeader = () => {
if (this.state.loadingMore) {
@ -182,7 +189,7 @@ export default class RoomView extends React.Component {
if (this.state.end) {
return <Text style={styles.header}>Start of conversation</Text>;
}
}
};
render() {
return (

2
app/views/RoomsListView.js
View File

@ -207,7 +207,7 @@ export default class RoomsListView extends React.Component {
}
_createChannel() {
this.props.navigation.navigate('CreateChannel');
this.props.navigation.navigate('SelectUsers');
}
renderSearchBar = () => (

45
app/views/selectUsers.js → app/views/SelectUsersView.js
View File

@ -3,7 +3,7 @@ import { ListView } from 'realm/react-native';
import React from 'react';
import PropTypes from 'prop-types';
import Icon from 'react-native-vector-icons/Ionicons';
import { View, StyleSheet, TextInput, Platform, Text, TouchableOpacity } from 'react-native';
import { View, StyleSheet, TextInput, Text, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import * as actions from '../actions';
import * as server from '../actions/connect';
@ -21,7 +21,8 @@ const styles = StyleSheet.create({
justifyContent: 'center'
},
list: {
width: '100%'
width: '100%',
backgroundColor: '#FFFFFF'
},
actionButtonIcon: {
fontSize: 20,
@ -67,7 +68,7 @@ const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
)
export default class RoomsListView extends React.Component {
static propTypes = {
navigator: PropTypes.object.isRequired,
navigation: PropTypes.object.isRequired,
Site_Url: PropTypes.string,
server: PropTypes.string,
addUser: PropTypes.func.isRequired,
@ -90,30 +91,10 @@ export default class RoomsListView extends React.Component {
};
this.data.addListener(this.updateState);
}
componentWillMount() {
// add back button
const button = Platform.OS === 'ios' ? 'leftButtons' : 'rightButtons';
this.props.navigator.setButtons({
[button]: [
{
id: 'back',
title: 'Back'
}
],
animated: true
});
// on navigator event
this.props.navigator.setOnNavigatorEvent((event) => {
if (event.type === 'NavBarButtonPress' && event.id === 'back') {
this.props.resetCreateChannel();
this.props.navigator.dismissModal({
animationType: 'slide-down'
});
}
});
}
componentWillUnmount() {
this.data.removeListener(this.updateState);
this.props.resetCreateChannel();
}
onSearchChangeText = (text) => {
@ -193,18 +174,10 @@ export default class RoomsListView extends React.Component {
}
};
_onPressSelectedItem = item => (
this.toggleUser(item)
);
_onPressSelectedItem = item => this.toggleUser(item);
_createChannel = () => {
this.props.navigator.push({
screen: 'CreateChannel',
title: 'Create a New Channel',
navigatorStyle: {},
navigatorButtons: {},
animationType: 'slide-up'
});
this.props.navigation.navigate('CreateChannel');
};
renderHeader = () => (
@ -271,7 +244,7 @@ export default class RoomsListView extends React.Component {
style={styles.list}
renderRow={this.renderItem}
renderHeader={this.renderHeader}
contentOffset={{ x: 0, y: 20 }}
contentOffset={{ x: 0, y: this.props.users.length > 0 ? 40 : 20 }}
enableEmptySections
keyboardShouldPersistTaps='always'
/>