import BreweryCard from '@/components/BreweryIndex/BreweryCard'; import LoadingCard from '@/components/ui/LoadingCard'; import Spinner from '@/components/ui/Spinner'; import UserContext from '@/contexts/UserContext'; import useBreweryPosts from '@/hooks/data-fetching/brewery-posts/useBreweryPosts'; import BreweryPostQueryResult from '@/services/posts/brewery-post/schema/BreweryPostQueryResult'; import { NextPage } from 'next'; import Head from 'next/head'; import { useContext, MutableRefObject, useRef } from 'react'; import Link from 'next/link'; import { FaPlus, FaArrowUp, FaMap } from 'react-icons/fa'; import { useInView } from 'react-intersection-observer'; import { z } from 'zod'; interface BreweryPageProps { breweryPosts: z.infer[]; } const BreweryPage: NextPage = () => { const PAGE_SIZE = 20; const { breweryPosts, setSize, size, isLoading, isLoadingMore, isAtEnd } = useBreweryPosts({ pageSize: PAGE_SIZE, }); const { ref: lastBreweryPostRef } = useInView({ onChange: (visible) => { if (!visible || isAtEnd) return; setSize(size + 1); }, }); const { user } = useContext(UserContext); const pageRef: MutableRefObject = useRef(null); return ( <> Breweries

The Biergarten App

Breweries

{!!user && (
)}
{!!breweryPosts.length && !isLoading && ( <> {breweryPosts.map((breweryPost) => { return (
); })} )} {(isLoading || isLoadingMore) && ( <> {Array.from({ length: PAGE_SIZE }, (_, i) => ( ))} )}
{(isLoading || isLoadingMore) && (
)} {isAtEnd && !isLoading && (
)}
); }; export default BreweryPage;