import { NextPage } from 'next'; import BeerCard from '@/components/BeerIndex/BeerCard'; import Head from 'next/head'; import { MutableRefObject, useRef } from 'react'; import { useInView } from 'react-intersection-observer'; import Spinner from '@/components/ui/Spinner'; import useBeerPosts from '@/hooks/data-fetching/beer-posts/useBeerPosts'; import { FaArrowUp } from 'react-icons/fa'; import LoadingCard from '@/components/ui/LoadingCard'; const BeerPage: NextPage = () => { const PAGE_SIZE = 6; const { beerPosts, setSize, size, isLoading, isLoadingMore, isAtEnd } = useBeerPosts({ pageSize: PAGE_SIZE, }); const { ref: lastBeerPostRef } = useInView({ onChange: (visible) => { if (!visible || isAtEnd) return; setSize(size + 1); }, }); const pageRef: MutableRefObject = useRef(null); return ( <> Beers | The Biergarten App

The Biergarten App

Beers

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