import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { smartTruncate } from 'react/util/string';

const ChannelWrapper = styled.div`
  align-items: center;
  border-style: solid;
  border-width: 2px;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;

  ${({visibility, theme}) => {
    const color = theme.colors.channel[visibility];

    return `
      border-color: ${color};
      color: ${color};
      &:hover {
        border-color: ${color};
      }
    `;
  }}
`;

const Title = styled.h2`
  font-weight: normal;
  padding: 15px 12px 0 12px;
  word-break: break-word;
`;

const Stats = styled.div`
  font-weight: normal;
  line-height: 1.5em;
  font-size: ${x => x.theme.fontSizesIndexed.xs};
  height: 25px;
  margin: 5px 0 0 0;
`;

const Channel = props => {
  const {length, title, updatedAtAgo, username, visibility} = props;

  const formattedTitle = smartTruncate(title, 50) || '\u00A0';

  return (
    <ChannelWrapper visibility={visibility}>
      <div>
      <Title>
        {formattedTitle}
      </Title>
      <Stats>
        <ul>
          <li>
            by {username}
          </li>
          <li>
            {length} blocks &bull; {updatedAtAgo}
          </li>
        </ul>
      </Stats>
      </div>
    </ChannelWrapper>
  );
};

Channel.propTypes = {
  length: PropTypes.number.isRequired,
  title: PropTypes.string.isRequired,
  updatedAtAgo: PropTypes.string.isRequired,
  username: PropTypes.string.isRequired,
  visibility: PropTypes.string.isRequired
};

export default Channel;

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { truncate } from 'react/util/string';

const ChannelWrapper = styled.div`
  align-items: center;
  border-style: solid;
  border-width: 2px;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;

  ${({visibility, theme}) => {
    const color = theme.colors.channel[visibility];

    return `
      border-color: ${color};
      color: ${color};
      &:hover {
        border-color: ${color};
      }
    `;
  }}
`;

const Title = styled.h2`
  font-weight: normal;
  padding: 15px 12px 0 12px;
  word-break: break-word;
`;

const Stats = styled.div`
  font-weight: normal;
  line-height: 1.5em;
  font-size: ${x => x.theme.fontSizesIndexed.xs};
  height: 25px;
  margin: 5px 0 0 0;
`;

const Channel = props => {
  const {length, title, updatedAtAgo, username, visibility} = props;

  const formattedTitle = truncate(title, 50) || '\u00A0';

  return (
    <ChannelWrapper visibility={visibility}>
      <div>
      <Title>
        {formattedTitle}
      </Title>
      <Stats>
        <ul>
          <li>
            by {username}
          </li>
          <li>
            {length} blocks &bull; {updatedAtAgo}
          </li>
        </ul>
      </Stats>
      </div>
    </ChannelWrapper>
  );
};

Channel.propTypes = {
  length: PropTypes.number.isRequired,
  title: PropTypes.string.isRequired,
  updatedAtAgo: PropTypes.string.isRequired,
  username: PropTypes.string.isRequired,
  visibility: PropTypes.string.isRequired
};

export default Channel;

Make Channel Block use new truncate helper