import { connect } from 'react-redux';

import CommentList from './CommentList';

const getVisibleComments = (comments, currentTime) => {
  return comments
    .filter((streamedComment) => (streamedComment.time <= currentTime))
    .map((streamedComment) => (streamedComment.comment));
};

const mapStateToProps = (state) => {
  return {
    comments: getVisibleComments(state.commentStream, state.videoContainer.currentTime),
  };
};

const CommentStream = connect(
  mapStateToProps
)(CommentList);

export default CommentStream;

import { connect } from 'react-redux';

import CommentList from './CommentList';

const getVisibleComments = (comments, currentTime) => {
  return comments
    .filter((streamedComment) => (currentTime >= streamedComment.time))
    .map((streamedComment) => (streamedComment.comment));
};

const mapStateToProps = (state) => {
  return {
    comments: getVisibleComments(state.commentStream, state.videoContainer.currentTime),
  };
};

const CommentStream = connect(
  mapStateToProps
)(CommentList);

export default CommentStream;

Change the order of the conditional for clarity
Change the order of the conditional for clarity

- I think having current time after the streamed comment time made it unclear what I was looking for when I was reading it back.
- I want to include comments which have been passed by currentTime.