at the end of the day, it was inevitable

2022-12-09 08:36:26 -06:00
commit 1218570914
1768 changed files with 887087 additions and 0 deletions
@@ -0,0 +1,139 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate, Interpolate } from 'react-i18next';
+import TimeAgo from 'timeago-react';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader
+} from 'reactstrap';
+
+const initCharactersCount = 5000;
+
+export class CommentArticlePopup extends React.Component {
+  static propTypes = {
+    article: PropTypes.object.isRequired,
+    comment: PropTypes.object,
+    commentArticle: PropTypes.func.isRequired,
+    updateComment: PropTypes.func.isRequired,
+    hidePopup: PropTypes.func.isRequired,
+    i18n: PropTypes.object.isRequired,
+    t: PropTypes.func.isRequired
+  };
+
+  constructor(props) {
+    super(props);
+    const content = props.comment ? props.comment.content : '';
+    this.state = {
+      charactersCount: initCharactersCount - content.length,
+      title: props.comment ? props.comment.title : '',
+      comment: content
+    };
+  }
+
+  handleTitleChange = (e) => {
+    const { value } = e.target;
+    this.setState({ title: value });
+  };
+
+  hidePopup = () => {
+    this.props.hidePopup();
+  };
+
+  onSubmit = () => {
+    const newComment = {
+      title: this.state.title,
+      content: this.state.comment
+    };
+    if (this.props.comment) {
+      //edit exisitng
+      this.props.updateComment(newComment, this.props.article.id);
+    } else {
+      //create new comment
+      this.props.commentArticle(newComment, this.props.article.id);
+    }
+    this.hidePopup();
+  };
+
+  onChangeComment = (e) => {
+    const charactersCount = initCharactersCount - e.target.value.length;
+
+    if (charactersCount >= 0) {
+      this.setState({
+        charactersCount: charactersCount,
+        comment: e.target.value
+      });
+    }
+  };
+
+  render() {
+    const { t, i18n, article, comment } = this.props;
+    const popupTitle = comment
+      ? t('searchTab.commentPopup.editUserComment')
+      : t('searchTab.commentPopup.addUserComment');
+
+    return (
+      <Modal isOpen toggle={this.hidePopup} backdrop="static">
+        <ModalHeader toggle={this.hidePopup}>{popupTitle}</ModalHeader>
+        <ModalBody>
+          <div className="mb-3">
+            <a
+              className="font-size-lg"
+              href={article.permalink}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {article.title}
+            </a>
+            <p>{article.author.name}</p>
+            <p className="font-size-xs text-muted">
+              <TimeAgo
+                datetime={article.published}
+                locale={i18n.language}
+                opts={{ minInterval: 30 }}
+              />
+            </p>
+          </div>
+
+          <Input
+            value={this.state.title}
+            type="text"
+            className="mb-2"
+            onChange={this.handleTitleChange}
+            placeholder={t('searchTab.commentPopup.inputTitlePlaceholder')}
+          />
+
+          <Input
+            rows="3"
+            type="textarea"
+            value={this.state.comment}
+            onChange={this.onChangeComment}
+            placeholder={t('searchTab.commentPopup.commentPlanceholder')}
+          />
+
+          <p className="font-size-xs text-muted text-right mt-1">
+            <Interpolate
+              i18nKey="searchTab.commentPopup.charactersLeft"
+              count={this.state.charactersCount}
+            />
+          </p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="light" onClick={this.hidePopup}>
+            {t('common:commonWords.Cancel')}
+          </Button>
+          <Button color="primary" onClick={this.onSubmit}>
+            {t('common:commonWords.submit')}
+          </Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+export default translate(['tabsContent', 'common'], { wait: true })(
+  CommentArticlePopup
+);