react-cimpress-comment
Version:
Visualizes comment(s) for a particular platform resource
296 lines (251 loc) • 11 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
require('../style/index.css');
var _reactComponents = require('@cimpress/react-components');
var _CommentsClient = require('./clients/CommentsClient');
var _CommentsClient2 = _interopRequireDefault(_CommentsClient);
var _i18n = require('./tools/i18n');
var _reactI18next = require('react-i18next');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var CommentIndicator = function (_React$Component) {
_inherits(CommentIndicator, _React$Component);
function CommentIndicator(props) {
_classCallCheck(this, CommentIndicator);
var _this = _possibleConstructorReturn(this, (CommentIndicator.__proto__ || Object.getPrototypeOf(CommentIndicator)).call(this, props));
_this.state = {
commentCount: 0,
unreadCommentCount: 0,
fetchingComments: false,
fetchingUnreadComments: false,
failedFetchingComments: false,
failedFetchingUnreadComments: false,
errorFetchingComments: null,
errorFetchingUnreadComments: null
};
return _this;
}
_createClass(CommentIndicator, [{
key: 'componentDidMount',
value: function componentDidMount() {
this._ismounted = true;
this.init();
this.fetchCommentCount();
this.fetchUnreadCommentCount();
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps) {
if (this.props.resourceUri !== prevProps.resourceUri || this.props.accessToken !== prevProps.accessToken) {
this.fetchCommentCount();
this.fetchUnreadCommentCount();
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this._ismounted = false;
clearInterval(this._refreshIntervalHandle);
}
}, {
key: 'safeSetState',
value: function safeSetState(data, callback) {
if (this._ismounted) {
this.setState(data, callback);
}
}
}, {
key: 'init',
value: function init() {
var _this2 = this;
clearInterval(this._refreshIntervalHandle);
this._refreshIntervalHandle = setInterval(function () {
_this2.fetchCommentCount();
_this2.fetchUnreadCommentCount();
}, Math.max((this.props.refreshInterval || 60) * 1000, 5000));
}
}, {
key: 'fetchCommentCount',
value: function fetchCommentCount() {
var _this3 = this;
if (!this.props.accessToken) {
return;
}
var client = new _CommentsClient2.default(this.props.accessToken, this.props.resourceUri);
this.safeSetState({
fetchingComments: true
}, function () {
return client.fetchComments().then(function (_ref) {
var responseJson = _ref.responseJson;
_this3.safeSetState({
fetchingComments: false,
commentCount: responseJson.length,
failedFetchingComments: false,
errorFetchingComments: null
});
}).catch(function (err) {
_this3.safeSetState({
fetchingComments: false,
failedFetchingComments: true,
errorFetchingComments: err
});
});
});
}
}, {
key: 'fetchUnreadCommentCount',
value: function fetchUnreadCommentCount() {
var _this4 = this;
if (!this.props.accessToken) {
return;
}
var client = new _CommentsClient2.default(this.props.accessToken, this.props.resourceUri);
this.safeSetState({
fetchingUnreadComments: true
}, function () {
return client.getUserInfo().then(function (_ref2) {
var unreadCount = _ref2.unreadCount;
_this4.safeSetState({
fetchingUnreadComments: false,
unreadCommentCount: unreadCount,
failedFetchingUnreadComments: false,
errorFetchingUnreadComments: null
});
}).catch(function (err) {
_this4.safeSetState({
fetchingUnreadComments: false,
failedFetchingUnreadComments: true,
errorFetchingUnreadComments: err
});
});
});
}
}, {
key: 'onClick',
value: function onClick(e) {
e.preventDefault();
if (this.props.onClick) {
this.props.onClick({
resourceUri: this.props.resourceUri
});
}
}
}, {
key: 'tt',
value: function tt(key) {
// eslint-disable-next-line react/prop-types
var _props = this.props,
t = _props.t,
locale = _props.locale;
if (locale.length > 2) {
locale = locale.substr(0, 2);
}
return t(key, { lng: locale });
}
}, {
key: 'wrapInErrorTooltip',
value: function wrapInErrorTooltip(error, content) {
var errorDetails = error && error.message ? _react2.default.createElement(
'span',
null,
'Error details: ',
_react2.default.createElement('br', null),
error.message
) : null;
var label = _react2.default.createElement(
'span',
null,
this.tt('unable_to_retrieve_comments'),
_react2.default.createElement('br', null),
errorDetails
);
return _react2.default.createElement(
_reactComponents.Tooltip,
{
direction: 'right',
contents: label,
className: 'rcc-tooltip-wide' },
content
);
}
}, {
key: 'renderError',
value: function renderError(error) {
var content = _react2.default.createElement(
'div',
{ className: 'comment-drawer-button' },
_react2.default.createElement('span', { style: { position: 'absolute', color: 'red' }, className: 'fa fa-times' }),
_react2.default.createElement('span', { className: 'fa fa-comments-o' })
);
return this.wrapInErrorTooltip(error, content);
}
}, {
key: 'render',
value: function render() {
if (!this.props.resourceUri) {
return this.renderError(new Error(this.tt('incorrect_component_setup')));
}
if (!this.hasComments) {
return null;
}
var items = null;
if (this.fetching) {
items = _react2.default.createElement('i', { className: 'fa fa-spinner fa-spin' });
} else if (this.state.unreadCommentCount > 0) {
items = this.state.unreadCommentCount;
}
var badge = items ? _react2.default.createElement(
'span',
{ className: 'comment-count-badge ' + (this.state.fetchingData ? 'comment-count-badge-loading' : '') },
items
) : null;
return _react2.default.createElement(
'div',
{ className: 'comment-indicator' },
_react2.default.createElement('span', { className: 'fa fa-comments-o', onClick: this.onClick.bind(this) }),
badge
);
}
}, {
key: 'hasComments',
get: function get() {
return this.state.commentCount > 0 || this.state.unreadCommentCount > 0;
}
}, {
key: 'fetching',
get: function get() {
return this.state.fetchingComments || this.state.fetchingUnreadComments;
}
}, {
key: 'failedFetching',
get: function get() {
return this.state.failedFetchingComments || this.state.failedFetchingUnreadComments;
}
}, {
key: 'errorFetching',
get: function get() {
return this.state.errorFetchingComments || this.state.errorFetchingUnreadComments;
}
}]);
return CommentIndicator;
}(_react2.default.Component);
CommentIndicator.propTypes = {
locale: _propTypes2.default.string,
accessToken: _propTypes2.default.string.isRequired,
resourceUri: _propTypes2.default.string.isRequired,
refreshInterval: _propTypes2.default.number,
onClick: _propTypes2.default.func
};
CommentIndicator.defaultProps = {
locale: 'en'
};
exports.default = (0, _reactI18next.translate)('translations', { i18n: (0, _i18n.getI18nInstance)() })(CommentIndicator);