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

Create MessageBox component

This commit is contained in:
Diego Sampaio 2017-08-09 10:12:00 -03:00
parent fddb18fb9f
commit e01a2d0aaf
No known key found for this signature in database
GPG Key ID: E060152B30502562
8 changed files with 3103 additions and 1053 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/components/KeyboardView.js Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import PropTypes from 'prop-types';
import { KeyboardAvoidingView, Platform } from 'react-native';
export default class KeyboardView extends React.PureComponent {
static propTypes = {
style: KeyboardAvoidingView.propTypes.style,
keyboardVerticalOffset: PropTypes.number,
children: PropTypes.array.isRequired
}
render() {
return (
<KeyboardAvoidingView style={this.props.style} behavior={Platform.OS === 'ios' ? 'padding' : null} keyboardVerticalOffset={this.props.keyboardVerticalOffset}>
{this.props.children}
</KeyboardAvoidingView>
);
}
}

59
app/components/MessageBox.js Normal file
View File

@ -0,0 +1,59 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View, TextInput, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
textBox: {
paddingTop: 1,
backgroundColor: '#ccc'
},
textBoxInput: {
height: 40,
backgroundColor: '#fff',
paddingLeft: 15
}
});
export default class MessageBox extends React.PureComponent {
static propTypes = {
onSubmit: PropTypes.func.isRequired
}
constructor(props) {
super(props);
this.state = {
text: ''
};
}
submit = () => {
if (this.state.text.trim() === '') {
return;
}
this.props.onSubmit(this.state.text)
.then(() => {
this.setState({
text: ''
});
});
};
render() {
return (
<View style={styles.textBox}>
<TextInput
style={styles.textBoxInput}
value={this.state.text}
onChangeText={text => this.setState({ text })}
returnKeyType='send'
onSubmitEditing={this.submit}
blurOnSubmit={false}
autoFocus
placeholder='New message'
/>
</View>
);
}
}

25
app/lib/meteor.js
View File

