I have a chatbox component which uses a conditional statement in render.
import React, { Component } from 'react';
import { render } from 'react-dom';
import ChatHeader from './ChatHeader.jsx';
import Messages from './Messages.jsx';
import ChatFooter from './ChatFooter.jsx';
import Conversations from './Conversations.jsx';
export default class ChatBox extends Component {
constructor(props) {
super(props);
}
render () {
if (!this.props.conversation) {
return (<div> Loading Chatbox</div>);
}
console.log(this.props.conversation);
return (
<div className="chat-container">
<ChatHeader name="Manu" />
<Messages />
<ChatFooter
sendMessage={this.sendMessage}
conversation={this.props.conversation}
/>
</div>
);
}
// }
}
When the
if (!this.props.conversation) {
return (<div> Loading Chatbox</div>);
}
part is not commented out, no subscriptions work in the Messages component. [The onStop callback gets called automatically].
But when I comment out said part, subscriptions work just fine. Why is this?
Here is the Messages component.
import React, { Component } from 'react';
import ReactDOM, { render } from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import Message from './Message.jsx';
export default class Messages extends TrackerReact(Component) {
constructor (props) {
super(props);
console.log('constructor called');
this.state = {
subscription: {
messages: Meteor.subscribe('allMessagesForConversation', {
onReady: function () {
console.log('ready');
},
onStop: function () {
console.log('onError', arguments);
},
}),
},
allStudents: Meteor.subscribe('allStudents'),
};
}
messages() {
return Meteor.messages.find({
conversationId: this.props.conversationId,
}).fetch();
}
// componentWillUnmount() {
// this.state.subscription.messages.stop();
// }
render () {
console.log(this.state.subscription.messages);
var inlineStyles = {
height: '300px',
overflowY: 'scroll',
};
// Loop through the list of chats and create array of Row components
console.log(this.props.conversationId);
var Messages = this.messages().map(function (message) {
return (
<Message key={message._id}
username={message.user().username}
// time={message.timestamp()}
message={message.body}
/>
);
});
return (
<div style={inlineStyles}>
{Messages}
assdfdsd
</div>
);
}
}
I can verify that when I render Messages component outside the Chatbox, everything works just fine too. Kindly help!