Move next js project to archive (#207)

archive/next-js-web-app/src/hooks/auth/useConfirmUser.ts

@@ -0,0 +1,77 @@
+import UserContext from '@/contexts/UserContext';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { useRouter } from 'next/router';
+import { useState, useContext, useEffect } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
+
+/**
+ * A custom hook to confirm a user's account.
+ *
+ * @returns An object with the following properties:
+ *
+ *   - `needsToLogin`: A boolean indicating whether the user needs to log in.
+ *   - `tokenInvalid`: A boolean indicating whether the token is invalid.
+ */
+const useConfirmUser = () => {
+  const router = useRouter();
+  const { user, mutate } = useContext(UserContext);
+  const token = router.query.token as string | undefined;
+  const [needsToLogin, setNeedsToLogin] = useState(false);
+  const [tokenInvalid, setTokenInvalid] = useState(false);
+
+  const fetcher = async <T extends string>(url: T) => {
+    if (!token) {
+      throw new Error('Token must be provided.');
+    }
+
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+    const json = await response.json();
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+    if (!parsed.success) {
+      throw new Error('API response validation failed.');
+    }
+
+    mutate!();
+    return parsed.data;
+  };
+
+  const { data, error } = useSWR(`/api/users/confirm?token=${token}`, fetcher);
+
+  useEffect(() => {
+    const loadingToast = toast.loading('Attempting to confirm your account.');
+    if (user && user.accountIsVerified) {
+      toast.remove(loadingToast);
+      router.replace('/users/current');
+      toast('Your account is already verified.');
+    }
+    if (!token) {
+      toast.remove(loadingToast);
+      setTokenInvalid(true);
+      setNeedsToLogin(false);
+    }
+    if (user && !user.accountIsVerified && !data) {
+      toast.remove(loadingToast);
+      setTokenInvalid(true);
+      setNeedsToLogin(false);
+    }
+
+    if (error instanceof Error && error.message === 'Unauthorized') {
+      toast.remove(loadingToast);
+      setTokenInvalid(false);
+      setNeedsToLogin(true);
+    }
+
+    return () => {
+      toast.remove(loadingToast);
+    };
+  }, [error, data, router, user, token]);
+
+  return { needsToLogin, tokenInvalid };
+};
+
+export default useConfirmUser;

archive/next-js-web-app/src/hooks/auth/useRedirectIfLoggedIn.ts

@@ -0,0 +1,21 @@
+import UserContext from '@/contexts/UserContext';
+import { useRouter } from 'next/router';
+import { useContext } from 'react';
+
+/**
+ * A custom hook to redirect 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
+ * and should only be used in a component that is under the UserContext provider.
+ */
+const useRedirectWhenLoggedIn = (): void => {
+  const { user } = useContext(UserContext);
+  const router = useRouter();
+
+  if (!user) {
+    return;
+  }
+  router.push('/');
+};
+
+export default useRedirectWhenLoggedIn;

archive/next-js-web-app/src/hooks/auth/useUser.ts

@@ -0,0 +1,57 @@
+import GetUserSchema from '@/services/users/auth/schema/GetUserSchema';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import useSWR from 'swr';
+
+/**
+ * A custom hook to fetch the current user's data.
+ *
+ * @returns An object with the following properties:
+ *
+ *   - `user`: The current user's data.
+ *   - `isLoading`: A boolean indicating whether the request is still in progress.
+ *   - `error`: An error object if the user is not logged in, if the response data fails to
+ *       validate against the expected schema, or if the server returns an error.
+ *   - `mutate`: A function that can be used to mutate the current user's data.
+ */
+const useUser = () => {
+  const {
+    data: user,
+    error,
+    isLoading,
+    mutate,
+  } = useSWR('/api/users/current', async (url) => {
+    if (!document.cookie.includes('token')) {
+      throw new Error('No token cookie found');
+    }
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+      throw new Error(response.statusText);
+    }
+
+    const json = await response.json();
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+    if (!parsed.success) {
+      throw new Error(parsed.error.message);
+    }
+
+    const parsedPayload = GetUserSchema.safeParse(parsed.data.payload);
+
+    if (!parsedPayload.success) {
+      throw new Error(parsedPayload.error.message);
+    }
+
+    return parsedPayload.data;
+  });
+
+  return {
+    mutate,
+    isLoading,
+    user: error ? undefined : user,
+    error: error as unknown,
+  };
+};
+
+export default useUser;

archive/next-js-web-app/src/hooks/data-fetching/beer-comments/useBeerPostComments.ts

@@ -0,0 +1,79 @@
+import CommentQueryResult from '@/services/schema/CommentSchema/CommentQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { z } from 'zod';
+import useSWRInfinite from 'swr/infinite';
+
+interface UseBeerPostCommentsProps {
+  pageNum: number;
+  id: string;
+  pageSize: number;
+}
+
+/**
+ * A custom hook to fetch 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 with the following properties:
+ *
+ *   - `comments`: The comments for the beer post.
+ *   - `isLoading`: A boolean indicating whether the comments are being fetched.
+ *   - `error`: The error that occurred while fetching the comments.
+ *   - `mutate`: A function to mutate the comments.
+ *   - `size`: The number of pages of comments that have been fetched.
+ *   - `setSize`: A function to set the number of pages of comments that have been fetched.
+ *   - `isLoadingMore`: A boolean indicating whether more comments are being fetched.
+ *   - `isAtEnd`: A boolean indicating whether all comments have been fetched.
+ *   - `pageCount`: The total number of pages of comments.
+ */
+const useBeerPostComments = ({ id, pageSize }: UseBeerPostCommentsProps) => {
+  const fetcher = async (url: string) => {
+    const response = await fetch(url);
+
+    const json = await response.json();
+    const count = response.headers.get('X-Total-Count');
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+    if (!parsed.success) {
+      throw new Error(parsed.error.message);
+    }
+
+    const parsedPayload = z.array(CommentQueryResult).safeParse(parsed.data.payload);
+    if (!parsedPayload.success) {
+      throw new Error(parsedPayload.error.message);
+    }
+
+    const pageCount = Math.ceil(parseInt(count as string, 10) / pageSize);
+    return { comments: parsedPayload.data, pageCount };
+  };
+
+  const { data, error, isLoading, mutate, size, setSize } = useSWRInfinite(
+    (index) => `/api/beers/${id}/comments?page_num=${index + 1}&page_size=${pageSize}`,
+    fetcher,
+    { parallel: true },
+  );
+
+  const comments = data?.flatMap((d) => d.comments) ?? [];
+  const pageCount = data?.[0].pageCount ?? 0;
+
+  const isLoadingMore =
+    isLoading || (size > 0 && data && typeof data[size - 1] === 'undefined');
+
+  const isAtEnd = !(size < data?.[0].pageCount!);
+
+  return {
+    comments,
+    isLoading,
+    error: error as undefined,
+    mutate,
+    size,
+    setSize,
+    isLoadingMore,
+    isAtEnd,
+    pageCount,
+  };
+};
+
+export default useBeerPostComments;

archive/next-js-web-app/src/hooks/data-fetching/beer-likes/useBeerPostLikeCount.ts

