<commit_before>import React, { useEffect, useRef, useState } from "react"
import { Box, Text, Button, Flex } from "@artsy/palette"
import { Match } from "found"
import {
  createPaginationContainer,
  graphql,
  RelayPaginationProp,
} from "react-relay"
import {
  PartnerArtistDetailsListRenderer,
  PartnerArtistDetailsRenderer,
  PartnerArtistListFragmentContainer as PartnerArtistList,
  PartnerArtistListPlaceholder,
} from "../../Components/PartnerArtists"
import { PartnerArtists_partner } from "v2/__generated__/PartnerArtists_partner.graphql"

const PAGE_SIZE = 20

export interface ArtistsRouteProps {
  partner: PartnerArtists_partner
  relay: RelayPaginationProp
  match: Match
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

export const ArtistsRoute: React.FC<ArtistsRouteProps> = ({
  partner: { artistsConnection, distinguishRepresentedArtists, slug },
  relay,
  match,
}) => {
  const [artistsLoading, setArtistsLoading] = useState(relay.hasMore())
  const [isRefetching, setIsRefetching] = useState(false)
  const [artists, setArtists] = useState(artistsConnection)
  const errCounter = useRef(0)

  useEffect(() => {
    if (relay.hasMore()) {
      loadMoreArtists()
    }
  }, [])

  useEffect(() => {
    if ((!isRefetching || !artistsLoading) && artists !== artistsConnection) {
      setArtists(artistsConnection)
    }
  }, [isRefetching, artistsLoading])

  const refetchArtists = () => {
    setArtistsLoading(true)
    setIsRefetching(true)
    errCounter.current = 0

    loadMoreArtists()
  }

  const loadMoreArtists = () => {
    relay.loadMore(PAGE_SIZE, async error => {
      if (error) {
        console.error(error)
        errCounter.current += 1
        // Wait before next try.
        await sleep(500)
      } else {
        errCounter.current = 0
      }

      if (errCounter.current >= 3) {
        setIsRefetching(false)
        setArtistsLoading(false)
        setArtists(artistsConnection)

        return
      }

      if (relay.hasMore()) {
        loadMoreArtists()
      } else {
        setIsRefetching(false)
        setArtistsLoading(false)
      }
    })
  }

  const isFirstLoading = !isRefetching && artistsLoading

  return (
    <Box mt={4}>
      <Text variant="title" mb={6}>
        Artists
      </Text>
      {!isFirstLoading && (
        <>
          <PartnerArtistList
            partnerSlug={slug}
            artists={artists.edges}
            distinguishRepresentedArtists={distinguishRepresentedArtists}
          />
          {(errCounter.current > 0 || isRefetching) && (
            <Flex flexDirection="column" mt={2} alignItems="center">
              <Button
                variant="secondaryOutline"
                loading={isRefetching}
                onClick={refetchArtists}
              >
                Load more artists
              </Button><commit_msg>Fix removing items from artist list<commit_after>import React, { useEffect, useRef, useState } from "react"
import { Box, Text, Button, Flex } from "@artsy/palette"
import { Match } from "found"
import {
  createPaginationContainer,
  graphql,
  RelayPaginationProp,
} from "react-relay"
import {
  PartnerArtistDetailsListRenderer,
  PartnerArtistDetailsRenderer,
  PartnerArtistListFragmentContainer as PartnerArtistList,
  PartnerArtistListPlaceholder,
} from "../../Components/PartnerArtists"
import { PartnerArtists_partner } from "v2/__generated__/PartnerArtists_partner.graphql"

const PAGE_SIZE = 20

export interface ArtistsRouteProps {
  partner: PartnerArtists_partner
  relay: RelayPaginationProp
  match: Match
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

export const ArtistsRoute: React.FC<ArtistsRouteProps> = ({
  partner: { artistsConnection: artists, distinguishRepresentedArtists, slug },
  relay,
  match,
}) => {
  const [artistsLoading, setArtistsLoading] = useState(relay.hasMore())
  const [isRefetching, setIsRefetching] = useState(false)
  const [tempArtists, setTempArtists] = useState(undefined)
  const errCounter = useRef(0)

  useEffect(() => {
    if (
      relay.hasMore() &&
      (!artistsLoading || !isRefetching) &&
      errCounter.current === 0
    ) {
      loadMoreArtists()
    }
  }, [artists, artistsLoading, isRefetching])

  const refetchArtists = () => {
    setTempArtists(artists)
    setArtistsLoading(true)
    setIsRefetching(true)
    errCounter.current = 0

    loadMoreArtists()
  }

  const loadMoreArtists = () => {
    relay.loadMore(PAGE_SIZE, async error => {
      if (error) {
        console.error(error)
        errCounter.current += 1
        // Wait before next try.
        await sleep(500)
      } else {
        errCounter.current = 0
      }

      if (errCounter.current >= 3) {
        setIsRefetching(false)
        setArtistsLoading(false)

        return
      }

      if (relay.hasMore()) {
        loadMoreArtists()
      } else {
        setIsRefetching(false)
        setArtistsLoading(false)
        setTempArtists(undefined)
      }
    })
  }

  const isFirstLoading = !isRefetching && artistsLoading

  return (
    <Box mt={4}>
      <Text variant="title" mb={6}>
        Artists
      </Text>
      {!isFirstLoading && (
        <>
          <PartnerArtistList
            partnerSlug={slug}
            artists={isRefetching ? tempArtists.edges : artists.edges}
            distinguishRepresentedArtists={distinguishRepresentedArtists}
          />
          {(errCounter.current > 0 || isRefetching) && (
            <Flex flexDirection="column" mt={2} alignItems="center">
              <Button
                variant="secondaryOutline"
                loading={isRefetching}
                onClick={refetchArtists}
              >
                Load more artists
              </Button>
{'fraction_non_alphanumeric': 0.10768435561681598, 'fraction_numerical': 0.005341144038594073, 'mean_word_length': 2.7548512289780076, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 38, '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': '1884694', 'n_tokens_mistral': 1767, 'n_tokens_neox': 1747, 'n_words': 336}