bsky-social-app/src/view/com/feeds/ProfileFeedgens.tsx

import {
  useCallback,
  useEffect,
  useImperativeHandle,
  useMemo,
  useState,
} from 'react'
import {
  findNodeHandle,
  type ListRenderItemInfo,
  type StyleProp,
  useWindowDimensions,
  View,
  type ViewStyle,
} from 'react-native'
import {
  type ScrollHandler,
  useAnimatedProps,
  useSharedValue,
} from 'react-native-reanimated'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {useNavigation} from '@react-navigation/native'
import {useQueryClient} from '@tanstack/react-query'

import {ScrollProvider, useScrollHandlers} from '#/lib/ScrollContext'
import {cleanError} from '#/lib/strings/errors'
import {logger} from '#/logger'
import {usePreferencesQuery} from '#/state/queries/preferences'
import {RQKEY, useProfileFeedgensQuery} from '#/state/queries/profile-feedgens'
import {useSession} from '#/state/session'
import {useShellLayout} from '#/state/shell/shell-layout'
import {EmptyState} from '#/view/com/util/EmptyState'
import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
import {List, type ListRef} from '#/view/com/util/List'
import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
import {atoms as a, ios, useTheme} from '#/alf'
import * as FeedCard from '#/components/FeedCard'
import {HashtagWide_Stroke1_Corner0_Rounded as HashtagWideIcon} from '#/components/icons/Hashtag'
import {ListFooter} from '#/components/Lists'
import {IS_IOS, IS_NATIVE, IS_WEB} from '#/env'

const LOADING = {_reactKey: '__loading__'}
const EMPTY = {_reactKey: '__empty__'}
const ERROR_ITEM = {_reactKey: '__error__'}
const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}

interface SectionRef {
  scrollToTop: () => void
}

interface ProfileFeedgensProps {
  ref?: React.Ref<SectionRef>
  did: string
  scrollElRef: ListRef
  headerOffset: number
  collapsedHeaderHeight?: number
  enabled?: boolean
  style?: StyleProp<ViewStyle>
  testID?: string
  setScrollViewTag: (tag: number | null) => void
}

