Add custom hooks for time distance and retrieving like count

Documentation added to all custom hooks

hooks/useBeerPostComments.ts

@@ -9,6 +9,17 @@ interface UseBeerPostCommentsProps {
   pageSize: number;
 }
 
+/**
+ * A custom React hook that fetches comments for a specific beer post.
+ *
+ * @param props - The props object.
+ * @param props.pageNum - The page number of the comments to fetch.
+ * @param props.id - The ID of the beer post to fetch comments for.
+ * @param props.pageSize - The number of comments to fetch per page.
+ * @returns An object containing the fetched comments, the total number of comment pages,
+ *   a boolean indicating if the request is currently loading, and a function to mutate
+ *   the data.
+ */
 const useBeerPostComments = ({ pageNum, id, pageSize }: UseBeerPostCommentsProps) => {
   const { data, error, isLoading, mutate } = useSWR(
     `/api/beers/${id}/comments?page_num=${pageNum}&page_size=${pageSize}`,

hooks/useBeerPostSearch.ts

@@ -1,7 +1,14 @@
 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import useSWR from 'swr';
 import { z } from 'zod';
-
+/**
+ * A custom React hook that searches for beer posts that match a given query string.
+ *
+ * @param query The search query string to match beer posts against.
+ * @returns An object containing an array of search results matching the query, an error
+ *   object if an error occurred during the search, and a boolean indicating if the
+ *   request is currently loading.
+ */
 const useBeerPostSearch = (query: string | undefined) => {
   const { data, isLoading, error } = useSWR(
     `/api/beers/search?search=${query}`,

hooks/useCheckIfUserLikesBeerPost.ts

@@ -4,6 +4,17 @@ import { useContext } from 'react';
 import useSWR from 'swr';
 import { z } from 'zod';
 
+/**
+ * A custom React hook that checks if the current user has liked a beer post by fetching
+ * data from the server.
+ *
+ * @param beerPostId The ID of the beer post to check for likes.
+ * @returns An object containing a boolean indicating if the user has liked the beer post,
+ *   an error object if an error occurred during the request, and a boolean indicating if
+ *   the request is currently loading.
+ * @throws When the user is not logged in, the server returns an error status code, or if
+ *   the response data fails to validate against the expected schema.
+ */
 const useCheckIfUserLikesBeerPost = (beerPostId: string) => {
   const { user } = useContext(UserContext);
   const { data, error, isLoading, mutate } = useSWR(

hooks/useGetLikeCount.ts

@@ -0,0 +1,48 @@
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { z } from 'zod';
+import useSWR from 'swr';
+
+/**
+ * Custom hook to fetch the like count for a beer post from the server.
+ *
+ * @param beerPostId - The ID of the beer post to fetch the like count for.
+ * @returns An object with the current like count, as well as metadata about the current
+ *   state of the request.
+ */
+
+const useGetLikeCount = (beerPostId: string) => {
+  const { error, mutate, data, isLoading } = useSWR(
+    `/api/beers/${beerPostId}/like`,
+    async (url) => {
+      const response = await fetch(url);
+      const json = await response.json();
+
+      const parsed = APIResponseValidationSchema.safeParse(json);
+
+      if (!parsed.success) {
+        throw new Error('Failed to parse API response');
+      }
+
+      const parsedPayload = z
+        .object({
+          likeCount: z.number(),
+        })
+        .safeParse(parsed.data.payload);
+
+      if (!parsedPayload.success) {
+        throw new Error('Failed to parse API response payload');
+      }
+
+      return parsedPayload.data.likeCount;
+    },
+  );
+
+  return {
+    error: error as unknown,
+    isLoading,
+    mutate,
+    likeCount: data as number | undefined,
+  };
+};
+
+export default useGetLikeCount;

hooks/useRedirectIfLoggedIn.ts

@@ -2,7 +2,14 @@ import UserContext from '@/contexts/userContext';
 import { useRouter } from 'next/router';
 import { useContext } from 'react';
 
-const useRedirectWhenLoggedIn = () => {
+/**
+ * Custom React hook that redirects the user to the home page if they are logged in. This
+ * hook is used to prevent logged in users from accessing the login and signup pages. Must
+ * be used under the UserContext provider.
+ *
+ * @returns {void}
+ */
+const useRedirectWhenLoggedIn = (): void => {
   const { user } = useContext(UserContext);
   const router = useRouter();
 

hooks/useTimeDistance.ts

@@ -0,0 +1,20 @@
+import formatDistanceStrict from 'date-fns/formatDistanceStrict';
+import { useState, useEffect } from 'react';
+
+/**
+ * Returns the time distance between the provided date and the current time, using the
+ * `date-fns` `formatDistanceStrict` function. This hook ensures that the same result is
+ * calculated on both the server and client, preventing hydration errors.
+ *
+ * @param createdAt The date to calculate the time distance from.
+ * @returns The time distance between the provided date and the current time.
+ */
+const useTimeDistance = (createdAt: Date) => {
+  const [timeDistance, setTimeDistance] = useState('');
+  useEffect(() => {
+    setTimeDistance(formatDistanceStrict(createdAt, new Date()));
+  }, [createdAt]);
+  return timeDistance;
+};
+
+export default useTimeDistance;

hooks/useUser.ts

@@ -2,6 +2,15 @@ import GetUserSchema from '@/services/User/schema/GetUserSchema';
 import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
 import useSWR from 'swr';
 
+/**
+ * A custom React hook that fetches the current user's data from the server.
+ *
+ * @returns An object containing the current user's data, a boolean indicating if the
+ *   request is currently loading, and an error object if an error occurred during the
+ *   request.
+ * @throws When the user is not logged in, the server returns an error status code, or if
+ *   the response data fails to validate against the expected schema.
+ */
 const useUser = () => {
   const {
     data: user,