import React, { PropTypes } from 'react'; import Immutable from 'immutable'; import ActionCable from 'actioncable'; import _ from 'lodash'; import BaseComponent from 'libs/components/BaseComponent'; import { injectIntl, intlShape } from 'react-intl'; import SelectLanguage from 'libs/i18n/selectLanguage'; import { defaultMessages, defaultLocale } from 'libs/i18n/default'; import CommentForm from './CommentForm/CommentForm'; import CommentList, { CommentPropTypes } from './CommentList/CommentList'; import css from './CommentBox.scss'; class CommentBox extends BaseComponent { static propTypes = { pollInterval: PropTypes.number.isRequired, actions: PropTypes.shape({ fetchComments: React.PropTypes.function, }), data: PropTypes.shape({ isFetching: React.PropTypes.boolean, isSaving: React.PropTypes.boolean, submitCommentError: React.PropTypes.string, $$comments: React.PropTypes.arrayOf(CommentPropTypes), }).isRequired, intl: intlShape.isRequired, }; constructor() { super(); _.bindAll(this, [ 'refreshComments', ]); this.cable = null; } subscribeChannel() { const { messageReceived } = this.props.actions; const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'; const cableUrl = `${protocol}${window.location.hostname}:${window.location.port}/cable`; this.cable = ActionCable.createConsumer(cableUrl); /* eslint no-console: ["error", { allow: ["log"] }] */ this.cable.subscriptions.create({ channel: 'CommentsChannel' }, { connected: () => { console.log('connected'); }, disconnected: () => { console.log('disconnected'); }, received: (comment) => { messageReceived(Immutable.fromJS(comment)); }, }); } componentDidMount() { const { fetchComments } = this.props.actions; fetchComments(); this.subscribeChannel(); } componentWillUnmount() { this.cable.subscriptions.remove({ channel: 'CommentsChannel' }); } refreshComments() { const { fetchComments } = this.props.actions; fetchComments(); } render() { const { actions, data, intl } = this.props; const { formatMessage } = intl; const cssTransitionGroupClassNames = { enter: css.elementEnter, enterActive: css.elementEnterActive, leave: css.elementLeave, leaveActive: css.elementLeaveActive, }; const locale = data.get('locale') || defaultLocale; /* eslint-disable no-script-url */ return (

{formatMessage(defaultMessages.comments)} {data.get('isFetching') && formatMessage(defaultMessages.loading)}

{ SelectLanguage(actions.setLocale, locale) }
); } } export default injectIntl(CommentBox);