Did more work to beer post page, seed

Worked on comments and beer recs features. Fine tuning database seed amounts.

components/BeerById/BeerCommentForm.tsx

@@ -0,0 +1,85 @@
+import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
+import { Dispatch, FunctionComponent, SetStateAction } from 'react';
+import { z } from 'zod';
+import FormLabel from '@/components/ui/forms/FormLabel';
+import FormError from '@/components/ui/forms/FormError';
+import FormTextArea from '@/components/ui/forms/FormTextArea';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import Button from '@/components/ui/forms/Button';
+import FormInfo from '@/components/ui/forms/FormInfo';
+// @ts-expect-error
+import ReactStars from 'react-rating-stars-component';
+import FormSegment from '@/components/ui/forms/FormSegment';
+import BeerCommentQueryResult from '@/services/BeerPost/types/BeerCommentQueryResult';
+import BeerCommentValidationSchema from '@/validation/CreateBeerCommentValidationSchema';
+import sendCreateBeerCommentRequest from '@/requests/sendCreateBeerCommentRequest';
+
+interface BeerCommentFormProps {
+  beerPost: BeerPostQueryResult;
+  setComments: Dispatch<SetStateAction<BeerCommentQueryResult[]>>;
+}
+
+const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
+  beerPost,
+  setComments,
+}) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+    setValue,
+  } = useForm<z.infer<typeof BeerCommentValidationSchema>>({
+    defaultValues: {
+      beerPostId: beerPost.id,
+      rating: 0,
+    },
+    resolver: zodResolver(BeerCommentValidationSchema),
+  });
+
+  const onSubmit: SubmitHandler<z.infer<typeof BeerCommentValidationSchema>> = async (
+    data,
+  ) => {
+    setValue('rating', 0);
+    await sendCreateBeerCommentRequest(data);
+    setComments((prev) => prev);
+    reset();
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <FormInfo>
+        <FormLabel htmlFor="content">Leave a comment</FormLabel>
+        <FormError>{errors.content?.message}</FormError>
+      </FormInfo>
+
+      <FormSegment>
+        <FormTextArea
+          id="content"
+          formValidationSchema={register('content')}
+          placeholder="Comment"
+          rows={5}
+          error={!!errors.content?.message}
+        />
+      </FormSegment>
+
+      <FormInfo>
+        <FormLabel htmlFor="rating">Rating</FormLabel>
+        <FormError>{errors.rating?.message}</FormError>
+      </FormInfo>
+      <ReactStars
+        id="rating"
+        count={5}
+        size={34}
+        activeColor="#ffd700"
+        edit={true}
+        value={0}
+        onChange={(value: 1 | 2 | 3 | 4 | 5) => setValue('rating', value)}
+      />
+      <Button type="submit">Submit</Button>
+    </form>
+  );
+};
+
+export default BeerCommentForm;

components/BeerById/BeerInfoHeader.tsx

@@ -1,6 +1,7 @@
 import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
 import Link from 'next/link';
 import formatDistanceStrict from 'date-fns/formatDistanceStrict';
+import format from 'date-fns/format';
 import { useState } from 'react';
 import { FaRegThumbsUp, FaThumbsUp } from 'react-icons/fa';
 