@ -12,11 +12,11 @@ const RocketChat = {
set currentServer(server) {
realm.write(() => {
realm.objects('servers').filtered('current = true').forEach(server => (server.current = false));
realm.objects('servers').filtered('current = true').forEach(item => (item.current = false));
realm.create('servers', { id: server, current: true }, true);
});
}
}
};
export default RocketChat;
@ -38,7 +38,7 @@ export function connect(cb) {
const setting = {
_id: item._id
};
setting._server = {id: RocketChat.currentServer};
setting._server = { id: RocketChat.currentServer };
if (typeof item.value === 'string') {
setting.value = item.value;
}
@ -56,7 +56,7 @@ export function connect(cb) {
realm.write(() => {
const message = ddbMessage.fields.args[0];
message.temp = false;
message._server = {id: RocketChat.currentServer};
message._server = { id: RocketChat.currentServer };
realm.create('messages', message, true);
});
}, 1000);
@ -83,7 +83,7 @@ export function loadSubscriptions(cb) {
// if (typeof item.value === 'string') {
// subscription.value = item.value;
// }
subscription._server = {id: RocketChat.currentServer};
subscription._server = { id: RocketChat.currentServer };
realm.create('subscriptions', subscription, true);
});
});
@ -101,7 +101,7 @@ export function loadMessagesForRoom(rid) {
realm.write(() => {
data.messages.forEach((message) => {
message.temp = false;
message._server = {id: RocketChat.currentServer};
message._server = { id: RocketChat.currentServer };
realm.create('messages', message, true);
});
});
@ -110,7 +110,7 @@ export function loadMessagesForRoom(rid) {
Meteor.subscribe('stream-room-messages', rid, false);
}
export function sendMessage(rid, msg, cb) {
export function sendMessage(rid, msg) {
const _id = Random.id();
const user = Meteor.user();
@ -122,7 +122,7 @@ export function sendMessage(rid, msg, cb) {
ts: new Date(),
_updatedAt: new Date(),
temp: true,
_server: {id: RocketChat.currentServer},
_server: { id: RocketChat.currentServer },
u: {
_id: user._id,
username: user.username
@ -130,5 +130,12 @@ export function sendMessage(rid, msg, cb) {
}, true);
});
Meteor.call('sendMessage', { _id, rid, msg }, () => cb && cb());
return new Promise((resolve, reject) => {
Meteor.call('sendMessage', { _id, rid, msg }, (error, result) => {
if (error) {
return reject(error);
}
return resolve(result);
});
});
}

8
app/views/login.js
View File

@ -1,9 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
import { TextInput, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native';
import { TextInput, StyleSheet } from 'react-native';
import realm from '../lib/realm';
import { loginWithPassword, loadSubscriptions, Accounts } from '../lib/meteor';
import KeyboardView from '../components/KeyboardView';
const styles = StyleSheet.create({
view: {
flex: 1,
@ -55,7 +57,7 @@ export default class LoginView extends React.Component {
render() {
return (
<KeyboardAvoidingView style={styles.view} behavior={Platform.OS === 'ios' && 'padding'}>
<KeyboardView style={styles.view}>
<TextInput
style={styles.input}
onChangeText={username => this.setState({ username })}
@ -77,7 +79,7 @@ export default class LoginView extends React.Component {
onSubmitEditing={this.submit}
placeholder='Password'
/>
</KeyboardAvoidingView>
</KeyboardView>
);
}
}

46
app/views/room.js
View File

@ -1,11 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View, KeyboardAvoidingView, TextInput, FlatList, StyleSheet, Platform } from 'react-native';
import { View, FlatList, StyleSheet } from 'react-native';
// import Markdown from 'react-native-simple-markdown';
import realm from '../lib/realm';
import RocketChat, { loadMessagesForRoom, sendMessage } from '../lib/meteor';
import Message from '../components/Message';
import MessageBox from '../components/MessageBox';
import KeyboardView from '../components/KeyboardView';
const styles = StyleSheet.create({
container: {
@ -20,15 +22,6 @@ const styles = StyleSheet.create({
// width: "86%",
backgroundColor: '#CED0CE'
// marginLeft: "14%"
},
textBox: {
paddingTop: 1,
backgroundColor: '#ccc'
},
textBoxInput: {
height: 40,
backgroundColor: '#fff',
paddingLeft: 15
}
});
@ -47,7 +40,6 @@ export default class RoomView extends React.Component {
// this.rid = 'GENERAL';
this.state = {
text: '',
dataSource: this.getMessages()
};
@ -71,19 +63,7 @@ export default class RoomView extends React.Component {
});
};
submit = () => {
console.log(this.state.text);
if (this.state.text.trim() === '') {
return;
}
sendMessage(this.rid, this.state.text);
this.setState({
...this.state,
text: ''
});
};
sendMessage = message => sendMessage(this.rid, message);
renderSeparator = () => (
<View style={styles.separator} />
@ -99,7 +79,7 @@ export default class RoomView extends React.Component {
render() {
return (
<KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' && 'padding'} keyboardVerticalOffset={64}>
<KeyboardView style={styles.container} keyboardVerticalOffset={64}>
<FlatList
ref={ref => this.listView = ref}
style={styles.list}
@ -109,18 +89,10 @@ export default class RoomView extends React.Component {
keyExtractor={item => item._id}
ItemSeparatorComponent={this.renderSeparator}
/>
<View style={styles.textBox}>
<TextInput
style={styles.textBoxInput}
value={this.state.text}
onChangeText={text => this.setState({ text })}
returnKeyType='send'
onSubmitEditing={this.submit}
autoFocus
placeholder='New message'
/>
</View>
</KeyboardAvoidingView>
<MessageBox
onSubmit={this.sendMessage}
/>
</KeyboardView>
);
}
}

8
app/views/serverNew.js
View File

@ -1,10 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
import { TextInput, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native';
import { TextInput, StyleSheet } from 'react-native';
import realm from '../lib/realm';
import { connect } from '../lib/meteor';
import KeyboardView from '../components/KeyboardView';
const styles = StyleSheet.create({
view: {
flex: 1,
@ -72,7 +74,7 @@ export default class NewServerView extends React.Component {
render() {
return (
<KeyboardAvoidingView style={styles.view} behavior={Platform.OS === 'ios' && 'padding'}>
<KeyboardView style={styles.view}>
<TextInput
style={styles.input}
onChangeText={text => this.setState({ text })}
@ -84,7 +86,7 @@ export default class NewServerView extends React.Component {
onSubmitEditing={this.submit}
placeholder={this.state.defaultServer}
/>
</KeyboardAvoidingView>
</KeyboardView>
);
}
}

3988
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -7,6 +7,7 @@
"test": "jest",
"lint": "eslint .",
"ios": "react-native run-ios",
"log-android": "react-native log-android",
"android": "react-native run-android"
},
"dependencies": {
@ -14,7 +15,7 @@
"react": "16.0.0-alpha.12",
"react-native": "0.46.1",
"react-native-meteor": "^1.1.0",
"react-native-zeroconf": "^0.7.1",
"react-native-zeroconf": "^0.8.1",
"react-navigation": "^1.0.0-beta.11",
"realm": "^1.10.1",
"strip-ansi": "^4.0.0"