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

Merge branch 'master' into search-bar

This commit is contained in:
Diego Sampaio 2017-08-09 18:02:04 -03:00
parent abc77dc253 4c5adc5dc9
commit 86ccdf7e92
No known key found for this signature in database
GPG Key ID: E060152B30502562
20 changed files with 668 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -1 +1,2 @@
__tests__
node_modules

3
.eslintrc
View File

@ -111,7 +111,8 @@
"quotes": [2, "single"],
"semi": [2, "always"],
"prefer-const": 2,
"object-shorthand": 2
"object-shorthand": 2,
"consistent-return": 0
},
"globals": {}
}

1
android/app/build.gradle
View File

@ -133,6 +133,7 @@ android {
}
dependencies {
compile project(':react-native-fetch-blob')
compile project(':react-native-zeroconf')
compile project(':realm')
compile fileTree(dir: "libs", include: ["*.jar"])

2
android/app/src/main/java/com/rocketchatrn/MainApplication.java
View File

@ -3,6 +3,7 @@ package com.rocketchatrn;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.RNFetchBlob.RNFetchBlobPackage;
import com.balthazargronon.RCTZeroconf.ZeroconfReactPackage;
import io.realm.react.RealmReactPackage;
import com.facebook.react.ReactNativeHost;
@ -25,6 +26,7 @@ public class MainApplication extends Application implements ReactApplication {
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNFetchBlobPackage(),
new ZeroconfReactPackage(),
new RealmReactPackage()
);

2
android/settings.gradle
View File

@ -1,4 +1,6 @@
rootProject.name = 'RocketChatRN'
include ':react-native-fetch-blob'
project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fetch-blob/android')
include ':react-native-zeroconf'
project(':react-native-zeroconf').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-zeroconf/android')
include ':realm'

5
app/components/KeyboardView.js
View File

@ -6,7 +6,10 @@ export default class KeyboardView extends React.PureComponent {
static propTypes = {
style: KeyboardAvoidingView.propTypes.style,
keyboardVerticalOffset: PropTypes.number,
children: PropTypes.array.isRequired
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
])
}
render() {

14
app/components/Message.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View, Text, StyleSheet, Image } from 'react-native';
import { View, Text, StyleSheet } from 'react-native';
import { CachedImage } from 'react-native-img-cache';
const styles = StyleSheet.create({
message: {
@ -9,13 +10,18 @@ const styles = StyleSheet.create({
flexDirection: 'row',
transform: [{ scaleY: -1 }]
},
avatar: {
avatarContainer: {
backgroundColor: '#ccc',
width: 40,
height: 40,
marginRight: 10,
borderRadius: 5
},
avatar: {
width: 40,
height: 40,
borderRadius: 5
},
texts: {
flex: 1
},
@ -42,7 +48,9 @@ export default class Message extends React.PureComponent {
return (
<View style={[styles.message, extraStyle]}>
<Image style={styles.avatar} source={{ uri: `${ this.props.baseUrl }/avatar/${ this.props.item.u.username }` }} />
<View style={styles.avatarContainer}>
<CachedImage style={styles.avatar} source={{ uri: `${ this.props.baseUrl }/avatar/${ this.props.item.u.username }` }} />
</View>
<View style={styles.texts}>
<Text onPress={this._onPress} style={styles.username}>
{this.props.item.u.username}

9
app/components/MessageBox.js
View File

@ -32,12 +32,8 @@ export default class MessageBox extends React.PureComponent {
return;
}
this.props.onSubmit(this.state.text)
.then(() => {
this.setState({
text: ''
});
});
this.props.onSubmit(this.state.text);
this.setState({ text: '' });
};
render() {
@ -50,7 +46,6 @@ export default class MessageBox extends React.PureComponent {
returnKeyType='send'
onSubmitEditing={this.submit}
blurOnSubmit={false}
autoFocus
placeholder='New message'
/>
</View>

48
app/components/RoomItem.js
View File

@ -1,30 +1,64 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Text, StyleSheet } from 'react-native';
import { View, Text, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center'
},
number: {
minWidth: 20,
fontSize: 14,
padding: 2,
borderRadius: 5,
backgroundColor: '#aaa',
color: '#fff',
textAlign: 'center',
overflow: 'hidden',
marginRight: 15
},
roomItem: {
lineHeight: 18,
borderTopWidth: 2,
borderColor: '#aaa',
padding: 14
padding: 14,
flexGrow: 1
}
});
export default class RoomItem extends React.PureComponent {
static propTypes = {
onPressItem: PropTypes.func.isRequired,
title: PropTypes.string.isRequired,
item: PropTypes.object.isRequired,
id: PropTypes.string.isRequired
}
_onPress = () => {
this.props.onPressItem(this.props.id);
this.props.onPressItem(this.props.id, this.props.item);
};
renderNumber = (item) => {
if (item.unread) {
return (
<Text style={styles.number}>
{ item.unread }
</Text>
);
}
}
render() {
let name = this.props.item.name;
if (this.props.item.t === 'd') {
name = `@ ${ name }`;
} else {
name = `# ${ name }`;
}
return (
<Text onPress={this._onPress} style={styles.roomItem}>{ this.props.title }</Text>
<View style={styles.container}>
<Text onPress={this._onPress} style={styles.roomItem}>{ name }</Text>
{this.renderNumber(this.props.item)}
</View>
);
}
}

141
app/lib/meteor.js
View File

@ -1,141 +0,0 @@
import Meteor from 'react-native-meteor';
import Random from 'react-native-meteor/lib/Random';
import realm from './realm';
export { Accounts } from 'react-native-meteor';
const RocketChat = {
get currentServer() {
const current = realm.objects('servers').filtered('current = true')[0];
return current && current.id;
},
set currentServer(server) {
realm.write(() => {
realm.objects('servers').filtered('current = true').forEach(item => (item.current = false));
realm.create('servers', { id: server, current: true }, true);
});
}
};
export default RocketChat;
export function connect(cb) {
const url = `${ RocketChat.currentServer }/websocket`;
Meteor.connect(url);
Meteor.ddp.on('connected', () => {
console.log('connected');
Meteor.call('public-settings/get', (err, data) => {
if (err) {
console.error(err);
}
realm.write(() => {
data.forEach((item) => {
const setting = {
_id: item._id
};
setting._server = { id: RocketChat.currentServer };
if (typeof item.value === 'string') {
setting.value = item.value;
}
realm.create('settings', setting, true);
});
});
cb();
});
Meteor.ddp.on('changed', (ddbMessage) => {
console.log('changed', ddbMessage);
if (ddbMessage.collection === 'stream-room-messages') {
setTimeout(() => {
realm.write(() => {
const message = ddbMessage.fields.args[0];
message.temp = false;
message._server = { id: RocketChat.currentServer };
realm.create('messages', message, true);
});
}, 1000);
}
});
});
}
export function loginWithPassword(selector, password, cb) {
Meteor.loginWithPassword(selector, password, () => cb && cb());
}
export function loadSubscriptions(cb) {
Meteor.call('subscriptions/get', (err, data) => {
if (err) {
console.error(err);
}
realm.write(() => {
data.forEach((subscription) => {
// const subscription = {
// _id: item._id
// };
// if (typeof item.value === 'string') {
// subscription.value = item.value;
// }
subscription._server = { id: RocketChat.currentServer };
realm.create('subscriptions', subscription, true);
});
});
return cb && cb();
});
}
export function loadMessagesForRoom(rid) {
Meteor.call('loadHistory', rid, null, 50, (err, data) => {
if (err) {
console.error(err);
}
realm.write(() => {
data.messages.forEach((message) => {
message.temp = false;
message._server = { id: RocketChat.currentServer };
realm.create('messages', message, true);
});
});
});
Meteor.subscribe('stream-room-messages', rid, false);
}
export function sendMessage(rid, msg) {
const _id = Random.id();
const user = Meteor.user();
realm.write(() => {
realm.create('messages', {
_id,
rid,
msg,
ts: new Date(),
_updatedAt: new Date(),
temp: true,
_server: { id: RocketChat.currentServer },
u: {
_id: user._id,
username: user.username
}
}, true);
});
return new Promise((resolve, reject) => {
Meteor.call('sendMessage', { _id, rid, msg }, (error, result) => {
if (error) {
return reject(error);
}
return resolve(result);
});
});
}

10
app/lib/realm.js
View File

@ -65,7 +65,7 @@ const messagesSchema = {
u: 'users',
// mentions: [],
// channels: [],
_updatedAt: 'date',
_updatedAt: { type: 'date', optional: true },
temp: { type: 'bool', optional: true }
}
};
@ -81,9 +81,9 @@ export default realm;
// Clear settings
realm.write(() => {
const allSettins = realm.objects('settings');
realm.delete(allSettins);
// const allSettins = realm.objects('settings');
// realm.delete(allSettins);
// realm.create('servers', {id: 'https://demo.rocket.chat', current: false}, true);
// realm.create('servers', {id: 'http://localhost:3000', current: false}, true);
// realm.create('servers', { id: 'https://demo.rocket.chat', current: false }, true);
// realm.create('servers', { id: 'http://localhost:3000', current: false }, true);
});

208
app/lib/rocketchat.js Normal file
View File

@ -0,0 +1,208 @@
import Meteor from 'react-native-meteor';
import Random from 'react-native-meteor/lib/Random';
import realm from './realm';
export { Accounts } from 'react-native-meteor';
const RocketChat = {
get currentServer() {
const current = realm.objects('servers').filtered('current = true')[0];
return current && current.id;
},
set currentServer(server) {
realm.write(() => {
realm.objects('servers').filtered('current = true').forEach(item => (item.current = false));
realm.create('servers', { id: server, current: true }, true);
});
},
connect(cb) {
const url = `${ RocketChat.currentServer }/websocket`;
Meteor.connect(url);
Meteor.ddp.on('connected', () => {
console.log('connected');
Meteor.call('public-settings/get', (err, data) => {
if (err) {
console.error(err);
}
realm.write(() => {
data.forEach((item) => {
const setting = {
_id: item._id
};
setting._server = { id: RocketChat.currentServer };
if (typeof item.value === 'string') {
setting.value = item.value;
}
realm.create('settings', setting, true);
});
});
if (cb) {
cb();
}
});
Meteor.ddp.on('changed', (ddbMessage) => {
console.log('changed', ddbMessage);
if (ddbMessage.collection === 'stream-room-messages') {
realm.write(() => {
const message = ddbMessage.fields.args[0];
message.temp = false;
message._server = { id: RocketChat.currentServer };
realm.create('messages', message, true);
});
}
if (ddbMessage.collection === 'stream-notify-user') {
realm.write(() => {
const data = ddbMessage.fields.args[1];
data._server = { id: RocketChat.currentServer };
realm.create('subscriptions', data, true);
});
}
});
});
},
loginWithPassword(selector, password, cb) {
Meteor.loginWithPassword(selector, password, () => cb && cb());
},
loadSubscriptions(cb) {
Meteor.call('subscriptions/get', (err, data) => {
if (err) {
console.error(err);
}
realm.write(() => {
data.forEach((subscription) => {
// const subscription = {
// _id: item._id
// };
// if (typeof item.value === 'string') {
// subscription.value = item.value;
// }
subscription._server = { id: RocketChat.currentServer };
realm.create('subscriptions', subscription, true);
});
});
return cb && cb();
});
},
loadMessagesForRoom(rid, cb) {
Meteor.call('loadHistory', rid, null, 50, (err, data) => {
if (err) {
console.error(err);
}
realm.write(() => {
data.messages.forEach((message) => {
message.temp = false;
message._server = { id: RocketChat.currentServer };
realm.create('messages', message, true);
});
});
if (cb) {
cb();
}
});
Meteor.subscribe('stream-room-messages', rid, false);
},
sendMessage(rid, msg) {
const _id = Random.id();
const user = Meteor.user();
realm.write(() => {
realm.create('messages', {
_id,
rid,
msg,
ts: new Date(),
_updatedAt: new Date(),
temp: true,
_server: { id: RocketChat.currentServer },
u: {
_id: user._id,
username: user.username
}
}, true);
});
return new Promise((resolve, reject) => {
Meteor.call('sendMessage', { _id, rid, msg }, (error, result) => {
if (error) {
return reject(error);
}
return resolve(result);
});
});
},
spotlight(search, usernames) {
return new Promise((resolve, reject) => {
Meteor.call('spotlight', search, usernames, (error, result) => {
if (error) {
return reject(error);
}
return resolve(result);
});
});
},
createDirectMessage(username) {
return new Promise((resolve, reject) => {
Meteor.call('createDirectMessage', username, (error, result) => {
if (error) {
return reject(error);
}
return resolve(result);
});
});
},
joinRoom(rid) {
return new Promise((resolve, reject) => {
Meteor.call('joinRoom', rid, (error, result) => {
if (error) {
return reject(error);
}
return resolve(result);
});
});
}
};
export default RocketChat;
Meteor.Accounts.onLogin(() => {
Meteor.call('subscriptions/get', (err, data) => {
if (err) {
console.error(err);
}
realm.write(() => {
data.forEach((subscription) => {
// const subscription = {
// _id: item._id
// };
// if (typeof item.value === 'string') {
// subscription.value = item.value;
// }
subscription._server = { id: RocketChat.currentServer };
realm.create('subscriptions', subscription, true);
});
});
Meteor.subscribe('stream-notify-user', `${ Meteor.userId() }/subscriptions-changed`, false);
});
});

63
app/navigation.js
View File

@ -1,3 +1,5 @@
import React from 'react';
import { Button, Platform } from 'react-native';
import { StackNavigator } from 'react-navigation';
import LoginView from './views/login';
import NewServerView from './views/serverNew';
@ -5,26 +7,16 @@ import ListServerView from './views/serverList';
import RoomsListView from './views/roomsList';
import RoomView from './views/room';
const navigationOptions = {
// headerStyle: {
// backgroundColor: '#c1272d'
// },
// headerTitleStyle: {
// color: '#fff'
// }
};
export default new StackNavigator({
ListServer: {
screen: ListServerView,
navigationOptions
const position = Platform.OS === 'ios' ? 'headerLeft' : 'headerRight';
const MainCardNavigator = StackNavigator({
Rooms: {
screen: RoomsListView,
navigationOptions: ({ navigation }) => ({
[position]: <Button title='Servers' onPress={() => navigation.navigate('ListServerModal')} />
})
},
NewServer: {
screen: NewServerView,
navigationOptions
},
Login: { screen: LoginView },
Rooms: { screen: RoomsListView },
Room: {
screen: RoomView
// navigationOptions: {
@ -32,8 +24,41 @@ export default new StackNavigator({
// }
}
}, {
// initialRouteName: 'Room',
initialRouteName: 'Rooms',
cardStyle: {
backgroundColor: '#fff'
}
});
export default new StackNavigator({
Main: {
screen: MainCardNavigator,
navigationOptions: {
header: null
}
},
Login: {
screen: LoginView,
navigationOptions: ({ navigation }) => ({
headerLeft: Platform.OS === 'ios' && (<Button title='Cancel' onPress={() => navigation.dispatch({ type: 'Navigation/BACK' })} />)
})
},
ListServerModal: {
screen: ListServerView,
navigationOptions: ({ navigation }) => ({
headerLeft: Platform.OS === 'ios' && (<Button title='Close' onPress={() => navigation.dispatch({ type: 'Navigation/BACK' })} />)
})
},
NewServerModal: {
screen: NewServerView,
navigationOptions: ({ navigation }) => ({
headerLeft: Platform.OS === 'ios' && (<Button title='Close' onPress={() => navigation.dispatch({ type: 'Navigation/BACK' })} />)
})
}
}, {
initialRouteName: 'Main',
cardStyle: {
backgroundColor: '#fff'
},
mode: 'modal'
});

17
app/views/login.js
View File

@ -1,8 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { TextInput, StyleSheet } from 'react-native';
import realm from '../lib/realm';
import { loginWithPassword, loadSubscriptions, Accounts } from '../lib/meteor';
import RocketChat from '../lib/rocketchat';
import KeyboardView from '../components/KeyboardView';
@ -25,19 +24,13 @@ const styles = StyleSheet.create({
}
});
Accounts.onLogin(() => {
loadSubscriptions(() => {
navigate('Rooms');
});
});
export default class LoginView extends React.Component {
static propTypes = {
navigation: PropTypes.object.isRequired
}
static navigationOptions = () => ({
title: realm.objectForPrimaryKey('settings', 'Site_Name').value
title: 'Login'
});
constructor(props) {
@ -48,10 +41,10 @@ export default class LoginView extends React.Component {
password: ''
};
navigate = this.props.navigation.navigate;
this.submit = () => {
loginWithPassword({ username: this.state.username }, this.state.password);
RocketChat.loginWithPassword({ username: this.state.username }, this.state.password, () => {
this.props.navigation.dispatch({ type: 'Navigation/BACK' });
});
};
}

78
app/views/room.js
View File

@ -1,9 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View, FlatList, StyleSheet } from 'react-native';
import { Text, View, FlatList, StyleSheet, Button } from 'react-native';
// import Markdown from 'react-native-simple-markdown';
import realm from '../lib/realm';
import RocketChat, { loadMessagesForRoom, sendMessage } from '../lib/meteor';
import RocketChat from '../lib/rocketchat';
import Message from '../components/Message';
import MessageBox from '../components/MessageBox';
@ -19,9 +19,15 @@ const styles = StyleSheet.create({
},
separator: {
height: 1,
// width: "86%",
backgroundColor: '#CED0CE'
// marginLeft: "14%"
},
bannerContainer: {
backgroundColor: 'orange'
},
bannerText: {
margin: 5,
textAlign: 'center',
color: '#a00'
}
});
@ -31,23 +37,30 @@ export default class RoomView extends React.Component {
}
static navigationOptions = ({ navigation }) => ({
title: realm.objectForPrimaryKey('subscriptions', navigation.state.params.sid).name
title: navigation.state.params.name || realm.objectForPrimaryKey('subscriptions', navigation.state.params.sid).name
});
constructor(props) {
super(props);
this.rid = realm.objectForPrimaryKey('subscriptions', props.navigation.state.params.sid).rid;
this.rid = props.navigation.state.params.rid || realm.objectForPrimaryKey('subscriptions', props.navigation.state.params.sid).rid;
// this.rid = 'GENERAL';
this.state = {
dataSource: this.getMessages()
dataSource: this.getMessages(),
loaded: false,
joined: typeof props.navigation.state.params.rid === 'undefined'
};
this.url = realm.objectForPrimaryKey('settings', 'Site_Url').value;
}
componentWillMount() {
loadMessagesForRoom(this.rid);
RocketChat.loadMessagesForRoom(this.rid, () => {
this.setState({
...this.state,
loaded: true
});
});
realm.addListener('change', this.updateState);
}
@ -59,15 +72,31 @@ export default class RoomView extends React.Component {
updateState = () => {
this.setState({
...this.state,
dataSource: this.getMessages()
});
};
sendMessage = message => sendMessage(this.rid, message);
sendMessage = message => RocketChat.sendMessage(this.rid, message);
renderSeparator = () => (
<View style={styles.separator} />
);
joinRoom = () => {
RocketChat.joinRoom(this.props.navigation.state.params.rid)
.then(() => {
this.setState({
joined: true
});
});
};
renderBanner = () => {
if (this.state.loaded === false) {
return (
<View style={styles.bannerContainer}>
<Text style={styles.bannerText}>Loading new messages...</Text>
</View>
);
}
};
renderItem = ({ item }) => (
<Message
@ -77,9 +106,30 @@ export default class RoomView extends React.Component {
/>
);
renderSeparator = () => (
<View style={styles.separator} />
);
renderFooter = () => {
if (!this.state.joined) {
return (
<View>
<Text>You are in preview mode.</Text>
<Button title='Join' onPress={this.joinRoom} />
</View>
);
}
return (
<MessageBox
onSubmit={this.sendMessage}
/>
);
}
render() {
return (
<KeyboardView style={styles.container} keyboardVerticalOffset={64}>
{this.renderBanner()}
<FlatList
ref={ref => this.listView = ref}
style={styles.list}
@ -89,9 +139,7 @@ export default class RoomView extends React.Component {
keyExtractor={item => item._id}
ItemSeparatorComponent={this.renderSeparator}
/>
<MessageBox
onSubmit={this.sendMessage}
/>
{this.renderFooter()}
</KeyboardView>
);
}

232
app/views/roomsList.js
View File

@ -1,46 +1,213 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View, FlatList, StyleSheet, TextInput } from 'react-native';
import { Text, View, FlatList, StyleSheet, TextInput } from 'react-native';
import Meteor from 'react-native-meteor';
import realm from '../lib/realm';
import RocketChat from '../lib/meteor';
import RocketChat from '../lib/rocketchat';
import RoomItem from '../components/RoomItem';
const styles = StyleSheet.create({
container: {
flex: 1
flex: 1,
alignItems: 'stretch',
justifyContent: 'center'
},
separator: {
height: 1,
// width: "86%",
backgroundColor: '#CED0CE'
// marginLeft: "14%"
},
list: {
width: '100%'
},
emptyView: {
flexGrow: 1,
alignItems: 'stretch',
justifyContent: 'center'
},
emptyText: {
textAlign: 'center',
fontSize: 18,
color: '#ccc'
},
bannerContainer: {
backgroundColor: '#ddd'
},
bannerText: {
textAlign: 'center',
margin: 5
}
});
let navigation;
Meteor.getData().on('loggingIn', () => {
setTimeout(() => {
if (Meteor._isLoggingIn === false && Meteor.userId() == null) {
console.log('loggingIn', Meteor.userId());
navigation.navigate('Login');
}
}, 100);
});
Meteor.Accounts.onLogin(() => {
console.log('onLogin');
});
export default class RoomsListView extends React.Component {
static propTypes = {
navigation: PropTypes.object.isRequired
}
static navigationOptions = () => ({
title: 'Rooms'
});
constructor(props) {
super(props);
this.state = {
dataSource: realm.objects('subscriptions').filtered('_server.id = $0', RocketChat.currentServer).sorted('name')
dataSource: this.getSubscriptions(),
searching: false,
searchDataSource: [],
searchText: ''
};
}
_onPressItem = (id) => {
componentWillMount() {
realm.addListener('change', this.updateState);
navigation = this.props.navigation;
if (RocketChat.currentServer) {
RocketChat.connect();
} else {
navigation.navigate('ListServerModal');
}
}
componentWillUnmount() {
realm.removeListener('change', this.updateState);
}
onSearchChangeText = (text) => {
const searchText = text.trim();
this.setState({
searchText: text,
searching: searchText !== ''
});
if (searchText !== '') {
const dataSource = [];
const usernames = [];
realm.objects('subscriptions').filtered('_server.id = $0 AND name CONTAINS[c] $1', RocketChat.currentServer, searchText).forEach((sub) => {
dataSource.push(sub);
if (sub.t === 'd') {
usernames.push(sub.name);
}
});
if (dataSource.length < 5) {
RocketChat.spotlight(searchText, usernames)
.then((results) => {
results.users.forEach((user) => {
dataSource.push({
...user,
name: user.username,
t: 'd',
search: true
});
});
results.rooms.forEach((room) => {
dataSource.push({
...room,
search: true
});
});
this.setState({
searchDataSource: dataSource
});
});
}
}
}
getSubscriptions = () => realm.objects('subscriptions').filtered('_server.id = $0', RocketChat.currentServer).sorted('name').slice()
.sort((a, b) => {
if (a.unread < b.unread) {
return 1;
}
if (a.unread > b.unread) {
return -1;
}
return 0;
});
updateState = () => {
this.setState({
dataSource: this.getSubscriptions()
});
}
_onPressItem = (id, item) => {
const { navigate } = this.props.navigation;
const clearSearch = () => {
this.setState({
searchText: '',
searching: false,
searchDataSource: []
});
};
// if user is using the search we need first to join/create room
if (item.search) {
if (item.t === 'd') {
RocketChat.createDirectMessage(item.username)
.then(room => realm.objects('subscriptions').filtered('_server.id = $0 AND rid = $1', RocketChat.currentServer, room.rid))
.then(subs => navigate('Room', { sid: subs[0]._id }))
.then(() => clearSearch());
} else {
navigate('Room', { rid: item._id, name: item.name });
clearSearch();
}
return;
}
navigate('Room', { sid: id });
clearSearch();
}
renderBanner = () => {
const status = Meteor.getData() && Meteor.getData().ddp && Meteor.getData().ddp.status;
if (status === 'disconnected') {
return (
<View style={[styles.bannerContainer, { backgroundColor: '#0d0' }]}>
<Text style={[styles.bannerText, { color: '#fff' }]}>Connecting...</Text>
</View>
);
}
if (status === 'connected' && Meteor._isLoggingIn) {
return (
<View style={[styles.bannerContainer, { backgroundColor: 'orange' }]}>
<Text style={[styles.bannerText, { color: '#a00' }]}>Authenticating...</Text>
</View>
);
}
}
renderItem = ({ item }) => (
<RoomItem
id={item._id}
onPressItem={this._onPressItem}
title={item.name}
item={item}
/>
);
@ -48,25 +215,42 @@ export default class RoomsListView extends React.Component {
<View style={styles.separator} />
);
renderSearchBar = () => (
<TextInput
style={styles.searchBox}
value={this.state.searchText}
onChangeText={this.onSearchChangeText}
returnKeyType='search'
placeholder='Search'
/>
);
renderList = () => {
if (!this.state.searching && !this.state.dataSource.length) {
return (
<View style={styles.emptyView}>
<Text style={styles.emptyText}>No rooms</Text>
</View>
);
}
return (
<FlatList
style={styles.list}
data={this.state.searching ? this.state.searchDataSource : this.state.dataSource}
renderItem={this.renderItem}
keyExtractor={item => item._id}
ItemSeparatorComponent={this.renderSeparator}
/>
);
}
render() {
return (
<View style={styles.container}>
<View>
<TextInput
style={styles.searchBox}
value={this.state.text}
onChangeText={text => this.setState({ text })}
returnKeyType='search'
placeholder='Search'
/>
</View>
<FlatList
style={styles.list}
data={this.state.dataSource}
renderItem={this.renderItem}
keyExtractor={item => item._id}
ItemSeparatorComponent={this.renderSeparator}
/>
{this.renderBanner()}
{this.renderSearchBar()}
{this.renderList()}
</View>
);
}

103
app/views/serverList.js
View File

@ -4,7 +4,7 @@ import Zeroconf from 'react-native-zeroconf';
import { View, Text, SectionList, Button, StyleSheet } from 'react-native';
import realm from '../lib/realm';
import RocketChat, { connect } from '../lib/meteor';
import RocketChat from '../lib/rocketchat';
const styles = StyleSheet.create({
view: {
@ -58,7 +58,7 @@ export default class ListServerView extends React.Component {
headerRight: (
<Button
title='Add'
onPress={() => navigation.navigate('NewServer')}
onPress={() => navigation.navigate('NewServerModal')}
/>
)
});
@ -70,69 +70,60 @@ export default class ListServerView extends React.Component {
};
}
componentDidMount() {
const getState = () => {
const sections = [{
title: 'My servers',
data: realm.objects('servers')
}];
componentWillMount() {
realm.addListener('change', this.updateState);
zeroconf.on('update', this.updateState);
if (this.state.nearBy) {
const nearBy = Object.keys(this.state.nearBy)
.filter(key => this.state.nearBy[key].addresses);
if (nearBy.length) {
sections.push({
title: 'Nearby',
data: nearBy.map((key) => {
const server = this.state.nearBy[key];
const address = `http://${ server.addresses[0] }:${ server.port }`;
return {
id: address
};
})
});
}
}
return {
...this.state,
sections
};
};
const { navigation } = this.props;
if (navigation && navigation.state.params && navigation.state.params.newServer) {
return navigation.navigate('Login');
}
const currentServer = realm.objects('servers').filtered('current = true')[0];
if (currentServer) {
connect(() => {
navigation.navigate('Login');
});
}
zeroconf.on('update', () => {
this.state.nearBy = zeroconf.getServices();
this.setState(getState());
});
zeroconf.scan('http', 'tcp', 'local.');
realm.addListener('change', () => this.setState(getState()));
this.state = this.getState();
}
this.state = getState();
return null;
componentWillUnmount() {
zeroconf.stop();
realm.removeListener('change', this.updateState);
zeroconf.removeListener('update', this.updateState);
}
onPressItem(item) {
const { navigate } = this.props.navigation;
RocketChat.currentServer = item.id;
connect(() => {
navigate('Login');
});
RocketChat.connect();
this.props.navigation.dispatch({ type: 'Navigation/BACK' });
}
getState = () => {
const sections = [{
title: 'My servers',
data: realm.objects('servers')
}];
this.state.nearBy = zeroconf.getServices();
if (this.state.nearBy) {
const nearBy = Object.keys(this.state.nearBy)
.filter(key => this.state.nearBy[key].addresses);
if (nearBy.length) {
sections.push({
title: 'Nearby',
data: nearBy.map((key) => {
const server = this.state.nearBy[key];
const address = `http://${ server.addresses[0] }:${ server.port }`;
return {
id: address
};
})
});
}
}
return {
...this.state,
sections
};
};
updateState = () => {
this.setState(this.getState());
}
renderItem = ({ item }) => (

15
app/views/serverNew.js
View File

@ -2,8 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { TextInput, StyleSheet } from 'react-native';
import realm from '../lib/realm';
import { connect } from '../lib/meteor';
import RocketChat from '../lib/rocketchat';
import KeyboardView from '../components/KeyboardView';
@ -44,8 +43,6 @@ export default class NewServerView extends React.Component {
text: ''
};
const { navigate } = this.props.navigation;
this.submit = () => {
let url = this.state.text.trim();
if (!url) {
@ -61,14 +58,8 @@ export default class NewServerView extends React.Component {
url = `https://${ url }`;
}
realm.write(() => {
realm.objects('servers').filtered('current = true').forEach(item => (item.current = false));
realm.create('servers', { id: url, current: true }, true);
});
connect(() => {
navigate('ListServer', { newServer: url });
});
RocketChat.currentServer = url;
this.props.navigation.dispatch({ type: 'Navigation/BACK' });
};
}

18
ios/RocketChatRN.xcodeproj/project.pbxproj
View File

@ -5,7 +5,6 @@
};
objectVersion = 46;
objects = {
/* Begin PBXBuildFile section */
00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
@ -40,6 +39,7 @@
5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
EF736EF520A64AE8820E684A /* libRealmReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = DF26CC845883492D8AC8869B /* libRealmReact.a */; };
BED2B77AA660460E8BC9F8E0 /* libRNFetchBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 6533FB90166345D29F1B91C0 /* libRNFetchBlob.a */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
@ -307,6 +307,8 @@
B37C79D9BD0742CE936B6982 /* libc++.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = "libc++.tbd"; path = "usr/lib/libc++.tbd"; sourceTree = SDKROOT; };
BAAE4B947F5D44959F0A9D5A /* libRNZeroconf.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNZeroconf.a; sourceTree = "<group>"; };
DF26CC845883492D8AC8869B /* libRealmReact.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRealmReact.a; sourceTree = "<group>"; };
4CD38E4891ED4601B7481448 /* RNFetchBlob.xcodeproj */ = {isa = PBXFileReference; name = "RNFetchBlob.xcodeproj"; path = "../node_modules/react-native-fetch-blob/ios/RNFetchBlob.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
6533FB90166345D29F1B91C0 /* libRNFetchBlob.a */ = {isa = PBXFileReference; name = "libRNFetchBlob.a"; path = "libRNFetchBlob.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
@ -337,6 +339,7 @@
0C6E2DE448364EA896869ADF /* libc++.tbd in Frameworks */,
24A2AEF2383D44B586D31C01 /* libz.tbd in Frameworks */,
33647F7997A2493E9E1343B3 /* libRNZeroconf.a in Frameworks */,
BED2B77AA660460E8BC9F8E0 /* libRNFetchBlob.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
@ -525,6 +528,7 @@
139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
5A8684E7C27E426C9206E980 /* RealmReact.xcodeproj */,
41FE03CD3B554249859F01BA /* RNZeroconf.xcodeproj */,
4CD38E4891ED4601B7481448 /* RNFetchBlob.xcodeproj */,
);
name = Libraries;
sourceTree = "<group>";
@ -1113,6 +1117,7 @@
"$(inherited)",
"$(SRCROOT)/../node_modules/realm/src/**",
"$(SRCROOT)/../node_modules/react-native-zeroconf/ios/RNZeroconf",
"$(SRCROOT)/../node_modules/react-native-fetch-blob/ios/**",
);
INFOPLIST_FILE = RocketChatRNTests/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 8.0;
@ -1121,6 +1126,7 @@
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
@ -1141,6 +1147,7 @@
"$(inherited)",
"$(SRCROOT)/../node_modules/realm/src/**",
"$(SRCROOT)/../node_modules/react-native-zeroconf/ios/RNZeroconf",
"$(SRCROOT)/../node_modules/react-native-fetch-blob/ios/**",
);
INFOPLIST_FILE = RocketChatRNTests/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 8.0;
@ -1149,6 +1156,7 @@
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
@ -1171,6 +1179,7 @@
"$(inherited)",
"$(SRCROOT)/../node_modules/realm/src/**",
"$(SRCROOT)/../node_modules/react-native-zeroconf/ios/RNZeroconf",
"$(SRCROOT)/../node_modules/react-native-fetch-blob/ios/**",
);
INFOPLIST_FILE = RocketChatRN/Info.plist;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@ -1198,6 +1207,7 @@
"$(inherited)",
"$(SRCROOT)/../node_modules/realm/src/**",
"$(SRCROOT)/../node_modules/react-native-zeroconf/ios/RNZeroconf",
"$(SRCROOT)/../node_modules/react-native-fetch-blob/ios/**",
);
INFOPLIST_FILE = RocketChatRN/Info.plist;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@ -1230,6 +1240,7 @@
"$(inherited)",
"$(SRCROOT)/../node_modules/realm/src/**",
"$(SRCROOT)/../node_modules/react-native-zeroconf/ios/RNZeroconf",
"$(SRCROOT)/../node_modules/react-native-fetch-blob/ios/**",
);
INFOPLIST_FILE = "RocketChatRN-tvOS/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@ -1237,6 +1248,7 @@
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
@ -1267,6 +1279,7 @@
"$(inherited)",
"$(SRCROOT)/../node_modules/realm/src/**",
"$(SRCROOT)/../node_modules/react-native-zeroconf/ios/RNZeroconf",
"$(SRCROOT)/../node_modules/react-native-fetch-blob/ios/**",
);
INFOPLIST_FILE = "RocketChatRN-tvOS/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@ -1274,6 +1287,7 @@
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
@ -1305,6 +1319,7 @@
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.RocketChatRN-tvOSTests";
PRODUCT_NAME = "$(TARGET_NAME)";
@ -1332,6 +1347,7 @@
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.RocketChatRN-tvOSTests";
PRODUCT_NAME = "$(TARGET_NAME)";

2
package.json
View File

@ -14,6 +14,8 @@
"prop-types": "^15.5.10",
"react": "16.0.0-alpha.12",
"react-native": "0.46.1",
"react-native-fetch-blob": "^0.10.8",
"react-native-img-cache": "^1.4.0",
"react-native-meteor": "^1.1.0",
"react-native-zeroconf": "^0.8.1",
"react-navigation": "^1.0.0-beta.11",