{beerPost.name}

import BeerCommentForm from '@/components/BeerById/BeerCommentForm'; import BeerInfoHeader from '@/components/BeerById/BeerInfoHeader'; import BeerRecommendations from '@/components/BeerById/BeerRecommendations'; import CommentCard from '@/components/BeerById/CommentCard'; import Layout from '@/components/ui/Layout'; import UserContext from '@/contexts/userContext'; import DBClient from '@/prisma/DBClient'; import getAllBeerComments from '@/services/BeerComment/getAllBeerComments'; import { BeerCommentQueryResultArrayT } from '@/services/BeerComment/schema/BeerCommentQueryResult'; import getBeerPostById from '@/services/BeerPost/getBeerPostById'; import getBeerRecommendations from '@/services/BeerPost/getBeerRecommendations'; import { BeerPostQueryResult } from '@/services/BeerPost/schema/BeerPostQueryResult'; import { BeerPost } from '@prisma/client'; import { NextPage, GetServerSideProps } from 'next'; import Head from 'next/head'; import Image from 'next/image'; import Link from 'next/link'; import { useRouter } from 'next/router'; import { useState, useEffect, useContext } from 'react'; interface BeerPageProps { beerPost: BeerPostQueryResult; beerRecommendations: (BeerPost & { brewery: { id: string; name: string }; beerImages: { id: string; alt: string; url: string }[]; })[]; beerComments: BeerCommentQueryResultArrayT; commentsPageCount: number; likeCount: number; } const BeerByIdPage: NextPage = ({ beerPost, beerRecommendations, beerComments, commentsPageCount, likeCount, }) => { const { user } = useContext(UserContext); const [comments, setComments] = useState(beerComments); const router = useRouter(); const commentsPageNum = router.query.comments_page ? parseInt(router.query.comments_page as string, 10) : 1; useEffect(() => { setComments(beerComments); }, [beerComments]); return ( {beerPost.name}

{beerPost.beerImages[0] && ( {beerPost.beerImages[0].alt}

)}

{user ? ( ) : (

)}

{comments.map((comment) => ( ))}

Next Comments Previous Comments

); }; export const getServerSideProps: GetServerSideProps = async (context) => { const beerPost = await getBeerPostById(context.params!.id! as string); const beerCommentPageNum = parseInt(context.query.comments_page as string, 10) || 1; if (!beerPost) { return { notFound: true }; } const { type, brewery, id } = beerPost; const beerRecommendations = await getBeerRecommendations({ type, brewery, id }); const pageSize = 5; const beerComments = await getAllBeerComments( { id: beerPost.id }, { pageSize, pageNum: beerCommentPageNum }, ); const numberOfPosts = await DBClient.instance.beerComment.count({ where: { beerPostId: beerPost.id }, }); const pageCount = numberOfPosts ? Math.ceil(numberOfPosts / pageSize) : 0; const likeCount = await DBClient.instance.beerPostLike.count({ where: { beerPostId: beerPost.id }, }); const props = { beerPost: JSON.parse(JSON.stringify(beerPost)), beerRecommendations: JSON.parse(JSON.stringify(beerRecommendations)), beerComments: JSON.parse(JSON.stringify(beerComments)), commentsPageCount: JSON.parse(JSON.stringify(pageCount)), likeCount: JSON.parse(JSON.stringify(likeCount)), }; return { props }; }; export default BeerByIdPage;