Formatting changes

components/BeerById/BeerCommentForm.tsx

@@ -26,7 +26,6 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({ beerPost })
     z.infer<typeof BeerCommentValidationSchema>
   >({
     defaultValues: {
-      beerPostId: beerPost.id,
       rating: 0,
     },
     resolver: zodResolver(BeerCommentValidationSchema),
@@ -35,8 +34,8 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({ beerPost })
   const [rating, setRating] = useState(0);
   useEffect(() => {
     setRating(0);
-    reset({ beerPostId: beerPost.id, rating: 0, content: '' });
-  }, [beerPost.id, reset]);
+    reset({ rating: 0, content: '' });
+  }, [reset]);
 
   const router = useRouter();
   const onSubmit: SubmitHandler<z.infer<typeof BeerCommentValidationSchema>> = async (
@@ -44,7 +43,11 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({ beerPost })
   ) => {
     setValue('rating', 0);
     setRating(0);
-    await sendCreateBeerCommentRequest(data);
+    await sendCreateBeerCommentRequest({
+      content: data.content,
+      rating: data.rating,
+      beerPostId: beerPost.id,
+    });
     reset();
     router.replace(router.asPath, undefined, { scroll: false });
   };

components/BeerById/BeerInfoHeader.tsx

@@ -68,7 +68,9 @@ const BeerInfoHeader: FC<{ beerPost: BeerPostQueryResult; initialLikeCount: numb
               <span className="text-lg font-medium">{beerPost.ibu} IBU</span>
             </div>
             <div>
-              <span>Liked by {likeCount} users</span>
+              <span>
+                Liked by {likeCount} user{likeCount !== 1 && 's'}
+              </span>
             </div>
           </div>
           <div className="card-actions items-end">

components/BeerById/BeerPostLikeButton.tsx

@@ -1,8 +1,8 @@
 import UserContext from '@/contexts/userContext';
-import sendCheckIfUserLikesBeerPostRequest from '@/requests/sendCheckIfUserLikesBeerPostRequest';
 import sendLikeRequest from '@/requests/sendLikeRequest';
 import { Dispatch, FC, SetStateAction, useContext, useEffect, useState } from 'react';
 import { FaThumbsUp, FaRegThumbsUp } from 'react-icons/fa';
+import sendCheckIfUserLikesBeerPostRequest from '@/requests/sendCheckIfUserLikesBeerPostRequest';
 
 const BeerPostLikeButton: FC<{
   beerPostId: string;

components/BeerForm.tsx

@@ -4,9 +4,10 @@ import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQuer
 import { zodResolver } from '@hookform/resolvers/zod';
 import { BeerType } from '@prisma/client';
 import router from 'next/router';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { z } from 'zod';
+import ErrorAlert from './ui/alerts/ErrorAlert';
 import Button from './ui/forms/Button';
 import FormError from './ui/forms/FormError';
 import FormInfo from './ui/forms/FormInfo';
@@ -46,6 +47,8 @@ const BeerForm: FunctionComponent<BeerFormProps> = ({
     },
   });
 
+  const [error, setError] = useState('');
+
   const onSubmit: SubmitHandler<BeerPostT> = async (data) => {
     switch (formType) {
       case 'create': {
@@ -54,8 +57,9 @@ const BeerForm: FunctionComponent<BeerFormProps> = ({
           router.push(`/beers/${response.id}`);
           break;
         } catch (e) {
-          // eslint-disable-next-line no-console
-          console.error(e);
+          if (e instanceof Error) {
+            setError(e.message);
+          }
           break;
         }
       }
@@ -68,6 +72,9 @@ const BeerForm: FunctionComponent<BeerFormProps> = ({
 
   return (
     <form className="form-control" onSubmit={handleSubmit(onSubmit)}>
+      <div className="my-5">
+        {error && <ErrorAlert error={error} setError={setError} />}
+      </div>
       <FormInfo>
         <FormLabel htmlFor="name">Name</FormLabel>
         <FormError>{errors.name?.message}</FormError>