@r3l/app/lib/modules/post/mobile/singlePost.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.default = void 0;

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

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

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

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

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

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

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

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

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

var _reactNativeWeb = require("react-native-web");

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

var _comment2 = _interopRequireDefault(require("../../comment/mobile/comment.component"));

var _commentInput = _interopRequireDefault(require("../../comment/mobile/commentInput.component"));

var _userSearch = _interopRequireDefault(require("../../createPost/mobile/userSearch.component"));

var _postButtons = _interopRequireDefault(require("./postButtons.container"));

var _showHidden = require("../../comment/showHidden");

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

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

var _reactNativeSafeAreaContext = require("react-native-safe-area-context");

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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var INPUT_OFFSET = 55;

var SinglePostComponent = /*#__PURE__*/function (_Component) {
  (0, _inherits2.default)(SinglePostComponent, _Component);

  var _super = _createSuper(SinglePostComponent);

  function SinglePostComponent(props) {
    var _this;

    (0, _classCallCheck2.default)(this, SinglePostComponent);
    _this = _super.call(this, props);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "comments", []);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "nestingLevel", {});
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onLoad", function () {
      setTimeout(function () {
        var params = _this.props.navigation.state.params;

        if (params.comment && _this.comments.length) {
          var _params$comment;

          var id = (params === null || params === void 0 ? void 0 : (_params$comment = params.comment) === null || _params$comment === void 0 ? void 0 : _params$comment._id) || params.comment;

          var index = _this.comments.findIndex(function (c) {
            return c && id === c._id;
          });

          _this.scrollToComment(index);
        }

        if (params && params.openComment) {
          var _this$input, _this$input$textInput;

          (_this$input = _this.input) === null || _this$input === void 0 ? void 0 : (_this$input$textInput = _this$input.textInput) === null || _this$input$textInput === void 0 ? void 0 : _this$input$textInput.focus();
        }

        _this.forceUpdate();
      }, 1000);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getChildren", function () {
      var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.postId;
      var nestingLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
      if (nestingLevel === 0) _this.comments = [];
      var _this$props = _this.props,
          comments = _this$props.comments,
          posts = _this$props.posts;
      var children = comments.childComments[id] || [];
      var orphans = comments.orphans[id] || [];
      children.forEach(function (c) {
        _this.nestingLevel[c] = nestingLevel;

        _this.comments.push(posts.posts[c]);

        _this.getChildren(c, nestingLevel + 1);
      });
      orphans.forEach(function (o) {
        return _this.comments.push(posts.posts[o]);
      });
    });
    _this.state = {
      inputHeight: 0,
      editing: false,
      reloading: false,
      top: 0,
      suggestionHeight: 0,
      loaded: false,
      gotData: false
    };
    _this.id = null;
    _this.comments = null;
    _this.renderRow = _this.renderRow.bind((0, _assertThisInitialized2.default)(_this));
    _this.dataSource = null;
    _this.loadMoreComments = _this.loadMoreComments.bind((0, _assertThisInitialized2.default)(_this));
    _this.longFormat = false;
    _this.total = null;
    _this.renderHeader = _this.renderHeader.bind((0, _assertThisInitialized2.default)(_this));
    _this.toggleEditing = _this.toggleEditing.bind((0, _assertThisInitialized2.default)(_this));
    _this.reload = _this.reload.bind((0, _assertThisInitialized2.default)(_this));
    _this.scrollToComment = _this.scrollToComment.bind((0, _assertThisInitialized2.default)(_this));
    _this.scrollToBottom = _this.scrollToBottom.bind((0, _assertThisInitialized2.default)(_this));
    _this.renderUserSuggestions = _this.renderUserSuggestions.bind((0, _assertThisInitialized2.default)(_this)); // this.renderRelated = this.renderRelated.bind(this);

    return _this;
  }

  (0, _createClass2.default)(SinglePostComponent, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var params = this.props.navigation.state.params;
      this.id = this.props.postId;
      this.getChildren(this.id);
      requestAnimationFrame(function () {
        _this2.setState({
          loaded: true
        });
      });

      if (params.comment) {
        this.setState({
          activeComment: params.comment
        });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prev) {
      var _this3 = this;

      var post = this.props.post;

      if (this.comments.length && !this.state.gotData && this.scrollView) {
        this.onLoad();
        this.setState({
          gotData: true
        });
      }

      if (post !== prev.post) {
        clearTimeout(this.stateTimeout);
        this.stateTimeout = setTimeout(function () {
          return _this3.setState({
            reloading: false
          });
        }, 1000);
      }
    }
  }, {
    key: "loadMoreComments",
    value: function loadMoreComments() {
      var length = 0;

      if (this.comments) {
        length = this.comments.length || 0;
      }

      this.props.actions.getComments(this.id, length, 10);
    }
  }, {
    key: "toggleEditing",
    value: function toggleEditing(editing) {
      this.setState({
        editing: editing
      });
    }
  }, {
    key: "scrollToComment",
    value: function scrollToComment(index) {
      if (typeof index !== 'number' || index < 0 || !this.scrollView) return;
      this.scrollView.scrollToIndex({
        viewPosition: 0.1,
        index: index
      });
      this.setState({
        activeComment: this.comments[index],
        activeIndex: index
      });
    }
  }, {
    key: "scrollToTop",
    value: function scrollToTop() {
      if (!this.scrollView) return;
      this.scrollView.scrollToOffset({
        offset: 0
      });
    }
  }, {
    key: "scrollToBottom",
    value: function scrollToBottom() {
      var _this4 = this;

      if (!this.scrollView) return;
      this.scrollTimeout = setTimeout(function () {
        if (!_this4.scrollView) return;

        if (_this4.comments && _this4.comments.length) {
          _this4.scrollView.scrollToEnd();
        } else if (!_this4.comments || _this4.comments.length === 0) {
          var offset = Math.max(0, _this4.headerHeight - _this4.scrollHeight);

          _this4.scrollView.scrollToOffset({
            offset: offset
          });
        }
      }, 60);
    }
  }, {
    key: "reloadComments",
    value: function reloadComments() {
      this.props.actions.getComments(this.id, 0, 10);
    }
  }, {
    key: "reload",
    value: function reload() {
      this.reloading = true;
      this.props.actions.getComments(this.id, 0, 10);
      this.props.actions.getSelectedPost(this.id);
    } // renderRelated() {
    //   const relatedEl = this.props.related.map(r => {
    //     const post = { _id: r.commentary[0], title: r.title };
    //     return (
    //       <View key={r._id} style={{ paddingHorizontal: 15 }}>
    //         <UrlPreview
    //           size={'small'}
    //           urlPreview={r}
    //           onPress={() => this.props.actions.goToPost(post)}
    //           domain={r.domain}
    //           actions={this.props.actions}
    //         />
    //       </View>
    //     );
    //   });
    //   return relatedEl;
    // }

  }, {
    key: "renderHeader",
    value: function renderHeader() {
      var _this5 = this;

      var _this$props2 = this.props,
          post = _this$props2.post,
          link = _this$props2.link,
          actions = _this$props2.actions;
      return /*#__PURE__*/_react.default.createElement(_styled.View, {
        onLayout: function onLayout(e) {
          _this5.headerHeight = e.nativeEvent.layout.height;
        }
      }, /*#__PURE__*/_react.default.createElement(_post.default, {
        singlePost: true,
        key: 0,
        post: post,
        link: link,
        actions: actions,
        setupReply: function setupReply() {
          _this5.setState({
            activeComment: post
          });

          _this5.input.textInput.focus();
        },
        focusInput: function focusInput() {
          _this5.setState({
            activeComment: link ? null : post
          });

          _this5.input.textInput.focus();
        }
      }));
    }
  }, {
    key: "renderRow",
    value: function renderRow(_ref) {
      var _this6 = this;

      var item = _ref.item,
          index = _ref.index;
      if (!this.state.loaded) return null;
      var _this$props3 = this.props,
          comments = _this$props3.comments,
          postId = _this$props3.postId;
      var orphans = comments.orphans[postId] || [];
      var comment = item;
      if (!comment) return null;
      var isOrphan = orphans.includes(comment.id);
      var _this$props4 = this.props,
          post = _this$props4.post,
          auth = _this$props4.auth,
          actions = _this$props4.actions,
          users = _this$props4.users;

      var setupReply = function setupReply(_comment) {
        return _this6.setState({
          activeComment: _comment,
          activeIndex: index
        });
      };

      var focusInput = function focusInput() {
        return _this6.input.textInput.focus();
      };

      var user = users.users[comment.user] || comment.embeddedUser;
      var nestingLevel = this.nestingLevel[comment._id];
      return /*#__PURE__*/_react.default.createElement(_styled.View, null, nestingLevel ? /*#__PURE__*/_react.default.createElement(_styled.View, {
        sx: {
          ml: nestingLevel * 3 - 1,
          mr: 2
        }
      }, /*#__PURE__*/_react.default.createElement(_styled.DividerLine, null)) : /*#__PURE__*/_react.default.createElement(_styled.MobileDivider, null), /*#__PURE__*/_react.default.createElement(_comment2.default, {
        singlePost: true,
        actions: actions,
        auth: auth,
        parentEditing: this.toggleEditing,
        scrollToComment: function scrollToComment() {
          return _this6.scrollToComment(index);
        },
        comment: comment,
        nestingLevel: nestingLevel,
        user: user,
        orphan: isOrphan,
        renderButtons: function renderButtons() {
          return /*#__PURE__*/_react.default.createElement(_styled.View, {
            sx: {
              my: 2
            }
          }, /*#__PURE__*/_react.default.createElement(_postButtons.default, {
            horizontal: true,
            isComment: true,
            parentPost: post,
            post: comment,
            actions: actions,
            auth: auth,
            singlePost: true,
            setupReply: setupReply,
            focusInput: focusInput
          }));
        }
      }));
    }
  }, {
    key: "renderUserSuggestions",
    value: function renderUserSuggestions() {
      var _this7 = this;

      var parentEl = null;

      if (this.props.users.search) {
        if (this.props.users.search.length) {
          parentEl = /*#__PURE__*/_react.default.createElement(_styled.View, {
            style: {
              position: 'absolute',
              top: this.state.top - this.state.suggestionHeight,
              left: 0,
              right: 0,
              flex: 1,
              maxHeight: this.state.top,
              backgroundColor: 'white',
              borderTopWidth: 1,
              borderTopColor: '#F0F0F0'
            },
            onLayout: function onLayout(e) {
              _this7.setState({
                suggestionHeight: e.nativeEvent.layout.height
              });
            }
          }, /*#__PURE__*/_react.default.createElement(_userSearch.default, {
            style: {
              paddingTop: INPUT_OFFSET
            },
            setSelected: this.input.setMention,
            users: this.props.users.search
          }));
        }
      }

      return parentEl;
    }
  }, {
    key: "render",
    value: function render() {
      var _this8 = this,
          _activeComment$embedd,
          _activeComment$embedd2;

      var _this$props5 = this.props,
          post = _this$props5.post,
          insets = _this$props5.insets;
      if (!post) return null;
      var editing = this.state.editing;
      var activeComment = this.state.activeComment; // TODO this is hacky;

      this.getChildren();
      var commentIndex = activeComment && this.comments.findIndex(function (c) {
        return c && c._id === activeComment._id;
      });

      if (activeComment && activeComment._id === post._id) {
        commentIndex = -1;
      }

      return /*#__PURE__*/_react.default.createElement(_reactNativeWeb.KeyboardAvoidingView, {
        behavior: 'padding',
        style: {
          flex: 1
        },
        keyboardVerticalOffset: insets.bottom + INPUT_OFFSET + (_reactNativeWeb.Platform.OS === 'android' ? _reactNativeWeb.StatusBar.currentHeight : 0)
      }, /*#__PURE__*/_react.default.createElement(_styled.Box, {
        sx: {
          bg: 'white',
          flex: 1
        }
      }, /*#__PURE__*/_react.default.createElement(_reactNativeWeb.FlatList, {
        ref: function ref(c) {
          return _this8.scrollView = c;
        },
        data: this.comments,
        renderItem: this.renderRow,
        keyExtractor: function keyExtractor(item, i) {
          return item ? item._id : 'x' + i;
        },
        removeClippedSubviews: true,
        pageSize: 1,
        initialListSize: 4,
        keyboardShouldPersistTaps: 'always',
        keyboardDismissMode: 'interactive',
        onScrollBeginDrag: _reactNativeWeb.Keyboard.dismiss,
        onEndReachedThreshold: 100,
        overScrollMode: 'always',
        scrollToOverflowEnabled: true,
        style: {
          flex: 1
        },
        ListHeaderComponent: this.renderHeader,
        onScrollToIndexFailed: function onScrollToIndexFailed() {
          return {};
        },
        onLayout: function onLayout(e) {
          _this8.scrollHeight = e.nativeEvent.layout.height;
        },
        ListFooterComponent: function ListFooterComponent() {
          return /*#__PURE__*/_react.default.createElement(_showHidden.ShowHidden, {
            id: post._id
          });
        },
        refreshControl: /*#__PURE__*/_react.default.createElement(_reactNativeWeb.RefreshControl, {
          refreshing: this.state.reloading,
          onRefresh: this.reload,
          tintColor: "#000000",
          colors: ['#000000', '#000000', '#000000'],
          progressBackgroundColor: "#ffffff"
        })
      }), this.renderUserSuggestions(), /*#__PURE__*/_react.default.createElement(_commentInput.default, (0, _extends2.default)({
        position: "fixed",
        parentPost: post,
        parentComment: activeComment,
        ref: function ref(c) {
          return _this8.input = c;
        },
        postId: this.id,
        placeholder: activeComment && activeComment !== null && activeComment !== void 0 && (_activeComment$embedd = activeComment.embeddedUser) !== null && _activeComment$embedd !== void 0 && _activeComment$embedd.handle ? "Reply to @".concat(activeComment === null || activeComment === void 0 ? void 0 : (_activeComment$embedd2 = activeComment.embeddedUser) === null || _activeComment$embedd2 === void 0 ? void 0 : _activeComment$embedd2.handle) : 'Add your comment',
        editing: editing
      }, this.props, {
        scrollView: this.scrollView,
        scrollToBottom: this.scrollToBottom,
        updatePosition: function updatePosition(params) {
          return _this8.setState(params);
        },
        onBlur: function onBlur() {
          return _this8.setState({
            comment: null,
            index: null
          });
        },
        onFocus: function onFocus() {
          if (commentIndex > -1) _this8.scrollToComment(commentIndex);else _this8.scrollToTop();
        }
      }))));
    }
  }]);
  return SinglePostComponent;
}(_react.Component);

(0, _defineProperty2.default)(SinglePostComponent, "propTypes", {
  postId: _propTypes.default.string,
  postComments: _propTypes.default.array,
  posts: _propTypes.default.object,
  post: _propTypes.default.object,
  error: _propTypes.default.bool,
  actions: _propTypes.default.object,
  // related: PropTypes.array,
  link: _propTypes.default.object,
  users: _propTypes.default.object,
  comments: _propTypes.default.object,
  navigation: _propTypes.default.object,
  auth: _propTypes.default.object,
  admin: _propTypes.default.object,
  comment: _propTypes.default.object,
  insets: _propTypes.default.object
});

var _default = function _default(props) {
  return /*#__PURE__*/_react.default.createElement(_reactNativeSafeAreaContext.SafeAreaInsetsContext.Consumer, null, function (insets) {
    return /*#__PURE__*/_react.default.createElement(SinglePostComponent, (0, _extends2.default)({}, props, {
      insets: insets
    }));
  });
};

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