react-comment-form
Version:
A component to render a comment form and Like widget for your website or blog
345 lines (298 loc) • 14.2 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 _Form = require('react-bootstrap/Form');
var _Form2 = _interopRequireDefault(_Form);
var _Button = require('react-bootstrap/Button');
var _Button2 = _interopRequireDefault(_Button);
var _reactGoogleRecaptcha = require('react-google-recaptcha');
var _reactGoogleRecaptcha2 = _interopRequireDefault(_reactGoogleRecaptcha);
var _dompurify = require('dompurify');
var _dompurify2 = _interopRequireDefault(_dompurify);
require('./Comment.css');
var _Like = require('./Like');
var _Like2 = _interopRequireDefault(_Like);
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 CommentFormImpl = function (_React$Component) {
_inherits(CommentFormImpl, _React$Component);
function CommentFormImpl(props) {
_classCallCheck(this, CommentFormImpl);
var _this = _possibleConstructorReturn(this, (CommentFormImpl.__proto__ || Object.getPrototypeOf(CommentFormImpl)).call(this, props));
_this.onVerify = function (recaptchaResponse) {
_this.setState({
verified: false
});
if (recaptchaResponse !== null) {
_this.setState({
verified: true
});
}
};
_this.previewInput = _react2.default.createRef();
_this.state = {
email: '',
message: '',
name: '',
result: '',
verified: false,
like: false,
comments: "",
likes: 0,
messageHeight: 3 };
_this.handleEmailChange = _this.handleEmailChange.bind(_this);
_this.handleNameChange = _this.handleNameChange.bind(_this);
_this.handleMessageChange = _this.handleMessageChange.bind(_this);
_this.handleSubmit = _this.handleSubmit.bind(_this);
_this.handleLikeChange = _this.handleLikeChange.bind(_this);
return _this;
}
_createClass(CommentFormImpl, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.getBlogInfo(this.props.parentId);
}
}, {
key: 'getBlogInfo',
value: function getBlogInfo(blogname) {
var _this2 = this;
var headers = new Headers();
headers.append("Content-Type", "text/json");
var postStatsAPIUrl = process.env.REACT_APP_BLOGMETADATA_URL + '?code=' + process.env.REACT_APP_API_KEY;
var request = JSON.stringify({
"name": blogname
});
var requestOptions = {
method: 'POST',
headers: headers,
body: request,
redirect: 'follow'
};
fetch(postStatsAPIUrl, requestOptions).then(function (response) {
return response.json();
}).then(function (res) {
_this2.setState({ likes: res.likes === undefined ? 0 : res.likes, comments: res.comments });
}).catch(function (error) {
_this2.setState({ result: "An error occurred. Please try again later." });
});
}
}, {
key: 'addLike',
value: function addLike(value, blogname) {
var _this3 = this;
var i = 1;
if (value === false) {
i = -1;
}
var headers = new Headers();
headers.append("Content-Type", "text/json");
var postStatsAPIUrl = process.env.REACT_APP_UPDATELIKES_URL + '?code=' + process.env.REACT_APP_API_KEY;
var request = JSON.stringify({
"name": blogname,
"likes": i
});
var requestOptions = {
method: 'POST',
headers: headers,
body: request,
redirect: 'follow'
};
fetch(postStatsAPIUrl, requestOptions).then(function (response) {
return response.json();
}).then(function (res) {
_this3.setState({ likes: res });
}).catch(function (error) {
_this3.setState({ result: "An error occurred. Please try again later." });
});
if (value === true) {
this.sendEmail("Someone liked this post!");
}
}
}, {
key: 'createNewComment',
value: function createNewComment(blogname) {
var _this4 = this;
var headers = new Headers();
headers.append("Content-Type", "text/json");
var now = new Date();
var datetime = now.toLocaleDateString("en-US") + " at " + now.toLocaleTimeString("en-US");
var message = this.state.message.substring(0, 500);
var comment = '<small>' + this.state.name + ' said...</small><br/><br/>' + message + '<br/><small>' + datetime + '</small><br/><hr/>';
var postStatsAPIUrl = process.env.REACT_APP_COMMENTS_URL + '?code=' + process.env.REACT_APP_API_KEY;
var request = JSON.stringify({
"name": blogname,
"comments": comment
});
var requestOptions = {
method: 'POST',
headers: headers,
body: request,
redirect: 'follow'
};
fetch(postStatsAPIUrl, requestOptions).then(function (response) {
return response.text();
}).then(function (res) {
_this4.setState({ comments: res });
}).catch(function (error) {
_this4.setState({ result: "An error occurred. Please try again later." });
});
}
}, {
key: 'sendEmail',
value: function sendEmail(message) {
var _this5 = this;
if (process.env.REACT_APP_SENDMAIL === "false") {
return;
}
var headers = new Headers();
headers.append("Content-Type", "text/json");
var request = JSON.stringify({
"fromemail": this.state.email,
"from": this.state.name,
"message": 'Parent Id:' + this.props.parentId + '. Message:' + message,
"devflag": "false"
});
var requestOptions = {
method: 'POST',
headers: headers,
body: request,
redirect: 'follow'
};
var url = process.env.REACT_APP_SENDMAIL_URL;
fetch(url + "?code=" + process.env.REACT_APP_SENDMAIL_API_KEY, requestOptions).then(function (response) {
return response.text();
}).catch(function (error) {
_this5.setState({ result: "An error occurred. Please try again later." });
});
}
}, {
key: 'handleLikeChange',
value: function handleLikeChange(value) {
this.setState({ like: value });
this.addLike(value, this.props.parentId);
}
}, {
key: 'handleNameChange',
value: function handleNameChange(event) {
this.setState({ name: event.target.value });
}
}, {
key: 'handleEmailChange',
value: function handleEmailChange(event) {
this.setState({ email: event.target.value });
}
}, {
key: 'handleMessageChange',
value: function handleMessageChange(event) {
this.setState({ message: event.target.value });
this.setState({ messageHeight: document.getElementById('formMessage').scrollHeight });
}
}, {
key: 'handleSubmit',
value: function handleSubmit(event) {
if (this.state.message === "" || this.state.name === "") {
this.setState({ result: 'Please fill in all fields before submitting.' });
return;
}
this.setState({ result: '' });
this.createNewComment(this.props.parentId);
this.sendEmail(this.state.message);
if (this.state.result === '') {
this.setState({
message: '',
email: '',
name: '',
messageHeight: 3
});
this.messageForm.reset();
}
event.preventDefault();
}
}, {
key: 'render',
value: function render() {
var _this6 = this;
return _react2.default.createElement(
'div',
null,
_react2.default.createElement('br', null),
_react2.default.createElement(_Like2.default, { currentLikes: this.state.likes, onLikeChange: this.handleLikeChange }),
_react2.default.createElement('br', null),
_react2.default.createElement(
_Form2.default,
{ id: 'myForm', ref: function ref(form) {
return _this6.messageForm = form;
} },
_react2.default.createElement(
_Form2.default.Group,
{ controlId: 'formName', onChange: this.handleNameChange },
_react2.default.createElement(
_Form2.default.Label,
null,
'Name',
_react2.default.createElement(
'span',
{ className: 'required' },
'*'
)
),
_react2.default.createElement(_Form2.default.Control, { type: 'text', required: true, placeholder: 'Enter name' })
),
_react2.default.createElement(
_Form2.default.Group,
{ controlId: 'formEmail', onChange: this.handleEmailChange },
_react2.default.createElement(
_Form2.default.Label,
null,
'Email'
),
_react2.default.createElement(_Form2.default.Control, { required: false, type: 'email', placeholder: 'Enter email' }),
_react2.default.createElement(
_Form2.default.Text,
{ className: 'text-muted' },
'We\'ll never share your email address with anyone else and it will not be displayed on the site.'
)
),
_react2.default.createElement(
_Form2.default.Group,
{ controlId: 'formMessage', onChange: this.handleMessageChange },
_react2.default.createElement(
_Form2.default.Label,
null,
'Message',
_react2.default.createElement(
'span',
{ className: 'required' },
'*'
)
),
_react2.default.createElement(_Form2.default.Control, { required: true, as: 'textarea', placeholder: 'Message',
rows: Math.round(this.state.messageHeight / 25) })
),
_react2.default.createElement(_reactGoogleRecaptcha2.default, {
sitekey: process.env.REACT_APP_GOOGLE_CAPTCHA_SITE_KEY,
onChange: this.onVerify
}),
_react2.default.createElement('br', null),
_react2.default.createElement(
_Button2.default,
{ variant: 'primary', type: 'submit', onClick: this.handleSubmit, disabled: !this.state.verified },
'Submit'
),
_react2.default.createElement('br', null),
this.state.result,
_react2.default.createElement('br', null),
_react2.default.createElement('div', { className: 'comment', dangerouslySetInnerHTML: { __html: _dompurify2.default.sanitize(this.state.comments) } })
)
);
}
}]);
return CommentFormImpl;
}(_react2.default.Component);
exports.default = CommentFormImpl;