@@ -11,64 +12,71 @@ const BeerInfoHeader: React.FC<{ beerPost: BeerPostQueryResult }> = ({ beerPost
   const [isLiked, setIsLiked] = useState(false);
 
   return (
-    <div className="flex h-full flex-col justify-center bg-base-300 p-10">
-      <h1 className="text-4xl font-bold">{beerPost.name}</h1>
-      <h2 className="text-2xl font-semibold">
-        by{' '}
-        <Link
-          href={`/breweries/${beerPost.brewery.id}`}
-          className="link-hover link text-2xl font-semibold"
-        >
-          {beerPost.brewery.name}
-        </Link>
-      </h2>
-
-      <h3 className="italic">
-        posted by{' '}
-        <Link href={`/users/${beerPost.postedBy.id}`} className="link-hover link">
-          {beerPost.postedBy.username}
-        </Link>
-        {` ${timeDistance}`} ago
-      </h3>
-
-      <p>{beerPost.description}</p>
-      <div className="flex justify-between">
-        <div>
-          <div className="mb-1">
-            <Link
-              className="text-lg font-medium"
-              href={`/beers/types/${beerPost.type.id}`}
-            >
-              {beerPost.type.name}
-            </Link>
-          </div>
-          <div>
-            <span className="mr-4 text-lg font-medium">{beerPost.abv}% ABV</span>
-            <span className="text-lg font-medium">{beerPost.ibu} IBU</span>
-          </div>
-        </div>
-        <div className="card-actions">
-          <button
-            type="button"
-            className={`btn gap-2 rounded-2xl ${
-              !isLiked ? 'btn-ghost outline' : 'btn-primary'
-            }`}
-            onClick={() => {
-              setIsLiked(!isLiked);
-            }}
+    <div className="card flex flex-col justify-center bg-base-300">
+      <div className="card-body">
+        <h1 className="text-4xl font-bold">{beerPost.name}</h1>
+        <h2 className="text-2xl font-semibold">
+          by{' '}
+          <Link
+            href={`/breweries/${beerPost.brewery.id}`}
+            className="link-hover link text-2xl font-semibold"
           >
-            {isLiked ? (
-              <>
-                <FaThumbsUp className="text-2xl" />
-                <span>Liked</span>
-              </>
-            ) : (
-              <>
-                <FaRegThumbsUp className="text-2xl" />
-                <span>Like</span>
-              </>
-            )}
-          </button>
+            {beerPost.brewery.name}
+          </Link>
+        </h2>
+
+        <h3 className="italic">
+          posted by{' '}
+          <Link href={`/users/${beerPost.postedBy.id}`} className="link-hover link">
+            {beerPost.postedBy.username}{' '}
+          </Link>
+          <span
+            className="tooltip tooltip-bottom"
+            data-tip={format(createdAtDate, 'MM/dd/yyyy')}
+          >
+            {timeDistance} ago
+          </span>
+        </h3>
+
+        <p>{beerPost.description}</p>
+        <div className="mt-5 flex justify-between">
+          <div>
+            <div className="mb-1">
+              <Link
+                className="link-hover link text-lg font-bold"
+                href={`/beers/types/${beerPost.type.id}`}
+              >
+                {beerPost.type.name}
+              </Link>
+            </div>
+            <div>
+              <span className="mr-4 text-lg font-medium">{beerPost.abv}% ABV</span>
+              <span className="text-lg font-medium">{beerPost.ibu} IBU</span>
+            </div>
+          </div>
+          <div className="card-actions">
+            <button
+              type="button"
+              className={`btn gap-2 rounded-2xl ${
+                !isLiked ? 'btn-ghost outline' : 'btn-primary'
+              }`}
+              onClick={() => {
+                setIsLiked(!isLiked);
+              }}
+            >
+              {isLiked ? (
+                <>
+                  <FaThumbsUp className="text-2xl" />
+                  <span>Liked</span>
+                </>
+              ) : (
+                <>
+                  <FaRegThumbsUp className="text-2xl" />
+                  <span>Like</span>
+                </>
+              )}
+            </button>
+          </div>
         </div>
       </div>
     </div>

components/BeerById/BeerRecommendations.tsx

@@ -0,0 +1,34 @@
+import { FunctionComponent } from 'react';
+import Link from 'next/link';
+import BeerRecommendationQueryResult from '@/services/BeerPost/types/BeerReccomendationQueryResult';
+
+interface BeerRecommendationsProps {
+  beerRecommendations: BeerRecommendationQueryResult[];
+}
+const BeerRecommendations: FunctionComponent<BeerRecommendationsProps> = ({
+  beerRecommendations,
+}) => {
+  return (
+    <div className="card sticky top-2 h-full overflow-y-scroll bg-base-300">
+      <div className="card-body">
+        {beerRecommendations.map((beerPost) => (
+          <div key={beerPost.id} className="w-full">
+            <div>
+              <Link href={`/beers/${beerPost.id}`} className="link-hover">
+                <h2 className="text-2xl font-bold">{beerPost.name}</h2>
+              </Link>
+              <Link href={`/breweries/${beerPost.brewery.id}`} className="link-hover">
+                <p className="text-lg font-semibold">{beerPost.brewery.name}</p>
+              </Link>
+            </div>
+
+            <p>{beerPost.abv}% ABV</p>
+            <p>{beerPost.ibu} IBU</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BeerRecommendations;

components/BeerById/CommentCard.tsx

@@ -1,19 +1,28 @@
-import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
+import BeerCommentQueryResult from '@/services/BeerPost/types/BeerCommentQueryResult';
 import formatDistanceStrict from 'date-fns/formatDistanceStrict';
+// @ts-expect-error
+import ReactStars from 'react-rating-stars-component';
 
 const CommentCard: React.FC<{
-  comment: BeerPostQueryResult['beerComments'][number];
+  comment: BeerCommentQueryResult;
 }> = ({ comment }) => {
+  const timeDistance = formatDistanceStrict(new Date(comment.createdAt), new Date());
   return (
-    <div className="card bg-base-300">
-      <div className="card-body">
-        <h3 className="text-2xl font-semibold">{comment.postedBy.username}</h3>
-        <h4 className="italic">{`posted ${formatDistanceStrict(
-          new Date(comment.createdAt),
-          new Date(),
-        )} ago`}</h4>
-        <p>{comment.content}</p>
+    <div className="card-body h-56">
+      <div className="flex justify-between">
+        <div>
+          <h3 className="text-2xl font-semibold">{comment.postedBy.username}</h3>
+          <h4 className="italic">posted {timeDistance} ago</h4>
+        </div>
+        <ReactStars
+          count={5}
+          size={24}
+          activeColor="#ffd700"
+          edit={false}
+          value={comment.rating}
+        />
       </div>
+      <p>{comment.content}</p>
     </div>
   );
 };