export function ProfileFeedgens({
  ref,
  did,
  scrollElRef,
  headerOffset,
  collapsedHeaderHeight = 0,
  enabled,
  style,
  testID,
  setScrollViewTag,
}: ProfileFeedgensProps) {
  const {_} = useLingui()
  const t = useTheme()
  const [isPTRing, setIsPTRing] = useState(false)

  const {
    onBeginDrag: onBeginDragFromContext,
    onEndDrag: onEndDragFromContext,
    onScroll: onScrollFromContext,
    onMomentumEnd: onMomentumEndFromContext,
  } = useScrollHandlers()

  const scrollY = useSharedValue(0)
  const onScrollWorklet = useCallback<ScrollHandler<any>>(
    (e, ctx) => {
      'worklet'
      onScrollFromContext?.(e, ctx)
      scrollY.set(e.contentOffset.y)
    },
    [onScrollFromContext, scrollY],
  )

  const {footerHeight} = useShellLayout()

  const animatedProps = useAnimatedProps(() => {
    if (IS_IOS) {
      return {
        scrollIndicatorInsets: {
          top: Math.max(headerOffset - scrollY.get(), collapsedHeaderHeight),
          right: 1,
          left: 0,
          bottom: footerHeight.get(),
        },
      }
    }
    return {}
  })
  const {height} = useWindowDimensions()
  const opts = useMemo(() => ({enabled}), [enabled])
  const {
    data,
    isPending,
    isFetchingNextPage,
    hasNextPage,
    fetchNextPage,
    isError,
    error,
    refetch,
  } = useProfileFeedgensQuery(did, opts)
  const isEmpty = !isPending && !data?.pages[0]?.feeds.length
  const {data: preferences} = usePreferencesQuery()
  const navigation = useNavigation()
  const {currentAccount} = useSession()
  const isSelf = currentAccount?.did === did

  const items = useMemo(() => {
    let items: any[] = []
    if (isError && isEmpty) {
      items = items.concat([ERROR_ITEM])
    }
    if (isPending) {
      items = items.concat([LOADING])
    } else if (isEmpty) {
      items = items.concat([EMPTY])
    } else if (data?.pages) {
      for (const page of data?.pages) {
        items = items.concat(page.feeds)
      }
    } else if (isError && !isEmpty) {
      items = items.concat([LOAD_MORE_ERROR_ITEM])
    }
    return items
  }, [isError, isEmpty, isPending, data])

  // events
  // =

  const queryClient = useQueryClient()

  const onScrollToTop = useCallback(() => {
    scrollElRef.current?.scrollToOffset({
      animated: IS_NATIVE,
      offset: -headerOffset,
    })
    queryClient.invalidateQueries({queryKey: RQKEY(did)})
  }, [scrollElRef, queryClient, headerOffset, did])

  useImperativeHandle(ref, () => ({
    scrollToTop: onScrollToTop,
  }))

  const onRefresh = useCallback(async () => {
    setIsPTRing(true)
    try {
      await refetch()
    } catch (err) {
      logger.error('Failed to refresh feeds', {message: err})
    }
    setIsPTRing(false)
  }, [refetch, setIsPTRing])

  const onEndReached = useCallback(async () => {
    if (isFetchingNextPage || !hasNextPage || isError) return

    try {
      await fetchNextPage()
    } catch (err) {
      logger.error('Failed to load more feeds', {message: err})
    }
  }, [isFetchingNextPage, hasNextPage, isError, fetchNextPage])

  const onPressRetryLoadMore = useCallback(() => {
    fetchNextPage()
  }, [fetchNextPage])

  // rendering
  // =

  const renderItem = useCallback(
    ({item, index}: ListRenderItemInfo<any>) => {
      if (item === EMPTY) {
        return (
          <EmptyState
            style={{width: '100%'}}
            icon={HashtagWideIcon}
            message={
              isSelf
                ? _(msg`You haven't made any custom feeds yet.`)
                : _(msg`No custom feeds yet`)
            }
            textStyle={[t.atoms.text_contrast_medium, a.font_medium]}
            button={
              isSelf
                ? {
                    label: _(msg`Browse custom feeds`),
                    text: _(msg`Browse custom feeds`),
                    onPress: () => navigation.navigate('Feeds' as never),
                    size: 'small',
                    color: 'secondary',
                  }
                : undefined
            }
          />
        )
      } else if (item === ERROR_ITEM) {
        return (
          <ErrorMessage message={cleanError(error)} onPressTryAgain={refetch} />
        )
      } else if (item === LOAD_MORE_ERROR_ITEM) {
        return (
          <LoadMoreRetryBtn
            label={_(
              msg`There was an issue fetching your lists. Tap here to try again.`,
            )}
            onPress={onPressRetryLoadMore}
          />
        )
      } else if (item === LOADING) {
        return <FeedLoadingPlaceholder />
      }
      if (preferences) {
        return (
          <View
            style={[
              (index !== 0 || IS_WEB) && a.border_t,
              t.atoms.border_contrast_low,
              a.px_lg,
              a.py_lg,
            ]}>
            <FeedCard.Default view={item} />
          </View>
        )
      }
      return null
    },
    [
      _,
      t,
      error,
      refetch,
      onPressRetryLoadMore,
      preferences,
      navigation,
      isSelf,
    ],
  )

  useEffect(() => {
    if (IS_IOS && enabled && scrollElRef.current) {
      const nativeTag = findNodeHandle(scrollElRef.current)
      setScrollViewTag(nativeTag)
    }
  }, [enabled, scrollElRef, setScrollViewTag])

  const ProfileFeedgensFooter = useCallback(() => {
    if (isEmpty) return null
    return (
      <ListFooter
        hasNextPage={hasNextPage}
        isFetchingNextPage={isFetchingNextPage}
        onRetry={fetchNextPage}
        error={cleanError(error)}
        height={180 + headerOffset}
      />
    )
  }, [
    hasNextPage,
    error,
    isFetchingNextPage,
    headerOffset,
    fetchNextPage,
    isEmpty,
  ])

  const list = (
    <List
      testID={testID ? `${testID}-flatlist` : undefined}
      ref={scrollElRef}
      data={items}
      keyExtractor={keyExtractor}
      renderItem={renderItem}
      ListFooterComponent={ProfileFeedgensFooter}
      refreshing={isPTRing}
      onRefresh={onRefresh}
      headerOffset={headerOffset}
      progressViewOffset={ios(0)}
      removeClippedSubviews={true}
      desktopFixedHeight
      onEndReached={onEndReached}
      contentContainerStyle={{minHeight: height + headerOffset}}
      animatedProps={IS_IOS ? animatedProps : undefined}
    />
  )

  return (
    <View testID={testID} style={style}>
      {IS_IOS ? (
        <ScrollProvider
          onScroll={onScrollWorklet}
          onBeginDrag={onBeginDragFromContext}
          onEndDrag={onEndDragFromContext}
          onMomentumBegin={onMomentumEndFromContext}
          onMomentumEnd={onMomentumEndFromContext}>
          {list}
        </ScrollProvider>
      ) : (
        list
      )}
    </View>
  )
}

function keyExtractor(item: any) {
  return item._reactKey || item.uri
}