Professional Documents
Culture Documents
Conv 2
Conv 2
const mapsDispatchToProps = {
getConversation: conversationActions.getConversation,
sendMessage: conversationActions.sendMessage,
}
interface CustomChat {
activeChat: number;
getConversation: Function;
sendMessage: Function;
chats: Array<any>;
authenticatedUser: any;
}
state = {
currentMessageLength: 0,
message: '',
maxMessageLength: 160
}
static propTypes = {
activeChat: propTypes.number.isRequired
}
static navigationOptions: ({ title, subtitle }: { title: any; subtitle: any; })
=> { headerTitle: JSX.Element; headerStyle: { backgroundColor: string; };
headerBackTitleVisible: boolean; };
componentDidMount() {
if (this.props.activeChat) {
// conversationActions.openConversation(173);
// Grab particular chat here
}
}
componentDidUpdate(prevProps: any) {
if (this.props.activeChat > -1 && prevProps.activeChat !==
this.props.activeChat) {
this.props.getConversation(this.props.activeChat);
}
}
handleMessageSend = () => {
if (this.props.activeChat !== null) {
this.props.sendMessage(this.props.activeChat, this.state.message);
this.setState({ currentMessageLength: 0, message: '' });
}
}
render() {
const activeChat = this.props.activeChat ? this.props.chats.find(chat =>
chat.id === this.props.activeChat) : false;
// console.log(activeChat);
return (
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
<ScrollView
style={styles.messages}
ref={ref => this.scrollView = ref}
onContentSizeChange={(contentWidth, contentHeight)=>{
this.scrollView.scrollToEnd({animated: true});
}}
>
{activeChat && activeChat.messages && activeChat.messages.map((msg:
any, key: number) => (
<View style={styles.message} key={key}>
<Text style={{...styles.sent_at, ...(msg.sender.internal &&
msg.sender.id === this.props.authenticatedUser.id ? styles.sent_at_me :
{})}}>{moment(msg.sent_at).format('D.MM.YYYY, HH:mm')}</Text>
<Text style={{...styles.quote, ...(msg.sender.internal &&
msg.sender.id === this.props.authenticatedUser.id ? styles.message_me :
styles.message_other)}}>{msg.sender.first_name} {msg.sender.last_name}:
{msg.text_content}</Text>
</View>
))}
</ScrollView>
<View style={styles.footer}>
<View style={styles.footer_attach}>
<Icon name="add-circle-outline" onPress={() => { }} />
</View>
<View style={styles.footer_text}>
<TextInput
style={styles.compose_text}
onChangeText={(message) => this.setState({ message })}
value={this.state.message}
/>
</View>
<View style={styles.footer_send}>
<Icon
name="send"
color="#fff"
containerStyle={{
backgroundColor: '#0077c8',
// borderRadius: '10',
padding: 8
}}
onPress={this.handleMessageSend}
/>
</View>
</View>
</KeyboardAvoidingView>)
}
}
{/* <Text>{this.state.currentMessageLength}/{this.state.maxMessageLength}</Text> */
}
},
footer: {
height: 50,
flexDirection: 'row',
width: '100%',
borderTopWidth: 1,
borderTopColor: '#f3f3f3'
},
footer_attach: {
width: 50,
flex: 1,
},
footer_text: {
flex: 9,
borderBottomWidth: 1,
// borderBottom:
},
footer_send: {
width: 50,
flex: 2
},
compose_text: {
}
});