Update beer like button to use custom hook to load like status

components/BeerById/BeerPostLikeButton.tsx

@@ -1,41 +1,23 @@
-import UserContext from '@/contexts/userContext';
+import useCheckIfUserLikesBeerPost from '@/hooks/useCheckIfUserLikesBeerPost';
 import sendLikeRequest from '@/requests/sendLikeRequest';
-import { Dispatch, FC, SetStateAction, useContext, useEffect, useState } from 'react';
+import { Dispatch, FC, SetStateAction, useState } from 'react';
 import { FaThumbsUp, FaRegThumbsUp } from 'react-icons/fa';
-import sendCheckIfUserLikesBeerPostRequest from '@/requests/sendCheckIfUserLikesBeerPostRequest';
 
 const BeerPostLikeButton: FC<{
   beerPostId: string;
   setLikeCount: Dispatch<SetStateAction<number>>;
 }> = ({ beerPostId, setLikeCount }) => {
-  const [loading, setLoading] = useState(true);
+  const { isLiked, mutate: mutateLikeStatus } = useCheckIfUserLikesBeerPost(beerPostId);
-  const [isLiked, setIsLiked] = useState(false);
+  const [loading, setLoading] = 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));
+      mutateLikeStatus();
       setLoading(false);
-    } catch (error) {
+    } catch (e) {
       setLoading(false);
     }
   };

hooks/useCheckIfUserLikesBeerPost.ts

@@ -0,0 +1,45 @@
+import UserContext from '@/contexts/userContext';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { useContext } from 'react';
+import useSWR from 'swr';
+import { z } from 'zod';
+
+const useCheckIfUserLikesBeerPost = (beerPostId: string) => {
+  const { user } = useContext(UserContext);
+  const { data, error, isLoading, mutate } = useSWR(
+    `/api/beers/${beerPostId}/like/is-liked`,
+    async () => {
+      if (!user) {
+        throw new Error('User is not logged in.');
+      }
+
+      const response = await fetch(`/api/beers/${beerPostId}/like/is-liked`);
+      const json = await response.json();
+      const parsed = APIResponseValidationSchema.safeParse(json);
+
+      if (!parsed.success) {
+        throw new Error('Invalid API response.');
+      }
+
+      const { payload } = parsed.data;
+      const parsedPayload = z.object({ isLiked: z.boolean() }).safeParse(payload);
+
+      if (!parsedPayload.success) {
+        throw new Error('Invalid API response.');
+      }
+
+      const { isLiked } = parsedPayload.data;
+
+      return isLiked;
+    },
+  );
+
+  return {
+    isLiked: data,
+    error: error as unknown,
+    isLoading,
+    mutate,
+  };
+};
+
+export default useCheckIfUserLikesBeerPost;

requests/sendCheckIfUserLikesBeerPostRequest.ts

@@ -1,31 +0,0 @@
-import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
-import { z } from 'zod';
-
-const sendCheckIfUserLikesBeerPostRequest = async (beerPostId: string) => {
-  const response = await fetch(`/api/beers/${beerPostId}/like/is-liked`);
-  const data = await response.json();
-
-  const parsed = APIResponseValidationSchema.safeParse(data);
-
-  if (!parsed.success) {
-    throw new Error('Invalid API response.');
-  }
-
-  const { payload } = parsed.data;
-
-  const parsedPayload = z
-    .object({
-      isLiked: z.boolean(),
-    })
-    .safeParse(payload);
-
-  if (!parsedPayload.success) {
-    throw new Error('Invalid API response.');
-  }
-
-  const { isLiked } = parsedPayload.data;
-
-  return isLiked;
-};
-
-export default sendCheckIfUserLikesBeerPostRequest;