+
{beerStyle.name}
-
- ABV Range: {beerStyle.abvRange[0].toFixed(1)}%
- -
- {beerStyle.abvRange[1].toFixed(1)}%
-
-
- IBU Range: {beerStyle.ibuRange[0].toFixed(1)}
- -
- {beerStyle.ibuRange[1].toFixed(1)}
-
+
+
+ ABV Range:{' '}
+
+ {beerStyle.abvRange[0].toFixed(1)}% - {beerStyle.abvRange[1].toFixed(1)}%
+
+
+
+ IBU Range:{' '}
+
+ {beerStyle.ibuRange[0].toFixed(1)} - {beerStyle.ibuRange[1].toFixed(1)}
+
+
+
+
+
+
{beerStyle.description}
+
+
+
+ Recommended Glassware:{' '}
+ {beerStyle.glassware.name}
+
diff --git a/src/components/ui/SmLoadingCard.tsx b/src/components/ui/SmLoadingCard.tsx
new file mode 100644
index 0000000..6d42aa3
--- /dev/null
+++ b/src/components/ui/SmLoadingCard.tsx
@@ -0,0 +1,23 @@
+import { FC } from 'react';
+
+const SMLoadingCard: FC = () => {
+ return (
+
+ );
+};
+
+export default SMLoadingCard;
diff --git a/src/pages/beers/styles/index.tsx b/src/pages/beers/styles/index.tsx
index 9365bb3..a4bf4da 100644
--- a/src/pages/beers/styles/index.tsx
+++ b/src/pages/beers/styles/index.tsx
@@ -1,14 +1,14 @@
-import BeerStyleCard from '@/components/BeerStyle/BeerStyleCard';
-import LoadingCard from '@/components/ui/LoadingCard';
-import Spinner from '@/components/ui/Spinner';
-import useBeerStyles from '@/hooks/data-fetching/beer-styles/useBeerStyles';
-
import { NextPage } from 'next';
import Head from 'next/head';
import { MutableRefObject, useRef } from 'react';
import { FaArrowUp } from 'react-icons/fa';
import { useInView } from 'react-intersection-observer';
+import BeerStyleCard from '@/components/BeerStyle/BeerStyleCard';
+import SmLoadingCard from '@/components/ui/SmLoadingCard';
+import Spinner from '@/components/ui/Spinner';
+import useBeerStyles from '@/hooks/data-fetching/beer-styles/useBeerStyles';
+
const BeerStylePage: NextPage = () => {
const PAGE_SIZE = 20;
const pageRef: MutableRefObject
= useRef(null);
@@ -17,7 +17,6 @@ const BeerStylePage: NextPage = () => {
pageSize: PAGE_SIZE,
});
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
const { ref: lastBeerStyleRef } = useInView({
onChange: (visible) => {
if (!visible || isAtEnd) return;
@@ -28,7 +27,7 @@ const BeerStylePage: NextPage = () => {
return (
<>
- Beer Types | The Biergarten App
+ Beer Styles | The Biergarten App
{
{(isLoading || isLoadingMore) && (
<>
{Array.from({ length: PAGE_SIZE }, (_, i) => (
-
+
))}
>
)}
diff --git a/src/services/BeerStyles/getAllBeerStyles.ts b/src/services/BeerStyles/getAllBeerStyles.ts
index 63dbd84..20d04f5 100644
--- a/src/services/BeerStyles/getAllBeerStyles.ts
+++ b/src/services/BeerStyles/getAllBeerStyles.ts
@@ -17,6 +17,8 @@ const getAllBeerStyles = async (
updatedAt: true,
abvRange: true,
ibuRange: true,
+ description: true,
+ glassware: { select: { id: true, name: true } },
},
})) as z.infer[];
diff --git a/src/services/BeerStyles/schema/BeerStyleQueryResult.ts b/src/services/BeerStyles/schema/BeerStyleQueryResult.ts
index 924beb4..766f1ee 100644
--- a/src/services/BeerStyles/schema/BeerStyleQueryResult.ts
+++ b/src/services/BeerStyles/schema/BeerStyleQueryResult.ts
@@ -1,16 +1,15 @@
import { z } from 'zod';
const BeerStyleQueryResult = z.object({
+ abvRange: z.tuple([z.number(), z.number()]),
+ createdAt: z.coerce.date(),
+ description: z.string(),
+ glassware: z.object({ id: z.string().cuid(), name: z.string() }),
+ ibuRange: z.tuple([z.number(), z.number()]),
id: z.string().cuid(),
name: z.string(),
- postedBy: z.object({
- id: z.string().cuid(),
- username: z.string(),
- }),
- createdAt: z.coerce.date(),
+ postedBy: z.object({ id: z.string().cuid(), username: z.string() }),
updatedAt: z.coerce.date().nullable(),
- abvRange: z.tuple([z.number(), z.number()]),
- ibuRange: z.tuple([z.number(), z.number()]),
});
export default BeerStyleQueryResult;