Add custom hooks for time distance and retrieving like count

Documentation added to all custom hooks

components/BeerById/BeerInfoHeader.tsx

@@ -1,33 +1,26 @@
 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 { FC, useContext } from 'react';
 
 import UserContext from '@/contexts/userContext';
 import { FaRegEdit } from 'react-icons/fa';
 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import { z } from 'zod';
+import useGetLikeCount from '@/hooks/useGetLikeCount';
+import useTimeDistance from '@/hooks/useTimeDistance';
 import BeerPostLikeButton from './BeerPostLikeButton';
 
 const BeerInfoHeader: FC<{
   beerPost: z.infer<typeof beerPostQueryResult>;
-  initialLikeCount: number;
-}> = ({ beerPost, initialLikeCount }) => {
-  const createdAtDate = new Date(beerPost.createdAt);
-  const [timeDistance, setTimeDistance] = useState('');
-  const { user } = useContext(UserContext);
+}> = ({ beerPost }) => {
+  const createdAt = new Date(beerPost.createdAt);
+  const timeDistance = useTimeDistance(createdAt);
 
-  const [likeCount, setLikeCount] = useState(initialLikeCount);
+  const { user } = useContext(UserContext);
   const idMatches = user && beerPost.postedBy.id === user.id;
   const isPostOwner = !!(user && idMatches);
 
-  useEffect(() => {
-    setLikeCount(initialLikeCount);
-  }, [initialLikeCount]);
-
-  useEffect(() => {
-    setTimeDistance(formatDistanceStrict(new Date(beerPost.createdAt), new Date()));
-  }, [beerPost.createdAt]);
+  const { likeCount, mutate } = useGetLikeCount(beerPost.id);
 
   return (
     <main className="card flex flex-col justify-center bg-base-300">
@@ -62,12 +55,14 @@ const BeerInfoHeader: FC<{
           <Link href={`/users/${beerPost.postedBy.id}`} className="link-hover link">
             {`${beerPost.postedBy.username} `}
           </Link>
-          <span
-            className="tooltip tooltip-right"
-            data-tip={format(createdAtDate, 'MM/dd/yyyy')}
-          >
-            {`${timeDistance} ago`}
-          </span>
+          {timeDistance && (
+            <span
+              className="tooltip tooltip-right"
+              data-tip={format(createdAt, 'MM/dd/yyyy')}
+            >
+              {`${timeDistance} ago`}
+            </span>
+          )}
         </h3>
 
         <p>{beerPost.description}</p>
@@ -86,15 +81,15 @@ const BeerInfoHeader: FC<{
               <span className="text-lg font-medium">{beerPost.ibu} IBU</span>
             </div>
             <div>
-              <span>
-                Liked by {likeCount} user{likeCount !== 1 && 's'}
-              </span>
+              {likeCount && (
+                <span>
+                  Liked by {likeCount} user{likeCount !== 1 && 's'}
+                </span>
+              )}
             </div>
           </div>
           <div className="card-actions items-end">
-            {user && (
-              <BeerPostLikeButton beerPostId={beerPost.id} setLikeCount={setLikeCount} />
-            )}
+            {user && <BeerPostLikeButton beerPostId={beerPost.id} mutateCount={mutate} />}
           </div>
         </div>
       </article>

components/BeerById/BeerPostLikeButton.tsx

@@ -1,12 +1,13 @@
 import useCheckIfUserLikesBeerPost from '@/hooks/useCheckIfUserLikesBeerPost';
 import sendLikeRequest from '@/requests/sendLikeRequest';
-import { Dispatch, FC, SetStateAction, useState } from 'react';
+import { FC, useState } from 'react';
 import { FaThumbsUp, FaRegThumbsUp } from 'react-icons/fa';
+import { KeyedMutator } from 'swr';
 
 const BeerPostLikeButton: FC<{
   beerPostId: string;
-  setLikeCount: Dispatch<SetStateAction<number>>;
-}> = ({ beerPostId, setLikeCount }) => {
+  mutateCount: KeyedMutator<number>;
+}> = ({ beerPostId, mutateCount }) => {
   const { isLiked, mutate: mutateLikeStatus } = useCheckIfUserLikesBeerPost(beerPostId);
   const [loading, setLoading] = useState(false);
 
@@ -14,7 +15,7 @@ const BeerPostLikeButton: FC<{
     try {
       setLoading(true);
       await sendLikeRequest(beerPostId);
-      setLikeCount((prevCount) => prevCount + (isLiked ? -1 : 1));
+      mutateCount();
       mutateLikeStatus();
       setLoading(false);
     } catch (e) {

components/BeerById/CommentCardBody.tsx

@@ -1,8 +1,9 @@
 import UserContext from '@/contexts/userContext';
+import useTimeDistance from '@/hooks/useTimeDistance';
 import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
-import { format, formatDistanceStrict } from 'date-fns';
+import { format } from 'date-fns';
 import Link from 'next/link';
-import { useContext, useEffect, useState } from 'react';
+import { useContext } from 'react';
 import { Rating } from 'react-daisyui';
 
 import { FaEllipsisH } from 'react-icons/fa';
@@ -63,12 +64,9 @@ const CommentCardBody: React.FC<{
     pageCount: number;
   }>;
 }> = ({ comment, mutate }) => {
-  const [timeDistance, setTimeDistance] = useState('');
   const { user } = useContext(UserContext);
 
-  useEffect(() => {
-    setTimeDistance(formatDistanceStrict(new Date(comment.createdAt), new Date()));
-  }, [comment.createdAt]);
+  const timeDistance = useTimeDistance(new Date(comment.createdAt));
 
   return (
     <div className="card-body h-64">

components/BeerIndex/BeerIndexPaginationBar.tsx

@@ -14,7 +14,6 @@ const BeerIndexPaginationBar: FC<PaginationProps> = ({ pageCount, pageNum }) =>
         className={`btn ${pageNum === 1 ? 'btn-disabled' : ''}`}
         href={{ pathname: '/beers', query: { page_num: pageNum - 1 } }}
         scroll={false}
-        prefetch={true}
       >
         «
       </Link>
@@ -23,7 +22,6 @@ const BeerIndexPaginationBar: FC<PaginationProps> = ({ pageCount, pageNum }) =>
         className={`btn ${pageNum === pageCount ? 'btn-disabled' : ''}`}
         href={{ pathname: '/beers', query: { page_num: pageNum + 1 } }}
         scroll={false}
-        prefetch={true}
       >
         »
       </Link>