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();
     }
   };