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

Merge pull request #40 from RocketChat/refactor-containers 

Components moved to 'containers' or 'presentation' folders.
This commit is contained in:
Guilherme Gazzo 2017-09-04 15:25:42 -03:00 committed by GitHub
parent 2c73857186 8cbc74562d
commit 332d7dab13
19 changed files with 190 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -55,3 +55,5 @@ fastlane/Preview.html
fastlane/screenshots
coverage
.vscode/

2
__tests__/RoomItem.js
View File

@ -1,6 +1,6 @@
import 'react-native';
import React from 'react';
import RoomItem from '../app/components/RoomItem';
import RoomItem from '../app/presentation/RoomItem';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

47
app/components/avatar.js → app/containers/Avatar.js
View File

@ -15,27 +15,42 @@ const styles = StyleSheet.create({
},
avatarInitials: {
color: '#ffffff'
} });
}
});
class Avatar extends React.PureComponent {
render() {
const { text = '', size = 25, baseUrl = this.props.baseUrl,
borderRadius = 5, style, avatar } = this.props;
const { text = '', size = 25, baseUrl, borderRadius = 5, style, avatar } = this.props;
const { initials, color } = avatarInitialsAndColor(`${ text }`);
const iconContainerStyle = {
backgroundColor: color,
width: size,
height: size,
borderRadius
};
const avatarInitialsStyle = {
fontSize: size / 2
};
const avatarStyle = {
width: size,
height: size
};
const uri = avatar || `${ baseUrl }/avatar/${ text }`;
const image = (avatar || baseUrl) && (
<CachedImage
style={[styles.avatar, avatarStyle]}
source={{ uri }}
/>
);
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 style={[styles.iconContainer, iconContainerStyle, style]}>
<Text style={[styles.avatarInitials, avatarInitialsStyle]}>{initials}</Text>
{image}
</View>);
}
}

0
app/components/banner.js → app/containers/Banner.js
View File

57
app/components/Message.js → app/containers/Message.js
View File

