@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 PageVariantContext from '../../SmartFAQ/context/PageVariant';
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 (
      <PageVariantContext.Consumer>
        {({ urlPrefix }) => (
          <Link
            data-cy="faq-article-link"
            to={
              isSearchResult
                ? `${urlPrefix}/search/article/${article.originalId}`
                : `${urlPrefix}/${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>
        )}
      </PageVariantContext.Consumer>
    );
  }
}

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
    }
  `,
);