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 page count to api route header, update docs

Browse Source
This commit is contained in:
Aaron William Po
2023-04-16 23:20:05 -04:00
parent 60fe48b7c1
commit 788d77e745
6 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/api/beers/index.ts
View File

@@ -1,4 +1,5 @@
import validateRequest from '@/config/nextConnect/middleware/validateRequest';
import DBClient from '@/prisma/DBClient';
import getAllBeerPosts from '@/services/BeerPost/getAllBeerPosts';
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
@@ -21,6 +22,9 @@ const getBeerPosts = async (
const pageSize = parseInt(req.query.pageSize, 10);
const beerPosts = await getAllBeerPosts(pageNum, pageSize);
const beerPostCount = await DBClient.instance.beerPost.count();
res.setHeader('X-Total-Count', beerPostCount);
res.status(200).json({
message: 'Beer posts retrieved successfully',

2
src/pages/beers/[id]/index.tsx
View File

@@ -61,7 +61,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
</Carousel>
<div className="mb-12 mt-10 flex w-full items-center justify-center ">
<div className="w-11/12 space-y-3 xl:w-9/12">
<div className="w-11/12 space-y-3 xl:w-9/12 2xl:w-8/12">
<BeerInfoHeader beerPost={beerPost} />
{isDesktop ? (

29
src/pages/beers/index.tsx
View File

@@ -8,24 +8,23 @@ import { MutableRefObject, useContext, useRef } from 'react';
import { useInView } from 'react-intersection-observer';
import Spinner from '@/components/ui/Spinner';
import useMediaQuery from '@/hooks/useMediaQuery';
import useGetBeerPosts from '@/hooks/useGetBeerPosts';
import useBeerPosts from '@/hooks/useBeerPosts';
import BeerPostLoadingCard from '@/components/BeerIndex/BeerPostLoadingCard';
import { FaArrowUp } from 'react-icons/fa';
const BeerPage: NextPage = () => {
const { user } = useContext(UserContext);
const isDesktop = useMediaQuery('(min-width: 1024px)');
const PAGE_SIZE = isDesktop ? 3 : 1;
const PAGE_SIZE = 2;
const { beerPosts, setSize, size, isLoading, isLoadingMore, isAtEnd } = useGetBeerPosts(
{ pageSize: PAGE_SIZE },
);
const { beerPosts, setSize, size, isLoading, isLoadingMore, isAtEnd } = useBeerPosts({
pageSize: PAGE_SIZE,
});
const { ref: lastBeerPostRef } = useInView({
onChange: (visible) => {
if (!visible) return;
if (!visible || isAtEnd) return;
setSize(size + 1);
},
});
@@ -39,7 +38,7 @@ const BeerPage: NextPage = () => {
<meta name="description" content="Beer posts" />
</Head>
<div className="flex items-center justify-center bg-base-100" ref={pageRef}>
<div className="my-10 flex w-11/12 flex-col space-y-4 lg:w-8/12">
<div className="my-10 flex w-11/12 flex-col space-y-4 lg:w-8/12 2xl:w-7/12">
<header className="my-10 flex justify-between">
<div className="space-y-2">
<h1 className="text-6xl font-bold">The Biergarten Index</h1>
@@ -52,7 +51,7 @@ const BeerPage: NextPage = () => {
</div>
)}
</header>
<div className="grid gap-6 xl:grid-cols-2 2xl:grid-cols-3">
<div className="grid gap-6 xl:grid-cols-2">
{!!beerPosts.length && !isLoading && (
<>
{beerPosts.map((beerPost, i) => {
@@ -67,7 +66,7 @@ const BeerPage: NextPage = () => {
})}
</>
)}
{isLoadingMore && (
{(isLoading || isLoadingMore) && (
<>
{Array.from({ length: PAGE_SIZE }, (_, i) => (
<BeerPostLoadingCard key={i} />
@@ -76,13 +75,13 @@ const BeerPage: NextPage = () => {
)}
</div>
{isLoadingMore && (
<div className="mt-1 flex h-52 w-full items-center justify-center">
<Spinner size={isDesktop ? 'lg' : 'md'} />
{(isLoading || isLoadingMore) && (
<div className="flex h-32 w-full items-center justify-center">
<Spinner size="sm" />
</div>
)}
{!isLoadingMore && isAtEnd && (
{isAtEnd && !isLoading && (
<div className="flex h-20 items-center justify-center text-center">
<div
className="tooltip tooltip-bottom"