@ -1,11 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View, Text, StyleSheet } from 'react-native';
import { View, StyleSheet } from 'react-native';
import { emojify } from 'react-emojione';
import Markdown from 'react-native-easy-markdown';
import moment from 'moment';
import Avatar from './avatar';
import Card from './message/card';
import Card from './message/Card';
import Avatar from './Avatar';
import User from './message/User';
const styles = StyleSheet.create({
content: {
@ -17,30 +18,6 @@ const styles = StyleSheet.create({
paddingBottom: 6,
flexDirection: 'row',
transform: [{ scaleY: -1 }]
},
texts: {
flex: 1
},
msg: {
flex: 1
},
username: {
fontWeight: 'bold'
},
usernameView: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 2
},
alias: {
fontSize: 10,
color: '#888',
paddingLeft: 5
},
time: {
fontSize: 10,
color: '#888',
paddingLeft: 5
}
});
@ -50,9 +27,11 @@ export default class Message extends React.PureComponent {
baseUrl: PropTypes.string.isRequired,
Message_TimeFormat: PropTypes.string.isRequired
}
attachments() {
return this.props.item.attachments.length ? <Card data={this.props.item.attachments[0]} /> : null;
}
render() {
const { item } = this.props;
@ -62,21 +41,23 @@ export default class Message extends React.PureComponent {
}
const msg = emojify(item.msg, { output: 'unicode' });
const username = item.alias || item.u.username;
const time = moment(item.ts).format(this.props.Message_TimeFormat);
return (
<View style={[styles.message, extraStyle]}>
<Avatar style={{ marginRight: 10 }} text={item.avatar ? '' : username} size={40} baseUrl={this.props.baseUrl} avatar={item.avatar} />
<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>
{item.alias && <Text style={styles.alias}>@{item.u.username}</Text>}<Text style={styles.time}>{time}</Text>
</View>
<User
onPress={this._onPress}
item={item}
Message_TimeFormat={this.props.Message_TimeFormat}
/>
{this.attachments()}
<Markdown>
{msg}

0
app/components/MessageBox.js → app/containers/MessageBox.js
View File

46
app/components/message/card.js → app/containers/message/Card.js
View File

@ -40,6 +40,7 @@ export default class Cards extends React.PureComponent {
data: PropTypes.object.isRequired,
base: PropTypes.string
}
constructor() {
super();
const user = Meteor.user();
@ -48,6 +49,32 @@ export default class Cards extends React.PureComponent {
this.setState({ img: `${ this.props.base }${ this.props.data.image_url }?rc_uid=${ user._id }&rc_token=${ token }` });
});
}
getImage() {
return (
<TouchableOpacity onPress={() => this._onPressButton()}>
<Card>
<CardImage style={{ width: 256, height: 256 }}>
<CachedImage
style={{ width: 256, height: 256 }}
source={{ uri: encodeURI(this.state.img) }}
/>
</CardImage>
<CardContent>
<Text style={[{ fontSize: 12, alignSelf: 'center', fontStyle: 'italic' }]}>{this.props.data.title}</Text>
<Text style={{ alignSelf: 'center', fontWeight: 'bold' }}>{this.props.data.description}</Text>
</CardContent>
</Card>
</TouchableOpacity>
);
}
getOther() {
return (
<Text style={[{ fontSize: 12, alignSelf: 'center', fontStyle: 'italic' }]}>{this.props.data.title}</Text>
);
}
_onPressButton() {
Navigation.showModal({
screen: 'Photo',
@ -66,23 +93,8 @@ export default class Cards extends React.PureComponent {
animationType: 'slide-up' // 'none' / 'slide-up' , appear animation for the modal (optional, default 'slide-up')
});
}
render() {
return this.state.img ? (
<TouchableOpacity onPress={() => this._onPressButton()}>
<Card>
<CardImage style={{ width: 256, height: 256 }}>
<CachedImage
style={{ width: 256, height: 256 }}
source={{ uri: encodeURI(this.state.img) }}
/>
</CardImage>
<CardContent>
<Text style={[{ fontSize: 12, alignSelf: 'center', fontStyle: 'italic' }]}>{this.props.data.title}</Text>
<Text style={{ alignSelf: 'center', fontWeight: 'bold' }}>{this.props.data.description}</Text>
</CardContent>
</Card>
</TouchableOpacity>
) :
<Text style={[{ fontSize: 12, alignSelf: 'center', fontStyle: 'italic' }]}>{this.props.data.title}</Text>;
return this.state.img ? this.getImage() : this.getOther();
}
}

55
app/containers/message/User.js Normal file
View File

@ -0,0 +1,55 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View, Text, StyleSheet } from 'react-native';
import moment from 'moment';
const styles = StyleSheet.create({
username: {
fontWeight: 'bold'
},
usernameView: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 2
},
alias: {
fontSize: 10,
color: '#888',
paddingLeft: 5
},
time: {
fontSize: 10,
color: '#888',
paddingLeft: 5
}
});
export default class Message extends React.PureComponent {
static propTypes = {
item: PropTypes.object.isRequired,
Message_TimeFormat: PropTypes.string.isRequired,
onPress: PropTypes.func
}
render() {
const { item } = this.props;
const extraStyle = {};
if (item.temp) {
extraStyle.opacity = 0.3;
}
const username = item.alias || item.u.username;
const aliasUsername = item.alias ? (<Text style={styles.alias}>@{item.u.username}</Text>) : null;
const time = moment(item.ts).format(this.props.Message_TimeFormat);
return (
<View style={styles.usernameView}>
<Text onPress={this.props.onPress} style={styles.username}>
{username}
</Text>
{aliasUsername}<Text style={styles.time}>{time}</Text>
</View>
);
}
}

0
app/components/KeyboardView.js → app/presentation/KeyboardView.js
View File

6
app/components/RoomItem.js → app/presentation/RoomItem.js
View File

