Feat: fix profile avatars in comments

This reverts the change to the comment content body component in the previous commit.

src/components/BeerBreweryComments/CommentCardBody.tsx

@@ -4,7 +4,7 @@ import { FC, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { z } from 'zod';
 import CreateCommentValidationSchema from '@/services/schema/CommentSchema/CreateCommentValidationSchema';
-
+import Image from 'next/image';
 import CommentContentBody from './CommentContentBody';
 import EditCommentBody from './EditCommentBody';
 
@@ -28,19 +28,36 @@ const CommentCardBody: FC<CommentCardProps> = ({
 }) => {
   const [inEditMode, setInEditMode] = useState(false);
 
+  const { userAvatar } = comment.postedBy;
   return (
-    <div ref={ref}>
-      {!inEditMode ? (
-        <CommentContentBody comment={comment} setInEditMode={setInEditMode} />
-      ) : (
-        <EditCommentBody
-          comment={comment}
-          mutate={mutate}
-          setInEditMode={setInEditMode}
-          handleDeleteRequest={handleDeleteRequest}
-          handleEditRequest={handleEditRequest}
-        />
-      )}
+    <div ref={ref} className="flex">
+      <div className="w-[12%] py-4 justify-center">
+        <div className="px-1 mask mask-circle">
+          {!userAvatar ? null : (
+            <Image
+              src={userAvatar.path}
+              alt="user avatar"
+              width={1000}
+              height={1000}
+              className="h-full w-full"
+            />
+          )}
+        </div>
+      </div>
+
+      <div className="w-[88%] h-full">
+        {!inEditMode ? (
+          <CommentContentBody comment={comment} setInEditMode={setInEditMode} />
+        ) : (
+          <EditCommentBody
+            comment={comment}
+            mutate={mutate}
+            setInEditMode={setInEditMode}
+            handleDeleteRequest={handleDeleteRequest}
+            handleEditRequest={handleEditRequest}
+          />
+        )}
+      </div>
     </div>
   );
 };

src/components/BeerBreweryComments/CommentContentBody.tsx

@@ -5,7 +5,7 @@ import { Dispatch, FC, SetStateAction, useContext } from 'react';
 import { Rating } from 'react-daisyui';
 import Link from 'next/link';
 import CommentQueryResult from '@/services/schema/CommentSchema/CommentQueryResult';
-import Image from 'next/image';
+
 import { z } from 'zod';
 import CommentCardDropdown from './CommentCardDropdown';
 
@@ -19,65 +19,47 @@ const CommentContentBody: FC<CommentContentBodyProps> = ({ comment, setInEditMod
   const timeDistance = useTimeDistance(new Date(comment.createdAt));
 
   return (
-    <div className="card-body animate-in fade-in-10">
-      <div className="flex space-x-5">
-        <div className="w-2/12 avatar display flex items-center justify-center">
-          <div className="w-28 h-28 rounded-full ring ring-primary">
-            {comment.postedBy.userAvatar ? (
-              <Image
-                src={comment.postedBy.userAvatar.path}
-                alt={comment.postedBy.userAvatar.alt}
-                width={200}
-                height={200}
-              />
-            ) : (
-              <div className="flex items-center justify-center w-full h-full text-2xl font-bold text-white bg-primary rounded-full">
-                {comment.postedBy.username[0]}
-              </div>
-            )}
-          </div>
-        </div>
-        <div className="w-10/12 space-y-2">
-          <div className="flex flex-row justify-between">
-            <div>
-              <p className="font-semibold sm:text-2xl">
-                <Link href={`/users/${comment.postedBy.id}`} className="link-hover link">
-                  {comment.postedBy.username}
-                </Link>
-              </p>
-              <span className="italic">
-                posted{' '}
-                <time
-                  className="tooltip tooltip-bottom"
-                  data-tip={format(new Date(comment.createdAt), 'MM/dd/yyyy')}
-                >
-                  {timeDistance}
-                </time>{' '}
-                ago
-              </span>
-            </div>
-
-            {user && (
-              <CommentCardDropdown comment={comment} setInEditMode={setInEditMode} />
-            )}
-          </div>
-          <div className="space-y-1">
-            <Rating value={comment.rating}>
-              {Array.from({ length: 5 }).map((val, index) => (
-                <Rating.Item
-                  name="rating-1"
-                  className="mask mask-star cursor-default"
-                  disabled
-                  aria-disabled
-                  key={index}
-                />
-              ))}
-            </Rating>
-          </div>
+    <div className="pr-3 py-4 animate-in fade-in-10 space-y-1">
+      <div className="space-y-2">
+        <div className="flex flex-row justify-between">
           <div>
-            <p>{comment.content}</p>
+            <p className="font-semibold sm:text-2xl">
+              <Link href={`/users/${comment.postedBy.id}`} className="link-hover link">
+                {comment.postedBy.username}
+              </Link>
+            </p>
+            <span className="italic">
+              posted{' '}
+              <time
+                className="tooltip tooltip-bottom"
+                data-tip={format(new Date(comment.createdAt), 'MM/dd/yyyy')}
+              >
+                {timeDistance}
+              </time>{' '}
+              ago
+            </span>
           </div>
+
+          {user && (
+            <CommentCardDropdown comment={comment} setInEditMode={setInEditMode} />
+          )}
         </div>
+        <div className="space-y-1">
+          <Rating value={comment.rating}>
+            {Array.from({ length: 5 }).map((val, index) => (
+              <Rating.Item
+                name="rating-1"
+                className="mask mask-star cursor-default"
+                disabled
+                aria-disabled
+                key={index}
+              />
+            ))}
+          </Rating>
+        </div>
+      </div>
+      <div>
+        <p className="text-sm">{comment.content}</p>
       </div>
     </div>
   );

src/components/BeerBreweryComments/EditCommentBody.tsx

@@ -81,7 +81,7 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
   };
 
   return (
-    <div className="card-body animate-in fade-in-10">
+    <div className="pr-3 py-4 animate-in fade-in-10">
       <form onSubmit={handleSubmit(onEdit)} className="space-y-3">
         <div>
           <FormInfo>

src/prisma/seed/create/createNewUserAvatars.ts

@@ -18,8 +18,9 @@ const createNewUserAvatars = async ({
 }: CreateNewUserAvatarsArgs) => {
   const userAvatars: UserAvatarData[] = [];
 
-  const path = imageUrls[Math.floor(Math.random() * imageUrls.length)];
   users.forEach((user) => {
+    const path = imageUrls[Math.floor(Math.random() * imageUrls.length)];
+
     userAvatars.push({
       path,
       alt: `${user.firstName} ${user.lastName}`,