Refactored api services into sep files. Client fix

Fixed hydration errors in beers/[id] by implementing timeDistanceState

components/BeerById/CommentCard.tsx

@@ -1,26 +1,35 @@
-import BeerCommentQueryResult from '@/services/BeerPost/types/BeerCommentQueryResult';
-import formatDistanceStrict from 'date-fns/formatDistanceStrict';
-// @ts-expect-error
-import ReactStars from 'react-rating-stars-component';
+import { BeerCommentQueryResultT } from '@/services/BeerComment/schema/BeerCommentQueryResult';
+import { formatDistanceStrict } from 'date-fns';
+import { useEffect, useState } from 'react';
+import { Rating } from 'react-daisyui';
 
 const CommentCard: React.FC<{
-  comment: BeerCommentQueryResult;
+  comment: BeerCommentQueryResultT;
 }> = ({ comment }) => {
-  const timeDistance = formatDistanceStrict(new Date(comment.createdAt), new Date());
+  const [timeDistance, setTimeDistance] = useState('');
+
+  useEffect(() => {
+    setTimeDistance(formatDistanceStrict(new Date(comment.createdAt), new Date()));
+  }, [comment.createdAt]);
+
   return (
-    <div className="card-body h-56">
+    <div className="card-body h-[1/9]">
       <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}
-        />
+        <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>
       <p>{comment.content}</p>
     </div>