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

Smart FAQ

// @flow

import * as React from 'react';
import { graphql } from 'react-relay';
import idx from 'idx';

import QueryRenderer from '../../SmartFAQ/relay/QueryRenderer';
import FAQArticle from './FAQArticle';
import NoSearchResults from './NoSearchResults';
import StaticFAQError from './StaticFAQError';
import Loader from '../../SmartFAQ/common/Loader';
import ScrollableBox from '../../SmartFAQ/common/ScrollableBox';
import type { SearchAllFAQsQueryResponse } from './__generated__/SearchAllFAQsQuery.graphql';

type AllFAQsQueryRendererParams = {
  props: ?SearchAllFAQsQueryResponse,
  error: ?Error,
};

type Props = {|
  search: string,
|};

const queryAllFAQs = graphql`
  query SearchAllFAQsQuery($search: String) {
    allFAQs(search: $search) {
      edges {
        node {
          id
          ...FAQArticle_article
        }
      }
    }
  }
`;

class SearchAllFAQs extends React.Component<Props> {
  renderSearchFAQs = (rendererProps: AllFAQsQueryRendererParams) => {
    const { props, error } = rendererProps;
    if (error) return <StaticFAQError />;

    if (props) {
      const edges = idx(props, _ => _.allFAQs.edges) || [];
      const faqs = edges.map(edge => edge && edge.node).filter(Boolean);
      if (!faqs.length) return <NoSearchResults />;

      return (
        <ScrollableBox>
          {faqs.map(faq => (
            <FAQArticle key={faq.id} article={faq} isSearchResult />
          ))}
        </ScrollableBox>
      );
    }

    return <Loader fullHeight />;
  };

  render() {
    const { search } = this.props;

    return (
      <QueryRenderer
        query={queryAllFAQs}
        variables={{ search }}
        render={this.renderSearchFAQs}
      />
    );
  }
}

export default SearchAllFAQs;