From 27af922a91313b82e9d7f5fce2bcc208cc764827 Mon Sep 17 00:00:00 2001 From: Aaron William Po Date: Sun, 8 Oct 2023 12:27:20 -0400 Subject: [PATCH] Update pages to include links to beer styles --- src/components/BeerById/BeerInfoHeader.tsx | 2 +- .../BeerById/BeerRecommendations.tsx | 7 +- .../BeerStyleById/BeerStyleHeader.tsx | 101 ++++++++++++++++++ .../BeerStyleCard.tsx | 0 .../BreweryById/BreweryBeerSection.tsx | 7 +- src/pages/beers/styles/[id]/index.tsx | 70 ++++++++---- src/pages/beers/styles/index.tsx | 2 +- 7 files changed, 166 insertions(+), 23 deletions(-) create mode 100644 src/components/BeerStyleById/BeerStyleHeader.tsx rename src/components/{BeerStyle => BeerStyleIndex}/BeerStyleCard.tsx (100%) diff --git a/src/components/BeerById/BeerInfoHeader.tsx b/src/components/BeerById/BeerInfoHeader.tsx index f1858f8..d95771f 100644 --- a/src/components/BeerById/BeerInfoHeader.tsx +++ b/src/components/BeerById/BeerInfoHeader.tsx @@ -74,7 +74,7 @@ const BeerInfoHeader: FC = ({ beerPost }) => {
{beerPost.style.name} diff --git a/src/components/BeerById/BeerRecommendations.tsx b/src/components/BeerById/BeerRecommendations.tsx index d1fcb6c..bff261f 100644 --- a/src/components/BeerById/BeerRecommendations.tsx +++ b/src/components/BeerById/BeerRecommendations.tsx @@ -70,7 +70,12 @@ const BeerRecommendationsSection: FC<{
- {post.style.name} + + {post.style.name} +
{post.abv.toFixed(1)}% ABV diff --git a/src/components/BeerStyleById/BeerStyleHeader.tsx b/src/components/BeerStyleById/BeerStyleHeader.tsx new file mode 100644 index 0000000..bffd909 --- /dev/null +++ b/src/components/BeerStyleById/BeerStyleHeader.tsx @@ -0,0 +1,101 @@ +import Link from 'next/link'; +import format from 'date-fns/format'; +import { FC, useContext } from 'react'; + +import UserContext from '@/contexts/UserContext'; +import { FaRegEdit } from 'react-icons/fa'; + +import { z } from 'zod'; +import useTimeDistance from '@/hooks/utilities/useTimeDistance'; +import BeerStyleQueryResult from '@/services/BeerStyles/schema/BeerStyleQueryResult'; + +interface BeerInfoHeaderProps { + beerStyle: z.infer; +} + +const BeerStyleHeader: FC = ({ beerStyle }) => { + const createdAt = new Date(beerStyle.createdAt); + const timeDistance = useTimeDistance(createdAt); + + const { user } = useContext(UserContext); + const idMatches = user && beerStyle.postedBy.id === user.id; + const isPostOwner = !!(user && idMatches); + + // const { likeCount, mutate } = useBeerStyleLikeCount(beerStyle.id); + + return ( +
+
+
+
+
+

{beerStyle.name}

+
+
+

+ {' posted by '} + + {`${beerStyle.postedBy.username} `} + + {timeDistance && ( + + {`${timeDistance} ago`} + + )} +

+
+
+ + {isPostOwner && ( +
+ + + +
+ )} +
+
+

{beerStyle.description}

+
+
+ ABV Range:{' '} + + {beerStyle.abvRange[0].toFixed(1)}% - {beerStyle.abvRange[0].toFixed(1)}% + +
+
+ IBU Range:{' '} + + {beerStyle.ibuRange[0].toFixed(1)} - {beerStyle.ibuRange[1].toFixed(1)} + +
+
+ +
+ Recommended Glassware:{' '} + {beerStyle.glassware.name} +
+
+
+ {/* {user && ( + + )} */} +
+
+
+
+
+ ); +}; + +export default BeerStyleHeader; diff --git a/src/components/BeerStyle/BeerStyleCard.tsx b/src/components/BeerStyleIndex/BeerStyleCard.tsx similarity index 100% rename from src/components/BeerStyle/BeerStyleCard.tsx rename to src/components/BeerStyleIndex/BeerStyleCard.tsx diff --git a/src/components/BreweryById/BreweryBeerSection.tsx b/src/components/BreweryById/BreweryBeerSection.tsx index 385dfc0..bbc9c45 100644 --- a/src/components/BreweryById/BreweryBeerSection.tsx +++ b/src/components/BreweryById/BreweryBeerSection.tsx @@ -76,7 +76,12 @@ const BreweryBeersSection: FC = ({ breweryPost }) =
- {beerPost.style.name} + + {beerPost.style.name} +
{beerPost.abv}% ABV diff --git a/src/pages/beers/styles/[id]/index.tsx b/src/pages/beers/styles/[id]/index.tsx index 2f99284..647467a 100644 --- a/src/pages/beers/styles/[id]/index.tsx +++ b/src/pages/beers/styles/[id]/index.tsx @@ -1,33 +1,65 @@ -import getBeerStyleById from '@/services/BeerStyles/getBeerStyleById'; -import BeerStyleQueryResult from '@/services/BeerStyles/schema/BeerStyleQueryResult'; -import { GetServerSideProps, NextPage } from 'next'; +import { NextPage, GetServerSideProps } from 'next'; +import Head from 'next/head'; + import { z } from 'zod'; +import useMediaQuery from '@/hooks/utilities/useMediaQuery'; +import { Tab } from '@headlessui/react'; +import getBeerStyleById from '@/services/BeerStyles/getBeerStyleById'; +import BeerStyleHeader from '@/components/BeerStyleById/BeerStyleHeader'; +import BeerStyleQueryResult from '@/services/BeerStyles/schema/BeerStyleQueryResult'; + interface BeerStylePageProps { beerStyle: z.infer; } -const BeerStylePage: NextPage = ({ beerStyle }) => { +const BeerByIdPage: NextPage = ({ beerStyle }) => { + const isDesktop = useMediaQuery('(min-width: 1024px)'); + return ( -
-

{beerStyle.name}

-

{beerStyle.description}

-
+ <> + + {beerStyle.name} + + + <> +
+
+ + + {isDesktop ? ( +
+
{/* Comments go here */}
+
{/* Recommendations go here */}
+
+ ) : ( + + + + Comments + + + Beers in this Style + + + + {/* Comments go here */} + {/* Recommendations go here */} + + + )} +
+
+ + ); }; -export default BeerStylePage; +export default BeerByIdPage; -export const getServerSideProps: GetServerSideProps = async ( - context, -) => { - const beerStyle = await getBeerStyleById(context.params!.id! as string); - - if (!beerStyle) { - return { - notFound: true, - }; - } +export const getServerSideProps: GetServerSideProps = async ({ params }) => { + const id = params!.id as string; + const beerStyle = await getBeerStyleById(id); return { props: { beerStyle: JSON.parse(JSON.stringify(beerStyle)) } }; }; diff --git a/src/pages/beers/styles/index.tsx b/src/pages/beers/styles/index.tsx index 92bac39..20fe693 100644 --- a/src/pages/beers/styles/index.tsx +++ b/src/pages/beers/styles/index.tsx @@ -4,7 +4,7 @@ import { MutableRefObject, useRef } from 'react'; import { FaArrowUp } from 'react-icons/fa'; import { useInView } from 'react-intersection-observer'; -import BeerStyleCard from '@/components/BeerStyle/BeerStyleCard'; +import BeerStyleCard from '@/components/BeerStyleIndex/BeerStyleCard'; import SmLoadingCard from '@/components/ui/SmLoadingCard'; import Spinner from '@/components/ui/Spinner'; import useBeerStyles from '@/hooks/data-fetching/beer-styles/useBeerStyles';