From 99c57d88c7058819d9f9ca9715f1c75b11087c3b Mon Sep 17 00:00:00 2001 From: Aaron William Po Date: Fri, 12 May 2023 20:20:52 -0400 Subject: [PATCH 1/2] Update: beer post form now connected to a specific brewery. This commit eliminates the brewery selector in the create beer post form, and reroutes the form page to /breweries/[id]/beers/create. This commit also introduces the use of turbopack for `next dev`. --- package.json | 2 +- .../BreweryById/BreweryBeerSection.tsx | 17 +++- .../BreweryById/BreweryInfoHeader.tsx | 25 +++--- src/components/CreateBeerPostForm.tsx | 84 ++++++------------- src/hooks/utilities/useNavbar.ts | 2 +- src/pages/beers/index.tsx | 10 --- .../{ => breweries/[id]}/beers/create.tsx | 33 ++++---- .../breweries/{[id].tsx => [id]/index.tsx} | 0 8 files changed, 76 insertions(+), 97 deletions(-) rename src/pages/{ => breweries/[id]}/beers/create.tsx (56%) rename src/pages/breweries/{[id].tsx => [id]/index.tsx} (100%) diff --git a/package.json b/package.json index 5ed1c82..47259d4 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev", + "dev": "next dev --turbo", "build": "next build", "start": "next start", "lint": "next lint", diff --git a/src/components/BreweryById/BreweryBeerSection.tsx b/src/components/BreweryById/BreweryBeerSection.tsx index aac35da..4f0ba6b 100644 --- a/src/components/BreweryById/BreweryBeerSection.tsx +++ b/src/components/BreweryById/BreweryBeerSection.tsx @@ -4,6 +4,7 @@ import Link from 'next/link'; import { FC } from 'react'; import { useInView } from 'react-intersection-observer'; import { z } from 'zod'; +import { FaPlus } from 'react-icons/fa'; import BeerRecommendationLoadingComponent from '../BeerById/BeerRecommendationLoadingComponent'; interface BreweryCommentsSectionProps { @@ -31,7 +32,21 @@ const BreweryBeersSection: FC = ({ breweryPost }) =
<> -

Brews

+
+
+

Brews

