@r3l/app/lib/modules/comment/web/commentForm.component.js

Relevant App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CommentFormComponent = CommentFormComponent;
exports.default = void 0;

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _reactRedux = require("react-redux");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _web = require("../../styled/web");

var _utils = require("../../../utils");

var _styles = require("../../../styles");

var _UAvatar = _interopRequireDefault(require("../../user/UAvatar.component"));

var _styled = require("../../styled");

var _comment = require("../comment.actions");

var _history = _interopRequireDefault(require("../../navigation/history"));

var _textAreaWithMention = _interopRequireDefault(require("../../text/web/textAreaWithMention"));

var _hooks = require("../../createPost/hooks");

var _ratelimitWarning = require("../ratelimitWarning");

var _ImageUpload = require("../../createPost/image/ImageUpload.web");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

CommentFormComponent.propTypes = {
  edit: _propTypes.default.bool,
  comment: _propTypes.default.object,
  cancel: _propTypes.default.func,
  buttonText: _propTypes.default.string,
  parentPost: _propTypes.default.object,
  parentComment: _propTypes.default.object,
  nestingLevel: _propTypes.default.number,
  additionalNesting: _propTypes.default.number,
  autoFocus: _propTypes.default.bool,
  screenSize: _propTypes.default.number
};

function CommentFormComponent(_ref) {
  var comment = _ref.comment,
      edit = _ref.edit,
      cancel = _ref.cancel,
      nestingLevel = _ref.nestingLevel,
      additionalNesting = _ref.additionalNesting,
      autoFocus = _ref.autoFocus,
      parentComment = _ref.parentComment,
      parentPost = _ref.parentPost,
      buttonText = _ref.buttonText,
      sx = _ref.sx;
  var auth = (0, _reactRedux.useSelector)(function (state) {
    return state.auth;
  });
  var screenSize = (0, _reactRedux.useSelector)(function (state) {
    return state.navigation.screenSize;
  });

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      focused = _useState2[0],
      setFocused = _useState2[1];

  var dispatch = (0, _reactRedux.useDispatch)();
  var initalText = edit ? comment.body : '';

  var _useState3 = (0, _react.useState)(initalText),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      commentText = _useState4[0],
      setCommentText = _useState4[1];

  var textArea = (0, _react.useRef)();

  var handleChange = function handleChange(e) {
    return setCommentText(e.target.value);
  };

  var addImage = function addImage(image) {
    return setCommentText(commentText + image);
  };

  var authError = (0, _hooks.useCommunityAuth)(); // TODO - non-shift enter?
  // handleKeydown(e) {
  //  if (e.keyCode == 13 && e.shiftKey == false) {
  //  }
  // }

  function _createComment() {
    return _createComment2.apply(this, arguments);
  }

  function _createComment2() {
    _createComment2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
      var _getMentionsAndTags, mentions, tags, commentObj, newComment;

      return _regenerator.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (auth.isAuthenticated) {
                _context.next = 2;
                break;
              }

              return _context.abrupt("return", _utils.alert.browserAlerts.alert('Please log in to post comments'));

            case 2:
              if (!(!commentText || !commentText.length)) {
                _context.next = 4;
                break;
              }

              return _context.abrupt("return", _utils.alert.browserAlerts.alert('no comment'));

            case 4:
              _getMentionsAndTags = getMentionsAndTags(), mentions = _getMentionsAndTags.mentions, tags = _getMentionsAndTags.tags;
              commentObj = {
                parentPost: parentPost._id,
                parentComment: parentComment ? parentComment._id : null,
                linkParent: parentPost.type === 'link' ? parentPost._id : null,
                text: commentText.trim(),
                tags: tags,
                mentions: mentions,
                metaPost: parentPost.metaPost
              };
              setCommentText('');
              _context.next = 9;
              return dispatch((0, _comment.createComment)(commentObj));

            case 9:
              newComment = _context.sent;

              if (newComment) {
                _context.next = 14;
                break;
              }

              setCommentText(commentText);
              if (textArea.current) textArea.current.focus();
              return _context.abrupt("return", null);

            case 14:
              _cancel();

              return _context.abrupt("return", _history.default.push("/".concat(newComment.community, "/post/").concat(newComment.parentPost, "/").concat(newComment._id)));

            case 16:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));
    return _createComment2.apply(this, arguments);
  }

  function _updateComment() {
    return _updateComment2.apply(this, arguments);
  }

  function _updateComment2() {
    _updateComment2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
      var _getMentionsAndTags2, mentions, originalText, newComment;

      return _regenerator.default.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              if (!(comment.body === commentText)) {
                _context2.next = 2;
                break;
              }

              return _context2.abrupt("return", _cancel());

            case 2:
              _getMentionsAndTags2 = getMentionsAndTags(), mentions = _getMentionsAndTags2.mentions;
              originalText = comment.body;
              comment.body = commentText;
              comment.mentions = mentions;
              _context2.next = 8;
              return dispatch((0, _comment.updateComment)(comment));

            case 8:
              newComment = _context2.sent;

              if (!newComment) {
                _context2.next = 11;
                break;
              }

              return _context2.abrupt("return", _cancel());

            case 11:
              comment.body = originalText;

              _utils.alert.browserAlerts.alert('Error updating comment');

              return _context2.abrupt("return", null);

            case 14:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2);
    }));
    return _updateComment2.apply(this, arguments);
  }

  function getMentionsAndTags() {
    var words = _utils.text.getWords(commentText);

    var tags = _utils.text.getTags(words);

    var mentions = _utils.text.getMentions(words);

    return {
      mentions: mentions,
      tags: tags
    };
  }

  function _cancel(e) {
    var _textArea$current;

    e && e.preventDefault();
    setCommentText('');
    textArea === null || textArea === void 0 ? void 0 : (_textArea$current = textArea.current) === null || _textArea$current === void 0 ? void 0 : _textArea$current.blur();
    setFocused(false);
    cancel && cancel();
  }

  var handleSubmit = function handleSubmit() {
    // e.preventDefault();
    if (edit) return _updateComment();
    return _createComment();
  };

  if (!auth.isAuthenticated) return null;
  var backgroundColor = !edit && focused ? _styles.colors.secondaryBG : 'transparent';
  var paddingTop = !edit && focused ? 4 : 0;
  var postType = parentComment ? 'comment' : 'post';
  return /*#__PURE__*/_react.default.createElement(_styled.Spacer, {
    sx: _objectSpread(_objectSpread({
      flexDirection: 'row'
    }, sx), {}, {
      pt: paddingTop,
      bg: backgroundColor
    }),
    nestingLevel: screenSize ? 0 : nestingLevel,
    additionalNesting: screenSize ? 0 : additionalNesting,
    screenSize: screenSize
  }, authError && focused ? authError.component : /*#__PURE__*/_react.default.createElement(_styled.View, {
    sx: {
      flexDirection: 'column',
      flex: 1,
      position: 'relative'
    }
  }, focused && !edit && /*#__PURE__*/_react.default.createElement(_styled.Box, {
    sx: {
      mb: 2
    }
  }, /*#__PURE__*/_react.default.createElement(_ratelimitWarning.RateLimitWarning, {
    postType: postType
  })), /*#__PURE__*/_react.default.createElement(_textAreaWithMention.default, {
    textArea: textArea,
    value: commentText,
    autoFocus: autoFocus,
    leftPadding: focused ? 2 : 6,
    onChange: handleChange,
    setFocused: setFocused,
    ImageUpload: focused ? function () {
      return /*#__PURE__*/_react.default.createElement(_ImageUpload.ImageUpload, {
        insertImages: addImage
      });
    } : function () {
      return null;
    } // withPreview
    ,
    placeholder: 'Enter comment...',
    focused: focused,
    minheight: focused ? 9 : 0,
    sx: {
      flex: 1
    }
  }, focused ? null : /*#__PURE__*/_react.default.createElement(_styled.View, {
    sx: {
      flex: 1,
      p: 2,
      position: 'absolute',
      left: 0,
      top: 0,
      zIndex: 10
    }
  }, /*#__PURE__*/_react.default.createElement(_UAvatar.default, {
    user: auth.user,
    size: 4,
    noLink: true
  }))), focused || commentText ? /*#__PURE__*/_react.default.createElement(_styled.View, {
    sx: {
      justifyContent: 'flex-end',
      flexDirection: 'row'
    }
  }, /*#__PURE__*/_react.default.createElement(_web.Button, {
    onMouseDown: _cancel,
    onTouchStart: _cancel,
    sx: {
      bg: 'transparent',
      color: 'grey',
      px: 4,
      minWidth: 0,
      mr: 1
    } // textSx={{ color: 'white' }}
    ,
    disabled: !auth.isAuthenticated
  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_web.Button, {
    onMouseDown: handleSubmit,
    onTouchStart: handleSubmit,
    disabled: !auth.isAuthenticated,
    sx: {
      px: 4,
      minWidth: 0
    }
  }, buttonText)) : null));
}

var _default = /*#__PURE__*/(0, _react.memo)(CommentFormComponent);

exports.default = _default;
//# sourceMappingURL=commentForm.component.js.map