Replace useSWR with useSWRInfinite to facilitate infinite scrolling

This commit is contained in:
Aaron William Po
2023-04-09 11:25:10 -04:00
parent 06f496ecd2
commit 8981bcb4b8
10 changed files with 128 additions and 177 deletions

View File

@@ -25,35 +25,37 @@ interface BeerPageProps {
const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }) => {
return (
<Layout>
<>
<Head>
<title>{beerPost.name}</title>
<meta name="description" content={beerPost.description} />
</Head>
<div>
{beerPost.beerImages[0] && (
<Image
alt={beerPost.beerImages[0].alt}
src={beerPost.beerImages[0].path}
height={1080}
width={1920}
className="h-[42rem] w-full object-cover"
/>
)}
<Layout>
<div>
{beerPost.beerImages[0] && (
<Image
alt={beerPost.beerImages[0].alt}
src={beerPost.beerImages[0].path}
height={1080}
width={1920}
className="h-[42rem] w-full object-cover"
/>
)}
<div className="my-12 flex w-full items-center justify-center ">
<div className="w-11/12 space-y-3 xl:w-9/12">
<BeerInfoHeader beerPost={beerPost} />
<div className="mt-4 flex flex-col space-y-3 md:flex-row md:space-x-3 md:space-y-0">
<BeerPostCommentsSection beerPost={beerPost} />
<div className="md:w-[40%]">
<BeerRecommendations beerRecommendations={beerRecommendations} />
<div className="my-12 flex w-full items-center justify-center ">
<div className="w-11/12 space-y-3 xl:w-9/12">
<BeerInfoHeader beerPost={beerPost} />
<div className="mt-4 flex flex-col space-y-3 md:flex-row md:space-x-3 md:space-y-0">
<BeerPostCommentsSection beerPost={beerPost} />
<div className="md:w-[40%]">
<BeerRecommendations beerRecommendations={beerRecommendations} />
</div>
</div>
</div>
</div>
</div>
</div>
</Layout>
</Layout>
</>
);
};

View File

@@ -13,7 +13,7 @@ const ProtectedPage: NextPage = () => {
const isMorning = currentTime > 4 && currentTime < 12;
const isAfternoon = currentTime > 12 && currentTime < 18;
const isEvening = currentTime > 18 && currentTime < 24 || currentTime <4
const isEvening = (currentTime > 18 && currentTime < 24) || currentTime < 4;
return (
<Layout>