@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 { SearchState } from '../../SmartFAQ/context/SearchState';
import QueryRenderer from '../../SmartFAQ/relay/QueryRenderer';
import SearchResults from './SearchResults';
import SearchAutocomplete from './SearchAutocomplete';
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,
|};

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

const SearchAllFAQs = (props: Props) => {
  const urlSearchParam = props.match.params.query;
  const first = props.isSidebarVersion || urlSearchParam ? null : 5;

  function renderSearchFAQs(rendererProps: AllFAQsQueryRendererParams) {
    const { props, error } = rendererProps;

    if (error) return <StaticFAQError />;

    if (props) {
      const edges = props.allFAQs?.edges ?? [];
      const faqs = edges.map(edge => edge?.node).filter(Boolean);

      return (
        <>
          <SidebarVersion>
            <SearchResults faqs={faqs} />
          </SidebarVersion>
          <FullPageVersion>
            <SearchState.Consumer>
              {({ searchText }) => {
                const isSearching = searchText.length > 0;

                if (urlSearchParam && isSearching) {
                  return <SearchResults faqs={faqs} isFullPage />;
                }

                return isSearching ? (
                  <SearchAutocomplete
                    faqs={faqs}
                    urlSearchParam={urlSearchParam}
                  />
                ) : (
                  <SearchResults faqs={faqs} isFullPage />
                );
              }}
            </SearchState.Consumer>
          </FullPageVersion>
        </>
      );
    }

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

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

export default withRouter(SearchAllFAQs);