docbrown/app/javascript/packs/Feed.jsx.erb

import { h, Component } from 'preact';
import PropTypes from 'prop-types';

<% helpers = ActionController::Base.helpers %>

const FEED_ICONS = {
  COMMENTS_ICON: '<%= helpers.image_path("comments-bubble.png") %>',
  REACTIONS_ICON: '<%= helpers.image_path("reactions-stack.png") %>',
  VIDEO_ICON: '<%= helpers.image_path("video-camera.svg") %>',
};

// TODO: Add scroll initial fetch and scroll etc.
export class Feed extends Component {
  scrollHandler;

  componentDidMount() {
    // this.scrollHandler = _event => {
      // // handle scroll logic for pages of feed data and get an extra page on load.
      // page += 1;
      // Feed.getFeedItems(this.props.timeFrame, page).then(feedItems => {
      //   // We are not doing virtual scrolling at the moment, so feed items keep getting appended.
      //   this.setState(previousState => ({
      //     feedItems: previousState.feedItems.concat(feedItems),
      //   }));
      // });
    // };

    Feed.getFeedItems(this.props.timeFrame).then(feedItems => {
      this.setState({ feedItems });

      this.feedContainer.addEventListener('scroll', this.scrollHandler);
    });
    this.setState({ podcastItems: Feed.getPodcastItems() });
  }

  componentDidUpdate(prevProps) {
    if (prevProps.timeFrame !== this.props.timeFrame) {
      // The feed timeframe has changed. Get new feed data.
      Feed.getFeedItems(this.props.timeFrame).then(feedItems => {
        this.setState({ feedItems });

        this.feedContainer.addEventListener('scroll', this.scrollHandler);
      });
    }
  }

  componentWillUnmount() {
    if (this.scrollHandler) {
      this.feedContainer.removeEventListener('scroll', this.scrollHandler);
    }
  }

  /**
   * Retrieves feed data.
   *
   * @param {number} [page=1] Page of feed data to retrieve
   *
   * @returns {Promise} A promise containing the JSON response for the feed data.
   */
  static getFeedItems(timeFrame = '', page = 1) {
    return fetch(`/stories/feed/${timeFrame}?page=${page}`, {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'X-CSRF-Token': window.csrfToken,
        'Content-Type': 'application/json',
      },
      credentials: 'same-origin',
    }).then(response => response.json());
  }

  static getPodcastItems() {
    const el = document.getElementById('followed-podcasts');
    const user = userData();
    const myEpisodes = []
    if (user && user.followed_podcast_ids && user.followed_podcast_ids.length > 0) {
      var data = JSON.parse(el.dataset.episodes);
      data.forEach(function(ep) {
        if (user.followed_podcast_ids.indexOf(ep.podcast.id) > -1) {
          myEpisodes.push(ep);
        }
      });
    }
    return myEpisodes;
  }

  render() {
    const { renderFeed } = this.props;
    const { feedItems = [], podcastItems = [] } = this.state;

    return (
      <div
        ref={element => {
          this.feedContainer = element;
        }}
      >
        {renderFeed({ feedItems, podcastItems, feedIcons: FEED_ICONS })}
      </div>
    );
  }
}

Feed.defaultProps = {
  timeFrame: '',
}

Feed.propTypes = {
  timeFrame: PropTypes.string,
  renderFeed: PropTypes.func.isRequired,
};

Feed.displayName = 'Feed';