@@ -0,0 +1,52 @@
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { z } from 'zod';
+import useSWR from 'swr';
+
+/**
+ * A 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 following properties:
+ *
+ *   - `error`: The error that occurred while fetching the like count.
+ *   - `isLoading`: A boolean indicating whether the like count is being fetched.
+ *   - `mutate`: A function to mutate the like count.
+ *   - `likeCount`: The like count for the beer post.
+ */
+
+const useGetBeerPostLikeCount = (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 useGetBeerPostLikeCount;

archive/next-js-web-app/src/hooks/data-fetching/beer-likes/useCheckIfUserLikesBeerPost.ts

@@ -0,0 +1,56 @@
+import UserContext from '@/contexts/UserContext';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { useContext } from 'react';
+import useSWR from 'swr';
+import { z } from 'zod';
+
+/**
+ * A custom hook to check if the current user has liked a beer post.
+ *
+ * @param beerPostId The ID of the beer post.
+ * @returns An object with the following properties:
+ *
+ *   - `error`: The error that occurred while fetching the data.
+ *   - `isLoading`: A boolean indicating whether the data is being fetched.
+ *   - `mutate`: A function to mutate the data.
+ *   - `isLiked`: A boolean indicating whether the current user has liked the beer post.
+ */
+const useCheckIfUserLikesBeerPost = (beerPostId: string) => {
+  const { user } = useContext(UserContext);
+  const { data, error, isLoading, mutate } = useSWR(
+    `/api/beers/${beerPostId}/like/is-liked`,
+    async (url) => {
+      if (!user) {
+        throw new Error('User is not logged in.');
+      }
+
+      const response = await fetch(url);
+      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;

archive/next-js-web-app/src/hooks/data-fetching/beer-posts/useBeerPostSearch.ts

@@ -0,0 +1,40 @@
+import BeerPostQueryResult from '@/services/posts/beer-post/schema/BeerPostQueryResult';
+import useSWR from 'swr';
+import { z } from 'zod';
+
+/**
+ * A custom hook to search for beer posts that match a given query string.
+ *
+ * @param query The search query string to match beer posts against.
+ * @returns An object with the following properties:
+ *
+ *   - `searchResults`: The beer posts that match the search query.
+ *   - `searchError`: The error that occurred while fetching the data.
+ *   - `isLoading`: A boolean indicating whether the data is being fetched.
+ */
+const useBeerPostSearch = (query: string | undefined) => {
+  const { data, isLoading, error } = useSWR(
+    `/api/beers/search?search=${query}`,
+    async (url) => {
+      if (!query) return [];
+
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(response.statusText);
+      }
+
+      const json = await response.json();
+      const result = z.array(BeerPostQueryResult).parse(json);
+
+      return result;
+    },
+  );
+
+  return {
+    searchResults: data,
+    searchError: error as Error | undefined,
+    isLoading,
+  };
+};
+
+export default useBeerPostSearch;

archive/next-js-web-app/src/hooks/data-fetching/beer-posts/useBeerPosts.ts

@@ -0,0 +1,72 @@
+import BeerPostQueryResult from '@/services/posts/beer-post/schema/BeerPostQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import useSWRInfinite from 'swr/infinite';
+import { z } from 'zod';
+
+/**
+ * A custom hook to fetch beer posts from the API.
+ *
+ * @param options The options to use when fetching beer posts.
+ * @param options.pageSize The number of beer posts to fetch per page.
+ * @returns An object with the following properties:
+ *
+ *   - `beerPosts`: The beer posts fetched from the API.
+ *   - `error`: The error that occurred while fetching the data.
+ *   - `isAtEnd`: A boolean indicating whether all data has been fetched.
+ *   - `isLoading`: A boolean indicating whether the data is being fetched.
+ *   - `isLoadingMore`: A boolean indicating whether more data is being fetched.
+ *   - `pageCount`: The total number of pages of data.
+ *   - `setSize`: A function to set the size of the data.
+ *   - `size`: The size of the data.
+ */
+const useBeerPosts = ({ pageSize }: { pageSize: number }) => {
+  const fetcher = async (url: string) => {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    const json = await response.json();
+    const count = response.headers.get('X-Total-Count');
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+    if (!parsed.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const parsedPayload = z.array(BeerPostQueryResult).safeParse(parsed.data.payload);
+    if (!parsedPayload.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const pageCount = Math.ceil(parseInt(count as string, 10) / pageSize);
+    return {
+      beerPosts: parsedPayload.data,
+      pageCount,
+    };
+  };
+
+  const { data, error, isLoading, setSize, size } = useSWRInfinite(
+    (index) => `/api/beers?page_num=${index + 1}&page_size=${pageSize}`,
+    fetcher,
+    { parallel: true },
+  );
+
+  const beerPosts = data?.flatMap((d) => d.beerPosts) ?? [];
+  const pageCount = data?.[0].pageCount ?? 0;
+  const isLoadingMore = size > 0 && data && typeof data[size - 1] === 'undefined';
+  const isAtEnd = !(size < data?.[0].pageCount!);
+
+  return {
+    beerPosts,
+    error: error as unknown,
+    isAtEnd,
+    isLoading,
+    isLoadingMore,
+    pageCount,
+    setSize,
+    size,
+  };
+};
+
+export default useBeerPosts;

archive/next-js-web-app/src/hooks/data-fetching/beer-posts/useBeerPostsByBeerStyles.ts

@@ -0,0 +1,83 @@
+import BeerPostQueryResult from '@/services/posts/beer-post/schema/BeerPostQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import useSWRInfinite from 'swr/infinite';
+import { z } from 'zod';
+
+interface UseBeerPostsByBeerStyleParams {
+  pageSize: number;
+  beerStyleId: string;
+}
+
+/**
+ * A custom hook to fetch beer posts by beer style.
+ *
+ * @param options The options for fetching beer posts.
+ * @param options.pageSize The number of beer posts to fetch per page.
+ * @param options.beerStyleId The ID of the beer style to fetch beer posts for.
+ * @returns An object with the following properties:
+ *
+ *   - `beerPosts`: The beer posts fetched from the API.
+ *   - `error`: The error that occurred while fetching the data.
+ *   - `isAtEnd`: A boolean indicating whether all data has been fetched.
+ *   - `isLoading`: A boolean indicating whether the data is being fetched.
+ *   - `isLoadingMore`: A boolean indicating whether more data is being fetched.
+ *   - `pageCount`: The total number of pages of data.
+ *   - `setSize`: A function to set the size of the data.
+ *   - `size`: The size of the data.`
+ */
+const useBeerPostsByBeerStyle = ({
+  pageSize,
+  beerStyleId,
+}: UseBeerPostsByBeerStyleParams) => {
+  const fetcher = async (url: string) => {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    const json = await response.json();
+    const count = response.headers.get('X-Total-Count');
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+    if (!parsed.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const parsedPayload = z.array(BeerPostQueryResult).safeParse(parsed.data.payload);
+    if (!parsedPayload.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const pageCount = Math.ceil(parseInt(count as string, 10) / pageSize);
+    return {
+      beerPosts: parsedPayload.data,
+      pageCount,
+    };
+  };
+
+  const { data, error, isLoading, setSize, size } = useSWRInfinite(
+    (index) =>
+      `/api/beers/styles/${beerStyleId}/beers?page_num=${
+        index + 1
+      }&page_size=${pageSize}`,
+    fetcher,
+  );
+
+  const beerPosts = data?.flatMap((d) => d.beerPosts) ?? [];
+  const pageCount = data?.[0].pageCount ?? 0;
+  const isLoadingMore = size > 0 && data && typeof data[size - 1] === 'undefined';
+  const isAtEnd = !(size < data?.[0].pageCount!);
+
+  return {
+    beerPosts,
+    pageCount,
+    size,
+    setSize,
+    isLoading,
+    isLoadingMore,
+    isAtEnd,
+    error: error as unknown,
+  };
+};
+
+export default useBeerPostsByBeerStyle;

archive/next-js-web-app/src/hooks/data-fetching/beer-posts/useBeerPostsByBrewery.ts

@@ -0,0 +1,79 @@
+import BeerPostQueryResult from '@/services/posts/beer-post/schema/BeerPostQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import useSWRInfinite from 'swr/infinite';
+import { z } from 'zod';
+
+interface UseBeerPostsByBreweryParams {
+  pageSize: number;
+  breweryId: string;
+}
+
+/**
+ * A custom hook to fetch beer posts by brewery.
+ *
+ * @param options The options to use when fetching beer posts.
+ * @param options.pageSize The number of beer posts to fetch per page.
+ * @param options.breweryId The ID of the brewery to fetch beer posts for.
+ * @returns An object with the following properties:
+ *
+ *   - `beerPosts`: The beer posts fetched from the API.
+ *   - `error`: The error that occurred while fetching the data.
+ *   - `isAtEnd`: A boolean indicating whether all data has been fetched.
+ *   - `isLoading`: A boolean indicating whether the data is being fetched.
+ *   - `isLoadingMore`: A boolean indicating whether more data is being fetched.
+ *   - `pageCount`: The total number of pages of data.
+ *   - `setSize`: A function to set the size of the data.
+ *   - `size`: The size of the data.
+ */
+const UseBeerPostsByBrewery = ({ pageSize, breweryId }: UseBeerPostsByBreweryParams) => {
+  const fetcher = async (url: string) => {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    const json = await response.json();
+
+    const count = response.headers.get('X-Total-Count');
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+    if (!parsed.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const parsedPayload = z.array(BeerPostQueryResult).safeParse(parsed.data.payload);
+    if (!parsedPayload.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const pageCount = Math.ceil(parseInt(count as string, 10) / pageSize);
+    return {
+      beerPosts: parsedPayload.data,
+      pageCount,
+    };
+  };
+
+  const { data, error, isLoading, setSize, size } = useSWRInfinite(
+    (index) =>
+      `/api/breweries/${breweryId}/beers?page_num=${index + 1}&page_size=${pageSize}`,
+    fetcher,
+  );
+
+  const beerPosts = data?.flatMap((d) => d.beerPosts) ?? [];
+  const pageCount = data?.[0].pageCount ?? 0;
+  const isLoadingMore = size > 0 && data && typeof data[size - 1] === 'undefined';
+  const isAtEnd = !(size < data?.[0].pageCount!);
+
+  return {
+    beerPosts,
+    pageCount,
+    size,
+    setSize,
+    isLoading,
+    isLoadingMore,
+    isAtEnd,
+    error: error as unknown,
+  };
+};
+
+export default UseBeerPostsByBrewery;

archive/next-js-web-app/src/hooks/data-fetching/beer-posts/useBeerPostsByUser.ts

@@ -0,0 +1,79 @@
+import BeerPostQueryResult from '@/services/posts/beer-post/schema/BeerPostQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import useSWRInfinite from 'swr/infinite';
+import { z } from 'zod';
+
+interface UseBeerPostsByUserParams {
+  pageSize: number;
+  userId: string;
+}
+
+/**
+ * A custom hook to fetch beer posts by user.
+ *
+ * @param options The options for fetching beer posts.
+ * @param options.pageSize The number of beer posts to fetch per page.
+ * @param options.userId The ID of the user to fetch beer posts for.
+ * @returns An object with the following properties:
+ *
+ *   - `beerPosts`: The beer posts fetched from the API.
+ *   - `error`: The error that occurred while fetching the data.
+ *   - `isAtEnd`: A boolean indicating whether all data has been fetched.
+ *   - `isLoading`: A boolean indicating whether the data is being fetched.
+ *   - `isLoadingMore`: A boolean indicating whether more data is being fetched.
+ *   - `pageCount`: The total number of pages of data.
+ *   - `setSize`: A function to set the size of the data.
+ *   - `size`: The size of the data.`
+ */
+const useBeerPostsByUser = ({ pageSize, userId }: UseBeerPostsByUserParams) => {
+  const fetcher = async (url: string) => {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    const json = await response.json();
+    const count = response.headers.get('X-Total-Count');
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+    if (!parsed.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const parsedPayload = z.array(BeerPostQueryResult).safeParse(parsed.data.payload);
+    if (!parsedPayload.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const pageCount = Math.ceil(parseInt(count as string, 10) / pageSize);
+    return {
+      beerPosts: parsedPayload.data,
+      pageCount,
+    };
+  };
+
+  const { data, error, isLoading, setSize, size } = useSWRInfinite(
+    (index) =>
+      `/api/users/${userId}/posts/beers?page_num=${index + 1}&page_size=${pageSize}`,
+    fetcher,
+  );
+
+  const beerPosts = data?.flatMap((d) => d.beerPosts) ?? [];
+
+  const pageCount = data?.[0].pageCount ?? 0;
+  const isLoadingMore = size > 0 && data && typeof data[size - 1] === 'undefined';
+  const isAtEnd = !(size < data?.[0].pageCount!);
+
+  return {
+    beerPosts,
+    pageCount,
+    size,
+    setSize,
+    isLoading,
+    isLoadingMore,
+    isAtEnd,
+    error: error as unknown,
+  };
+};
+
+export default useBeerPostsByUser;

archive/next-js-web-app/src/hooks/data-fetching/beer-posts/useBeerRecommendations.ts

@@ -0,0 +1,80 @@
+import BeerPostQueryResult from '@/services/posts/beer-post/schema/BeerPostQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import useSWRInfinite from 'swr/infinite';
+import { z } from 'zod';
+
+interface UseBeerRecommendationsParams {
+  pageSize: number;
+  beerPost: z.infer<typeof BeerPostQueryResult>;
+}
+
+/**
+ * A custom hook to fetch beer recommendations from the API.
+ *
+ * @param options The options to use when fetching beer recommendations.
+ * @param options.pageSize The number of beer recommendations to fetch per page.
+ * @param options.beerPost The beer post to fetch recommendations for.
+ * @returns An object with the following properties:
+ *
+ *   - `beerPosts`: The beer posts fetched from the API.
+ *   - `error`: The error that occurred while fetching the data.
+ *   - `isAtEnd`: A boolean indicating whether all data has been fetched.
+ *   - `isLoading`: A boolean indicating whether the data is being fetched.
+ *   - `isLoadingMore`: A boolean indicating whether more data is being fetched.
+ *   - `pageCount`: The total number of pages of data.
+ *   - `setSize`: A function to set the size of the data.
+ *   - `size`: The size of the data.
+ */
+const UseBeerPostsByBrewery = ({ pageSize, beerPost }: UseBeerRecommendationsParams) => {
+  const fetcher = async (url: string) => {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    const json = await response.json();
+    const count = response.headers.get('X-Total-Count');
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+    if (!parsed.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const parsedPayload = z.array(BeerPostQueryResult).safeParse(parsed.data.payload);
+    if (!parsedPayload.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const pageCount = Math.ceil(parseInt(count as string, 10) / pageSize);
+    return {
+      beerPosts: parsedPayload.data,
+      pageCount,
+    };
+  };
+
+  const { data, error, isLoading, setSize, size } = useSWRInfinite(
+    (index) =>
+      `/api/beers/${beerPost.id}/recommendations/?page_num=${
+        index + 1
+      }&page_size=${pageSize}`,
+    fetcher,
+  );
+
+  const beerPosts = data?.flatMap((d) => d.beerPosts) ?? [];
+  const pageCount = data?.[0].pageCount ?? 0;
+  const isLoadingMore = size > 0 && data && typeof data[size - 1] === 'undefined';
+  const isAtEnd = !(size < data?.[0].pageCount!);
+
+  return {
+    beerPosts,
+    pageCount,
+    size,
+    setSize,
+    isLoading,
+    isLoadingMore,
+    isAtEnd,
+    error: error as unknown,
+  };
+};
+
+export default UseBeerPostsByBrewery;

archive/next-js-web-app/src/hooks/data-fetching/beer-style-comments/useBeerStyleComments.ts

@@ -0,0 +1,79 @@
+import CommentQueryResult from '@/services/schema/CommentSchema/CommentQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { z } from 'zod';
+import useSWRInfinite from 'swr/infinite';
+
+interface UseBeerStyleCommentsOptions {
+  id: string;
+  pageSize: number;
+  pageNum: number;
+}
+/**
+ * A custom hook to fetch comments for a beer style post.
+ *
+ * @param options The options for fetching comments.
+ * @param options.id The ID of the beer style to fetch comments for.
+ * @param options.pageSize The number of comments to fetch per page.
+ * @param options.pageNum The page number to fetch.
+ * @returns An object with the following properties:
+ *
+ *   - `comments`: The comments fetched from the API.
+ *   - `error`: The error that occurred while fetching the data.
+ *   - `isLoading`: A boolean indicating whether the data is being fetched.
+ *   - `isLoadingMore`: A boolean indicating whether more data is being fetched.
+ *   - `isAtEnd`: A boolean indicating whether all data has been fetched.
+ *   - `mutate`: A function to mutate the data.
+ *   - `pageCount`: The total number of pages of data.
+ *   - `setSize`: A function to set the size of the data.
+ *   - `size`: The size of the data.
+ */
+const useBeerStyleComments = ({ id, pageSize }: UseBeerStyleCommentsOptions) => {
+  const fetcher = async (url: string) => {
+    const response = await fetch(url);
+
+    const json = await response.json();
+    const count = response.headers.get('X-Total-Count');
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+    if (!parsed.success) {
+      throw new Error(parsed.error.message);
+    }
+
+    const parsedPayload = z.array(CommentQueryResult).safeParse(parsed.data.payload);
+    if (!parsedPayload.success) {
+      throw new Error(parsedPayload.error.message);
+    }
+
+    const pageCount = Math.ceil(parseInt(count as string, 10) / pageSize);
+    return { comments: parsedPayload.data, pageCount };
+  };
+
+  const { data, error, isLoading, mutate, size, setSize } = useSWRInfinite(
+    (index) =>
+      `/api/beers/styles/${id}/comments?page_num=${index + 1}&page_size=${pageSize}`,
+    fetcher,
+    { parallel: true },
+  );
+
+  const comments = data?.flatMap((d) => d.comments) ?? [];
+  const pageCount = data?.[0].pageCount ?? 0;
+
+  const isLoadingMore =
+    isLoading || (size > 0 && data && typeof data[size - 1] === 'undefined');
+
+  const isAtEnd = !(size < data?.[0].pageCount!);
+
+  return {
+    comments,
+    isLoading,
+    error: error as undefined,
+    mutate,
+    size,
+    setSize,
+    isLoadingMore,
+    isAtEnd,
+    pageCount,
+  };
+};
+
+export default useBeerStyleComments;

archive/next-js-web-app/src/hooks/data-fetching/beer-style-likes/useBeerStyleLikeCount.ts

@@ -0,0 +1,52 @@
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { z } from 'zod';
+import useSWR from 'swr';
+
+/**
+ * A custom hook to fetch the like count for a beer style post.
+ *
+ * @param beerStyleId - The ID of the beer style to fetch the like count for.
+ * @returns An object with the following properties:
+ *
+ *   - `error`: The error that occurred while fetching the like count.
+ *   - `isLoading`: A boolean indicating whether the like count is being fetched.
+ *   - `mutate`: A function to mutate the like count.
+ *   - `likeCount`: The like count for the beer style.
+ */
+
+const useGetBeerStyleLikeCount = (beerStyleId: string) => {
+  const { error, mutate, data, isLoading } = useSWR(
+    `/api/beers/styles/${beerStyleId}/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 useGetBeerStyleLikeCount;

archive/next-js-web-app/src/hooks/data-fetching/beer-style-likes/useCheckIfUserLikesBeerPost.ts

@@ -0,0 +1,56 @@
+import UserContext from '@/contexts/UserContext';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { useContext } from 'react';
+import useSWR from 'swr';
+import { z } from 'zod';
+
+/**
+ * A custom hook to check if the current user has liked a beer style.
+ *
+ * @param beerStyleId The ID of the beer style to check for likes.
+ * @returns An object with the following properties:
+ *
+ *   - `error`: The error that occurred while fetching the data.
+ *   - `isLoading`: A boolean indicating whether the data is being fetched.
+ *   - `mutate`: A function to mutate the data.
+ *   - `isLiked`: A boolean indicating whether the current user has liked the beer style.
+ */
+const useCheckIfUserLikesBeerStyle = (beerStyleId: string) => {
+  const { user } = useContext(UserContext);
+  const { data, error, isLoading, mutate } = useSWR(
+    `/api/beers/styles/${beerStyleId}/like/is-liked`,
+    async (url) => {
+      if (!user) {
+        throw new Error('User is not logged in.');
+      }
+
+      const response = await fetch(url);
+      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 useCheckIfUserLikesBeerStyle;

archive/next-js-web-app/src/hooks/data-fetching/beer-styles/useBeerStyles.ts

@@ -0,0 +1,73 @@
+import BeerStyleQueryResult from '@/services/posts/beer-style-post/schema/BeerStyleQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import useSWRInfinite from 'swr/infinite';
+import { z } from 'zod';
+
+/**
+ * A custom hook to fetch beer styles posts.
+ *
+ * @param options The options to use when fetching beer types.
+ * @param options.pageSize The number of beer types to fetch per page.
+ * @returns An object with the following properties:
+ *
+ *   - `beerStyles`: The beer styles fetched from the API.
+ *   - `error`: The error that occurred while fetching the data.
+ *   - `isAtEnd`: A boolean indicating whether all data has been fetched.
+ *   - `isLoading`: A boolean indicating whether the data is being fetched.
+ *   - `isLoadingMore`: A boolean indicating whether more data is being fetched.
+ *   - `pageCount`: The total number of pages of data.
+ *   - `setSize`: A function to set the size of the data.
+ *   - `size`: The size of the data.
+ */
+const useBeerStyles = ({ pageSize }: { pageSize: number }) => {
+  const fetcher = async (url: string) => {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    const json = await response.json();
+    const count = response.headers.get('X-Total-Count');
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+
+    if (!parsed.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const parsedPayload = z.array(BeerStyleQueryResult).safeParse(parsed.data.payload);
+    if (!parsedPayload.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const pageCount = Math.ceil(parseInt(count as string, 10) / pageSize);
+    return {
+      beerStyles: parsedPayload.data,
+      pageCount,
+    };
+  };
+
+  const { data, error, isLoading, setSize, size } = useSWRInfinite(
+    (index) => `/api/beers/styles?page_num=${index + 1}&page_size=${pageSize}`,
+    fetcher,
+    { parallel: true },
+  );
+
+  const beerStyles = data?.flatMap((d) => d.beerStyles) ?? [];
+  const pageCount = data?.[0].pageCount ?? 0;
+  const isLoadingMore = size > 0 && data && typeof data[size - 1] === 'undefined';
+  const isAtEnd = !(size < data?.[0].pageCount!);
+
+  return {
+    beerStyles,
+    error: error as unknown,
+    isAtEnd,
+    isLoading,
+    isLoadingMore,
+    pageCount,
+    setSize,
+    size,
+  };
+};
+
+export default useBeerStyles;

archive/next-js-web-app/src/hooks/data-fetching/brewery-comments/useBreweryPostComments.ts

@@ -0,0 +1,78 @@
+import CommentQueryResult from '@/services/schema/CommentSchema/CommentQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { z } from 'zod';
+import useSWRInfinite from 'swr/infinite';
+
+interface UseBreweryPostCommentsProps {
+  id: string;
+  pageSize: number;
+}
+
+/**
+ * A custom hook to fetch comments for a specific brewery post.
+ *
+ * @param props - The props object.
+ * @param props.pageNum - The page number of the comments to fetch.
+ * @param props.id - The ID of the brewery post to fetch comments for.
+ * @param props.pageSize - The number of comments to fetch per page.
+ * @returns An object with the following properties:
+ *
+ *   - `comments`: The comments fetched from the API.
+ *   - `error`: The error that occurred while fetching the data.
+ *   - `isLoading`: A boolean indicating whether the data is being fetched.
+ *   - `isLoadingMore`: A boolean indicating whether more data is being fetched.
+ *   - `isAtEnd`: A boolean indicating whether all data has been fetched.
+ *   - `mutate`: A function to mutate the data.
+ *   - `pageCount`: The total number of pages of data.
+ *   - `setSize`: A function to set the size of the data.
+ *   - `size`: The size of the data.
+ */
+const useBreweryPostComments = ({ id, pageSize }: UseBreweryPostCommentsProps) => {
+  const fetcher = async (url: string) => {
+    const response = await fetch(url);
+    const json = await response.json();
+    const count = response.headers.get('X-Total-Count');
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+    if (!parsed.success) {
+      throw new Error(parsed.error.message);
+    }
+
+    const parsedPayload = z.array(CommentQueryResult).safeParse(parsed.data.payload);
+    if (!parsedPayload.success) {
+      throw new Error(parsedPayload.error.message);
+    }
+
+    const pageCount = Math.ceil(parseInt(count as string, 10) / pageSize);
+    return { comments: parsedPayload.data, pageCount };
+  };
+
+  const { data, error, isLoading, mutate, size, setSize } = useSWRInfinite(
+    (index) =>
+      `/api/breweries/${id}/comments?page_num=${index + 1}&page_size=${pageSize}`,
+    fetcher,
+    { parallel: true },
+  );
+
+  const comments = data?.flatMap((d) => d.comments) ?? [];
+  const pageCount = data?.[0].pageCount ?? 0;
+
+  const isLoadingMore =
+    isLoading || (size > 0 && data && typeof data[size - 1] === 'undefined');
+
+  const isAtEnd = !(size < data?.[0].pageCount!);
+
+  return {
+    comments,
+    isLoading,
+    error: error as undefined,
+    mutate,
+    size,
+    setSize,
+    isLoadingMore,
+    isAtEnd,
+    pageCount,
+  };
+};
+
+export default useBreweryPostComments;

archive/next-js-web-app/src/hooks/data-fetching/brewery-likes/useCheckIfUserLikesBreweryPost.ts

@@ -0,0 +1,57 @@
+import UserContext from '@/contexts/UserContext';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { useContext } from 'react';
+import useSWR from 'swr';
+import { z } from 'zod';
+
+/**
+ * A custom hook to check if the current user likes a given brewery post.
+ *
+ * @param breweryPostId - The ID of the brewery post to check.
+ * @returns An object with the following properties:
+ *
+ *   - `isLiked`: A boolean indicating whether the current user likes the brewery post.
+ *   - `error`: The error that occurred while fetching the data.
+ *   - `isLoading`: A boolean indicating whether the data is being fetched.
+ *   - `mutate`: A function to mutate the data.
+ */
+
+const useCheckIfUserLikesBreweryPost = (breweryPostId: string) => {
+  const { user } = useContext(UserContext);
+  const { data, error, isLoading, mutate } = useSWR(
+    `/api/breweries/${breweryPostId}/like/is-liked`,
+    async () => {
+      if (!user) {
+        throw new Error('User is not logged in.');
+      }
+
+      const response = await fetch(`/api/breweries/${breweryPostId}/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 useCheckIfUserLikesBreweryPost;

archive/next-js-web-app/src/hooks/data-fetching/brewery-likes/useGetBreweryPostLikeCount.ts

@@ -0,0 +1,48 @@
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import useSWR from 'swr';
+import { z } from 'zod';
+
+/**
+ * A custom React hook that fetches the number of likes a brewery post has.
+ *
+ * @param breweryPostId
+ * @returns An object with the following properties:
+ *
+ *   - `likeCount`: The number of likes the brewery post has.
+ *   - `error`: The error that occurred while fetching the data.
+ *   - `isLoading`: A boolean indicating whether the data is being fetched.
+ *   - `mutate`: A function to mutate the data.
+ */
+const useGetBreweryPostLikeCount = (breweryPostId: string) => {
+  const { error, mutate, data, isLoading } = useSWR(
+    `/api/breweries/${breweryPostId}/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,
+  };
+};
+
+export default useGetBreweryPostLikeCount;

archive/next-js-web-app/src/hooks/data-fetching/brewery-posts/useBreweryMapPagePosts.ts

@@ -0,0 +1,74 @@
+import BreweryPostMapQueryResult from '@/services/posts/brewery-post/schema/BreweryPostMapQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import useSWRInfinite from 'swr/infinite';
+import { z } from 'zod';
+
+/**
+ * A custom hook to fetch brewery posts for the map.
+ *
+ * @param options The options to use when fetching brewery posts.
+ * @param options.pageSize The number of brewery posts to fetch per page.
+ * @returns An object with the following properties:
+ *
+ *   - `breweryPosts`: The brewery posts fetched from the API.
+ *   - `error`: The error that occurred while fetching the data.
+ *   - `isAtEnd`: A boolean indicating whether all data has been fetched.
+ *   - `isLoading`: A boolean indicating whether the data is being fetched.
+ *   - `isLoadingMore`: A boolean indicating whether more data is being fetched.
+ *   - `pageCount`: The total number of pages of data.
+ *   - `setSize`: A function to set the size of the data.
+ *   - `size`: The size of the data.
+ */
+const useBreweryMapPagePosts = ({ pageSize }: { pageSize: number }) => {
+  const fetcher = async (url: string) => {
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    const json = await response.json();
+
+    const count = response.headers.get('X-Total-Count');
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+    if (!parsed.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const parsedPayload = z
+      .array(BreweryPostMapQueryResult)
+      .safeParse(parsed.data.payload);
+    if (!parsedPayload.success) {
+      throw new Error('API payload validation failed');
+    }
+
+    const pageCount = Math.ceil((count as string, 10) / pageSize);
+
+    return { breweryPosts: parsedPayload.data, pageCount };
+  };
+
+  const { data, error, isLoading, setSize, size } = useSWRInfinite(
+    (index) => `/api/breweries/map?page_num=${index + 1}&page_size=${pageSize}`,
+    fetcher,
+  );
+
+  const breweryPosts = data?.flatMap((d) => d.breweryPosts) ?? [];
+  const pageCount = data?.[0].pageCount ?? 0;
+
+  const isLoadingMore = size > 0 && data && typeof data[size - 1] === 'undefined';
+  const isAtEnd = !(size < data?.[0].pageCount!);
+
+  return {
+    breweries: breweryPosts,
+    isLoading,
+    isLoadingMore,
+    isAtEnd,
+    size,
+    setSize,
+    pageCount,
+    error: error as unknown,
+  };
+};
+
+export default useBreweryMapPagePosts;

archive/next-js-web-app/src/hooks/data-fetching/brewery-posts/useBreweryPosts.ts

@@ -0,0 +1,69 @@
+import BreweryPostQueryResult from '@/services/posts/brewery-post/schema/BreweryPostQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import useSWRInfinite from 'swr/infinite';
+import { z } from 'zod';
+
+/**
+ * A custom hook using SWR to fetch brewery posts from the API.
+ *
+ * @param options The options to use when fetching brewery posts.
+ * @param options.pageSize The number of brewery posts to fetch per page.
+ * @returns An object with the following properties:
+ *
+ *   - `breweryPosts`: The brewery posts fetched from the API.
+ *   - `error`: The error that occurred while fetching the data.
+ *   - `isAtEnd`: A boolean indicating whether all data has been fetched.
+ *   - `isLoading`: A boolean indicating whether the data is being fetched.
+ *   - `isLoadingMore`: A boolean indicating whether more data is being fetched.
+ *   - `pageCount`: The total number of pages of data.
+ *   - `setSize`: A function to set the size of the data.
+ *   - `size`: The size of the data.
+ */
+const useBreweryPosts = ({ pageSize }: { pageSize: number }) => {
+  const fetcher = async (url: string) => {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    const json = await response.json();
+    const count = response.headers.get('X-Total-Count');
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+    if (!parsed.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const parsedPayload = z.array(BreweryPostQueryResult).safeParse(parsed.data.payload);
+    if (!parsedPayload.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const pageCount = Math.ceil(parseInt(count as string, 10) / pageSize);
+    return { breweryPosts: parsedPayload.data, pageCount };
+  };
+
+  const { data, error, isLoading, setSize, size } = useSWRInfinite(
+    (index) => `/api/breweries?page_num=${index + 1}&page_size=${pageSize}`,
+    fetcher,
+    { parallel: true },
+  );
+
+  const breweryPosts = data?.flatMap((d) => d.breweryPosts) ?? [];
+  const pageCount = data?.[0].pageCount ?? 0;
+  const isLoadingMore = size > 0 && data && typeof data[size - 1] === 'undefined';
+  const isAtEnd = !(size < data?.[0].pageCount!);
+
+  return {
+    breweryPosts,
+    pageCount,
+    size,
+    setSize,
+    isLoading,
+    isLoadingMore,
+    isAtEnd,
+    error: error as unknown,
+  };
+};
+
+export default useBreweryPosts;

archive/next-js-web-app/src/hooks/data-fetching/brewery-posts/useBreweryPostsByUser.ts

@@ -0,0 +1,77 @@
+import BreweryPostQueryResult from '@/services/posts/brewery-post/schema/BreweryPostQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import useSWRInfinite from 'swr/infinite';
+import { z } from 'zod';
+
+interface UseBreweryPostsByUserParams {
+  pageSize: number;
+  userId: string;
+}
+
+/**
+ * A custom hook to fetch brewery posts by a specific user.
+ *
+ * @param options The options to use when fetching brewery posts.
+ * @param options.pageSize The number of brewery posts to fetch per page.
+ * @param options.userId The ID of the user to fetch brewery posts for.
+ * @returns An object with the following properties:
+ *
+ *   - `breweryPosts`: The brewery posts fetched from the API.
+ *   - `error`: The error that occurred while fetching the data.
+ *   - `isAtEnd`: A boolean indicating whether all data has been fetched.
+ *   - `isLoading`: A boolean indicating whether the data is being fetched.
+ *   - `isLoadingMore`: A boolean indicating whether more data is being fetched.
+ *   - `pageCount`: The total number of pages of data.
+ *   - `setSize`: A function to set the size of the data.
+ *   - `size`: The size of the data.
+ */
+const useBreweryPostsByUser = ({ pageSize, userId }: UseBreweryPostsByUserParams) => {
+  const fetcher = async (url: string) => {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    const json = await response.json();
+
+    const count = response.headers.get('X-Total-Count');
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+    if (!parsed.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const parsedPayload = z.array(BreweryPostQueryResult).safeParse(parsed.data.payload);
+    if (!parsedPayload.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const pageCount = Math.ceil(parseInt(count as string, 10) / pageSize);
+    return { breweryPosts: parsedPayload.data, pageCount };
+  };
+
+  const { data, error, isLoading, setSize, size } = useSWRInfinite(
+    (index) =>
+      `/api/users/${userId}/posts/breweries?page_num=${index + 1}&page_size=${pageSize}`,
+    fetcher,
+    { parallel: true },
+  );
+
+  const breweryPosts = data?.flatMap((d) => d.breweryPosts) ?? [];
+  const pageCount = data?.[0].pageCount ?? 0;
+  const isLoadingMore = size > 0 && data && typeof data[size - 1] === 'undefined';
+  const isAtEnd = !(size < data?.[0].pageCount!);
+
+  return {
+    breweryPosts,
+    pageCount,
+    size,
+    setSize,
+    isLoading,
+    isLoadingMore,
+    isAtEnd,
+    error: error as unknown,
+  };
+};
+
+export default useBreweryPostsByUser;

archive/next-js-web-app/src/hooks/data-fetching/user-follows/useFollowStatus.ts

@@ -0,0 +1,49 @@
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import useSWR from 'swr';
+import { z } from 'zod';
+
+/**
+ * A custom hook to check if the current user follows a given user.
+ *
+ * @param userFollowedId - The ID of the user to check.
+ * @returns An object with the following properties:
+ *
+ *   - `isFollowed`: A boolean indicating whether the current user follows the user.
+ *   - `error`: The error that occurred while fetching the data.
+ *   - `isLoading`: A boolean indicating whether the data is being fetched.
+ *   - `mutate`: A function to mutate the data.
+ */
+const useFollowStatus = (userFollowedId: string) => {
+  const { data, error, isLoading, mutate } = useSWR(
+    `/api/users/${userFollowedId}/is-followed`,
+    async (url) => {
+      const response = await fetch(url);
+      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({ isFollowed: z.boolean() }).safeParse(payload);
+
+      if (!parsedPayload.success) {
+        throw new Error('Invalid API response.');
+      }
+
+      const { isFollowed } = parsedPayload.data;
+
+      return isFollowed;
+    },
+  );
+
+  return {
+    isFollowed: data,
+    error: error as unknown,
+    isLoading,
+    mutate,
+  };
+};
+
+export default useFollowStatus;

archive/next-js-web-app/src/hooks/data-fetching/user-follows/useGetUsersFollowedByUser.ts

@@ -0,0 +1,87 @@
+/**
+ * A custom hook to fetch the users followed by a given user.
+ *
+ * @param options - The options for fetching users.
+ * @param [options.pageSize=5] - The number of users to fetch per page. Default is `5`
+ * @param options.userId - The ID of the user.
+ * @returns An object with the following properties:
+ *
+ *   - `following` The list of users followed by the specified user.
+ *   - `followingCount` The total count of users followed by the specified user.
+ *   - `pageCount` The total number of pages.
+ *   - `size` The current page size.
+ *   - `setSize` A function to set the page size.
+ *   - `isLoading` Indicates if the data is currently being loaded.
+ *   - `isLoadingMore` Indicates if there are more pages to load.
+ *   - `isAtEnd` Indicates if the current page is the last page.
+ *   - `mutate` A function to mutate the data.
+ *   - `error` The error object, if any.
+ */
+import FollowInfoSchema from '@/services/users/profile/schema/FollowInfoSchema';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import useSWRInfinite from 'swr/infinite';
+import { z } from 'zod';
+
+const useGetUsersFollowedByUser = ({
+  pageSize = 5,
+  userId,
+}: {
+  pageSize?: number;
+  userId: string | undefined;
+}) => {
+  const fetcher = async (url: string) => {
+    if (!userId) {
+      throw new Error('User ID is undefined');
+    }
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    const json = await response.json();
+    const count = response.headers.get('X-Total-Count');
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+    if (!parsed.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const parsedPayload = z.array(FollowInfoSchema).safeParse(parsed.data.payload);
+    if (!parsedPayload.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const pageCount = Math.ceil(parseInt(count as string, 10) / pageSize);
+
+    return { following: parsedPayload.data, pageCount, followingCount: count };
+  };
+
+  const { data, error, isLoading, setSize, size, mutate } = useSWRInfinite(
+    (index) =>
+      `/api/users/${userId}/following?page_num=${index + 1}&page_size=${pageSize}`,
+    fetcher,
+    { parallel: true },
+  );
+
+  const following = data?.flatMap((d) => d.following) ?? [];
+  const followingCount = data?.[0].followingCount ?? 0;
+
+  const pageCount = data?.[0].pageCount ?? 0;
+  const isLoadingMore = size > 0 && data && typeof data[size - 1] === 'undefined';
+  const isAtEnd = !(size < data?.[0].pageCount!);
+
+  return {
+    following,
+    followingCount,
+    pageCount,
+    size,
+    setSize,
+    isLoading,
+    isLoadingMore,
+    isAtEnd,
+    mutate,
+    error: error as unknown,
+  };
+};
+
+export default useGetUsersFollowedByUser;

archive/next-js-web-app/src/hooks/data-fetching/user-follows/useGetUsersFollowingUser.ts

@@ -0,0 +1,88 @@
+import FollowInfoSchema from '@/services/users/profile/schema/FollowInfoSchema';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import useSWRInfinite from 'swr/infinite';
+import { z } from 'zod';
+
+interface UseGetUsersFollowingUser {
+  pageSize?: number;
+  userId?: string;
+}
+
+/**
+ * A custom hook to fetch users following a user.
+ *
+ * @param options - The options for fetching users.
+ * @param [options.pageSize=5] - The number of users to fetch per page. Default is `5`
+ * @param options.userId - The ID of the user.
+ * @returns An object with the following properties:
+ *
+ *   - `followers` The list of users following the specified user.
+ *   - `followerCount` The total count of users following the specified user.
+ *   - `pageCount` The total number of pages.
+ *   - `size` The current page size.
+ *   - `setSize` A function to set the page size.
+ *   - `isLoading` Indicates if the data is currently being loaded.
+ *   - `isLoadingMore` Indicates if there are more pages to load.
+ *   - `isAtEnd` Indicates if the current page is the last page.
+ *   - `mutate` A function to mutate the data.
+ *   - `error` The error object, if any.
+ */
+
+const useGetUsersFollowingUser = ({ pageSize = 5, userId }: UseGetUsersFollowingUser) => {
+  const fetcher = async (url: string) => {
+    if (!userId) {
+      throw new Error('User ID is undefined');
+    }
+
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    const json = await response.json();
+    const count = response.headers.get('X-Total-Count');
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+    if (!parsed.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const parsedPayload = z.array(FollowInfoSchema).safeParse(parsed.data.payload);
+    if (!parsedPayload.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const pageCount = Math.ceil(parseInt(count as string, 10) / pageSize);
+
+    return { followers: parsedPayload.data, pageCount, followerCount: count };
+  };
+
+  const { data, error, isLoading, setSize, size, mutate } = useSWRInfinite(
+    (index) =>
+      `/api/users/${userId}/followers?page_num=${index + 1}&page_size=${pageSize}`,
+    fetcher,
+    { parallel: true },
+  );
+
+  const followers = data?.flatMap((d) => d.followers) ?? [];
+  const followerCount = data?.[0].followerCount ?? 0;
+
+  const pageCount = data?.[0].pageCount ?? 0;
+  const isLoadingMore = size > 0 && data && typeof data[size - 1] === 'undefined';
+  const isAtEnd = !(size < data?.[0].pageCount!);
+
+  return {
+    followers,
+    followerCount,
+    pageCount,
+    size,
+    setSize,
+    isLoading,
+    isLoadingMore,
+    isAtEnd,
+    mutate,
+    error: error as unknown,
+  };
+};
+
+export default useGetUsersFollowingUser;

archive/next-js-web-app/src/hooks/utilities/useGeolocation.ts

@@ -0,0 +1,65 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * A custom React Hook that retrieves and monitors the user's geolocation using the
+ * browser's built-in `navigator.geolocation` API.
+ *
+ * @returns An object with the following properties:
+ *
+ *   - `coords` - The user's current geolocation coordinates, or null if the geolocation could
+ *       not be retrieved.
+ *   - `timestamp` - The timestamp when the user's geolocation was last updated, or null if
+ *       the geolocation could not be retrieved.
+ *   - `error` - Any error that might occur while retrieving or monitoring the user's
+ *       geolocation, or null if there are no errors.
+ */
+const useGeolocation = () => {
+  const [state, setState] = useState<{
+    coords: GeolocationCoordinates | null;
+    timestamp: number | null;
+  }>({
+    coords: null,
+    timestamp: null,
+  });
+
+  const [error, setError] = useState<GeolocationPositionError | null>(null);
+
+  // Set up the event listeners for the geolocation updates
+  useEffect(() => {
+    /**
+     * Callback function for successful geolocation update.
+     *
+     * @param position - The geolocation position object.
+     */
+    const onEvent = (position: GeolocationPosition) => {
+      const { coords, timestamp } = position;
+      setError(null);
+      setState({ coords, timestamp });
+    };
+
+    /**
+     * Callback function for geolocation error.
+     *
+     * @param geoError - The geolocation error object.
+     */
+    const onError = (geoError: GeolocationPositionError) => {
+      setError(geoError);
+    };
+
+    // Get the current geolocation
+    navigator.geolocation.getCurrentPosition(onEvent, onError);
+
+    // Monitor any changes in the geolocation
+    const watchId = navigator.geolocation.watchPosition(onEvent, onError);
+
+    // Clean up the event listeners when the component unmounts
+    return () => {
+      navigator.geolocation.clearWatch(watchId);
+    };
+  }, []);
+
+  // Return the geolocation information and any errors as an object
+  return { coords: state.coords, timestamp: state.timestamp, error };
+};
+
+export default useGeolocation;

archive/next-js-web-app/src/hooks/utilities/useMediaQuery.ts

@@ -0,0 +1,53 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * A custom react hook that provides a convenient way to query the viewport size and check
+ * if it matches a given media query. The hook returns a boolean value indicating whether
+ * the query matches the current viewport size.
+ *
+ * @example
+ *   const isSmallScreen = useMediaQuery('(max-width: 600px)');
+ *
+ * @example
+ *   const userPrefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+ *
+ * @param query - A media query string to match against.
+ * @returns - A boolean indicating whether the given media query matches the current
+ *   viewport size.
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries|Media Queries} for more information on media queries in CSS.
+ */
+const useMediaQuery = (query: `(${string})`) => {
+  /**
+   * Initialize the matches state variable to false. This is updated whenever the viewport
+   * size changes (i.e. when the component is mounted and when the window is resized)
+   */
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    /**
+     * Create a media query object based on the provided query string. This is used to
+     * check if the media query matches the current viewport size.
+     */
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+
+    /**
+     * Add a resize event listener to the window object, and update the `matches` state
+     * variable whenever the viewport size changes.
+     */
+    const listener = () => setMatches(media.matches);
+    window.addEventListener('resize', listener);
+
+    /**
+     * Cleanup function that removes the resize event listener when the component is
+     * unmounted or when the dependencies change.
+     */
+    return () => window.removeEventListener('resize', listener);
+  }, [matches, query]);
+
+  return matches;
+};
+
+export default useMediaQuery;

archive/next-js-web-app/src/hooks/utilities/useNavbar.ts

@@ -0,0 +1,69 @@
+import UserContext from '@/contexts/UserContext';
+import { useRouter } from 'next/router';
+import { useState, useEffect, useContext } from 'react';
+
+interface Page {
+  slug: string;
+  name: string;
+}
+
+/**
+ * A custom hook that returns the current URL and the pages to display in the navbar. It
+ * uses the user context to determine whether the user is authenticated or not.
+ *
+ * @returns An object with the following properties:
+ *
+ *   - `currentURL`: The current URL.
+ *   - `pages`: The pages to display in the navbar.
+ */
+const useNavbar = () => {
+  const router = useRouter();
+  const [currentURL, setCurrentURL] = useState('/');
+
+  const { user } = useContext(UserContext);
+
+  const authenticatedPages: readonly Page[] = [
+    { slug: '/users/account', name: 'Account' },
+    { slug: `/users/${user?.id}`, name: 'Profile' },
+    { slug: '/api/users/logout', name: 'Logout' },
+  ];
+
+  const unauthenticatedPages: readonly Page[] = [
+    { slug: '/login', name: 'Login' },
+    { slug: '/register', name: 'Register' },
+  ];
+
+  /** These pages are accessible to both authenticated and unauthenticated users. */
+  const otherPages: readonly Page[] = [
+    { slug: '/beers', name: 'Beers' },
+    { slug: '/beers/styles', name: 'Beer Styles' },
+    { slug: '/breweries', name: 'Breweries' },
+  ];
+
+  /**
+   * The pages to display in the navbar. If the user is authenticated, the authenticated
+   * pages are displayed. Otherwise, the unauthenticated pages are displayed. The other
+   * pages are always displayed.
+   */
+  const pages: readonly Page[] = [
+    ...otherPages,
+    ...(user ? authenticatedPages : unauthenticatedPages),
+  ];
+
+  /**
+   * Sets the current URL to the current URL when the router's asPath changes. This
+   * ensures that the current URL is always up to date. When the component unmounts, the
+   * current URL is set to '/'.
+   */
+  useEffect(() => {
+    setCurrentURL(router.asPath);
+
+    return () => {
+      setCurrentURL('/');
+    };
+  }, [router.asPath]);
+
+  return { currentURL, pages };
+};
+
+export default useNavbar;

archive/next-js-web-app/src/hooks/utilities/useTheme.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+import useMediaQuery from './useMediaQuery';
+
+/**
+ * A custom hook to manage the theme of the app.
+ *
+ * If a preferred theme is not set in localStorage, it will use what the user's browser
+ * prefers as determined by the prefers-color-scheme media query.
+ *
+ * If the user changes their preferred theme, it will be saved in localStorage and used in
+ * subsequent visits.
+ *
+ * @returns An object with the following properties:
+ *
+ *   - `theme`: The current theme of the app.
+ *   - `setTheme`: A function to set the theme of the app.
+ */
+const useTheme = () => {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('theme');
+    if (prefersDarkMode && !savedTheme) {
+      setTheme('dark');
+      localStorage.setItem('theme', 'dark');
+      return;
+    }
+    setTheme(savedTheme as 'light' | 'dark');
+  }, [prefersDarkMode, theme]);
+
+  return { theme, setTheme };
+};
+
+export default useTheme;

archive/next-js-web-app/src/hooks/utilities/useTimeDistance.ts

@@ -0,0 +1,25 @@
+import formatDistanceStrict from 'date-fns/formatDistanceStrict';
+import { useState, useEffect } from 'react';
+
+/**
+ * A custom hook to calculate the time distance between the provided date and the current
+ * time.
+ *
+ * This hook uses the date-fns library to calculate the time distance.
+ *
+ * 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.
+ * @see https://date-fns.org/v2.30.0/docs/formatDistanceStrict
+ */
+const useTimeDistance = (createdAt: Date) => {
+  const [timeDistance, setTimeDistance] = useState('');
+  useEffect(() => {
+    setTimeDistance(formatDistanceStrict(createdAt, new Date()));
+  }, [createdAt]);
+  return timeDistance;
+};
+
+export default useTimeDistance;