Update: all queries involving image now use ImageQueryValidationSchema

src/components/Account/UserAvatar.tsx

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+import Image from 'next/image';
+import { z } from 'zod';
+import GetUserSchema from '@/services/User/schema/GetUserSchema';
+
+interface UserAvatarProps {
+  user: {
+    username: z.infer<typeof GetUserSchema>['username'];
+    userAvatar: z.infer<typeof GetUserSchema>['userAvatar'];
+    id: z.infer<typeof GetUserSchema>['id'];
+  };
+}
+
+const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
+  const { userAvatar } = user;
+  return !userAvatar ? null : (
+    <Image
+      src={userAvatar.path}
+      alt="user avatar"
+      width={1000}
+      height={1000}
+      className="h-full w-full"
+    />
+  );
+};
+
+export default UserAvatar;

src/components/BeerBreweryComments/CommentCardBody.tsx

@@ -4,9 +4,9 @@ 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';
+import UserAvatar from '../Account/UserAvatar';
 
 interface CommentCardProps {
   comment: z.infer<typeof CommentQueryResult>;
@@ -28,20 +28,11 @@ const CommentCardBody: FC<CommentCardProps> = ({
 }) => {
   const [inEditMode, setInEditMode] = useState(false);
 
-  const { userAvatar } = comment.postedBy;
   return (
     <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"
-            />
-          )}
+          <UserAvatar user={comment.postedBy} />
         </div>
       </div>