Add like count and extracted like button out of parent

components/BeerById/BeerInfoHeader.tsx

@@ -2,50 +2,29 @@ import Link from 'next/link';
 import formatDistanceStrict from 'date-fns/formatDistanceStrict';
 import format from 'date-fns/format';
 import { FC, useContext, useEffect, useState } from 'react';
-import { FaRegThumbsUp, FaThumbsUp } from 'react-icons/fa';
 import BeerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 
 import UserContext from '@/contexts/userContext';
-import sendCheckIfUserLikesBeerPostRequest from '@/requests/sendCheckIfUserLikesBeerPostRequest';
-import sendLikeRequest from '../../requests/sendLikeRequest';
+import BeerPostLikeButton from './BeerPostLikeButton';
 
-const BeerInfoHeader: FC<{ beerPost: BeerPostQueryResult }> = ({ beerPost }) => {
+const BeerInfoHeader: FC<{ beerPost: BeerPostQueryResult; initialLikeCount: number }> = ({
+  beerPost,
+  initialLikeCount,
+}) => {
   const createdAtDate = new Date(beerPost.createdAt);
   const [timeDistance, setTimeDistance] = useState('');
   const { user } = useContext(UserContext);
 
-  const [loading, setLoading] = useState(true);
-  const [isLiked, setIsLiked] = useState(false);
+  const [likeCount, setLikeCount] = useState(initialLikeCount);
 
   useEffect(() => {
-    if (!user) {
-      setLoading(false);
-      return;
-    }
-    sendCheckIfUserLikesBeerPostRequest(beerPost.id)
-      .then((currentLikeStatus) => {
-        setIsLiked(currentLikeStatus);
-        setLoading(false);
-      })
-      .catch((e) => {
-        console.error(e);
-        setLoading(false);
-      });
-  }, [user, beerPost.id]);
+    setLikeCount(initialLikeCount);
+  }, [initialLikeCount]);
 
   useEffect(() => {
     setTimeDistance(formatDistanceStrict(new Date(beerPost.createdAt), new Date()));
   }, [beerPost.createdAt]);
 
-  const handleLike = async () => {
-    try {
-      await sendLikeRequest(beerPost);
-      setIsLiked(!isLiked);
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
   return (
     <div className="card flex flex-col justify-center bg-base-300">
       <div className="card-body">
@@ -75,8 +54,8 @@ const BeerInfoHeader: FC<{ beerPost: BeerPostQueryResult }> = ({ beerPost }) =>
 
         <p>{beerPost.description}</p>
         <div className="mt-5 flex justify-between">
-          <div>
-            <div className="mb-1">
+          <div className="space-y-1">
+            <div>
               <Link
                 className="link-hover link text-lg font-bold"
                 href={`/beers/types/${beerPost.type.id}`}
@@ -88,31 +67,13 @@ const BeerInfoHeader: FC<{ beerPost: BeerPostQueryResult }> = ({ beerPost }) =>
               <span className="mr-4 text-lg font-medium">{beerPost.abv}% ABV</span>
               <span className="text-lg font-medium">{beerPost.ibu} IBU</span>
             </div>
+            <div>
+              <span>Liked by {likeCount} users</span>
+            </div>
           </div>
-          <div className="card-actions">
+          <div className="card-actions items-end">
             {user && (
-              <button
-                type="button"
-                className={`btn gap-2 rounded-2xl ${
-                  !isLiked ? 'btn-ghost outline' : 'btn-primary'
-                }`}
-                onClick={() => {
-                  handleLike();
-                }}
-                disabled={loading}
-              >
-                {isLiked ? (
-                  <>
-                    <FaThumbsUp className="text-2xl" />
-                    <span>Liked</span>
-                  </>
-                ) : (
-                  <>
-                    <FaRegThumbsUp className="text-2xl" />
-                    <span>Like</span>
-                  </>
-                )}
-              </button>
+              <BeerPostLikeButton beerPostId={beerPost.id} setLikeCount={setLikeCount} />
             )}
           </div>
         </div>

components/BeerById/BeerPostLikeButton.tsx

@@ -0,0 +1,69 @@
+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';
+
+const BeerPostLikeButton: FC<{
+  beerPostId: string;
+  setLikeCount: Dispatch<SetStateAction<number>>;
+}> = ({ beerPostId, setLikeCount }) => {
+  const [loading, setLoading] = useState(true);
+  const [isLiked, setIsLiked] = useState(false);
+
+  const { user } = useContext(UserContext);
+
+  useEffect(() => {
+    if (!user) {
+      setLoading(false);
+      return;
+    }
+    sendCheckIfUserLikesBeerPostRequest(beerPostId)
+      .then((currentLikeStatus) => {
+        setIsLiked(currentLikeStatus);
+        setLoading(false);
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  }, [user, beerPostId]);
+
+  const handleLike = async () => {
+    try {
+      setLoading(true);
+      await sendLikeRequest(beerPostId);
+      setIsLiked(!isLiked);
+      setLikeCount((prevCount) => prevCount + (isLiked ? -1 : 1));
+      setLoading(false);
+    } catch (error) {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      className={`btn gap-2 rounded-2xl ${
+        !isLiked ? 'btn-ghost outline' : 'btn-primary'
+      }`}
+      onClick={() => {
+        handleLike();
+      }}
+      disabled={loading}
+    >
+      {isLiked ? (
+        <>
+          <FaThumbsUp className="text-2xl" />
+          Liked
+        </>
+      ) : (
+        <>
+          <FaRegThumbsUp className="text-2xl" />
+          Like
+        </>
+      )}
+    </button>
+  );
+};
+
+export default BeerPostLikeButton;