gistfile1.tsx

// hook

import React from 'react';
import { Dimensions, RefreshControl, ScrollView, View } from 'react-native';
import styled, { useTheme } from 'styled-components/native';

import i18n from '@helpers/i18n';
import { useLayout } from '@react-native-community/hooks';
import { Typography } from '@ui-kit/Typography';

import TransactionsSkeletons from '../../shared/components/skeletons';
import Transaction from '../../shared/components/WalletListItemTransaction';
import useTransactions from '../hooks/useTransactions';

import Separator from './Separator';

// import Separator from './Separator';

interface Props {
  settings: any;
}

const renderSkeletons = (items: number) => <TransactionsSkeletons items={items} />;

const OFFSET = 50;
const { height: SCREEN_HEIGHT } = Dimensions.get('window');

const TransactionList = ({ settings }: Props) => {
  const {
    transactions,
    isLoading,
    isFetchingNextPage,
    fetchNextPage,
    refetch,
    hasNextPage,
    isRefetching,
  } = useTransactions(settings.value);
  const { height: scrollViewHeight, onLayout } = useLayout();
  const {
    utils: { statusBarHeight },
  } = useTheme();
  const transactionsListRef = React.useRef<ScrollView | null>(null);

  const onRefetchNextPage = ({
    nativeEvent: { contentSize, layoutMeasurement, contentOffset },
  }) => {
    if (layoutMeasurement.height + contentOffset.y >= contentSize.height - OFFSET && hasNextPage) {
      fetchNextPage();
    }
  };

  const showLoadMore = scrollViewHeight < SCREEN_HEIGHT + statusBarHeight()! && !isFetchingNextPage;

  const onRefetch = () => fetchNextPage();

  const transactionList = Object.entries(transactions);

  const hasTransactions = !!transactionList[0][1].length;

  if (!isFetchingNextPage && isRefetching) {
    return renderSkeletons(8);
  }

  if (!hasTransactions) {
    console.log('no data');
    return <Typography>No data</Typography>;
  }

  if (hasTransactions) {
    console.log('data');
  }

  return (
    <View style={{ backgroundColor: 'red' }}>
      {console.log(hasTransactions)}
      <ScrollView
        refreshControl={<RefreshControl refreshing={isLoading} onRefresh={refetch} />}
        showsVerticalScrollIndicator={false}
        onMomentumScrollEnd={onRefetchNextPage}
        ref={transactionsListRef}
        onContentSizeChange={() => transactionsListRef.current?.scrollToEnd({ animated: true })}
      >
        <View onLayout={onLayout}>
          {
            <>
              {transactionList.map(([header, item]) => (
                <React.Fragment key={header}>
                  <>
                    <Separator title={header} />
                    {item.map(transaction => (
                      <Transaction key={transaction!.id} {...transaction} />
                    ))}
                  </>
                </React.Fragment>
              ))}
            </>
          }
        </View>
        {showLoadMore && (
          <StyledTypography color="textQuaternary" onPress={onRefetch}>
            {i18n.t('misc.loadMore')}
          </StyledTypography>
        )}
        {isFetchingNextPage && renderSkeletons(3)}
      </ScrollView>
    </View>
  );
};

export default TransactionList;

const StyledTypography = styled(Typography)`
  margin: 0 auto;
`;


// Component

import React from 'react';
import { Dimensions, RefreshControl, ScrollView, View } from 'react-native';
import styled, { useTheme } from 'styled-components/native';

import i18n from '@helpers/i18n';
import { useLayout } from '@react-native-community/hooks';
import { Typography } from '@ui-kit/Typography';

import TransactionsSkeletons from '../../shared/components/skeletons';
import Transaction from '../../shared/components/WalletListItemTransaction';
import useTransactions from '../hooks/useTransactions';

import Separator from './Separator';

// import Separator from './Separator';

interface Props {
  settings: any;
}

const renderSkeletons = (items: number) => <TransactionsSkeletons items={items} />;

const OFFSET = 50;
const { height: SCREEN_HEIGHT } = Dimensions.get('window');

const TransactionList = ({ settings }: Props) => {
  const {
    transactions,
    isLoading,
    isFetchingNextPage,
    fetchNextPage,
    refetch,
    hasNextPage,
    isRefetching,
  } = useTransactions(settings.value);
  const { height: scrollViewHeight, onLayout } = useLayout();
  const {
    utils: { statusBarHeight },
  } = useTheme();
  const transactionsListRef = React.useRef<ScrollView | null>(null);

  const onRefetchNextPage = ({
    nativeEvent: { contentSize, layoutMeasurement, contentOffset },
  }) => {
    if (layoutMeasurement.height + contentOffset.y >= contentSize.height - OFFSET && hasNextPage) {
      fetchNextPage();
    }
  };

  const showLoadMore = scrollViewHeight < SCREEN_HEIGHT + statusBarHeight()! && !isFetchingNextPage;

  const onRefetch = () => fetchNextPage();

  const transactionList = Object.entries(transactions);

  const hasTransactions = !!transactionList[0][1].length;

  if (!isFetchingNextPage && isRefetching) {
    return renderSkeletons(8);
  }

  if (!hasTransactions) {
    console.log('no data');
    return <Typography>No data</Typography>;
  }

  if (hasTransactions) {
    console.log('data');
  }

  return (
    <View style={{ backgroundColor: 'red' }}>
      {console.log(hasTransactions)}
      <ScrollView
        refreshControl={<RefreshControl refreshing={isLoading} onRefresh={refetch} />}
        showsVerticalScrollIndicator={false}
        onMomentumScrollEnd={onRefetchNextPage}
        ref={transactionsListRef}
        onContentSizeChange={() => transactionsListRef.current?.scrollToEnd({ animated: true })}
      >
        <View onLayout={onLayout}>
          {
            <>
              {transactionList.map(([header, item]) => (
                <React.Fragment key={header}>
                  <>
                    <Separator title={header} />
                    {item.map(transaction => (
                      <Transaction key={transaction!.id} {...transaction} />
                    ))}
                  </>
                </React.Fragment>
              ))}
            </>
          }
        </View>
        {showLoadMore && (
          <StyledTypography color="textQuaternary" onPress={onRefetch}>
            {i18n.t('misc.loadMore')}
          </StyledTypography>
        )}
        {isFetchingNextPage && renderSkeletons(3)}
      </ScrollView>
    </View>
  );
};

export default TransactionList;

const StyledTypography = styled(Typography)`
  margin: 0 auto;
`;