+
+
+ + + Add Beer + +
+
+ {!!beerPosts.length && (
{beerPosts.map((beerPost, index) => { diff --git a/src/components/BreweryById/BreweryInfoHeader.tsx b/src/components/BreweryById/BreweryInfoHeader.tsx index 018f0e7..42cb969 100644 --- a/src/components/BreweryById/BreweryInfoHeader.tsx +++ b/src/components/BreweryById/BreweryInfoHeader.tsx @@ -4,9 +4,11 @@ import useTimeDistance from '@/hooks/utilities/useTimeDistance'; import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult'; import { format } from 'date-fns'; import { FC, useContext } from 'react'; -import { Link } from 'react-daisyui'; + import { FaRegEdit } from 'react-icons/fa'; + import { z } from 'zod'; +import Link from 'next/link'; import BreweryPostLikeButton from '../BreweryIndex/BreweryPostLikeButton'; interface BreweryInfoHeaderProps { @@ -26,16 +28,19 @@ const BreweryInfoHeader: FC = ({ breweryPost }) => {
-
-
-

{breweryPost.name}

-

- Located in - {` ${breweryPost.location.city}, ${ - breweryPost.location.stateOrProvince || breweryPost.location.country - }`} -

+
+
+
+

{breweryPost.name}

+

+ Located in + {` ${breweryPost.location.city}, ${ + breweryPost.location.stateOrProvince || breweryPost.location.country + }`} +

+
+

{' posted by '} diff --git a/src/components/CreateBeerPostForm.tsx b/src/components/CreateBeerPostForm.tsx index 369e247..e45c12b 100644 --- a/src/components/CreateBeerPostForm.tsx +++ b/src/components/CreateBeerPostForm.tsx @@ -20,7 +20,7 @@ import FormTextArea from './ui/forms/FormTextArea'; import FormTextInput from './ui/forms/FormTextInput'; interface BeerFormProps { - breweries: z.infer[]; + brewery: z.infer; types: BeerType[]; } @@ -29,13 +29,14 @@ const CreateBeerPostWithImagesValidationSchema = CreateBeerPostValidationSchema. ); const CreateBeerPostForm: FunctionComponent = ({ - breweries = [], types = [], + brewery, }) => { const { register, handleSubmit, formState } = useForm< z.infer >({ resolver: zodResolver(CreateBeerPostWithImagesValidationSchema), + defaultValues: { breweryId: brewery.id }, }); const { errors, isSubmitting } = formState; @@ -48,23 +49,9 @@ const CreateBeerPostForm: FunctionComponent = ({ return; } - const { breweryId, typeId, name, abv, ibu, description } = data; - try { - const response = await sendCreateBeerPostRequest({ - breweryId, - typeId, - name, - abv, - ibu, - description, - }); - - await sendUploadBeerImagesRequest({ - beerPost: response, - images: data.images, - }); - + const response = await sendCreateBeerPostRequest(data); + await sendUploadBeerImagesRequest({ beerPost: response, images: data.images }); router.push(`/beers/${response.id}`); } catch (e) { if (!(e instanceof Error)) { @@ -93,48 +80,24 @@ const CreateBeerPostForm: FunctionComponent = ({ /> -
-
- - Brewery - {errors.breweryId?.message} - - - ({ - value: brewery.id, - text: brewery.name, - }))} - placeholder="Brewery" - message="Pick a brewery" - /> - -
-
- - Type - {errors.typeId?.message} - - - ({ - value: beerType.id, - text: beerType.name, - }))} - placeholder="Beer type" - message="Pick a beer type" - /> - -
-
+ + Type + {errors.typeId?.message} + + + ({ + value: beerType.id, + text: beerType.name, + }))} + placeholder="Beer type" + message="Pick a beer type" + /> +
@@ -192,6 +155,7 @@ const CreateBeerPostForm: FunctionComponent = ({ {...register('images')} multiple className="file-input-bordered file-input w-full" + disabled={isSubmitting} /> diff --git a/src/hooks/utilities/useNavbar.ts b/src/hooks/utilities/useNavbar.ts index c718a14..474ec92 100644 --- a/src/hooks/utilities/useNavbar.ts +++ b/src/hooks/utilities/useNavbar.ts @@ -34,8 +34,8 @@ const useNavbar = () => { /** These pages are accessible to both authenticated and unauthenticated users. */ const otherPages: readonly Page[] = [ - { slug: '/beers', name: 'Beers' }, { slug: '/breweries', name: 'Breweries' }, + { slug: '/beers', name: 'Beers' }, ]; /** diff --git a/src/pages/beers/index.tsx b/src/pages/beers/index.tsx index 3e21a0c..76d2ac8 100644 --- a/src/pages/beers/index.tsx +++ b/src/pages/beers/index.tsx @@ -47,16 +47,6 @@ const BeerPage: NextPage = () => {

The Biergarten App

Beers

- {!!user && ( -
- - - -
- )}

{!!beerPosts.length && !isLoading && ( diff --git a/src/pages/beers/create.tsx b/src/pages/breweries/[id]/beers/create.tsx similarity index 56% rename from src/pages/beers/create.tsx rename to src/pages/breweries/[id]/beers/create.tsx index eff60f2..31aff0e 100644 --- a/src/pages/beers/create.tsx +++ b/src/pages/breweries/[id]/beers/create.tsx @@ -3,19 +3,19 @@ import FormPageLayout from '@/components/ui/forms/FormPageLayout'; import withPageAuthRequired from '@/util/withPageAuthRequired'; import DBClient from '@/prisma/DBClient'; -import getAllBreweryPosts from '@/services/BreweryPost/getAllBreweryPosts'; import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult'; import { BeerType } from '@prisma/client'; import { NextPage } from 'next'; import { BiBeer } from 'react-icons/bi'; import { z } from 'zod'; +import getBreweryPostById from '@/services/BreweryPost/getBreweryPostById'; interface CreateBeerPageProps { - breweries: z.infer[]; + brewery: z.infer; types: BeerType[]; } -const CreateBeerPost: NextPage = ({ breweries, types }) => { +const CreateBeerPost: NextPage = ({ brewery, types }) => { return ( = ({ breweries, types }) => backLink="/beers" backLinkText="Back to beers" > - + ); }; -export const getServerSideProps = withPageAuthRequired(async () => { - const breweryPosts = await getAllBreweryPosts(); - const beerTypes = await DBClient.instance.beerType.findMany(); +export const getServerSideProps = withPageAuthRequired( + async (context) => { + const id = context.params?.id as string; - return { - props: { - breweries: JSON.parse(JSON.stringify(breweryPosts)), - types: JSON.parse(JSON.stringify(beerTypes)), - }, - }; -}); + const breweryPost = await getBreweryPostById(id); + + const beerTypes = await DBClient.instance.beerType.findMany(); + + return { + props: { + brewery: JSON.parse(JSON.stringify(breweryPost)), + types: JSON.parse(JSON.stringify(beerTypes)), + }, + }; + }, +); export default CreateBeerPost; diff --git a/src/pages/breweries/[id].tsx b/src/pages/breweries/[id]/index.tsx similarity index 100% rename from src/pages/breweries/[id].tsx rename to src/pages/breweries/[id]/index.tsx From f68af84afe5d51c3b1027d1a8c3aa2593f5b3c95 Mon Sep 17 00:00:00 2001 From: Aaron William Po Date: Fri, 12 May 2023 20:23:55 -0400 Subject: [PATCH 2/2] Refactor: remove unused imports in /pages/beers/index.tsx --- src/pages/beers/index.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/pages/beers/index.tsx b/src/pages/beers/index.tsx index 76d2ac8..453599d 100644 --- a/src/pages/beers/index.tsx +++ b/src/pages/beers/index.tsx @@ -1,21 +1,14 @@ import { NextPage } from 'next'; - import BeerCard from '@/components/BeerIndex/BeerCard'; import Head from 'next/head'; -import Link from 'next/link'; -import UserContext from '@/contexts/userContext'; -import { MutableRefObject, useContext, useRef } from 'react'; - +import { MutableRefObject, useRef } from 'react'; import { useInView } from 'react-intersection-observer'; import Spinner from '@/components/ui/Spinner'; - import useBeerPosts from '@/hooks/data-fetching/beer-posts/useBeerPosts'; -import { FaArrowUp, FaPlus } from 'react-icons/fa'; +import { FaArrowUp } from 'react-icons/fa'; import LoadingCard from '@/components/ui/LoadingCard'; const BeerPage: NextPage = () => { - const { user } = useContext(UserContext); - const PAGE_SIZE = 6; const { beerPosts, setSize, size, isLoading, isLoadingMore, isAtEnd } = useBeerPosts({