<commit_before>import { Box, Separator, Spacer } from "@artsy/palette"
import { SearchResultsAuctions_viewer } from "__generated__/SearchResultsAuctions_viewer.graphql"
import { GenericSearchResultItem } from "Apps/Search/Components/GenericSearchResultItem"

import { PaginationFragmentContainer as Pagination } from "Components/v2"
import { LoadingArea, LoadingAreaState } from "Components/v2/LoadingArea"
import React from "react"
import { createRefetchContainer, graphql, RelayRefetchProp } from "react-relay"
import { get } from "Utils/get"

export interface Props {
  viewer: SearchResultsAuctions_viewer
  relay: RelayRefetchProp
}

const PAGE_SIZE = 10

export class SearchResultAuctionsRoute extends React.Component<
  Props,
  LoadingAreaState
> {
  state = {
    isLoading: false,
  }

  toggleLoading = isLoading => {
    this.setState({
      isLoading,
    })
  }

  loadNext = () => {
    const { viewer } = this.props
    const { search: searchConnection } = viewer

    const {
      pageInfo: { hasNextPage, endCursor },
    } = searchConnection

    if (hasNextPage) {
      this.loadAfter(endCursor)
    }
  }

  loadAfter = cursor => {
    this.toggleLoading(true)

    this.props.relay.refetch(
      {
        first: PAGE_SIZE,
        after: cursor,
        before: null,
        last: null,
      },
      null,
      error => {
        this.toggleLoading(false)

        if (error) {
          console.error(error)
        }
      }
    )
  }

  render() {
    const { viewer } = this.props
    const { search: searchConnection } = viewer

    const sales = get(viewer, v => v.search.edges, []).map(e => e.node)
    return (
      <LoadingArea isLoading={this.state.isLoading}>
        {sales.map((auction, index) => {
          return (
            <Box key={index}>
              <GenericSearchResultItem
                name={auction.displayLabel}
                description={auction.description}
                href={auction.href}
                imageUrl={auction.imageUrl}
                entityType="Auction"
              />
              <Spacer mb={3} />
              <Separator />
              <Spacer mb={3} />
            </Box>
          )
        })}
        <Pagination
          pageCursors={searchConnection.pageCursors}
          onClick={this.loadAfter}
          onNext={this.loadNext}
          scrollTo="#jumpto--searchResultTabs"
          hasNextPage={searchConnection.pageInfo.hasNextPage}
        />
      </LoadingArea>
    )
  }
}

export const SearchResultsAuctionsRouteRouteFragmentContainer = createRefetchContainer(
  SearchResultAuctionsRoute,
  {
    viewer: graphql`
      fragment SearchResultsAuctions_viewer on Viewer
        @argumentDefinitions(
          term: { type: "String!", defaultValue: "" }<commit_msg>[SearchResults] Add zero state to auctions tab<commit_after>import { Box, Separator, Spacer } from "@artsy/palette"
import { SearchResultsAuctions_viewer } from "__generated__/SearchResultsAuctions_viewer.graphql"
import { GenericSearchResultItem } from "Apps/Search/Components/GenericSearchResultItem"

import { ZeroState } from "Apps/Search/Components/ZeroState"
import { PaginationFragmentContainer as Pagination } from "Components/v2"
import { LoadingArea, LoadingAreaState } from "Components/v2/LoadingArea"
import { Location } from "found"
import React from "react"
import { createRefetchContainer, graphql, RelayRefetchProp } from "react-relay"
import { get } from "Utils/get"

export interface Props {
  viewer: SearchResultsAuctions_viewer
  relay: RelayRefetchProp
  location: Location
}

const PAGE_SIZE = 10

export class SearchResultAuctionsRoute extends React.Component<
  Props,
  LoadingAreaState
> {
  state = {
    isLoading: false,
  }

  toggleLoading = isLoading => {
    this.setState({
      isLoading,
    })
  }

  loadNext = () => {
    const { viewer } = this.props
    const { search: searchConnection } = viewer

    const {
      pageInfo: { hasNextPage, endCursor },
    } = searchConnection

    if (hasNextPage) {
      this.loadAfter(endCursor)
    }
  }

  loadAfter = cursor => {
    this.toggleLoading(true)

    this.props.relay.refetch(
      {
        first: PAGE_SIZE,
        after: cursor,
        before: null,
        last: null,
      },
      null,
      error => {
        this.toggleLoading(false)

        if (error) {
          console.error(error)
        }
      }
    )
  }

  renderAuctions() {
    const { viewer } = this.props
    const { search: searchConnection } = viewer

    const sales = get(viewer, v => v.search.edges, []).map(e => e.node)

    return (
      <>
        {sales.map((auction, index) => {
          return (
            <Box key={index}>
              <GenericSearchResultItem
                name={auction.displayLabel}
                description={auction.description}
                href={auction.href}
                imageUrl={auction.imageUrl}
                entityType="Auction"
              />
              {index < sales.length - 1 ? (
                <>
                  <Spacer mb={3} />
                  <Separator />
                  <Spacer mb={3} />
                </>
              ) : (
                <Spacer mb={3} />
              )}
            </Box>
          )
        })}
        <Pagination
          pageCursors={searchConnection.pageCursors}
          onClick={this.loadAfter}
          onNext={this.loadNext}
          scrollTo="#jumpto--searchResultTabs"
          hasNextPage={searchConnection.pageInfo.hasNextPage}
        />
      </>
    )
  }

  render() {
    const { viewer, location } = this.props
    const { term } = get(location, l => l.query)

    const sales = get(viewer, v => v.search.edges, []).map(e => e.node)
    return (
      <LoadingArea isLoading={this.state.isLoading}>
        {sales.length === 0 ? (
          <ZeroState entity="auctions" term={term} />
        ) : (
          this.renderAuctions()
        )}
      </LoadingArea>
    )
  }
}

export const SearchResultsAuctionsRouteRouteFragmentContainer = createRefetchContainer(
  SearchResultAuctionsRoute,
  {
    viewer: graphql`
      fragment SearchResultsAuctions_viewer on Viewer
        @argumentDefinitions(
          term: { type: "String!", defaultValue: "" }
{'fraction_non_alphanumeric': 0.10944, 'fraction_numerical': 0.0024, 'mean_word_length': 2.203997949769349, 'pattern_counts': {'":': 0, '<': 30, '<?xml version=': 0, '>': 46, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '11737', 'n_tokens_mistral': 1881, 'n_tokens_neox': 1802, 'n_words': 355}