Add server change saga (#34)

* Reduce test lines of code

* removed useless packages

* pkg

* add server saga

* removed taginput

taginput is not ready =/

* ~fix navigation~

* code duplicated

* code duplicated

* Delete tags.js

* Delete TagInput.js
This commit is contained in:
Guilherme Gazzo 2017-09-01 16:42:50 -03:00 committed by Gabriel Delavald
parent 08bd566d9e
commit 2c73857186
36 changed files with 1944 additions and 819 deletions

View File

@ -231,15 +231,16 @@ exports[`render unread +999 1`] = `
Array [
Object {
"alignItems": "center",
"borderRadius": 20,
"height": 40,
"justifyContent": "center",
"overflow": "hidden",
"width": 40,
},
Object {
"backgroundColor": "#3F51B5",
"borderRadius": 20,
"height": 40,
"width": 40,
},
undefined,
]
}
>
@ -249,29 +250,18 @@ exports[`render unread +999 1`] = `
disabled={false}
ellipsizeMode="tail"
style={
Object {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
NA
</Text>
<View
source={
Object {
"uri": "undefined/avatar/name",
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
}
/>
</View>
<Text
accessible={true}
@ -350,15 +340,16 @@ exports[`render unread 1`] = `
Array [
Object {
"alignItems": "center",
"borderRadius": 20,
"height": 40,
"justifyContent": "center",
"overflow": "hidden",
"width": 40,
},
Object {
"backgroundColor": "#3F51B5",
"borderRadius": 20,
"height": 40,
"width": 40,
},
undefined,
]
}
>
@ -368,29 +359,18 @@ exports[`render unread 1`] = `
disabled={false}
ellipsizeMode="tail"
style={
Object {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
NA
</Text>
<View
source={
Object {
"uri": "undefined/avatar/name",
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
}
/>
</View>
<Text
accessible={true}
@ -469,15 +449,16 @@ exports[`renders correctly 1`] = `
Array [
Object {
"alignItems": "center",
"borderRadius": 20,
"height": 40,
"justifyContent": "center",
"overflow": "hidden",
"width": 40,
},
Object {
"backgroundColor": "#3F51B5",
"borderRadius": 20,
"height": 40,
"width": 40,
},
undefined,
]
}
>
@ -487,29 +468,18 @@ exports[`renders correctly 1`] = `
disabled={false}
ellipsizeMode="tail"
style={
Object {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
NA
</Text>
<View
source={
Object {
"uri": "undefined/avatar/name",
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
}
/>
</View>
<Text
accessible={true}

View File

@ -1,5 +1,160 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Avatar avatar 1`] = `
<RCTScrollView>
<View>
<View
style={
Array [
Object {
"alignItems": "center",
"justifyContent": "center",
"overflow": "hidden",
},
Object {
"backgroundColor": "#3F51B5",
"borderRadius": 5,
"height": 25,
"width": 25,
},
undefined,
]
}
>
<Text
accessible={true}
allowFontScaling={true}
disabled={false}
ellipsizeMode="tail"
style={
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 12.5,
},
]
}
>
TE
</Text>
</View>
<View
style={
Array [
Object {
"alignItems": "center",
"justifyContent": "center",
"overflow": "hidden",
},
Object {
"backgroundColor": "#9C27B0",
"borderRadius": 5,
"height": 40,
"width": 40,
},
undefined,
]
}
>
<Text
accessible={true}
allowFontScaling={true}
disabled={false}
ellipsizeMode="tail"
style={
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
AA
</Text>
</View>
<View
style={
Array [
Object {
"alignItems": "center",
"justifyContent": "center",
"overflow": "hidden",
},
Object {
"backgroundColor": "#9C27B0",
"borderRadius": 5,
"height": 30,
"width": 30,
},
undefined,
]
}
>
<Text
accessible={true}
allowFontScaling={true}
disabled={false}
ellipsizeMode="tail"
style={
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 15,
},
]
}
>
BB
</Text>
</View>
<View
style={
Array [
Object {
"alignItems": "center",
"justifyContent": "center",
"overflow": "hidden",
},
Object {
"backgroundColor": "#3F51B5",
"borderRadius": 2,
"height": 25,
"width": 25,
},
undefined,
]
}
>
<Text
accessible={true}
allowFontScaling={true}
disabled={false}
ellipsizeMode="tail"
style={
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 12.5,
},
]
}
>
TE
</Text>
</View>
</View>
</RCTScrollView>
`;
exports[`Storyshots Channel Cell Direct Messages 1`] = `
<RCTScrollView>
<View>
@ -37,15 +192,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Array [
Object {
"alignItems": "center",
"borderRadius": 20,
"height": 40,
"justifyContent": "center",
"overflow": "hidden",
"width": 40,
},
Object {
"backgroundColor": "#8BC34A",
"borderRadius": 20,
"height": 40,
"width": 40,
},
undefined,
]
}
>
@ -55,10 +211,14 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
disabled={false}
ellipsizeMode="tail"
style={
Object {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
RC
@ -70,12 +230,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
Array [
Object {
"position": "absolute",
},
Object {
"height": 40,
"width": 40,
},
]
}
/>
</View>
@ -132,15 +295,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Array [
Object {
"alignItems": "center",
"borderRadius": 20,
"height": 40,
"justifyContent": "center",
"overflow": "hidden",
"width": 40,
},
Object {
"backgroundColor": "#8BC34A",
"borderRadius": 20,
"height": 40,
"width": 40,
},
undefined,
]
}
>
@ -150,10 +314,14 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
disabled={false}
ellipsizeMode="tail"
style={
Object {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
RC
@ -165,12 +333,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
Array [
Object {
"position": "absolute",
},
Object {
"height": 40,
"width": 40,
},
]
}
/>
</View>
@ -227,15 +398,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Array [
Object {
"alignItems": "center",
"borderRadius": 20,
"height": 40,
"justifyContent": "center",
"overflow": "hidden",
"width": 40,
},
Object {
"backgroundColor": "#8BC34A",
"borderRadius": 20,
"height": 40,
"width": 40,
},
undefined,
]
}
>
@ -245,10 +417,14 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
disabled={false}
ellipsizeMode="tail"
style={
Object {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
RC
@ -260,12 +436,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
Array [
Object {
"position": "absolute",
},
Object {
"height": 40,
"width": 40,
},
]
}
/>
</View>
@ -343,15 +522,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Array [
Object {
"alignItems": "center",
"borderRadius": 20,
"height": 40,
"justifyContent": "center",
"overflow": "hidden",
"width": 40,
},
Object {
"backgroundColor": "#795548",
"borderRadius": 20,
"height": 40,
"width": 40,
},
undefined,
]
}
>
@ -361,10 +541,14 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
disabled={false}
ellipsizeMode="tail"
style={
Object {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
LC
@ -376,12 +560,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
Array [
Object {
"position": "absolute",
},
Object {
"height": 40,
"width": 40,
},
]
}
/>
</View>
@ -459,15 +646,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Array [
Object {
"alignItems": "center",
"borderRadius": 20,
"height": 40,
"justifyContent": "center",
"overflow": "hidden",
"width": 40,
},
Object {
"backgroundColor": "#795548",
"borderRadius": 20,
"height": 40,
"width": 40,
},
undefined,
]
}
>
@ -477,10 +665,14 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
disabled={false}
ellipsizeMode="tail"
style={
Object {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
LC
@ -492,12 +684,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
Array [
Object {
"position": "absolute",
},
Object {
"height": 40,
"width": 40,
},
]
}
/>
</View>
@ -575,15 +770,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Array [
Object {
"alignItems": "center",
"borderRadius": 20,
"height": 40,
"justifyContent": "center",
"overflow": "hidden",
"width": 40,
},
Object {
"backgroundColor": "#795548",
"borderRadius": 20,
"height": 40,
"width": 40,
},
undefined,
]
}
>
@ -593,10 +789,14 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
disabled={false}
ellipsizeMode="tail"
style={
Object {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
LC
@ -608,12 +808,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
Array [
Object {
"position": "absolute",
},
Object {
"height": 40,
"width": 40,
},
]
}
/>
</View>
@ -691,15 +894,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Array [
Object {
"alignItems": "center",
"borderRadius": 20,
"height": 40,
"justifyContent": "center",
"overflow": "hidden",
"width": 40,
},
Object {
"backgroundColor": "#795548",
"borderRadius": 20,
"height": 40,
"width": 40,
},
undefined,
]
}
>
@ -709,10 +913,14 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
disabled={false}
ellipsizeMode="tail"
style={
Object {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
LC
@ -724,12 +932,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
Array [
Object {
"position": "absolute",
},
Object {
"height": 40,
"width": 40,
},
]
}
/>
</View>
@ -807,15 +1018,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Array [
Object {
"alignItems": "center",
"borderRadius": 20,
"height": 40,
"justifyContent": "center",
"overflow": "hidden",
"width": 40,
},
Object {
"backgroundColor": "#E91E63",
"borderRadius": 20,
"height": 40,
"width": 40,
},
undefined,
]
}
>
@ -825,29 +1037,18 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
disabled={false}
ellipsizeMode="tail"
style={
Object {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
W
</Text>
<CachedImage
source={
Object {
"uri": "undefined/avatar/W",
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
}
/>
</View>
<Text
accessible={true}
@ -902,15 +1103,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Array [
Object {
"alignItems": "center",
"borderRadius": 20,
"height": 40,
"justifyContent": "center",
"overflow": "hidden",
"width": 40,
},
Object {
"backgroundColor": "#9C27B0",
"borderRadius": 20,
"height": 40,
"width": 40,
},
undefined,
]
}
>
@ -920,29 +1122,18 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
disabled={false}
ellipsizeMode="tail"
style={
Object {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
WW
</Text>
<CachedImage
source={
Object {
"uri": "undefined/avatar/WW",
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
}
/>
</View>
<Text
accessible={true}
@ -997,15 +1188,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Array [
Object {
"alignItems": "center",
"borderRadius": 20,
"height": 40,
"justifyContent": "center",
"overflow": "hidden",
"width": 40,
},
Object {
"backgroundColor": "#F44336",
"backgroundColor": undefined,
"borderRadius": 20,
"height": 40,
"width": 40,
},
undefined,
]
}
>
@ -1015,29 +1207,18 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
disabled={false}
ellipsizeMode="tail"
style={
Object {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
</Text>
<CachedImage
source={
Object {
"uri": "undefined/avatar/",
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
}
/>
</View>
<Text
accessible={true}

View File

@ -12,10 +12,11 @@ function createRequestTypes(base, types = defaultTypes) {
// Login events
export const LOGIN = createRequestTypes('LOGIN', [...defaultTypes, 'SET_TOKEN', 'SUBMIT']);
export const ROOMS = createRequestTypes('ROOMS');
export const APP = createRequestTypes('APP', ['READY']);
export const APP = createRequestTypes('APP', ['READY', 'INIT']);
export const MESSAGES = createRequestTypes('MESSAGES');
export const CREATE_CHANNEL = createRequestTypes('CREATE_CHANNEL', [...defaultTypes, 'REQUEST_USERS', 'SUCCESS_USERS', 'FAILURE_USERS', 'SET_USERS']);
export const NAVIGATION = createRequestTypes('NAVIGATION', ['SET']);
export const SERVER = createRequestTypes('SERVER', ['SELECT', 'CHANGED']);
export const SERVER = createRequestTypes('SERVER', [...defaultTypes, 'SELECT', 'CHANGED', 'ADD']);
export const METEOR = createRequestTypes('METEOR_CONNECT', [...defaultTypes, 'DISCONNECT']);
export const LOGOUT = 'LOGOUT'; // logout is always success

View File

@ -20,7 +20,6 @@ export function connectFailure(err) {
}
export function disconnect(err) {
console.log('types.METEOR.DISCONNECT');
return {
type: types.METEOR.DISCONNECT,
err

View File

@ -0,0 +1,51 @@
import * as types from './actionsTypes';
export function createChannelRequest(data) {
return {
type: types.CREATE_CHANNEL.REQUEST,
data
};
}
export function createChannelSuccess(data) {
return {
type: types.CREATE_CHANNEL.SUCCESS,
data
};
}
export function createChannelFailure(err) {
return {
type: types.CREATE_CHANNEL.FAILURE,
err
};
}
export function createChannelRequestUsers(data) {
return {
type: types.CREATE_CHANNEL.REQUEST_USERS,
data
};
}
export function createChannelSetUsers(data) {
return {
type: types.CREATE_CHANNEL.SET_USERS,
data
};
}
export function createChannelSuccessUsers(data) {
return {
type: types.CREATE_CHANNEL.SUCCESS_USERS,
data
};
}
export function createChannelFailureUsers(err) {
return {
type: types.CREATE_CHANNEL.FAILURE_USERS,
err
};
}

View File

@ -6,6 +6,12 @@ export function appReady() {
type: APP.READY
};
}
export function appInit() {
return {
type: APP.INIT
};
}
export function setCurrentServer(server) {
return {
type: types.SET_CURRENT_SERVER,

View File

@ -28,7 +28,7 @@ export function loginFailure(err) {
};
}
export function setToken(user) {
export function setToken(user = {}) {
return {
type: types.LOGIN.SET_TOKEN,
token: user.token,

View File

@ -1,7 +1,6 @@
import * as types from './actionsTypes';
export function messagesRequest({ rid }) {
console.log(types.MESSAGES.REQUEST, rid);
return {
type: types.MESSAGES.REQUEST,
rid

View File

@ -6,6 +6,35 @@ export function setServer(server) {
server
};
}
export function serverRequest(server) {
return {
type: SERVER.REQUEST,
server
};
}
export function addServer(server) {
return {
type: SERVER.ADD,
server
};
}
export function serverSuccess() {
return {
type: SERVER.SUCCESS
};
}
export function serverFailure(err) {
return {
type: SERVER.FAILURE,
err
};
}
export function changedServer(server) {
return {
type: SERVER.CHANGED,

View File

@ -1,12 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View, Text, StyleSheet } from 'react-native';
import { CachedImage } from 'react-native-img-cache';
import { emojify } from 'react-emojione';
import Markdown from 'react-native-easy-markdown';
import moment from 'moment';
import avatarInitialsAndColor from '../utils/avatarInitialsAndColor';
import Avatar from './avatar';
import Card from './message/card';
const styles = StyleSheet.create({
@ -20,26 +18,6 @@ const styles = StyleSheet.create({
flexDirection: 'row',
transform: [{ scaleY: -1 }]
},
avatarContainer: {
backgroundColor: '#eee',
width: 40,
height: 40,
marginRight: 10,
borderRadius: 5
},
avatar: {
width: 40,
height: 40,
borderRadius: 5,
position: 'absolute'
},
avatarInitials: {
margin: 2,
textAlign: 'center',
lineHeight: 36,
fontSize: 22,
color: '#ffffff'
},
texts: {
flex: 1
},
@ -87,33 +65,17 @@ export default class Message extends React.PureComponent {
const username = item.alias || item.u.username;
let { initials, color } = avatarInitialsAndColor(username);
const avatar = item.avatar || `${ this.props.baseUrl }/avatar/${ item.u.username }`;
if (item.avatar) {
initials = '';
color = 'transparent';
}
let aliasUsername;
if (item.alias) {
aliasUsername = <Text style={styles.alias}>@{item.u.username}</Text>;
}
const time = moment(item.ts).format(this.props.Message_TimeFormat);
return (
<View style={[styles.message, extraStyle]}>
<View style={[styles.avatarContainer, { backgroundColor: color }]}>
<Text style={styles.avatarInitials}>{initials}</Text>
<CachedImage style={styles.avatar} source={{ uri: avatar }} />
</View>
<Avatar style={{ marginRight: 10 }} text={item.avatar ? '' : username} size={40} baseUrl={this.props.baseUrl} avatar={item.avatar} />
<View style={[styles.content]}>
<View style={styles.usernameView}>
<Text onPress={this._onPress} style={styles.username}>
{username}
</Text>
{aliasUsername}<Text style={styles.time}>{time}</Text>
{item.alias && <Text style={styles.alias}>@{item.u.username}</Text>}<Text style={styles.time}>{time}</Text>
</View>
{this.attachments()}
<Markdown>

View File

@ -1,9 +1,8 @@
import React from 'react';
import { CachedImage } from 'react-native-img-cache';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import PropTypes from 'prop-types';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import Avatar from './avatar';
import avatarInitialsAndColor from '../utils/avatarInitialsAndColor';
const styles = StyleSheet.create({
@ -81,12 +80,8 @@ export default class RoomItem extends React.PureComponent {
}
if (type === 'd') {
const { initials, color } = avatarInitialsAndColor(name);
return (
<View style={[styles.iconContainer, { backgroundColor: color }]}>
<Text style={styles.avatarInitials}>{initials}</Text>
<CachedImage style={styles.avatar} source={{ uri: `${ baseUrl }/avatar/${ name }` }} />
</View>
<Avatar text={name} baseUrl={baseUrl} size={40} borderRadius={20} />
);
}

51
app/components/avatar.js Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, Text, View } from 'react-native';
import { CachedImage } from 'react-native-img-cache';
import avatarInitialsAndColor from '../utils/avatarInitialsAndColor';
const styles = StyleSheet.create({
iconContainer: {
overflow: 'hidden',
justifyContent: 'center',
alignItems: 'center'
},
avatar: {
position: 'absolute'
},
avatarInitials: {
color: '#ffffff'
} });
class Avatar extends React.PureComponent {
render() {
const { text = '', size = 25, baseUrl = this.props.baseUrl,
borderRadius = 5, style, avatar } = this.props;
const { initials, color } = avatarInitialsAndColor(`${ text }`);
return (
<View style={[styles.iconContainer, {
backgroundColor: color,
width: size,
height: size,
borderRadius
}, style]}
>
<Text style={[styles.avatarInitials, { fontSize: size / 2 }]}>{initials}</Text>
{ (avatar || baseUrl) && <CachedImage
style={[styles.avatar, { width: size,
height: size }]}
source={{ uri: avatar || `${ baseUrl }/avatar/${ text }` }}
/>}
</View>);
}
}
Avatar.propTypes = {
style: PropTypes.object,
baseUrl: PropTypes.string,
text: PropTypes.string.isRequired,
avatar: PropTypes.string,
size: PropTypes.number,
borderRadius: PropTypes.number
};
export default Avatar;

View File

@ -1,33 +1,38 @@
import PropTypes from 'prop-types';
import React from 'react';
import { View, Image } from 'react-native';
import { connect } from 'react-redux';
import { Text } from 'react-native';
import * as Animatable from 'react-native-animatable';
import setNavigator from './actions/navigator';
import { appInit } from './actions';
import LoginView from './views/login';
import ListServerView from './views/serverList';
import styles from './views/Styles';
import store from './lib/createStore';
export const authenticated = WrappedComponent => class _p extends React.PureComponent {
constructor() {
super();
this.login = store.getState().login;
console.log('this.login.token', this.login.token);
if (!this.login.token || this.login.failure) {
return store.getState().navigator.resetTo({
screen: 'Login'
screen: 'Login',
animated: false
});
}
}
render() {
// Wraps the input component in a container, without mutating it. Good!
return <WrappedComponent {...this.props} />;
return ((this.login.isAuthenticated || this.login.user) && <WrappedComponent {...this.props} />);
}
};
//
export class PublicScreen extends React.PureComponent {
render() {
return !this.login.isAuthenticated || !this.login.user ? null : (<ListServerView {...this.props} />);
return ((this.login.isAuthenticated || this.login.user) && <ListServerView {...this.props} />);
}
}
@ -43,21 +48,35 @@ export class PrivateScreen extends React.PureComponent {
@connect(() => ({
// logged: state.login.isAuthenticated
}), dispatch => ({
setNavigator: navigator => dispatch(setNavigator(navigator))
setNavigator: navigator => dispatch(setNavigator(navigator)),
appInit: () => dispatch(appInit())
}))
export const HomeScreen = class extends React.PureComponent {
static propTypes = {
appInit: PropTypes.func.isRequired,
setNavigator: PropTypes.func.isRequired,
navigator: PropTypes.object.isRequired
}
static navigatorStyle = {
navBarHidden: true,
rightButtons: [{
id: 'close',
title: 'Cancel'
}]
};
componentWillMount() {
this.props.setNavigator(this.props.navigator);
this.props.navigator.resetTo({
screen: 'public'
});
this.props.appInit();
//
// this.props.navigator.setDrawerEnabled({
// side: 'left', // the side of the drawer since you can have two, 'left' / 'right'
// enabled: false // should the drawer be enabled or disabled (locked closed)
// });
}
render() {
return (<Text>oieee</Text>);
return (<View style={styles.logoContainer}><Animatable.Text animation='pulse' easing='ease-out' iterationCount='infinite' style={{ textAlign: 'center' }}>
<Image style={styles.logo} source={require('./images/logo.png')} />
</Animatable.Text></View>);
}
};

View File

@ -36,7 +36,15 @@ const RocketChat = {
console.warn(`AsyncStorage error: ${ error.message }`);
}
},
async testServer(url) {
if (/^(https?:\/\/)?(((\w|[0-9])+(\.(\w|[0-9-_])+)+)|localhost)(:\d+)?$/.test(url)) {
const response = await fetch(url, { method: 'HEAD' });
if (response.status === 200 && response.headers.get('x-instance-id') != null && response.headers.get('x-instance-id').length) {
return url;
}
}
throw new Error({ error: 'invalid server' });
},
connect(_url) {
return new Promise((resolve) => {
const url = `${ _url }/websocket`;
@ -61,7 +69,7 @@ const RocketChat = {
const setting = {
_id: item._id
};
setting._server = { id: reduxStore.getState().server };
setting._server = { id: reduxStore.getState().server.server };
if (settingsType[item.type]) {
setting[settingsType[item.type]] = item.value;
realm.create('settings', setting, true);
@ -78,7 +86,7 @@ const RocketChat = {
realm.write(() => {
const message = ddbMessage.fields.args[0];
message.temp = false;
message._server = { id: reduxStore.getState().server };
message._server = { id: reduxStore.getState().server.server };
realm.create('messages', message, true);
});
}
@ -86,7 +94,7 @@ const RocketChat = {
if (ddbMessage.collection === 'stream-notify-user') {
realm.write(() => {
const data = ddbMessage.fields.args[1];
data._server = { id: reduxStore.getState().server };
data._server = { id: reduxStore.getState().server.server };
realm.create('subscriptions', data, true);
});
}
@ -97,13 +105,11 @@ const RocketChat = {
},
login(params, callback) {
console.log('login(params, callback)');
return new Promise((resolve, reject) => {
Meteor._startLoggingIn();
return Meteor.call('login', params, (err, result) => {
Meteor._endLoggingIn();
Meteor._handleLoginCallback(err, result);
console.log('login(params, callback)asdas', err, result);
if (err) {
reject(err);
} else {
@ -172,7 +178,7 @@ const RocketChat = {
// if (typeof item.value === 'string') {
// subscription.value = item.value;
// }
subscription._server = { id: reduxStore.getState().server };
subscription._server = { id: reduxStore.getState().server.server };
// write('subscriptions', subscription);
realm.create('subscriptions', subscription, true);
});
@ -196,7 +202,7 @@ const RocketChat = {
realm.write(() => {
data.messages.forEach((message) => {
message.temp = false;
message._server = { id: reduxStore.getState().server };
message._server = { id: reduxStore.getState().server.server };
// write('messages', message);
realm.create('messages', message, true);
});
@ -226,7 +232,7 @@ const RocketChat = {
ts: new Date(),
_updatedAt: new Date(),
temp: true,
_server: { id: reduxStore.getState().server },
_server: { id: reduxStore.getState().server.server },
u: {
_id: reduxStore.getState().login.user.id || '1',
username: reduxStore.getState().login.user.id
@ -370,7 +376,6 @@ const RocketChat = {
return subscription;
});
// Meteor.subscribe('stream-notify-user', `${ Meteor.userId() }/rooms-changed`, false);
console.log('getRooms resolved', reduxStore.getState().server, data);
realm.write(() => {
data.forEach((subscription) => {
// const subscription = {
@ -379,7 +384,7 @@ const RocketChat = {
// if (typeof item.value === 'string') {
// subscription.value = item.value;
// }
subscription._server = { id: reduxStore.getState().server };
subscription._server = { id: reduxStore.getState().server.server };
// write('subscriptions', subscription);
realm.create('subscriptions', subscription, true);
});

View File

@ -0,0 +1,31 @@
import { CREATE_CHANNEL } from '../actions/actionsTypes';
const initialState = {
isFetching: false,
failure: false
};
export default function messages(state = initialState, action) {
switch (action.type) {
case CREATE_CHANNEL.REQUEST:
return { ...state,
error: undefined,
failure: false,
isFetching: true
};
case CREATE_CHANNEL.SUCCESS:
return { ...state,
isFetching: false,
failure: false,
result: action.data
};
case CREATE_CHANNEL.FAILURE:
return { ...state,
isFetching: false,
failure: true,
error: action.err
};
default:
return state;
}
}

View File

@ -5,8 +5,9 @@ import meteor from './connect';
import messages from './messages';
import server from './server';
import navigator from './navigator';
import createChannel from './createChannel';
export default combineReducers({
settings, login, meteor, messages, server, navigator
settings, login, meteor, messages, server, navigator, createChannel
});

View File

@ -1,9 +1,36 @@
import { SERVER } from '../actions/actionsTypes';
export default function server(state = '', action) {
const initialState = {
connecting: false,
connected: false,
errorMessage: '',
failure: false,
server: ''
};
export default function server(state = initialState, action) {
switch (action.type) {
case SERVER.REQUEST:
return { ...state,
connecting: true,
failure: false
};
case SERVER.SUCCESS:
return { ...state,
connecting: false,
connected: true,
failure: false
};
case SERVER.FAILURE:
return { ...state,
connecting: false,
connected: false,
failure: true,
errorMessage: action.err
};
case SERVER.SELECT:
return action.server;
return { ...state, server: action.server };
default:
return state;
}

View File

@ -1,39 +0,0 @@
import React from 'react';
import {
Scene,
Router
// Actions,
// Reducer,
// ActionConst,
// Tabs,
// Modal,
// Drawer,
// Stack,
// Lightbox
} from 'react-native-router-flux';
// import { Navigation } from 'react-native-navigation';
import { Provider } from 'react-redux';
import LoginView from '../views/login';
import NewServerView from '../views/serverNew';
import ListServerView from '../views/serverList';
import RoomsListView from '../views/roomsList';
import RoomView from '../views/room';
// import PhotoView from '../views/Photo';
// import CreateChannel from '../views/CreateChannel';
import store from '../lib/createStore';
export default () => (
<Provider store={store}>
<Router>
<Scene key='root'>
<Scene key='listServer' component={ListServerView} title='Servers' />
<Scene key='newServer' component={NewServerView} title='New Server' />
<Scene key='login' component={LoginView} title='Login' />
<Scene key='roomList' component={RoomsListView} />
<Scene key='room' component={RoomView} initial />
</Scene>
</Router>
</Provider>
);
// <Scene key='register' component={Register} title='Register' />

View File

@ -1,10 +1,10 @@
import { take, put, call, fork, takeLatest, select } from 'redux-saga/effects';
import { put, call, takeLatest, select } from 'redux-saga/effects';
import { METEOR } from '../actions/actionsTypes';
import RocketChat from '../lib/rocketchat';
import { connectSuccess, connectFailure } from '../actions/connect';
const getServer = ({ server }) => server;
const getServer = ({ server }) => server.server;
const connect = url => RocketChat.connect(url);
@ -17,14 +17,11 @@ const test = function* test() {
yield put(connectFailure(err.status));
}
};
const watchConnect = function* watchConnect() {
yield takeLatest(METEOR.REQUEST, test);
while (true) {
yield take(METEOR.DISCONNECT);
}
};
// const watchConnect = function* watchConnect() {
// };
const root = function* root() {
yield fork(watchConnect);
yield takeLatest(METEOR.REQUEST, test);
// yield fork(watchConnect);
// yield fork(auto);
};
export default root;

View File

@ -0,0 +1,34 @@
import { delay } from 'redux-saga';
import { select, put, call, fork, take } from 'redux-saga/effects';
import { CREATE_CHANNEL, LOGIN } from '../actions/actionsTypes';
import { createChannelSuccess, createChannelFailure } from '../actions/createChannel';
import RocketChat from '../lib/rocketchat';
const create = function* create(data) {
return yield RocketChat.createChannel(data);
};
const get = function* get() {
while (true) {
try {
const { data } = yield take(CREATE_CHANNEL.REQUEST);
const auth = yield select(state => state.login.isAuthenticated);
if (!auth) {
yield take(LOGIN.SUCCESS);
}
const result = yield call(create, data);
yield put(createChannelSuccess(result));
select(({ navigator }) => navigator).dismissModal({
animationType: 'slide-down'
});
} catch (err) {
yield delay(2000);
yield put(createChannelFailure(err));
}
}
};
const getData = function* getData() {
yield fork(get);
};
export default getData;

View File

@ -6,11 +6,13 @@ import connect from './connect';
import rooms from './rooms';
import messages from './messages';
import selectServer from './selectServer';
import createChannel from './createChannel';
import init from './init';
const root = function* root() {
yield fork(init);
yield take(types.APP.READY);
yield fork(createChannel);
yield fork(hello);
yield fork(rooms);
yield fork(login);

View File

@ -1,13 +1,23 @@
import { AsyncStorage } from 'react-native';
import { call, put } from 'redux-saga/effects';
import { call, put, select, take } from 'redux-saga/effects';
import * as actions from '../actions';
import { setServer } from '../actions/server';
import { APP } from '../actions/actionsTypes';
const restore = function* restore() {
try {
yield take(APP.INIT);
const { navigator } = yield select(state => state);
const currentServer = yield call([AsyncStorage, 'getItem'], 'currentServer');
yield put(actions.appReady({}));
if (currentServer) { yield put(setServer(currentServer)); }
if (currentServer) {
yield put(setServer(currentServer));
} else {
navigator.resetTo({
screen: 'ListServer',
animated: false
});
}
} catch (e) {
console.log(e);
}

View File

@ -1,12 +1,12 @@
import { AsyncStorage } from 'react-native';
import { take, put, call, takeEvery, fork, select, all, race } from 'redux-saga/effects';
import * as types from '../actions/actionsTypes';
import { loginRequest, loginSuccess, loginFailure, setToken } from '../actions/login';
import { loginRequest, loginSuccess, loginFailure, setToken, logout } from '../actions/login';
import RocketChat from '../lib/rocketchat';
const TOKEN_KEY = 'reactnativemeteor_usertoken';
const getUser = state => state.login;
const getServer = state => state.server;
const getServer = state => state.server.server;
const loginCall = args => (args.resume ? RocketChat.login(args) : RocketChat.loginWithPassword(args));
const getToken = function* getToken() {
@ -20,6 +20,8 @@ const getToken = function* getToken() {
} catch (e) {
console.log('getTokenerr', e);
}
} else {
yield put(setToken());
}
};
@ -27,10 +29,9 @@ const handleLoginWhenServerChanges = function* handleLoginWhenServerChanges() {
// do {
try {
yield take(types.METEOR.SUCCESS);
yield call(getToken);
const { navigator } = yield select(state => state);
navigator.resetTo({
screen: 'Rooms'
});
const user = yield select(getUser);
if (user.token) {
yield put(loginRequest({ resume: user.token }));
@ -47,6 +48,9 @@ const handleLoginWhenServerChanges = function* handleLoginWhenServerChanges() {
// });
// }
}
navigator.resetTo({
screen: 'Rooms'
});
} catch (e) {
console.log(e);
}
@ -66,8 +70,11 @@ const handleLoginRequest = function* handleLoginRequest() {
const response = yield call(loginCall, credentials);
yield put(loginSuccess(response));
} catch (err) {
// console.log('login failed');
yield put(loginFailure(err));
if (err.error === 403) {
yield put(logout());
} else {
yield put(loginFailure(err));
}
}
}
};
@ -93,7 +100,6 @@ const handleLoginSubmit = function* handleLoginSubmit() {
};
const root = function* root() {
yield takeEvery(types.SERVER.CHANGED, getToken);
yield takeEvery(types.SERVER.CHANGED, handleLoginWhenServerChanges);
yield fork(handleLoginRequest);
yield takeEvery(types.LOGIN.SUCCESS, saveToken);

View File

@ -1,17 +1,60 @@
import { put, takeEvery, call } from 'redux-saga/effects';
import { put, takeEvery, call, takeLatest, race, take } from 'redux-saga/effects';
import { delay } from 'redux-saga';
import { AsyncStorage } from 'react-native';
import { Navigation } from 'react-native-navigation';
import { SERVER } from '../actions/actionsTypes';
import { connectRequest, disconnect } from '../actions/connect';
import { changedServer } from '../actions/server';
import { changedServer, serverSuccess, serverFailure, serverRequest } from '../actions/server';
import RocketChat from '../lib/rocketchat';
import realm from '../lib/realm';
const validate = function* validate(server) {
return yield RocketChat.testServer(server);
};
const selectServer = function* selectServer({ server }) {
yield put(disconnect());
yield put(changedServer(server));
yield console.log('SERVER->', server);
yield call([AsyncStorage, 'setItem'], 'currentServer', server);
yield put(connectRequest(server));
yield Navigation.dismissModal({
animationType: 'slide-down'
});
};
const validateServer = function* validateServer({ server }) {
try {
yield delay(1000);
yield call(validate, server);
yield put(serverSuccess());
} catch (e) {
console.log(e);
yield put(serverFailure(e));
}
};
const addServer = function* addServer({ server }) {
yield call(serverRequest, server);
const { error } = race({
error: take(SERVER.FAILURE),
success: take(SERVER.SUCCESS)
});
if (!error) {
realm.write(() => {
realm.create('servers', { id: server, current: false }, true);
});
Navigation.dismissModal({
animationType: 'slide-down'
});
}
};
const root = function* root() {
yield takeLatest(SERVER.REQUEST, validateServer);
yield takeEvery(SERVER.SELECT, selectServer);
yield takeEvery(SERVER.ADD, addServer);
};
export default root;

View File

@ -1,6 +1,12 @@
import { AVATAR_COLORS } from '../constants/colors';
export default function(username = '') {
if (username === '') {
return {
initials: '',
colors: 'transparent'
};
}
const position = username.length % AVATAR_COLORS.length;
const color = AVATAR_COLORS[position];

View File

@ -1,101 +1,83 @@
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';
import React from 'react';
// import PropTypes from 'prop-types';
import { TextInput, StyleSheet, View, Text, Switch } from 'react-native';
import RocketChat from '../lib/rocketchat';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { TextInput, View, Text, Switch, TouchableOpacity, ScrollView } from 'react-native';
import { createChannelRequest } from '../actions/createChannel';
import styles from './Styles';
import KeyboardView from '../components/KeyboardView';
// import KeyboardView from '../components/KeyboardView';
@connect(state => ({
result: state.createChannel
}), dispatch => ({
createChannel: data => dispatch(createChannelRequest(data))
}))
const styles = StyleSheet.create({
view: {
flex: 1,
flexDirection: 'column',
padding: 24
},
input: {
// height: 50,
fontSize: 20,
borderColor: '#ffffff',
padding: 5,
borderWidth: 0,
backgroundColor: 'white'
},
field: {
flex: 1,
flexDirection: 'row',
alignItems: 'center'
},
field_label: {
flexGrow: 1
},
field_input: {
flexGrow: 1,
fontSize: 20,
borderColor: '#ffffff',
padding: 5,
borderWidth: 0,
backgroundColor: 'white'
},
actionButtonIcon: {
fontSize: 20,
height: 22,
color: 'white'
}
});
const mainIcon = <Icon name='md-checkmark' style={styles.actionButtonIcon} />;
export default class CreateChannelView extends React.Component {
// static propTypes = {
// navigation: PropTypes.object.isRequired
// }
static navigationOptions = () => ({
title: 'Create Channel'
title: 'Create a New Channel'
});
static propTypes = {
createChannel: PropTypes.func.isRequired,
result: PropTypes.object.isRequired,
navigator: PropTypes.object.isRequired
}
constructor(props) {
super(props);
this.state = {
this.default = {
channelName: '',
type: true
};
this.state = this.default;
this.props.navigator.setTitle({
title: 'Create Channel'
});
// this.props.navigator.setSubTitle({
// subtitle: 'Channels are where your team communicate.'
// });
}
submit() {
if (!this.state.channelName.trim() || this.props.result.isFetching) {
return;
}
const { channelName, users = [], type = true } = this.state;
RocketChat.createChannel({ name: channelName, users, type }).then(res => Promise.reject(res));
// { username: this.state.username }, this.state.password, () => {
// this.props.navigation.dispatch({ type: 'Navigation/BACK' });
// });
this.props.createChannel({ name: channelName, users, type });
}
render() {
return (
<View style={styles.view}>
<View style={styles.field}>
<TextInput
style={styles.field_input}
onChangeText={channelName => this.setState({ channelName })}
autoCorrect={false}
returnKeyType='done'
autoCapitalize='none'
autoFocus
// onSubmitEditing={() => this.textInput.focus()}
placeholder='Type the channel name here'
/>
</View>
<View style={styles.field}>
<Text style={styles.field_label}>{this.state.type ? 'Public' : 'Private'}</Text>
<Switch
style={styles.field_input}
value={this.state.type}
onValueChange={type => this.setState({ type })}
/>
</View>
{this.state.channelName.length > 0 ?
<ActionButton buttonColor='green' icon={mainIcon} onPress={() => this.submit()} /> : null }
</View>
<KeyboardView style={[styles.view_white, { flex: 0, justifyContent: 'flex-start' }]}>
<ScrollView>
<View style={styles.formContainer}>
<Text style={styles.label_white}>Channel Name</Text>
<TextInput
value={this.state.channelName}
style={styles.input_white}
onChangeText={channelName => this.setState({ channelName })}
autoCorrect={false}
returnKeyType='done'
autoCapitalize='none'
autoFocus
// onSubmitEditing={() => this.textInput.focus()}
placeholder='Type the channel name here'
/>
{(this.props.result.failure && this.props.result.error.error === 'error-duplicate-channel-name') ? <Text style={[styles.label_white, { color: 'red', flexGrow: 1, paddingHorizontal: 0, marginBottom: 20 }]}>{this.props.result.error.reason}</Text> : null}
<View style={[styles.view_white, { flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', paddingHorizontal: 0 }]}>
<Switch
style={[{ flexGrow: 0, flexShrink: 1 }]}
value={this.state.type}
onValueChange={type => this.setState({ type })}
/>
<Text style={[styles.label_white, { flexGrow: 1, paddingHorizontal: 10 }]}>{this.state.type ? 'Public' : 'Private'}</Text>
</View>
<Text style={[styles.label_white, { color: '#9ea2a8', flexGrow: 1, paddingHorizontal: 0, marginBottom: 20 }]}>{this.state.type ? 'Everyone can access this channel' : 'Just invited people can access this channel'}</Text>
<TouchableOpacity onPress={() => this.submit()} style={[styles.buttonContainer_white, { backgroundColor: (this.state.channelName.length === 0 || this.props.result.isFetching) ? '#e1e5e8' : '#1d74f5' }]}>
<Text style={styles.button_white}> { this.props.result.isFetching ? 'LOADING' : 'CREATE' }!</Text>
</TouchableOpacity>
</View>
</ScrollView>
</KeyboardView>
);
}
}

105
app/views/Styles.js Normal file
View File

@ -0,0 +1,105 @@
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
view: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
padding: 20,
alignItems: 'stretch',
backgroundColor: '#2f343d'
},
view_white: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
padding: 20,
alignItems: 'stretch',
backgroundColor: '#fff'
},
logoContainer: {
flex: 1,
alignItems: 'center',
flexGrow: 1,
justifyContent: 'center'
},
logo: {
width: 150,
// backgroundColor: 'red'
// height: 150,
resizeMode: 'contain'
},
formContainer: {
// marginBottom: 20
},
label: {
lineHeight: 40,
height: 40,
fontSize: 16,
marginBottom: 5,
color: 'white'
},
label_white: {
lineHeight: 40,
height: 40,
fontSize: 16,
marginBottom: 5,
color: '#2f343d'
},
input: {
height: 45,
marginBottom: 20,
borderRadius: 2,
// padding: 14,
paddingHorizontal: 10,
borderWidth: 2,
backgroundColor: 'rgba(255,255,255,.2)',
borderColor: '#e1e5e8',
color: 'white'
},
input_white: {
height: 45,
marginBottom: 20,
borderRadius: 2,
// padding: 14,
paddingHorizontal: 10,
borderWidth: 2,
backgroundColor: 'white',
borderColor: 'rgba(0,0,0,.15)',
color: 'black'
},
buttonContainer: {
paddingVertical: 15,
backgroundColor: '#414852',
marginBottom: 20
},
buttonContainer_white: {
paddingVertical: 15,
backgroundColor: '#1d74f5',
marginBottom: 20
},
button: {
textAlign: 'center',
color: 'white',
borderRadius: 2,
fontWeight: '700'
},
button_white: {
textAlign: 'center',
color: 'white',
borderRadius: 2,
fontWeight: '700'
},
error: {
textAlign: 'center',
color: 'red',
paddingTop: 5
},
loading: {
flex: 1,
position: 'absolute',
backgroundColor: 'rgba(255,255,255,.2)',
left: 0,
top: 0
}
});

View File

@ -3,7 +3,7 @@ import React from 'react';
import Spinner from 'react-native-loading-spinner-overlay';
import PropTypes from 'prop-types';
import { Keyboard, Text, TextInput, StyleSheet, View, Image, TouchableOpacity } from 'react-native';
import { Keyboard, Text, TextInput, View, Image, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
// import * as actions from '../actions';
@ -11,63 +11,7 @@ import * as loginActions from '../actions/login';
import KeyboardView from '../components/KeyboardView';
// import { Keyboard } from 'react-native'
const styles = StyleSheet.create({
view: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
padding: 20,
alignItems: 'stretch',
backgroundColor: '#2f343d'
},
logoContainer: {
flex: 1,
alignItems: 'center',
flexGrow: 1,
justifyContent: 'center'
},
logo: {
width: 150,
// backgroundColor: 'red'
// height: 150,
resizeMode: 'contain'
},
formContainer: {
// marginBottom: 20
},
input: {
height: 40,
marginBottom: 20,
borderRadius: 2,
paddingHorizontal: 10,
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,.2)',
color: 'white'
},
buttonContainer: {
paddingVertical: 15,
backgroundColor: '#414852',
marginBottom: 20
},
button: {
textAlign: 'center',
color: 'white',
borderRadius: 2,
fontWeight: '700'
},
error: {
textAlign: 'center',
color: 'red',
paddingTop: 5
},
loading: {
flex: 1,
position: 'absolute',
backgroundColor: 'rgba(255,255,255,.2)',
left: 0,
top: 0
}
});
import styles from './Styles';
class LoginView extends React.Component {
static propTypes = {
@ -90,16 +34,33 @@ class LoginView extends React.Component {
username: '',
password: ''
};
this.props.navigator.setTitle({
}
componentWillReceiveProps() {
const { navigator } = this.props;
navigator.setTitle({
title: 'Login'
});
}
componentWillReceiveProps(nextProps) {
this.props.navigator.setSubTitle({
subtitle: nextProps.server
navigator.setSubTitle({
subtitle: this.props.server
});
navigator.setButtons({
rightButtons: [{
id: 'close',
title: 'Cancel'
}]
});
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}
onNavigatorEvent = (event) => {
if (event.type === 'NavBarButtonPress') {
if (event.id === 'close') {
this.props.navigator.resetTo({
screen: 'ListServer',
animated: false
});
}
}
}
submit = () => {
const { username, password, code } = this.state;
@ -175,7 +136,7 @@ class LoginView extends React.Component {
function mapStateToProps(state) {
// console.log(Object.keys(state));
return {
server: state.server,
server: state.server.server,
Accounts_EmailOrUsernamePlaceholder: state.settings.Accounts_EmailOrUsernamePlaceholder,
Accounts_PasswordPlaceholder: state.settings.Accounts_PasswordPlaceholder,
login: state.login

View File

@ -46,7 +46,7 @@ const styles = StyleSheet.create({
@connect(state => ({
server: state.server,
server: state.server.server,
Site_Url: state.settings.Site_Url,
Message_TimeFormat: state.settings.Message_TimeFormat,
loading: state.messages.isFetching

View File

@ -3,6 +3,7 @@ import { Navigation } from 'react-native-navigation';
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 } from 'react-native';
import { connect } from 'react-redux';
import * as actions from '../actions';
@ -55,10 +56,10 @@ const styles = StyleSheet.create({
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
@connect(state => ({
server: state.server,
server: state.server.server,
login: state.login,
Site_Url: state.settings.Site_Url,
canShowList: state.login.token.length || state.login.user.token
canShowList: state.login.token || state.login.user.token
}), dispatch => ({
login: () => dispatch(actions.login()),
connect: () => dispatch(server.connectRequest())
@ -219,7 +220,16 @@ export default class RoomsListView extends React.Component {
navigateToRoom({ sid: id });
clearSearch();
}
_createChannel = () => {
Navigation.showModal({
screen: 'CreateChannel',
title: 'Create a New Channel',
passProps: {},
navigatorStyle: {},
navigatorButtons: {},
animationType: 'slide-up'
});
}
renderSearchBar = () => (
<View style={styles.searchBoxView}>
<TextInput
@ -256,7 +266,11 @@ export default class RoomsListView extends React.Component {
/>
)
renderCreateButtons = () => (
<ActionButton buttonColor='rgba(231,76,60,1)' />);
<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= () => (
<View style={styles.container}>
<Banner />

View File

@ -65,13 +65,15 @@ const zeroconf = new Zeroconf();
@connect(state => ({
server: state.server
server: state.server.server,
login: state.login
}), dispatch => ({
selectServer: server => dispatch(setServer(server))
}))
export default class ListServerView extends React.Component {
static propTypes = {
navigator: PropTypes.object.isRequired,
login: PropTypes.object.isRequired,
selectServer: PropTypes.func.isRequired,
actions: PropTypes.object,
server: PropTypes.string
@ -92,7 +94,7 @@ export default class ListServerView extends React.Component {
id: 'add',
title: 'Add'
}],
leftButtons: props.server && Platform.select({
leftButtons: props.login.isAuthenticated && props.server && Platform.select({
ios: [{
id: 'close',
title: 'Close'

View File

@ -2,9 +2,8 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Navigation } from 'react-native-navigation';
import { Text, TextInput, View, StyleSheet } from 'react-native';
import _ from 'underscore';
import realm from '../lib/realm';
import { connect } from 'react-redux';
import { serverRequest, addServer } from '../actions/server';
import KeyboardView from '../components/KeyboardView';
const styles = StyleSheet.create({
@ -47,10 +46,20 @@ const styles = StyleSheet.create({
flexGrow: 1
}
});
@connect(state => ({
validInstance: !state.server.failure,
validating: state.server.connecting
}), dispatch => ({
validateServer: url => dispatch(serverRequest(url)),
addServer: url => dispatch(addServer(url))
}))
export default class NewServerView extends React.Component {
static propTypes = {
navigator: PropTypes.object.isRequired
navigator: PropTypes.object.isRequired,
validateServer: PropTypes.func.isRequired,
addServer: PropTypes.func.isRequired,
validating: PropTypes.bool.isRequired,
validInstance: PropTypes.bool.isRequired
}
static navigationOptions = () => ({
@ -66,37 +75,11 @@ export default class NewServerView extends React.Component {
};
this.submit = () => {
let url = this.state.text.trim();
if (!url) {
url = this.state.defaultServer;
} else {
url = this.completeUrl(this.state.text);
}
this.setState({
editable: false
});
this.inputElement.blur();
this.validateServer(url).then(() => {
realm.write(() => {
realm.create('servers', { id: url, current: false }, true);
});
Navigation.dismissModal({
animationType: 'slide-down'
});
}).catch(() => {
this.setState({
editable: true
});
this.inputElement.focus();
});
this.props.addServer(this.completeUrl(this.state.text.trim() || this.state.defaultServer));
};
}
componentDidMount() {
this._mounted = true;
this.props.navigator.setTitle({
title: 'New server'
});
@ -111,11 +94,6 @@ export default class NewServerView extends React.Component {
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}
componentWillUnmount() {
this._mounted = false;
}
onNavigatorEvent = (event) => {
if (event.type === 'NavBarButtonPress') {
if (event.id === 'close') {
@ -128,62 +106,8 @@ export default class NewServerView extends React.Component {
onChangeText = (text) => {
this.setState({ text });
this.validateServerDebounced(text);
this.props.validateServer(this.completeUrl(text));
}
validateServer = url => new Promise((resolve, reject) => {
url = this.completeUrl(url);
this.setState({
validating: false,
url
});
if (/^(https?:\/\/)?(((\w|[0-9])+(\.(\w|[0-9-_])+)+)|localhost)(:\d+)?$/.test(url)) {
this.setState({
validating: true
});
fetch(url, { method: 'HEAD' })
.then((response) => {
if (!this._mounted) {
return;
}
if (response.status === 200 && response.headers.get('x-instance-id') != null && response.headers.get('x-instance-id').length) {
this.setState({
validInstance: true,
validating: false
});
resolve(url);
} else {
this.setState({
validInstance: false,
validating: false
});
reject(url);
}
})
.catch(() => {
if (!this._mounted) {
return;
}
this.setState({
validInstance: false,
validating: false
});
reject(url);
});
} else {
this.setState({
validInstance: undefined
});
reject(url);
}
})
validateServerDebounced = _.debounce(this.validateServer, 1000)
completeUrl = (url) => {
url = url.trim();
@ -203,7 +127,10 @@ export default class NewServerView extends React.Component {
}
renderValidation = () => {
if (this.state.validating) {
if (!this.state.text.trim()) {
return null;
}
if (this.props.validating) {
return (
<Text style={[styles.validateText, styles.validatingText]}>
Validating {this.state.url} ...
@ -211,21 +138,18 @@ export default class NewServerView extends React.Component {
);
}
if (this.state.validInstance) {
if (this.props.validInstance) {
return (
<Text style={[styles.validateText, styles.validText]}>
{this.state.url} is a valid Rocket.Chat instance
</Text>
);
}
if (this.state.validInstance === false) {
return (
<Text style={[styles.validateText, styles.invalidText]}>
{this.state.url} is not a valid Rocket.Chat instance
</Text>
);
}
return (
<Text style={[styles.validateText, styles.invalidText]}>
{this.state.url} is not a valid Rocket.Chat instance
</Text>
);
}
render() {

1130
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -22,22 +22,16 @@
"react-emojione": "^3.1.10",
"react-native": "0.46.1",
"react-native-action-button": "^2.7.2",
"react-native-auto-grow-textinput": "^1.2.0",
"react-native-autogrow-input": "^0.2.1",
"react-native-autogrow-textinput": "^4.1.0",
"react-native-animatable": "^1.2.3",
"react-native-card-view": "0.0.3",
"react-native-console-time-polyfill": "0.0.6",
"react-native-easy-markdown": "git+https://github.com/lappalj4/react-native-easy-markdown.git",
"react-native-fetch-blob": "^0.10.8",
"react-native-form-generator": "^0.9.9",
"react-native-image-picker": "^0.26.3",
"react-native-image-picker": "^0.26.4",
"react-native-img-cache": "^1.4.0",
"react-native-loader": "^1.1.0",
"react-native-loading-spinner-overlay": "^0.5.1",
"react-native-loading-spinner-overlay": "^0.5.2",
"react-native-meteor": "^1.1.0",
"react-native-navigation": "^1.1.193",
"react-native-optimized-flatlist": "^1.0.1",
"react-native-router-flux": "^4.0.0-beta.18",
"react-native-svg": "^5.4.1",
"react-native-svg-image": "^1.1.4",
"react-native-vector-icons": "^4.3.0",

View File

@ -0,0 +1,13 @@
import React from 'react';
import { ScrollView } from 'react-native';
import Avatar from '../../app/components/avatar';
export default (
<ScrollView>
<Avatar text={'test'} />
<Avatar size={40} text={'aa'} />
<Avatar size={30} text={'bb'} />
<Avatar text={'test'} borderRadius={2} />
</ScrollView>
);

View File

@ -7,7 +7,9 @@ import { storiesOf } from '@storybook/react-native';
// import { linkTo } from '@storybook/addon-links';
import DirectMessage from './Channels/DirectMessage';
import Avatar from './Avatar';
storiesOf('Avatar', module).add('avatar', () => Avatar);
storiesOf('Channel Cell', module).add('Direct Messages', () => DirectMessage);
// storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);