All files / web/modules/article/detail Detail.tsx

66.67% Statements 12/18
80% Branches 8/10
0% Functions 0/2
80% Lines 12/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 681x 1x 1x   1x 1x 1x   1x                     1x       1x       1x                       1x                                                     1x  
import Icon from 'antd/lib/icon';
import * as React from 'react';
import styled from 'styled-components';
import { IArticle } from '../../../../shared';
import Link from '../../components/Link';
import Score from '../../score/Score';
import { ARTICLE } from '../queries';
 
const Image = styled.div`
  ${(props: { path: string }) => `
      background-image: url(${props.path});
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 300px;
      margin-bottom: 10px;
  `};
`;
 
const Wrapper = styled.div`
  margin-bottom: 50px;
`;
 
const LinkWrapper = styled.div`
  margin-top: 50px;
  text-align: center;
`;
const Header = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
 
  h1 {
    margin-bottom: 0;
  }
 
  margin-bottom: 1em;
`;
 
const Detail = (props: IArticle) => {
  const { title, text, slug, image } = props;
  // console.warn(averageScore);
  return (
    <Wrapper>
      <Image path={image} />
      <Header>
        <h1>{title}</h1>
        <Score
          refetchQueries={[{ query: ARTICLE, variables: { slug } }]}
          itemId={props._id}
        />
      </Header>
      {text && (
        <div
          dangerouslySetInnerHTML={{ __html: text.replace(/\n/g, '<br />') }}
        />
      )}
      <LinkWrapper>
        <Link to={`${slug}/diskuze`}>
          Vstoupit do diskuze{' '}
          <Icon type="right" style={{ marginLeft: '10px' }} />
        </Link>
      </LinkWrapper>
    </Wrapper>
  );
};
export default Detail;