@randy.tarampi/jsx/esm/lib/components/posts.js

Some common JSX components for www.randytarampi.ca

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import { logger } from "@randy.tarampi/browser-logger";
import Dimensions from "@randy.tarampi/react-dimensions";
import SchemaJsonLdComponent from "@randy.tarampi/schema-dot-org-json-ld-components";
import { ItemList as SchemaItemList, ListItem as SchemaListItem } from "@randy.tarampi/schema-dot-org-types";
import { List } from "immutable";
import PropTypes from "prop-types";
import React, { PureComponent } from "react";
import Infinite from "react-infinite";
import LoadingSpinner from "../components/loadingSpinner";
import { ConnectedErrorWrapper } from "../containers";
import computePostHeight from "../util/computePostHeight";
import getComponentForType from "../util/getComponentForType";
import { ErrorENOCONTENTContentComponent, ErrorESERVERContentComponent, mapErrorCodeToErrorContentComponent as defaultMapErrorCodeToErrorContent } from "./error";
import PostComponent from "./post";
export var mapPostsErrorCodeToErrorContentComponent = errorCode => {
  switch (errorCode) {
    case "EFETCH":
    case "ESERVER":
      return ErrorESERVERContentComponent;

    case "ENOPOSTS":
      return ErrorENOCONTENTContentComponent;

    default:
      return defaultMapErrorCodeToErrorContent(errorCode);
  }
};
export class PostsComponent extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
    this.state.elementHeight = this.calculateElementHeight(this.state, props);
  }

  componentDidMount() {
    if (this.props.shouldFetchPostsOnMount) {
      this.props.fetchPosts();
    }
  }

  calculateElementHeight(_ref, props) {
    var {
      elementHeight: elementHeightState
    } = _ref;
    var {
      posts,
      postsLimit,
      containerWidth
    } = props;
    var postsArray = posts && posts.toArray();

    if (Number.isFinite(postsLimit)) {
      postsArray = postsArray.slice(0, postsLimit);
    }

    return postsArray ? postsArray.map((post, index) => {
      var cachedPostHeight = elementHeightState && elementHeightState[index];
      return computePostHeight(containerWidth)(post, cachedPostHeight);
    }) : [window.innerHeight];
  }

  componentDidUpdate(previousProps) {
    this.setState((state, props) => {
      if (previousProps.containerWidth !== props.containerWidth || previousProps.posts !== props.posts) {
        return {
          elementHeight: this.calculateElementHeight(state, props)
        };
      }

      return state;
    });
  }

  render() {
    var _this$props = this.props,
        {
      posts,
      containerHeight,
      containerWidth,
      fetchPosts,
      isLoading,
      postsLimit
    } = _this$props,
        props = _objectWithoutProperties(_this$props, ["posts", "containerHeight", "containerWidth", "fetchPosts", "isLoading", "postsLimit"]);

    var postsArray = posts && posts.toArray();

    if (Number.isFinite(postsLimit)) {
      postsArray = postsArray.slice(0, postsLimit);
    }

    var itemList = postsArray ? new SchemaItemList({
      numberOfItems: postsArray.length,
      itemListOrder: "Descending",
      itemListElement: postsArray.map((post, index) => new SchemaListItem({
        item: post.toSchema(),
        position: index + 1,
        url: "".concat(window.location.origin).concat(window.location.pathname, "#").concat(post.uid)
      }))
    }) : [];
    return /*#__PURE__*/React.createElement(ConnectedErrorWrapper, {
      key: "posts-error-wrapper",
      mapErrorCodeToErrorContentComponent: mapPostsErrorCodeToErrorContentComponent
    }, /*#__PURE__*/React.createElement(SchemaJsonLdComponent, {
      markup: itemList
    }), /*#__PURE__*/React.createElement(Infinite, _extends({
      useWindowAsScrollContainer: true,
      elementHeight: postsArray && postsArray.length === this.state.elementHeight.length ? this.state.elementHeight : this.calculateElementHeight(this.state, this.props),
      infiniteLoadBeginEdgeOffset: window.innerHeight,
      preloadBatchSize: Infinite.containerHeightScaleFactor(1 / 8),
      preloadAdditionalHeight: Infinite.containerHeightScaleFactor(8),
      onInfiniteLoad: fetchPosts,
      isInfiniteLoading: isLoading,
      loadingSpinnerDelegate: /*#__PURE__*/React.createElement(LoadingSpinner, null)
    }, props), postsArray ? postsArray.map(post => {
      var Constructor;

      try {
        Constructor = getComponentForType(post.type);
      } catch (error) {
        logger.warn(error, "Can't `getComponentForType` for `".concat(post.type, "`, just using `Post` instead`"));
        Constructor = PostComponent;
      }

      return /*#__PURE__*/React.createElement(Constructor, {
        key: post.uid,
        post: post,
        containerHeight: containerHeight,
        containerWidth: containerWidth
      });
    }) : /*#__PURE__*/React.createElement("div", null)));
  }

}
PostsComponent.propTypes = {
  containerHeight: PropTypes.number,
  containerWidth: PropTypes.number,
  postsLimit: PropTypes.number,
  fetchPosts: PropTypes.func.isRequired,
  isLoading: PropTypes.bool,
  shouldFetchPostsOnMount: PropTypes.bool.isRequired,
  posts: PropTypes.instanceOf(List)
};
PostsComponent.defaultProps = {
  isLoading: false,
  shouldFetchPostsOnMount: false,
  postsLimit: Infinity
};
export var DimensionsWrappedPosts = Dimensions()(PostsComponent);
export var DimensionsContainerWrappedPosts = props => /*#__PURE__*/React.createElement("div", {
  className: "dimensions-container--posts"
}, /*#__PURE__*/React.createElement(DimensionsWrappedPosts, props));
export default DimensionsContainerWrappedPosts;