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

// @flow

import * as React from 'react';
import { graphql } from 'react-relay';
import { Card, Loading } from '@kiwicom/orbit-components';
import { withRouter } from 'react-router-dom';
import type { ContextRouter } from 'react-router-dom';

import QueryRenderer from '../../SmartFAQ/relay/QueryRenderer';
import ResultsCards from './ResultsCards';
import FullpageResult from './FullpageResults';
import StaticFAQError from './StaticFAQError';
import Loader from '../../SmartFAQ/common/Loader';
import {
  SidebarVersion,
  FullPageVersion,
} from '../../SmartFAQ/common/PageVariant';
import type { SearchAllFAQsQueryResponse } from './__generated__/SearchAllFAQsQuery.graphql';

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

type Props = {|
  ...ContextRouter,
  search: string,
  isSidebarVersion: boolean,
  omitDuplicatedResultsCards?: boolean,
|};

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

class SearchAllFAQs extends React.Component<Props> {
  renderSearchFAQs = (rendererProps: AllFAQsQueryRendererParams) => {
    const { omitDuplicatedResultsCards = false } = this.props;
    const { props, error } = rendererProps;

    if (error) return <StaticFAQError />;

    if (props) {
      const searchQuery = this.props.match.params.query;
      const edges = props.allFAQs?.edges || [];
      const faqs = edges.map(edge => edge && edge.node).filter(Boolean);
      return (
        <>
          <SidebarVersion>
            <ResultsCards faqs={faqs} />
          </SidebarVersion>
          <FullPageVersion>
            <FullpageResult
              faqs={faqs}
              query={searchQuery}
              omitDuplicatedResultsCards={omitDuplicatedResultsCards}
            />
          </FullPageVersion>
        </>
      );
    }

    return (
      <>
        <SidebarVersion>
          <Loader fullHeight />
        </SidebarVersion>
        <FullPageVersion>
          <Card>
            <Loading type="boxLoader" loading />
          </Card>
        </FullPageVersion>
      </>
    );
  };

  render() {
    const { search, isSidebarVersion, match } = this.props;
    const fullPageQuery = match.params.query;
    const isAllResultsPage = fullPageQuery && match.url.includes('/faq/search');
    const first = isSidebarVersion || isAllResultsPage ? null : 5;

    return (
      <QueryRenderer
        query={queryAllFAQs}
        variables={{ search: search ? search : fullPageQuery, first }}
        render={this.renderSearchFAQs}
      />
    );
  }
}

export default withRouter(SearchAllFAQs);