All files / buffer-web-components/ColabTool/PostList index.jsx

100% Statements 23/23
100% Branches 6/6
100% Functions 11/11
100% Lines 23/23
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111                      2x             2x                     30x   1x 1x 1x 1x 1x 1x 1x 1x   30x   20x   2x   2x   2x   2x   2x           2x                     15x   30x                                   2x                               2x          
import React from 'react';
import PropTypes from 'prop-types';
import {
  List,
} from '@bufferapp/components';
import TextPost from '../TextPost';
import ImagePost from '../ImagePost';
import MultipleImagesPost from '../MultipleImagesPost';
import LinkPost from '../LinkPost';
import VideoPost from '../VideoPost';
 
const postStyle = {
  marginBottom: '2rem',
};
 
 
/* eslint-disable react/prop-types */
 
const renderPost = ({
  post,
  onApproveClick,
  onCancelConfirmClick,
  onDeleteClick,
  onDeleteConfirmClick,
  onEditClick,
  onMoveToDraftsClick,
  onRequestApprovalClick,
  onRescheduleClick,
}) => {
  const postWithEventHandlers = {
    ...post,
    onApproveClick: () => onApproveClick({ post }),
    onCancelConfirmClick: () => onCancelConfirmClick({ post }),
    onDeleteClick: () => onDeleteClick({ post }),
    onDeleteConfirmClick: () => onDeleteConfirmClick({ post }),
    onEditClick: () => onEditClick({ post }),
    onMoveToDraftsClick: () => onMoveToDraftsClick({ post }),
    onRequestApprovalClick: () => onRequestApprovalClick({ post }),
    onRescheduleClick: e => onRescheduleClick({ post, target: e.target }),
  };
  switch (post.type) {
    case 'text':
      return (<TextPost {...postWithEventHandlers} />);
    case 'image':
      return (<ImagePost {...postWithEventHandlers} />);
    case 'multipleImage':
      return (<MultipleImagesPost {...postWithEventHandlers} />);
    case 'link':
      return (<LinkPost {...postWithEventHandlers} />);
    case 'video':
      return (<VideoPost {...postWithEventHandlers} />);
    default:
      return (<TextPost {...postWithEventHandlers} />);
  }
};
 
/* eslint-enable react/prop-types */
 
const PostList = ({
  posts,
  onApproveClick,
  onCancelConfirmClick,
  onDeleteClick,
  onDeleteConfirmClick,
  onEditClick,
  onMoveToDraftsClick,
  onRequestApprovalClick,
  onRescheduleClick,
}) =>
  <List
    items={posts.map(post =>
      <div style={postStyle}>
        {
          renderPost({
            post,
            onApproveClick,
            onCancelConfirmClick,
            onDeleteClick,
            onDeleteConfirmClick,
            onEditClick,
            onMoveToDraftsClick,
            onRequestApprovalClick,
            onRescheduleClick,
          })
        }
      </div>,
    )}
  />;
 
PostList.propTypes = {
  posts: PropTypes.arrayOf(
    PropTypes.shape({
      text: PropTypes.string,
    }),
  ),
  onApproveClick: PropTypes.func,
  onCancelConfirmClick: PropTypes.func,
  onDeleteClick: PropTypes.func,
  onDeleteConfirmClick: PropTypes.func,
  onEditClick: PropTypes.func,
  onMoveToDraftsClick: PropTypes.func,
  onRequestApprovalClick: PropTypes.func,
  onRescheduleClick: PropTypes.func,
};
 
PostList.defaultProps = {
  posts: [],
};
 
export default PostList;