@kiwicom/smart-faq/src/shared/StaticFAQ/FAQArticle.js

// @flow

import * as React from 'react';
import { Link } from 'react-router-dom';
import { createFragmentContainer, graphql } from 'react-relay';
import { Stack, Tile, Text } from '@kiwicom/orbit-components';
import LogContext from '@kiwicom/nitro/lib/services/log/context';

import { Desktop, Mobile } from '../../SmartFAQ/common/Responsive';
import type { FAQArticle_article as FAQArticleType } from './__generated__/FAQArticle_article.graphql';
import { SearchState } from '../../SmartFAQ/context/SearchState';
import type { SearchStateType } from '../../SmartFAQ/context/SearchState';
import { events } from '../../const/events';
import type { log } from '../../const/events';

type Props = {|
  categoryId: ?number,
  isSearchResult: ?boolean,
  onClick: () => void,
  article: FAQArticleType,
  log?: log,
  searchContext?: SearchStateType,
|};

const TileArticle = ({ article }: {| article: FAQArticleType |}) => (
  <Tile
    title={article.title}
    description={<Text type="primary">{article.perex ?? ''}</Text>}
    dataTest="articleTile"
  />
);

class FAQArticle extends React.Component<Props> {
  onClick = () => {
    const { log, searchContext, article } = this.props;
    if (!(log && searchContext)) return; // We don't need these variables for testing, for example

    const { searchText, queriesBeforeClick, resetQueriesCount } = searchContext;

    log(events.FAQ_ARTICLE_CLICKED, {
      searchText,
      queriesBeforeClick,
      articleId: article.originalId,
    });

    if (searchText) {
      resetQueriesCount();
    }
  };

  render() {
    const { article, categoryId, isSearchResult } = this.props;

    return (
      <Link
        data-cy="faq-article-link"
        to={
          isSearchResult
            ? `/faq/search/article/${article.originalId}`
            : `/faq/${categoryId ?? ''}/article/${article.originalId}`
        }
        style={{ textDecoration: 'none', display: 'block' }}
        onClick={this.onClick}
      >
        <Desktop>
          <Stack spaceAfter="large">
            <TileArticle article={article} />
          </Stack>
        </Desktop>
        <Mobile>
          <TileArticle article={article} />
        </Mobile>
      </Link>
    );
  }
}

export const WrappedFAQArticle = (props: Props) => {
  const searchContext = React.useContext(SearchState);
  const { log } = React.useContext(LogContext);

  return <FAQArticle {...props} searchContext={searchContext} log={log} />;
};

export default createFragmentContainer(
  WrappedFAQArticle,
  graphql`
    fragment FAQArticle_article on FAQArticle {
      id
      originalId: id(opaque: false)
      title
      perex
    }
  `,
);