@r3l/app/lib/modules/createPost/createPost.container.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.default = CreatePostContainer;

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

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

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

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

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

var _createPost = require("./createPost.actions");

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

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

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

var _avatarbox = _interopRequireDefault(require("../user/avatarbox.component"));

var _postinfo = _interopRequireDefault(require("../post/postinfo.component"));

var _text = require("../../utils/text");

var _community = require("../community/community.selectors");

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

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

var _tags = _interopRequireDefault(require("./tags.input"));

var _footer = _interopRequireDefault(require("./footer"));

var _hooks2 = require("./hooks");

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

var _ImageUpload2 = require("./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; }

var PLACEHOLDER_URL = "What's relevant?  Paste article URL.";
var PLACEHOLDER_TEXT = 'Add your commentary, opinion, summary or a relevant quote from the article';
var MD_PLACEHOLDER = 'Add text or paste a url here.\n\nYou can use Markdown:\n# Title\n**bold**\n`inline code`\n```code block```';
CreatePostContainer.propTypes = {
  close: _propTypes.default.func
};

function CreatePostContainer(_ref) {
  var close = _ref.close;
  var dispatch = (0, _reactRedux.useDispatch)();
  var user = (0, _reactRedux.useSelector)(function (state) {
    return state.auth.user;
  });
  var postData = (0, _reactRedux.useSelector)(function (state) {
    return state.createPost;
  });
  var community = (0, _community.useCommunity)();
  var textArea = (0, _react.useRef)();
  var authError = (0, _hooks2.useCommunityAuth)();
  var title = postData.title,
      channel = postData.channel,
      postBody = postData.postBody,
      urlPreview = postData.urlPreview,
      linkPreview = postData.linkPreview,
      selectedTags = postData.selectedTags,
      _postData$allTags = postData.allTags,
      allTags = _postData$allTags === void 0 ? [] : _postData$allTags,
      postUrl = postData.postUrl,
      loadingPreview = postData.loadingPreview,
      _postData$postTags = postData.postTags,
      postTags = _postData$postTags === void 0 ? [] : _postData$postTags,
      disableUrl = postData.disableUrl;

  var setState = function setState(state) {
    dispatch((0, _createPost.setCreatePostState)(_objectSpread(_objectSpread({}, postData), state)));
  }; // set our suggested topic from the community


  (0, _react.useEffect)(function () {
    setState({
      allTags: community.topics
    });
  }, [community.topics]); // eslint-disable-line
  // create url preview

  var prevUrl = (0, _hooks.usePrevious)(postUrl);
  var createPreview = (0, _hooks2.usePreview)(setState);

  var clearUrl = function clearUrl() {
    var shouldDisableUrl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
    setState({
      url: null,
      postUrl: null,
      urlPreview: null,
      loadingPreview: false,
      postTags: [],
      disableUrl: shouldDisableUrl && true
    });
  };

  (0, _react.useEffect)(function () {
    var shouldDisableUrl = false;
    if (!postUrl && urlPreview) clearUrl(shouldDisableUrl);else if (postUrl && prevUrl !== postUrl && !loadingPreview && !disableUrl) {
      createPreview({
        postUrl: postUrl,
        postBody: postBody
      });
    }
  }, [postUrl]); // eslint-disable-line

  var enableUrl = function enableUrl() {
    return setState({
      disableUrl: false
    });
  };

  var prevDisableUrl = (0, _hooks.usePrevious)(disableUrl); // process body on next tick once we enable url

  (0, _react.useEffect)(function () {
    prevDisableUrl && !disableUrl && handleBodyChange({
      target: {
        value: postBody
      }
    }) && textArea.current.focus();
  }, [disableUrl]); // eslint-disable-line

  var handleBlur = function handleBlur() {
    var _getTextData = (0, _text.getTextData)(postBody),
        tags = _getTextData.tags,
        mentions = _getTextData.mentions;

    var mergedTags = (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(selectedTags), (0, _toConsumableArray2.default)(tags))));
    setState({
      mentions: mentions,
      selectedTags: mergedTags
    });
  };

  var handleBodyChange = function handleBodyChange(e) {
    var newBody = e.target.value; // TODO this may be expensive to do on every render we can skip some of it...

    var _getTextData2 = (0, _text.getTextData)(newBody),
        url = _getTextData2.url;

    var newUrl = url && url.url; // don't process url until we see a blank space or user pastes it

    var isPaste = newBody.length > postBody + 4;
    var doneTypingUrl = url && url.lastIndex !== newBody.length;
    var shouldUpdateUrl = doneTypingUrl || isPaste;
    var addUrlToState = !disableUrl && shouldUpdateUrl && {
      postUrl: newUrl
    };
    setState(_objectSpread({
      postBody: newBody
    }, addUrlToState));
  };

  var addTextFromLink = function addTextFromLink() {
    return handleBodyChange({
      target: {
        value: "".concat(postBody, "\n>\"").concat(_utils.text.stripHTML(urlPreview.description), "\"")
      }
    });
  };

  var addImage = function addImage(image) {
    setState({
      postBody: postBody + image
    });
  };

  var showPasteButton = urlPreview && urlPreview.description;
  var placeholder = urlPreview ? PLACEHOLDER_TEXT : PLACEHOLDER_URL;
  var renderTags = postBody || postUrl;
  var suggestedTags = (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(allTags), (0, _toConsumableArray2.default)(postTags))));
  if (authError) return authError.component;
  return /*#__PURE__*/_react.default.createElement(_styled.Box, null, /*#__PURE__*/_react.default.createElement(_styled.Row, {
    sx: {
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_avatarbox.default, {
    user: user,
    size: 5
  })), channel && /*#__PURE__*/_react.default.createElement(_web.Input, {
    onChange: function onChange(e) {
      return setState({
        title: e.target.value
      });
    },
    value: title,
    name: "title",
    sx: {
      mt: 2
    },
    type: "text",
    placeholder: "Title"
  }), /*#__PURE__*/_react.default.createElement(_styled.Box, {
    sx: {
      mt: 2
    }
  }, /*#__PURE__*/_react.default.createElement(_styled.Box, {
    sx: {
      mb: 2
    }
  }, /*#__PURE__*/_react.default.createElement(_ratelimitWarning.RateLimitWarning, {
    postType: 'post'
  })), /*#__PURE__*/_react.default.createElement(_textAreaWithMention.default, {
    value: postBody,
    onChange: handleBodyChange,
    placeholder: community.defaultPost === 'text' ? MD_PLACEHOLDER : placeholder,
    withPreview: true,
    textArea: textArea,
    minheight: 22 * 8,
    onBlur: handleBlur,
    onSubmit: handleBlur,
    ImageUpload: function ImageUpload() {
      return /*#__PURE__*/_react.default.createElement(_ImageUpload2.ImageUpload, {
        insertImages: addImage
      });
    },
    PasteTextButton: function PasteTextButton() {
      return showPasteButton ? /*#__PURE__*/_react.default.createElement(_PasteTextButton, {
        addTextFromLink: addTextFromLink
      }) : null;
    }
  })), /*#__PURE__*/_react.default.createElement(_styled.Box, {
    sx: {
      mt: 1
    }
  }), /*#__PURE__*/_react.default.createElement(PostPreview, {
    clearUrl: clearUrl,
    urlPreview: urlPreview,
    linkPreview: linkPreview,
    PostPreview: PostPreview,
    enableUrl: enableUrl,
    disableUrl: disableUrl
  }), renderTags && /*#__PURE__*/_react.default.createElement(_tags.default, {
    setState: setState,
    selectedTags: selectedTags || [],
    allTags: suggestedTags || []
  }), /*#__PURE__*/_react.default.createElement(_footer.default, {
    close: close
  }));
}

