All files / buffer-web-components/ColabTool/Shared/PostHeader index.jsx

100% Statements 13/13
100% Branches 6/6
100% Functions 2/2
100% Lines 13/13
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                            2x             2x           2x         2x         2x 100x 100x   100x 97x     3x     2x     100x                                 2x                          
import React from 'react';
import PropTypes from 'prop-types';
import {
  Image,
  Text,
} from '@bufferapp/components';
import {
  white,
  mystic,
} from '@bufferapp/components/style/color';
import {
  borderWidth,
} from '@bufferapp/components/style/border';
 
const postDetailsStyle = {
  display: 'flex',
  padding: '0.5rem 1rem',
  background: white,
  borderBottom: `${borderWidth} solid ${mystic}`,
};
 
const postAuthorStyle = {
  flexGrow: 1,
  display: 'flex',
  alignItems: 'center',
};
 
const postDetailsAuthorImageStyle = {
  marginRight: '0.75rem',
  display: 'flex',
};
 
const postInfoStyle = {
  marginRight: '0.5rem',
};
 
 
const getPostDetailString = (draftDetails) => {
  const idInfo = draftDetails.userName || draftDetails.email;
  const retweetString = draftDetails.isRetweet ? ' retweet' : '';
 
  if (idInfo) {
    return `${idInfo} created this${retweetString} ${draftDetails.createdAt}`;
  }
 
  return `Created this${retweetString} ${draftDetails.createdAt}`;
};
 
const PostHeader = ({
  draftDetails,
}) =>
  <div style={postDetailsStyle}>
    <div style={postAuthorStyle}>
      <span style={postDetailsAuthorImageStyle}>
        <Image
          alt={draftDetails.userName}
          src={draftDetails.avatarUrl}
          width={'1.25rem'}
          height={'1.25rem'}
          border={'circle'}
        />
      </span>
      <span style={postInfoStyle}>
        <Text size={'small'}>{getPostDetailString(draftDetails)}</Text>
      </span>
    </div>
  </div>;
 
PostHeader.propTypes = {
  draftDetails: PropTypes.shape({
    avatarUrl: PropTypes.string,
    createdAt: PropTypes.string,
    email: PropTypes.string,
    isRetweet: PropTypes.bool,
    postAction: PropTypes.string,
    userName: PropTypes.string,
    via: PropTypes.string,
  }).isRequired,
};
 
export default PostHeader;