import { NextPage } from 'next'; import Head from 'next/head'; import { MutableRefObject, useRef } from 'react'; import { FaArrowUp } from 'react-icons/fa'; import { useInView } from 'react-intersection-observer'; import BeerStyleCard from '@/components/BeerStyleIndex/BeerStyleCard'; import SmLoadingCard from '@/components/ui/SmLoadingCard'; import Spinner from '@/components/ui/Spinner'; import useBeerStyles from '@/hooks/data-fetching/beer-styles/useBeerStyles'; const BeerStylePage: NextPage = () => { const PAGE_SIZE = 20; const pageRef: MutableRefObject = useRef(null); const { beerStyles, isLoading, isLoadingMore, isAtEnd, size, setSize } = useBeerStyles({ pageSize: PAGE_SIZE, }); const { ref: lastBeerStyleRef } = useInView({ onChange: (visible) => { if (!visible || isAtEnd) return; setSize(size + 1); }, }); return ( <> Beer Styles | The Biergarten App

The Biergarten App

Styles

{!!beerStyles.length && !isLoading && ( <> {beerStyles.map((beerStyle, i) => { return (
); })} )} {(isLoading || isLoadingMore) && ( <> {Array.from({ length: PAGE_SIZE }, (_, i) => ( ))} )}
{(isLoading || isLoadingMore) && (
)} {isAtEnd && !isLoading && (
)}
); }; export default BeerStylePage;