Update: add more toast notifications, update position

Also set Account page to use UserContext. Refactored api requests out of components.

src/components/BeerById/BeerCommentForm.tsx

@@ -10,6 +10,7 @@ import { z } from 'zod';
 import useBeerPostComments from '@/hooks/data-fetching/beer-comments/useBeerPostComments';
 import CreateCommentValidationSchema from '@/services/types/CommentSchema/CreateCommentValidationSchema';
 import toast from 'react-hot-toast';
+import createErrorToast from '@/util/createErrorToast';
 import CommentForm from '../ui/CommentForm';
 
 interface BeerCommentFormProps {
@@ -31,20 +32,21 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
   const onSubmit: SubmitHandler<z.infer<typeof CreateCommentValidationSchema>> = async (
     data,
   ) => {
+    const loadingToast = toast.loading('Posting a new comment...');
     try {
       await sendCreateBeerCommentRequest({
         content: data.content,
         rating: data.rating,
         beerPostId: beerPost.id,
       });
-      await mutate();
       reset();
-      toast.success('Created a new comment!');
+      toast.remove(loadingToast);
+      toast.success('Comment posted successfully.');
+      await mutate();
     } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : 'Something went wrong.';
-      toast.error(errorMessage);
-
+      await mutate();
+      toast.remove(loadingToast);
+      createErrorToast(error);
       reset();
     }
   };

src/components/BeerById/BeerPostCommentsSection.tsx

@@ -67,8 +67,8 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
 
       {
         /**
-         * If the comments are loading, show a loading component. Otherwise, show the
-         * comments.
+         * If the comments are loading, show a loading component. Otherwise, show
+         * the comments.
          */
         isLoading ? (
           <div className="card bg-base-300 pb-6">

src/components/BeerById/BeerRecommendations.tsx

@@ -19,8 +19,8 @@ const BeerRecommendationsSection: FC<{
 
   const { ref: penultimateBeerPostRef } = useInView({
     /**
-     * When the last beer post comes into view, call setSize from useBeerPostsByBrewery to
-     * load more beer posts.
+     * When the last beer post comes into view, call setSize from
+     * useBeerPostsByBrewery to load more beer posts.
      */
     onChange: (visible) => {
       if (!visible || isAtEnd) return;
@@ -46,8 +46,9 @@ const BeerRecommendationsSection: FC<{
                 const isPenultimateBeerPost = index === beerPosts.length - 2;
 
                 /**
-                 * Attach a ref to the second last beer post in the list. When it comes
-                 * into view, the component will call setSize to load more beer posts.
+                 * Attach a ref to the second last beer post in the list.
+                 * When it comes into view, the component will call
+                 * setSize to load more beer posts.
                  */
 
                 return (
@@ -85,8 +86,8 @@ const BeerRecommendationsSection: FC<{
 
           {
             /**
-             * If there are more beer posts to load, show a loading component with a
-             * skeleton loader and a loading spinner.
+             * If there are more beer posts to load, show a loading component
+             * with a skeleton loader and a loading spinner.
              */
             !!isLoadingMore && !isAtEnd && (
               <BeerRecommendationLoadingComponent length={PAGE_SIZE} />