From f12fdb501cbc3431a5d80d5d5f59b26b0bc884d6 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Wed, 29 Nov 2017 13:29:22 -0200 Subject: [PATCH] Refactor --- app/containers/message/Audio.js | 11 +-- app/containers/message/Card.js | 89 -------------------- app/containers/message/Image.js | 97 ++++++++++++++++++++++ app/containers/message/Video.js | 10 +-- app/containers/message/index.js | 14 ++-- app/views/RoomView.js | 5 +- ios/RocketChatRN.xcodeproj/project.pbxproj | 2 - package.json | 1 - 8 files changed, 113 insertions(+), 116 deletions(-) delete mode 100644 app/containers/message/Card.js create mode 100644 app/containers/message/Image.js diff --git a/app/containers/message/Audio.js b/app/containers/message/Audio.js index 852190f7d..09d65d659 100644 --- a/app/containers/message/Audio.js +++ b/app/containers/message/Audio.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import { View, StyleSheet, TouchableOpacity, Text, Easing } from 'react-native'; -import { connect } from 'react-redux'; import Video from 'react-native-video'; import Icon from 'react-native-vector-icons/MaterialIcons'; import Slider from 'react-native-slider'; @@ -52,28 +51,24 @@ const styles = StyleSheet.create({ } }); -@connect(state => ({ - server: state.server.server, - user: state.login.user -})) export default class Audio extends React.PureComponent { static propTypes = { file: PropTypes.object.isRequired, - server: PropTypes.string.isRequired, + baseUrl: PropTypes.string.isRequired, user: PropTypes.object.isRequired } constructor(props) { super(props); - const { server, file, user } = this.props; this.onLoad = this.onLoad.bind(this); this.onProgress = this.onProgress.bind(this); this.onEnd = this.onEnd.bind(this); + const { baseUrl, file, user } = props; this.state = { currentTime: 0, duration: 0, paused: true, - uri: `${ server }${ file.audio_url }?rc_uid=${ user.id }&rc_token=${ user.token }` + uri: `${ baseUrl }${ file.audio_url }?rc_uid=${ user.id }&rc_token=${ user.token }` }; } diff --git a/app/containers/message/Card.js b/app/containers/message/Card.js deleted file mode 100644 index 7ffaa1b24..000000000 --- a/app/containers/message/Card.js +++ /dev/null @@ -1,89 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import Meteor from 'react-native-meteor'; -import { connect } from 'react-redux'; -import { CachedImage } from 'react-native-img-cache'; -import { Text, TouchableOpacity, View } from 'react-native'; -import { - Card, - CardImage, - // CardTitle, - CardContent - // CardAction -} from 'react-native-card-view'; -import RocketChat from '../../lib/rocketchat'; - -import PhotoModal from './PhotoModal'; - - -@connect(state => ({ - base: state.settings.Site_Url, - canShowList: state.login.token.length || state.login.user.token -})) -export default class Cards extends React.PureComponent { - static propTypes = { - data: PropTypes.object.isRequired, - base: PropTypes.string - } - - constructor() { - super(); - const user = Meteor.user(); - this.state = { - modalVisible: false - }; - // TODO - RocketChat.getUserToken().then((token) => { - this.setState({ img: `${ this.props.base }${ this.props.data.image_url }?rc_uid=${ user._id }&rc_token=${ token }` }); - }); - } - - getDescription() { - if (this.props.data.description) { - return {this.props.data.description}; - } - } - - getImage() { - return ( - - this._onPressButton()}> - - - - - - {this.props.data.title} - {this.getDescription()} - - - - this.setState({ modalVisible: false })} - /> - - ); - } - - getOther() { - return ( - {this.props.data.title} - ); - } - - _onPressButton() { - this.setState({ - modalVisible: true - }); - } - - render() { - return this.state.img ? this.getImage() : this.getOther(); - } -} diff --git a/app/containers/message/Image.js b/app/containers/message/Image.js new file mode 100644 index 000000000..c7b3bdbc6 --- /dev/null +++ b/app/containers/message/Image.js @@ -0,0 +1,97 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { CachedImage } from 'react-native-img-cache'; +import { Text, TouchableOpacity, View, StyleSheet } from 'react-native'; +import PhotoModal from './PhotoModal'; + +const styles = StyleSheet.create({ + button: { + flex: 1, + flexDirection: 'column', + height: 320, + borderColor: '#ccc', + borderWidth: 1, + borderRadius: 6 + }, + imageContainer: { + flex: 1, + alignItems: 'center', + justifyContent: 'center' + }, + image: { + width: 256, + height: 256, + resizeMode: 'cover' + }, + labelContainer: { + height: 62, + alignItems: 'center', + justifyContent: 'center' + }, + imageName: { + fontSize: 12, + alignSelf: 'center', + fontStyle: 'italic' + }, + message: { + alignSelf: 'center', + fontWeight: 'bold' + } +}); + +export default class extends React.PureComponent { + static propTypes = { + file: PropTypes.object.isRequired, + baseUrl: PropTypes.string.isRequired, + user: PropTypes.object.isRequired + } + + constructor(props) { + super(props); + const { baseUrl, file, user } = props; + this.state = { + modalVisible: false, + img: `${ baseUrl }${ file.image_url }?rc_uid=${ user.id }&rc_token=${ user.token }` + }; + } + + getDescription() { + if (this.props.file.description) { + return {this.props.file.description}; + } + } + + _onPressButton() { + this.setState({ + modalVisible: true + }); + } + + render() { + return ( + + this._onPressButton()} + style={styles.button} + > + + + + + {this.props.file.title} + {this.getDescription()} + + + this.setState({ modalVisible: false })} + /> + + ); + } +} diff --git a/app/containers/message/Video.js b/app/containers/message/Video.js index 6c99c566a..999d3b5dc 100644 --- a/app/containers/message/Video.js +++ b/app/containers/message/Video.js @@ -25,23 +25,19 @@ const styles = StyleSheet.create({ } }); -@connect(state => ({ - server: state.server.server, - user: state.login.user -})) export default class Video extends React.PureComponent { static propTypes = { file: PropTypes.object.isRequired, - server: PropTypes.string.isRequired, + baseUrl: PropTypes.string.isRequired, user: PropTypes.object.isRequired } constructor(props) { super(props); - const { server, file, user } = this.props; + const { baseUrl, file, user } = props; this.state = { isVisible: false, - uri: `${ server }${ file.video_url }?rc_uid=${ user.id }&rc_token=${ user.token }` + uri: `${ baseUrl }${ file.video_url }?rc_uid=${ user.id }&rc_token=${ user.token }` }; } diff --git a/app/containers/message/index.js b/app/containers/message/index.js index d7d079d77..c33dd5187 100644 --- a/app/containers/message/index.js +++ b/app/containers/message/index.js @@ -4,7 +4,7 @@ import { View, StyleSheet, TouchableOpacity, Text } from 'react-native'; import { connect } from 'react-redux'; import { actionsShow } from '../../actions/messages'; -import Card from './Card'; +import Image from './Image'; import User from './User'; import Avatar from '../Avatar'; import Audio from './Audio'; @@ -44,6 +44,7 @@ export default class Message extends React.Component { baseUrl: PropTypes.string.isRequired, Message_TimeFormat: PropTypes.string.isRequired, message: PropTypes.object.isRequired, + user: PropTypes.object.isRequired, editing: PropTypes.bool, actionsShow: PropTypes.func } @@ -63,16 +64,13 @@ export default class Message extends React.Component { } const file = this.props.item.attachments[0]; + const { baseUrl, user } = this.props; if (file.image_type) { - return ( - - ); + return ; } else if (file.audio_type) { - return