PostPreview.propTypes = {
  urlPreview: _propTypes.default.object,
  linkPreview: _propTypes.default.object,
  clearUrl: _propTypes.default.func,
  enableUrl: _propTypes.default.func,
  disableUrl: _propTypes.default.bool
};

function PostPreview(_ref2) {
  var urlPreview = _ref2.urlPreview,
      linkPreview = _ref2.linkPreview,
      clearUrl = _ref2.clearUrl,
      disableUrl = _ref2.disableUrl,
      enableUrl = _ref2.enableUrl;
  var screenSize = (0, _reactRedux.useSelector)(function (state) {
    return state.navigation.screenSize;
  });
  if (disableUrl) return /*#__PURE__*/_react.default.createElement(_styled.Row, {
    sx: {
      alignItems: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement("input", {
    checked: !disableUrl,
    type: "checkbox",
    name: 'preivew',
    onChange: enableUrl
  }), /*#__PURE__*/_react.default.createElement(_styled.BodyText, {
    ml: 0.5
  }, "Add Link Preview"));
  if (!urlPreview) return null;
  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_postinfo.default, {
    preview: !!screenSize,
    post: urlPreview,
    link: linkPreview
  }), /*#__PURE__*/_react.default.createElement(_styled.SmallText, {
    onPress: clearUrl,
    sx: {
      color: 'blue',
      textAlign: 'right'
    }
  }, "Remove Link Preview"));
}

_PasteTextButton.propTypes = {
  addTextFromLink: _propTypes.default.func
};

function _PasteTextButton(_ref3) {
  var addTextFromLink = _ref3.addTextFromLink;
  return /*#__PURE__*/_react.default.createElement(_styled.AbsoluteView, {
    sx: {
      right: 2,
      bottom: 1.50001 * 8
    }
  }, /*#__PURE__*/_react.default.createElement(_styled.SmallText, {
    sx: {
      color: 'blue'
    },
    onPress: function onPress(e) {
      e.preventDefault();
      addTextFromLink();
    }
  }, "Paste article description"));
}
//# sourceMappingURL=createPost.container.js.map