@ -2,7 +2,7 @@ import React from 'react';
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 Avatar from '../containers/Avatar';
import avatarInitialsAndColor from '../utils/avatarInitialsAndColor';
const styles = StyleSheet.create({
@ -79,14 +79,14 @@ export default class RoomItem extends React.PureComponent {
return null;
}
const { color } = avatarInitialsAndColor(name);
if (type === 'd') {
return (
<Avatar text={name} baseUrl={baseUrl} size={40} borderRadius={20} />
);
}
const { color } = avatarInitialsAndColor(name);
return (
<View style={[styles.iconContainer, { backgroundColor: color }]}>
<MaterialCommunityIcons name={icon} style={styles.icon} />

2
app/views/CreateChannel.js
View File

@ -5,7 +5,7 @@ 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 '../presentation/KeyboardView';
@connect(state => ({
result: state.createChannel

2
app/views/login.js
View File

@ -8,7 +8,7 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
// import * as actions from '../actions';
import * as loginActions from '../actions/login';
import KeyboardView from '../components/KeyboardView';
import KeyboardView from '../presentation/KeyboardView';
// import { Keyboard } from 'react-native'
import styles from './Styles';

6
app/views/room.js
View File

@ -10,9 +10,9 @@ import { messagesRequest } from '../actions/messages';
import realm from '../lib/realm';
import RocketChat from '../lib/rocketchat';
import debounce from '../utils/throttle';
import Message from '../components/Message';
import MessageBox from '../components/MessageBox';
import KeyboardView from '../components/KeyboardView';
import Message from '../containers/Message';
import MessageBox from '../containers/MessageBox';
import KeyboardView from '../presentation/KeyboardView';
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
const styles = StyleSheet.create({

4
app/views/roomsList.js
View File

@ -10,8 +10,8 @@ import * as actions from '../actions';
import * as server from '../actions/connect';
import realm from '../lib/realm';
import RocketChat from '../lib/rocketchat';
import RoomItem from '../components/RoomItem';
import Banner from '../components/banner';
import RoomItem from '../presentation/RoomItem';
import Banner from '../containers/Banner';
const styles = StyleSheet.create({
container: {

2
app/views/serverList.js
View File

@ -9,7 +9,7 @@ import { connect } from 'react-redux';
import { setServer } from '../actions/server';
import realm from '../lib/realm';
import Fade from '../animations/fade';
import Banner from '../components/banner';
import Banner from '../containers/Banner';
const styles = StyleSheet.create({
view: {

2
app/views/serverNew.js
View File

@ -4,7 +4,7 @@ import { Navigation } from 'react-native-navigation';
import { Text, TextInput, View, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import { serverRequest, addServer } from '../actions/server';
import KeyboardView from '../components/KeyboardView';
import KeyboardView from '../presentation/KeyboardView';
const styles = StyleSheet.create({
view: {

2
storybook/stories/Avatar.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import { ScrollView } from 'react-native';
import Avatar from '../../app/components/avatar';
import Avatar from '../../app/containers/Avatar';
export default (
<ScrollView>

2
storybook/stories/Channels/DirectMessage.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import { ScrollView } from 'react-native';
import RoomItem from '../../../app/components/RoomItem';
import RoomItem from '../../../app/presentation/RoomItem';
export default (
<ScrollView>

65
yarn.lock
View File

@ -19,6 +19,15 @@
dependencies:
"@storybook/addons" "^3.2.0"
"@storybook/addon-storyshots@^3.2.6":
version "3.2.8"
resolved "https://registry.yarnpkg.com/@storybook/addon-storyshots/-/addon-storyshots-3.2.8.tgz#f6e9aa6c99a9f437042da49123c0dc75fe51b90f"
dependencies:
babel-runtime "^6.23.0"
global "^4.3.2"
prop-types "^15.5.10"
read-pkg-up "^2.0.0"
"@storybook/addons@^3.2.0":
version "3.2.0"
resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.2.0.tgz#e1446cc5613af179701673276267cee71859bf41"
@ -278,6 +287,10 @@ argparse@^1.0.7:
dependencies:
sprintf-js "~1.0.2"
argv@0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/argv/-/argv-0.0.2.tgz#ecbd16f8949b157183711b1bda334f37840185ab"
aria-query@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.7.0.tgz#4af10a1e61573ddea0cf3b99b51c52c05b424d24"
@ -1072,7 +1085,7 @@ babel-plugin-transform-strict-mode@^6.24.1:
babel-runtime "^6.22.0"
babel-types "^6.24.1"
babel-polyfill@^6.20.0, babel-polyfill@^6.23.0:
babel-polyfill@^6.20.0, babel-polyfill@^6.23.0, babel-polyfill@^6.26.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
dependencies:
@ -1794,6 +1807,14 @@ code-point-at@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
codecov@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/codecov/-/codecov-2.3.0.tgz#ad25a2c6e0442d13740d9d4ddbb9a3e2714330f4"
dependencies:
argv "0.0.2"
request "2.81.0"
urlgrey "0.4.4"
color-convert@^1.3.0, color-convert@^1.9.0:
version "1.9.0"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
@ -5635,20 +5656,12 @@ react-native-action-button@^2.7.2:
dependencies:
prop-types "^15.5.10"
react-native-auto-grow-textinput@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/react-native-auto-grow-textinput/-/react-native-auto-grow-textinput-1.2.0.tgz#575f2e0fc2c49dbd4fa7fd91ba9f82bdf3409b0c"
react-native-autogrow-input@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/react-native-autogrow-input/-/react-native-autogrow-input-0.2.1.tgz#4b0fb440b570efdedfde32666036db666d3ac4ec"
react-native-animatable@^1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.2.3.tgz#d0f0bd694833b934f3aaa1275739228b786ecb4b"
dependencies:
prop-types "^15.5.10"
react-native-autogrow-textinput@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/react-native-autogrow-textinput/-/react-native-autogrow-textinput-4.1.0.tgz#a7e5b17eb3c16ab08e31bbfb88d92488ed87f276"
react-native-card-view@0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/react-native-card-view/-/react-native-card-view-0.0.3.tgz#8db9ac4a3f01d08f8bd9f79343082d87fdf09907"
@ -5657,10 +5670,6 @@ react-native-compat@0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/react-native-compat/-/react-native-compat-0.0.2.tgz#5d7642f3d53ad324a025893be3c66d16a01cda23"
react-native-console-time-polyfill@0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/react-native-console-time-polyfill/-/react-native-console-time-polyfill-0.0.6.tgz#7823d86fe83439c74480d1b124a92b1a78571889"
react-native-dismiss-keyboard@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/react-native-dismiss-keyboard/-/react-native-dismiss-keyboard-1.0.0.tgz#32886242b3f2317e121f3aeb9b0a585e2b879b49"
@ -5690,11 +5699,7 @@ react-native-fetch-blob@^0.10.8:
base-64 "0.1.0"
glob "7.0.6"
react-native-form-generator@^0.9.9:
version "0.9.9"
resolved "https://registry.yarnpkg.com/react-native-form-generator/-/react-native-form-generator-0.9.9.tgz#68aae26d1e8dc3e30073ccd7bb298fbdfdce1bca"
react-native-image-picker@^0.26.3:
react-native-image-picker@^0.26.4:
version "0.26.4"
resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-0.26.4.tgz#e53b0564bef44cb3c96ff81594e1e874daa1f0b3"
@ -5704,6 +5709,10 @@ react-native-img-cache@^1.4.0:
dependencies:
crypto-js "^3.1.9-1"
react-native-loading-spinner-overlay@^0.5.2:
version "0.5.2"
resolved "https://registry.yarnpkg.com/react-native-loading-spinner-overlay/-/react-native-loading-spinner-overlay-0.5.2.tgz#b7bcd277476d596615fd7feee601789f9bdc7acc"
react-native-meteor@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/react-native-meteor/-/react-native-meteor-1.1.0.tgz#55a91efe2d466d3a8cceb5b5419799aeedcd6756"
@ -6064,9 +6073,9 @@ redux-logger@^3.0.6:
dependencies:
deep-diff "^0.3.5"
redux-thunk@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.2.0.tgz#e615a16e16b47a19a515766133d1e3e99b7852e5"
redux-saga@^0.15.6:
version "0.15.6"
resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-0.15.6.tgz#8638dc522de6c6c0a496fe8b2b5466287ac2dc4d"
redux@^3.6.0, redux@^3.7.2:
version "3.7.2"
@ -6156,7 +6165,7 @@ replace-ext@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
request@^2.78.0, request@^2.79.0, request@^2.81.0:
request@2.81.0, request@^2.78.0, request@^2.79.0, request@^2.81.0:
version "2.81.0"
resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
dependencies:
@ -7001,6 +7010,10 @@ url@^0.11.0:
punycode "1.3.2"
querystring "0.2.0"
urlgrey@0.4.4:
version "0.4.4"
resolved "https://registry.yarnpkg.com/urlgrey/-/urlgrey-0.4.4.tgz#892fe95960805e85519f1cd4389f2cb4cbb7652f"
util-deprecate@1.0.2, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@ -7417,4 +7430,4 @@ yauzl@2.4.1:
version "2.4.1"
resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.4.1.tgz#9528f442dab1b2284e58b4379bb194e22e0c4005"
dependencies:
fd-slicer "~1.0.1"
fd-slicer "~1.0.1"