AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 20:13:49 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Add date established to brewery page

Browse Source
This commit is contained in:
Aaron William Po
2023-04-23 20:31:09 -04:00
parent 58d30b605f
commit eec082e73a
11 changed files with 119 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/pages/breweries/index.tsx
View File

@@ -5,6 +5,7 @@ import UserContext from '@/contexts/userContext';
import useBreweryPosts from '@/hooks/useBreweryPosts';
import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
import { NextPage } from 'next';
import Head from 'next/head';
import { useContext, MutableRefObject, useRef } from 'react';
import { Link } from 'react-daisyui';
import { FaPlus, FaArrowUp } from 'react-icons/fa';
@@ -34,81 +35,90 @@ const BreweryPage: NextPage<BreweryPageProps> = () => {
const pageRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
return (
<div className="flex items-center justify-center bg-base-100" ref={pageRef}>
<div className="my-10 flex w-10/12 flex-col space-y-4 lg:w-8/12 2xl:w-7/12">
<header className="my-10 flex justify-between lg:flex-row">
<div>
<h1 className="text-4xl font-bold lg:text-6xl">The Biergarten Index</h1>
<h2 className="text-2xl font-bold lg:text-4xl">Breweries</h2>
<>
<Head>
<title>Breweries</title>
<meta
name="description"
content="Find breweries near you and around the world."
/>
</Head>
<div className="flex items-center justify-center bg-base-100" ref={pageRef}>
<div className="my-10 flex w-10/12 flex-col space-y-4 lg:w-8/12 2xl:w-7/12">
<header className="my-10 flex justify-between lg:flex-row">
<div>
<h1 className="text-4xl font-bold lg:text-6xl">The Biergarten App</h1>
<h2 className="text-2xl font-bold lg:text-4xl">Breweries</h2>
</div>
{!!user && (
<div
className="tooltip tooltip-left h-full"
data-tip="Create a new brewery post"
>
<Link href="/breweries/create" className="btn-ghost btn-sm btn">
<FaPlus />
</Link>
</div>
)}
</header>
<div className="grid gap-6 xl:grid-cols-2">
{!!breweryPosts.length && !isLoading && (
<>
{breweryPosts.map((breweryPost) => {
return (
<div
key={breweryPost.id}
ref={
breweryPosts[breweryPosts.length - 1] === breweryPost
? lastBreweryPostRef
: undefined
}
>
<BreweryCard brewery={breweryPost} />
</div>
);
})}
</>
)}
{(isLoading || isLoadingMore) && (
<>
{Array.from({ length: PAGE_SIZE }, (_, i) => (
<LoadingCard key={i} />
))}
</>
)}
</div>
{!!user && (
<div
className="tooltip tooltip-left h-full"
data-tip="Create a new brewery post"
>
<Link href="/breweries/create" className="btn-ghost btn-sm btn">
<FaPlus />
</Link>
{(isLoading || isLoadingMore) && (
<div className="flex h-32 w-full items-center justify-center">
<Spinner size="sm" />
</div>
)}
</header>
<div className="grid gap-6 xl:grid-cols-2">
{!!breweryPosts.length && !isLoading && (
<>
{breweryPosts.map((breweryPost) => {
return (
<div
key={breweryPost.id}
ref={
breweryPosts[breweryPosts.length - 1] === breweryPost
? lastBreweryPostRef
: undefined
}
>
<BreweryCard brewery={breweryPost} />
</div>
);
})}
</>
)}
{(isLoading || isLoadingMore) && (
<>
{Array.from({ length: PAGE_SIZE }, (_, i) => (
<LoadingCard key={i} />
))}
</>
{isAtEnd && !isLoading && (
<div className="flex h-20 items-center justify-center text-center">
<div
className="tooltip tooltip-bottom"
data-tip="Scroll back to top of page."
>
<button
type="button"
className="btn-ghost btn-sm btn"
aria-label="Scroll back to top of page."
onClick={() => {
pageRef.current?.scrollIntoView({
behavior: 'smooth',
block: 'start',
});
}}
>
<FaArrowUp />
</button>
</div>
</div>
)}
</div>
{(isLoading || isLoadingMore) && (
<div className="flex h-32 w-full items-center justify-center">
<Spinner size="sm" />
</div>
)}
{isAtEnd && !isLoading && (
<div className="flex h-20 items-center justify-center text-center">
<div
className="tooltip tooltip-bottom"
data-tip="Scroll back to top of page."
>
<button
type="button"
className="btn-ghost btn-sm btn"
aria-label="Scroll back to top of page."
onClick={() => {
pageRef.current?.scrollIntoView({
behavior: 'smooth',
block: 'start',
});
}}
>
<FaArrowUp />
</button>
</div>
</div>
)}
</div>
</div>
</>
);
};