From 23d2d87bfb83c158c297f69611b953f9041fcc0c Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Tue, 28 Nov 2017 14:27:06 -0200 Subject: [PATCH 1/2] Messagebox autogrow (#114) * multiline messagebox * Action buttons alignment * lint * Fix MessageBox height when line break to 2 lines * Android fix --- app/containers/MessageBox.js | 37 +++++++++++++++++++++++++++++------- 1 file changed, 30 insertions(+), 7 deletions(-) diff --git a/app/containers/MessageBox.js b/app/containers/MessageBox.js index 95de126bf..7b81d186c 100644 --- a/app/containers/MessageBox.js +++ b/app/containers/MessageBox.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { View, TextInput, StyleSheet, SafeAreaView } from 'react-native'; +import { View, TextInput, StyleSheet, SafeAreaView, Platform } from 'react-native'; import Icon from 'react-native-vector-icons/MaterialIcons'; import ImagePicker from 'react-native-image-picker'; import { connect } from 'react-redux'; @@ -22,14 +22,19 @@ const styles = StyleSheet.create({ }, textBoxInput: { height: 40, - alignSelf: 'stretch', - flexGrow: 1 + minHeight: 40, + maxHeight: 120, + flexGrow: 1, + paddingHorizontal: 10, + paddingTop: 12 }, actionButtons: { color: '#aaa', paddingTop: 10, paddingBottom: 10, - fontSize: 20 + paddingHorizontal: 8, + fontSize: 20, + alignSelf: 'flex-end' }, editing: { backgroundColor: '#fff5df' @@ -57,6 +62,13 @@ export default class MessageBox extends React.Component { clearInput: PropTypes.func } + constructor(props) { + super(props); + this.state = { + height: 40 + }; + } + componentWillReceiveProps(nextProps) { if (this.props.message !== nextProps.message && nextProps.message) { this.component.setNativeProps({ text: nextProps.message.msg }); @@ -111,6 +123,10 @@ export default class MessageBox extends React.Component { }); } + updateSize = (height) => { + this.setState({ height: height + (Platform.OS === 'ios' ? 20 : 0) }); + } + editCancel() { this.props.editCancel(); this.component.setNativeProps({ text: '' }); @@ -125,20 +141,27 @@ export default class MessageBox extends React.Component { } render() { + const { height } = this.state; return ( {this.renderLeftButton()} this.component = component} - style={styles.textBoxInput} - returnKeyType='send' - onSubmitEditing={event => this.submit(event.nativeEvent.text)} + style={[styles.textBoxInput, { height }]} + returnKeyType='default' blurOnSubmit={false} placeholder='New message' onChangeText={text => this.props.typing(text.length > 0)} underlineColorAndroid='transparent' defaultValue='' + multiline + onContentSizeChange={e => this.updateSize(e.nativeEvent.contentSize.height)} + /> + this.submit(this.component._lastNativeText)} /> From 599b7c8368224e14549b30f056f7dd71801402cd Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Tue, 28 Nov 2017 15:47:56 -0200 Subject: [PATCH 2/2] [NEW] Open room on tap(push notification) (#116) * fix frozen screen when app return from background (Android) * Update state.js * Update state.js * init task * fix updateAt * remove timeout to show banner * remove unused state saga, and comment about go to room method --- app/containers/Banner.js | 13 ------------- app/containers/routes/AuthRoutes.js | 2 +- app/containers/routes/NavigationService.js | 20 ++++++++++++++++++++ app/push.js | 15 +++++++++++---- app/sagas/index.js | 2 +- app/views/RoomView.js | 17 ++++------------- app/views/RoomsListView.js | 15 ++++++--------- package.json | 1 + 8 files changed, 44 insertions(+), 41 deletions(-) diff --git a/app/containers/Banner.js b/app/containers/Banner.js index 48660deca..5cc765c39 100644 --- a/app/containers/Banner.js +++ b/app/containers/Banner.js @@ -30,22 +30,9 @@ export default class Banner extends React.PureComponent { authenticating: PropTypes.bool, offline: PropTypes.bool } - componentWillMount() { - this.setState({ - slow: false - }); - this.timer = setTimeout(() => this.setState({ slow: true }), 5000); - } - componentWillUnmount() { - clearTimeout(this.timer); - } render() { const { connecting, authenticating, offline } = this.props; - if (!this.state.slow) { - return null; - } - if (offline) { return ( diff --git a/app/containers/routes/AuthRoutes.js b/app/containers/routes/AuthRoutes.js index ed70deb74..d39bc8a6e 100644 --- a/app/containers/routes/AuthRoutes.js +++ b/app/containers/routes/AuthRoutes.js @@ -28,7 +28,7 @@ const AuthRoutes = StackNavigator( screen: RoomView, navigationOptions({ navigation }) { return { - title: navigation.state.params.title || 'Room' + title: navigation.state.params.name || navigation.state.params.room.name || 'Room' // [drawerIconPosition]: ()รท }; } diff --git a/app/containers/routes/NavigationService.js b/app/containers/routes/NavigationService.js index 0be7f410b..2c7cab915 100644 --- a/app/containers/routes/NavigationService.js +++ b/app/containers/routes/NavigationService.js @@ -21,3 +21,23 @@ export function goBack() { config.navigator.dispatch(action); } } + + +export function goRoom({ rid, name }, counter = 0) { + // about counter: we can call this method before navigator be set. so we have to wait, if we tried a lot, we give up ... + if (!rid || !name || counter > 10) { + return; + } + if (!config.navigator) { + return setTimeout(() => goRoom({ rid, name }, counter + 1), 200); + } + const action = NavigationActions.reset({ + index: 1, + actions: [ + NavigationActions.navigate({ routeName: 'RoomsList' }), + NavigationActions.navigate({ routeName: 'Room', params: { room: { rid, name }, rid, name } }) + ] + }); + + return config.navigator.dispatch(action); +} diff --git a/app/push.js b/app/push.js index df9936369..6c0687d8b 100644 --- a/app/push.js +++ b/app/push.js @@ -1,6 +1,15 @@ import PushNotification from 'react-native-push-notification'; import { AsyncStorage } from 'react-native'; +import EJSON from 'ejson'; +import { goRoom } from './containers/routes/NavigationService'; +const handleNotification = (notification) => { + if (notification.usernInteraction) { + return; + } + const { rid, name } = EJSON.parse(notification.ejson); + return rid && name && goRoom({ rid, name }); +}; PushNotification.configure({ // (optional) Called when Token is generated (iOS and Android) @@ -9,9 +18,7 @@ PushNotification.configure({ }, // (required) Called when a remote or local notification is opened or received - onNotification(notification) { - console.log('NOTIFICATION:', notification); - }, + onNotification: handleNotification, // ANDROID ONLY: GCM Sender ID (optional - not required for local notifications, but is need to receive remote push notifications) senderID: '673693445664', @@ -25,7 +32,7 @@ PushNotification.configure({ // Should the initial notification be popped automatically // default: true - popInitialNotification: false, + popInitialNotification: true, /** * (optional) default: true diff --git a/app/sagas/index.js b/app/sagas/index.js index df6f7d7ad..068401c54 100644 --- a/app/sagas/index.js +++ b/app/sagas/index.js @@ -22,5 +22,5 @@ const root = function* root() { state() ]); }; -// Consider using takeEvery + export default root; diff --git a/app/views/RoomView.js b/app/views/RoomView.js index e4c4ad80a..62cf4cdd8 100644 --- a/app/views/RoomView.js +++ b/app/views/RoomView.js @@ -70,7 +70,6 @@ export default class RoomView extends React.Component { editCancel: PropTypes.func, rid: PropTypes.string, server: PropTypes.string, - sid: PropTypes.string, name: PropTypes.string, Site_Url: PropTypes.string, Message_TimeFormat: PropTypes.string, @@ -79,12 +78,9 @@ export default class RoomView extends React.Component { constructor(props) { super(props); - - this.sid = props.navigation.state.params.room.sid; this.rid = props.rid || - props.navigation.state.params.room.rid || - realm.objectForPrimaryKey('subscriptions', this.sid).rid; + props.navigation.state.params.room.rid; this.data = realm .objects('messages') @@ -92,7 +88,6 @@ export default class RoomView extends React.Component { .sorted('ts', true); this.room = realm.objects('subscriptions').filtered('rid = $0', this.rid); this.state = { - slow: false, dataSource: ds.cloneWithRows([]), loaded: true, joined: typeof props.rid === 'undefined' @@ -103,19 +98,15 @@ export default class RoomView extends React.Component { this.props.navigation.setParams({ title: this.props.name || - this.props.navigation.state.params.room.name || - realm.objectForPrimaryKey('subscriptions', this.sid).name + this.props.navigation.state.params.name || + this.props.navigation.state.params.room.name }); - this.timer = setTimeout(() => this.setState({ slow: true }), 5000); this.props.openRoom({ rid: this.rid }); this.data.addListener(this.updateState); } componentDidMount() { this.updateState(); } - componentDidUpdate() { - return !this.props.loading && clearTimeout(this.timer); - } componentWillUnmount() { clearTimeout(this.timer); this.data.removeAllListeners(); @@ -160,7 +151,7 @@ export default class RoomView extends React.Component { }; renderBanner = () => - (this.state.slow && this.props.loading ? ( + (this.props.loading ? ( Loading new messages... diff --git a/app/views/RoomsListView.js b/app/views/RoomsListView.js index ebf130715..a9277ec9c 100644 --- a/app/views/RoomsListView.js +++ b/app/views/RoomsListView.js @@ -11,6 +11,7 @@ import realm from '../lib/realm'; import RocketChat from '../lib/rocketchat'; import RoomItem from '../presentation/RoomItem'; import Banner from '../containers/Banner'; +import { goRoom } from '../containers/routes/NavigationService'; const styles = StyleSheet.create({ container: { @@ -191,11 +192,7 @@ export default class RoomsListView extends React.Component { }); }; - _onPressItem = (id, item = {}) => { - const navigateToRoom = (room) => { - this.props.navigation.navigate('Room', { room, title: room.name }); - }; - + _onPressItem = (item = {}) => { const clearSearch = () => { this.setState({ searchText: '' @@ -220,16 +217,16 @@ export default class RoomsListView extends React.Component { } }); })) - .then(sub => navigateToRoom({ sid: sub._id, name: sub.name })) + .then(sub => goRoom({ room: sub, name: sub.name })) .then(() => clearSearch()); } else { clearSearch(); - navigateToRoom({ rid: item._id, name: item.name }); + goRoom(item); } return; } - navigateToRoom({ sid: id, name: item.name }); + goRoom(item); clearSearch(); } @@ -264,7 +261,7 @@ export default class RoomsListView extends React.Component { type={item.t} baseUrl={this.props.Site_Url} dateFormat='MM-DD-YYYY HH:mm:ss' - onPress={() => this._onPressItem(item._id, item)} + onPress={() => this._onPressItem(item)} /> ) diff --git a/package.json b/package.json index efa0055e1..f1f829b7d 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-remove-console": "^6.8.5", "babel-polyfill": "^6.26.0", + "ejson": "^2.1.2", "moment": "^2.19.2", "prop-types": "^15.6.0", "react": "16.1.1",