# All files / components/MessageBox MessageTimeBox.js

96.15% Statements 25/26
100% Branches 15/15
90% Functions 9/10
100% Lines 22/22

    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

    10x
    5x
    5x
    5x

    5x

    5x
    12x

    5x

    5x

    5x

    5x
    12x

    12x
    12x
    12x

    5x

    5x
    14x

    14x

    14x

    14x

    5x

     import React from 'react';
    import PropTypes from 'prop-types';
    import styled from 'styled-components';

    // Icons to be used on this component
    import { Icon } from 'react-icons-kit';
    import { ic_done_all as DoneAll } from 'react-icons-kit/md/ic_done_all';
    import { ic_access_time as AccessTime } from 'react-icons-kit/md/ic_access_time';
    import { ic_done as IcDone } from 'react-icons-kit/md/ic_done';
    import { ic_error_outline as IcErrorOutline } from 'react-icons-kit/md/ic_error_outline';

    // Constants
    import constants from '../../utils/constants';
    import { formatDateTime } from '../../utils/datetime';
    import { messageTextColor } from '../../utils/style';

    const MdDoneAll = (props) => <Icon icon={DoneAll} {...props} />;
    const MdAccessTime = (props) => <Icon icon={AccessTime} {...props} />;
    const MdDone = (props) => <Icon icon={IcDone} {...props} />;
    const MdErrorOutline = (props) => <Icon icon={IcErrorOutline} {...props} />;

    const { messagesTypes } = constants;

    const StyledTimeAgoText = styled.span`
      font-size: ${(props) => props.theme.typography.classes.small.fontSize};
    `;
    StyledTimeAgoText.displayName = 'StyledTimeAgoText';

    const StyledStatusSpan = styled.span`
      margin-left: 3px;
    `;
    StyledStatusSpan.displayName = 'StyledStatusSpan';

    const StyledMessageTimeBoxContainer = styled.span`
      color: ${({ message, theme }) => messageTextColor(message, theme)};
      display: inline-block;
      float: right;
      padding: 0 0 0 7px;
      position: relative;
      bottom: -4px;
      max-width: 80px;
      text-align: right;
      font-size: ${(props) => props.theme.typography.classes.caption.fontSize};
      line-height: ${(props) => props.theme.typography.classes.caption.lineHeight};
      font-weight: ${(props) => props.theme.typography.weights.fontWeightMedium};
    `;
    StyledMessageTimeBoxContainer.displayName = 'StyledMessageTimeBoxContainer';

    const MessageTimeBox = (props) => {
      const { message } = props;
      const {
        date, dateFormat, status, type,
      } = message;

      const dateToShow = formatDateTime(new Date(date), dateFormat);

      return (
        <StyledMessageTimeBoxContainer message={message}>
          {
            date && (type !== messagesTypes.TYPING)
          && (
            <StyledTimeAgoText>
              {dateToShow}
            </StyledTimeAgoText>
          )
          }
          {
            status
            && (
              <StyledStatusSpan>
                {
                  status === 'waiting' && <MdAccessTime />
                }
                {
                  status === 'sent' && <MdDone />
                }
                {
                  status === 'received' && <MdDoneAll />
                }
                {
                  status === 'read' && <MdDoneAll color="#4FC3F7" />
                }
                {
                  status === 'failed' && <MdErrorOutline />
                }
              </StyledStatusSpan>
            )
          }
        </StyledMessageTimeBoxContainer>);
    };

    MessageTimeBox.propTypes = {
      message: PropTypes.object.isRequired,
    };

    export default MessageTimeBox;