import { GetServerSideProps, NextPage } from 'next'; import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult'; import getBeerPostById from '@/services/BeerPost/getBeerPostById'; import Layout from '@/components/Layout'; import Head from 'next/head'; import Link from 'next/link'; import formatDistanceStrict from 'date-fns/formatDistanceStrict'; import { useState } from 'react'; import { FaRegThumbsUp, FaThumbsUp } from 'react-icons/fa'; interface BeerPageProps { beerPost: BeerPostQueryResult; } const BeerInfoHeader: React.FC<{ beerPost: BeerPostQueryResult }> = ({ beerPost }) => { const createdAtDate = new Date(beerPost.createdAt); const timeDistance = formatDistanceStrict(createdAtDate, Date.now()); const [isLiked, setIsLiked] = useState(false); return (

{beerPost.name}

by{' '} {beerPost.brewery.name}

posted by{' '} {beerPost.postedBy.username} {` ${timeDistance}`} ago

{beerPost.description}

{beerPost.type.name}
{beerPost.abv}% ABV {beerPost.ibu} IBU
); }; const CommentCard: React.FC<{ comment: BeerPostQueryResult['beerComments'][number] }> = ({ comment, }) => { return (

{comment.postedBy.username}

{`posted ${formatDistanceStrict( new Date(comment.createdAt), new Date(), )} ago`}

{comment.content}

); }; const BeerByIdPage: NextPage = ({ beerPost }) => { console.log(beerPost.beerComments); return ( {beerPost.name}
{beerPost.beerImages[0] && ( )}
{/* for each comment make a card */} {beerPost.beerComments.map((comment) => ( ))}
); }; export const getServerSideProps: GetServerSideProps = async (context) => { const beerPost = await getBeerPostById(context.params!.id! as string); return !beerPost ? { notFound: true } : { props: { beerPost: JSON.parse(JSON.stringify(beerPost)) } }; }; export default BeerByIdPage;