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

// @flow

import * as React from 'react';
import { Link } from 'react-router-dom';
import { graphql, createFragmentContainer } from 'react-relay';
import { CardSection, Text, Heading } from '@kiwicom/orbit-components';

import { SearchState } from '../../SmartFAQ/context/SearchState';
import type { SearchAutocompleteCard_article as SearchAutocompleteCardType } from './__generated__/SearchAutocompleteCard_article.graphql';

type Props = {|
  article: SearchAutocompleteCardType,
|};

const SearchAutocompleteCard = ({
  article: { originalId, title, perex },
}: Props) => {
  const { clearSearch } = React.useContext(SearchState);

  return (
    <Link
      to={`/faq/search/article/${originalId}`}
      onClick={clearSearch}
      style={{ textDecoration: 'none', display: 'block' }}
    >
      <CardSection dataTest="autocompleteResult">
        <Heading type="title3" element="h3">
          {title}
        </Heading>
        <Text>{perex}</Text>
      </CardSection>
    </Link>
  );
};

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