Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- import { StyleSheet } from 'react-native';
- import Toolbar from './toolbar/Toolbar';
- import PropTypes from 'prop-types';
- import { connect } from 'react-redux';
- import { addMessage, clearMessages, getLastMessage, getMessages } from '../../../../actions';
- import { pop } from '../../../../NavigationService';
- import firebase from 'react-native-firebase';
- import FastImage from 'react-native-fast-image';
- import bStyles from '../../../general/BaseStyles';
- import imgs from '../../../../assets/image/imgs';
- import { Bubble, Composer, Day, GiftedChat, InputToolbar, LoadEarlier, Send, Time } from 'react-native-gifted-chat';
- import i18n from 'i18n-js';
- import { SafeAreaView } from 'react-navigation';
- import DefaultPreference from 'react-native-default-preference';
- import getPlatformFont from '../../../../assets/font/getFontByPlatform';
- class ChatScreen extends React.Component {
- notificationListener;
- constructor(props) {
- super(props);
- this.state = {
- userId: -1,
- sentMessages: [],
- };
- }
- componentWillMount() {
- DefaultPreference.get('user_id')
- .then(result => this.setState({ userId: Number.parseInt(result) }))
- .catch();
- }
- componentDidMount() {
- const orderId = this.props.navigation.getParam('orderId', -1);
- this.props.getMessages(orderId);
- this.notificationListener = firebase.notifications().onNotification(notification => {
- const {
- _data: {
- order_id,
- type,
- },
- } = notification;
- type === 'new_message' && this.props.getLastMessage(order_id);
- });
- }
- componentWillReceiveProps(nextProps) {
- const orderId = this.props.navigation.getParam('orderId', -1);
- const { sentMessageId } = this.props;
- const {
- sentMessageId: nextSentMessageId,
- } = nextProps;
- nextSentMessageId && sentMessageId !== nextSentMessageId && this.props.getLastMessage(orderId);
- }
- componentWillUnmount() {
- this.props.clearMessages();
- this.notificationListener && this.notificationListener();
- }
- render() {
- const name = this.props.navigation.getParam('name', '');
- const avatarUrl = this.props.navigation.getParam('avatarUrl', '');
- const {
- loading,
- loadedAllData,
- messages,
- } = this.props;
- const {
- userId,
- } = this.state;
- return (
- <SafeAreaView style={styles.container}>
- <FastImage style={bStyles.imageBackground}
- source={imgs.background}/>
- <Toolbar onBackPress={this.handleBackPress}
- title={name}
- avatarUrl={avatarUrl}/>
- <GiftedChat
- messages={messages}
- listViewProps={{
- initialNumToRender: 20,
- }}
- renderAvatar={null}
- onSend={this.handleSend}
- user={{ _id: userId }}
- isAnimated={false}
- keyboardShouldPersistTaps={'never'}
- placeholder={i18n.t('Type your message here')}
- loadEarlier={!loadedAllData}
- onLoadEarlier={this.handleLoadEarlier}
- renderDay={this.renderDay}
- isLoadingEarlier={loading}
- renderBubble={this.renderBubble}
- textInputProps={{
- autoCapitalize: 'none',
- keyboardAppearance: 'dark',
- autoCorrect: false,
- }}
- renderInputToolbar={this.renderInputToolbar}
- renderSend={this.renderSend}
- renderComposer={this.renderComposer}
- renderTime={this.renderTime}
- renderLoadEarlier={this.renderLoadEarlier}/>
- </SafeAreaView>
- );
- }
- handleBackPress = () => {
- pop();
- };
- handleSend = (messages) => {
- this.setState({
- sentMessages: messages,
- });
- messages.forEach(message => {
- const orderId = this.props.navigation.getParam('orderId', -1);
- const { text } = message;
- this.props.addMessage(orderId, text);
- });
- };
- handleLoadEarlier = () => {
- const orderId = this.props.navigation.getParam('orderId', -1);
- this.props.getMessages(orderId);
- };
- renderLoadEarlier = props => {
- return (
- <LoadEarlier {...props}
- textStyle={styles.loadEarlierText}/>
- );
- };
- renderBubble = props => {
- return (
- <Bubble
- {...props}
- wrapperStyle={{
- left: styles.left,
- right: styles.right,
- }}
- textStyle={{
- right: styles.bubbleRightText,
- left: styles.bubbleLeftText,
- }}
- />
- );
- };
- renderDay = props => {
- return (
- <Day
- {...props}
- textStyle={styles.dayText}/>
- );
- };
- renderTime = props => {
- return (
- <Time {...props}
- textStyle={{
- left: styles.timeTextLeft,
- right: styles.timeTextRight,
- }}/>
- );
- };
- renderInputToolbar = props => {
- return (
- <InputToolbar
- {...props}
- containerStyle={styles.inputContainer}
- primaryStyle={styles.inputPrimary}/>
- );
- };
- renderSend = props => {
- return (
- <Send
- {...props}
- containerStyle={styles.sendContainer}
- children={<FastImage source={imgs.send}
- style={styles.send}/>}/>
- );
- };
- renderComposer = props => {
- return (
- <Composer {...props}
- textInputStyle={styles.composerText}
- placeholderTextColor={'grey'}/>
- );
- };
- }
- ChatScreen.propTypes = {
- orderId: PropTypes.number,
- name: PropTypes.string,
- avatarUrl: PropTypes.string,
- };
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: 'rgba(0, 0, 0, 0.9)',
- },
- left: {
- backgroundColor: '#e5e6ea',
- },
- right: {
- backgroundColor: '#d1b624',
- },
- inputContainer: {
- backgroundColor: 'rgba(0, 0, 0, 0.9)',
- minHeight: 44,
- },
- inputPrimary: {
- backgroundColor: '#f9f9f9',
- marginVertical: 4,
- marginHorizontal: 16,
- borderRadius: 24,
- alignItems: 'center',
- },
- sendContainer: {
- width: 36,
- height: 36,
- borderRadius: 18,
- backgroundColor: '#f9f9f9',
- alignItems: 'center',
- justifyContent: 'center',
- },
- send: {
- width: 20,
- height: 20,
- },
- composerText: {
- color: 'black',
- fontSize: 14,
- ...getPlatformFont('open_sans_regular'),
- },
- timeTextLeft: {
- color: 'grey',
- fontSize: 10,
- ...getPlatformFont('open_sans_regular'),
- },
- timeTextRight: {
- color: 'white',
- fontSize: 10,
- ...getPlatformFont('open_sans_regular'),
- },
- dayText: {
- color: 'grey',
- fontSize: 13,
- ...getPlatformFont('open_sans_bold'),
- },
- bubbleLeftText: {
- color: 'black',
- fontSize: 14,
- ...getPlatformFont('open_sans_regular'),
- },
- bubbleRightText: {
- color: 'white',
- fontSize: 14,
- ...getPlatformFont('open_sans_regular'),
- },
- loadEarlierText: {
- color: 'white',
- fontSize: 12,
- ...getPlatformFont('open_sans_bold'),
- },
- });
- const mapStateToProps = state => {
- return {
- messages: state.messages.data,
- sentMessageId: state.addMessage.data.message_id,
- loading: state.messages.isLoading,
- loadedAllData: state.messages.loadedAllData,
- };
- };
- const mapDispatchToProps = {
- getMessages,
- addMessage,
- clearMessages,
- getLastMessage,
- };
- export default connect(mapStateToProps, mapDispatchToProps)(ChatScreen);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement