@kiwicom/smart-faq/src/shared/StaticFAQ/SearchAutocomplete.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 ValueBind from '@kiwicom/nitro/lib/components/ValueBind';

import { SearchState } from '../../SmartFAQ/context/SearchState';
import type { SearchStateType } from '../../SmartFAQ/context/SearchState';
import type { SearchAutocomplete_article as SearchAutocompleteType } from './__generated__/SearchAutocomplete_article.graphql';

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

function SearchAutocomplete({ article: { id, title, perex } }: Props) {
  return (
    <SearchState.Consumer>
      {({ changeSearchText }: SearchStateType) => (
        <ValueBind value="" onChange={changeSearchText}>
          {({ onClick }) => (
            <Link
              to={`/faq/search/article/${id}`}
              onClick={onClick}
              style={{ textDecoration: 'none', display: 'block' }}
            >
              <CardSection dataTest="autocompleteResult">
                {title && (
                  <Heading type="title3" element="h3">
                    {title}
                  </Heading>
                )}
                {perex && <Text>{perex}</Text>}
              </CardSection>
            </Link>
          )}
        </ValueBind>
      )}
    </SearchState.Consumer>
  );
}

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