Refactor: Organize api requests by type and remove toastContext

src/components/Account/AccountInfo.tsx

@@ -1,5 +1,5 @@
-import validateEmail from '@/requests/valdiateEmail';
-import validateUsername from '@/requests/validateUsername';
+import validateEmailRequest from '@/requests/User/validateEmailRequest';
+import validateUsernameRequest from '@/requests/validateUsernameRequest';
 import { BaseCreateUserSchema } from '@/services/User/schema/CreateUserValidationSchemas';
 import GetUserSchema from '@/services/User/schema/GetUserSchema';
 import { Switch } from '@headlessui/react';
@@ -31,7 +31,7 @@ const AccountInfo: FC<AccountInfoProps> = ({ user }) => {
       .refine(
         async (email) => {
           if (user.email === email) return true;
-          return validateEmail(email);
+          return validateEmailRequest(email);
         },
         { message: 'Email is already taken.' },
       ),
@@ -42,7 +42,7 @@ const AccountInfo: FC<AccountInfoProps> = ({ user }) => {
       .refine(
         async (username) => {
           if (user.username === username) return true;
-          return validateUsername(username);
+          return validateUsernameRequest(username);
         },
         { message: 'Username is already taken.' },
       ),

src/components/BeerBreweryComments/EditCommentBody.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { FC, useState, Dispatch, SetStateAction, useContext } from 'react';
+import { FC, useState, Dispatch, SetStateAction } from 'react';
 import { Rating } from 'react-daisyui';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { z } from 'zod';
@@ -7,7 +7,7 @@ import useBeerPostComments from '@/hooks/data-fetching/beer-comments/useBeerPost
 import CommentQueryResult from '@/services/types/CommentSchema/CommentQueryResult';
 import CreateCommentValidationSchema from '@/services/types/CommentSchema/CreateCommentValidationSchema';
 import useBreweryPostComments from '@/hooks/data-fetching/brewery-comments/useBreweryPostComments';
-import ToastContext from '@/contexts/ToastContext';
+import toast from 'react-hot-toast';
 import FormError from '../ui/forms/FormError';
 import FormInfo from '../ui/forms/FormInfo';
 import FormLabel from '../ui/forms/FormLabel';
@@ -43,7 +43,6 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
     resolver: zodResolver(CreateCommentValidationSchema),
   });
 
-  const { toast } = useContext(ToastContext);
   const { errors } = formState;
 
   const [isDeleting, setIsDeleting] = useState(false);

src/components/BeerById/BeerCommentForm.tsx

@@ -1,4 +1,4 @@
-import sendCreateBeerCommentRequest from '@/requests/sendCreateBeerCommentRequest';
+import sendCreateBeerCommentRequest from '@/requests/BeerComment/sendCreateBeerCommentRequest';
 
 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -9,6 +9,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 CommentForm from '../ui/CommentForm';
 
 interface BeerCommentFormProps {
@@ -30,13 +31,22 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
   const onSubmit: SubmitHandler<z.infer<typeof CreateCommentValidationSchema>> = async (
     data,
   ) => {
-    await sendCreateBeerCommentRequest({
-      content: data.content,
-      rating: data.rating,
-      beerPostId: beerPost.id,
-    });
-    await mutate();
-    reset();
+    try {
+      await sendCreateBeerCommentRequest({
+        content: data.content,
+        rating: data.rating,
+        beerPostId: beerPost.id,
+      });
+      await mutate();
+      reset();
+      toast.success('Created a new comment!');
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : 'Something went wrong.';
+      toast.error(errorMessage);
+
+      reset();
+    }
   };
 
   return (

src/components/BeerById/BeerPostLikeButton.tsx

@@ -1,8 +1,9 @@
 import useCheckIfUserLikesBeerPost from '@/hooks/data-fetching/beer-likes/useCheckIfUserLikesBeerPost';
-import sendBeerPostLikeRequest from '@/requests/sendBeerPostLikeRequest';
+
 import { FC, useEffect, useState } from 'react';
 
 import useGetBeerPostLikeCount from '@/hooks/data-fetching/beer-likes/useBeerPostLikeCount';
+import sendBeerPostLikeRequest from '@/requests/BeerPost/sendBeerPostLikeRequest';
 import LikeButton from '../ui/LikeButton';
 
 const BeerPostLikeButton: FC<{

src/components/BreweryById/BreweryCommentsSection.tsx

@@ -9,7 +9,7 @@ import APIResponseValidationSchema from '@/validation/APIResponseValidationSchem
 import CommentQueryResult from '@/services/types/CommentSchema/CommentQueryResult';
 
 import useBreweryPostComments from '@/hooks/data-fetching/brewery-comments/useBreweryPostComments';
-import ToastContext from '@/contexts/ToastContext';
+import toast from 'react-hot-toast';
 import LoadingComponent from '../BeerById/LoadingComponent';
 import CommentsComponent from '../ui/CommentsComponent';
 import CommentForm from '../ui/CommentForm';
@@ -64,7 +64,6 @@ const BreweryCommentForm: FC<BreweryCommentFormProps> = ({ breweryPost, mutate }
     resolver: zodResolver(CreateCommentValidationSchema),
   });
 
-  const { toast } = useContext(ToastContext);
   const onSubmit: SubmitHandler<z.infer<typeof CreateCommentValidationSchema>> = async (
     data,
   ) => {

src/components/BreweryIndex/BreweryPostLikeButton.tsx

@@ -1,6 +1,6 @@
 import useCheckIfUserLikesBreweryPost from '@/hooks/data-fetching/brewery-likes/useCheckIfUserLikesBreweryPost';
 import useGetBreweryPostLikeCount from '@/hooks/data-fetching/brewery-likes/useGetBreweryPostLikeCount';
-import sendBreweryPostLikeRequest from '@/requests/sendBreweryPostLikeRequest';
+import sendBreweryPostLikeRequest from '@/requests/BreweryPostLike/sendBreweryPostLikeRequest';
 import { FC, useState } from 'react';
 import LikeButton from '../ui/LikeButton';
 

src/components/CreateBeerPostForm.tsx

@@ -1,15 +1,17 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { BeerType } from '@prisma/client';
 import router from 'next/router';
-import { FunctionComponent, useState } from 'react';
+import { FunctionComponent } from 'react';
 import { useForm, SubmitHandler, FieldError } from 'react-hook-form';
 import { z } from 'zod';
 import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
 import CreateBeerPostValidationSchema from '@/services/BeerPost/schema/CreateBeerPostValidationSchema';
-import sendCreateBeerPostRequest from '@/requests/sendCreateBeerPostRequest';
+import sendCreateBeerPostRequest from '@/requests/BeerPost/sendCreateBeerPostRequest';
 import UploadImageValidationSchema from '@/services/types/ImageSchema/UploadImageValidationSchema';
-import sendUploadBeerImagesRequest from '@/requests/sendUploadBeerImageRequest';
-import ErrorAlert from './ui/alerts/ErrorAlert';
+import sendUploadBeerImagesRequest from '@/requests/BeerImage/sendUploadBeerImageRequest';
+
+import toast from 'react-hot-toast';
+
 import Button from './ui/forms/Button';
 import FormError from './ui/forms/FormError';
 import FormInfo from './ui/forms/FormInfo';
@@ -40,7 +42,6 @@ const CreateBeerPostForm: FunctionComponent<BeerFormProps> = ({
   });
 
   const { errors, isSubmitting } = formState;
-  const [error, setError] = useState('');
 
   const onSubmit: SubmitHandler<
     z.infer<typeof CreateBeerPostWithImagesValidationSchema>
@@ -52,19 +53,17 @@ const CreateBeerPostForm: FunctionComponent<BeerFormProps> = ({
     try {
       const response = await sendCreateBeerPostRequest(data);
       await sendUploadBeerImagesRequest({ beerPost: response, images: data.images });
-      router.push(`/beers/${response.id}`);
+      await router.push(`/beers/${response.id}`);
+      toast.success('Created beer post.');
     } catch (e) {
-      if (!(e instanceof Error)) {
-        setError('Something went wrong');
-        return;
-      }
-      setError(e.message);
+      const errorMessage = e instanceof Error ? e.message : 'Something went wrong.';
+
+      toast.error(errorMessage);
     }
   };
 
   return (
     <form className="form-control" onSubmit={handleSubmit(onSubmit)}>
-      <div>{error && <ErrorAlert error={error} setError={setError} />}</div>
       <FormInfo>
         <FormLabel htmlFor="name">Name</FormLabel>
         <FormError>{errors.name?.message}</FormError>

src/components/EditBeerPostForm.tsx

@@ -1,12 +1,14 @@
-import sendEditBeerPostRequest from '@/requests/sendEditBeerPostRequest';
-import EditBeerPostValidationSchema from '@/services/BeerPost/schema/EditBeerPostValidationSchema';
-import { zodResolver } from '@hookform/resolvers/zod';
+import { FC } from 'react';
 
 import { useRouter } from 'next/router';
-import { FC, useState } from 'react';
-import { useForm, SubmitHandler } from 'react-hook-form';
+import toast from 'react-hot-toast';
 import { z } from 'zod';
-import ErrorAlert from './ui/alerts/ErrorAlert';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import deleteBeerPostRequest from '@/requests/BeerPost/deleteBeerPostRequest';
+import EditBeerPostValidationSchema from '@/services/BeerPost/schema/EditBeerPostValidationSchema';
+import sendEditBeerPostRequest from '@/requests/BeerPost/sendEditBeerPostRequest';
 import Button from './ui/forms/Button';
 import FormError from './ui/forms/FormError';
 import FormInfo from './ui/forms/FormInfo';
@@ -23,54 +25,36 @@ interface EditBeerPostFormProps {
 
 const EditBeerPostForm: FC<EditBeerPostFormProps> = ({ previousValues }) => {
   const router = useRouter();
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<EditBeerPostSchema>({
+  const { register, handleSubmit, formState } = useForm<EditBeerPostSchema>({
     resolver: zodResolver(EditBeerPostValidationSchema),
     defaultValues: previousValues,
   });
 
-  const [error, setError] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
+  const { isSubmitting, errors } = formState;
   const onSubmit: SubmitHandler<EditBeerPostSchema> = async (data) => {
     try {
-      setIsSubmitting(true);
       await sendEditBeerPostRequest(data);
-      router.push(`/beers/${data.id}`);
+      await router.push(`/beers/${data.id}`);
+      toast.success('Edited beer post.');
     } catch (e) {
-      setIsSubmitting(false);
-      if (!(e instanceof Error)) {
-        setError('Something went wrong');
-        return;
-      }
-      setError(e.message);
+      const errorMessage = e instanceof Error ? e.message : 'Something went wrong.';
+      toast.error(errorMessage);
+      await router.push(`/beers/${data.id}`);
     }
   };
 
   const onDelete = async () => {
     try {
-      const response = await fetch(`/api/beers/${previousValues.id}`, {
-        method: 'DELETE',
-      });
-      if (response.status === 200) {
-        router.push('/beers');
-      }
+      await deleteBeerPostRequest(previousValues.id);
+      await router.push('/beers');
     } catch (e) {
-      if (!(e instanceof Error)) {
-        setError('Something went wrong');
-        return;
-      }
-      setError(e.message);
+      const errorMessage = e instanceof Error ? e.message : 'Something went wrong.';
+      toast.error(errorMessage);
+      await router.push(`/beers`);
     }
   };
   return (
     <form className="form-control" onSubmit={handleSubmit(onSubmit)}>
-      <div className="mb-5">
-        {error && <ErrorAlert error={error} setError={setError} />}
-      </div>
       <FormInfo>
         <FormLabel htmlFor="name">Name</FormLabel>
         <FormError>{errors.name?.message}</FormError>

src/components/Login/LoginForm.tsx

@@ -1,13 +1,14 @@
-import sendLoginUserRequest from '@/requests/sendLoginUserRequest';
+import sendLoginUserRequest from '@/requests/User/sendLoginUserRequest';
 import LoginValidationSchema from '@/services/User/schema/LoginValidationSchema';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/router';
-import { useContext, useState } from 'react';
+import { useContext } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { z } from 'zod';
 import UserContext from '@/contexts/UserContext';
-import ToastContext from '@/contexts/ToastContext';
-import ErrorAlert from '../ui/alerts/ErrorAlert';
+import toast from 'react-hot-toast';
+
+import createErrorToast from '@/util/createErrorToast';
 import FormError from '../ui/forms/FormError';
 import FormInfo from '../ui/forms/FormInfo';
 import FormLabel from '../ui/forms/FormLabel';
@@ -28,23 +29,20 @@ const LoginForm = () => {
 
   const { errors } = formState;
 
-  const [responseError, setResponseError] = useState<string>('');
-
   const { mutate } = useContext(UserContext);
-  const { toast } = useContext(ToastContext);
 
   const onSubmit: SubmitHandler<LoginT> = async (data) => {
+    const id = toast.loading('Logging in.');
     try {
-      const id = toast.loading('Logging in.');
       await sendLoginUserRequest(data);
       await mutate!();
-      await router.push(`/user/current`);
       toast.remove(id);
+      toast.success('Logged in!');
+      await router.push(`/user/current`);
     } catch (error) {
-      if (error instanceof Error) {
-        setResponseError(error.message);
-        reset();
-      }
+      toast.remove(id);
+      createErrorToast(error);
+      reset();
     }
   };
 
@@ -82,7 +80,6 @@ const LoginForm = () => {
         </FormSegment>
       </div>
 
-      {responseError && <ErrorAlert error={responseError} setError={setResponseError} />}
       <div className="w-full">
         <Button type="submit" isSubmitting={formState.isSubmitting}>
           Login

src/components/RegisterUserForm.tsx

@@ -1,12 +1,14 @@
-import sendRegisterUserRequest from '@/requests/sendRegisterUserRequest';
+import sendRegisterUserRequest from '@/requests/User/sendRegisterUserRequest';
 import { CreateUserValidationSchemaWithUsernameAndEmailCheck } from '@/services/User/schema/CreateUserValidationSchemas';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/router';
-import { FC, useState } from 'react';
+import { FC } from 'react';
 
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
-import ErrorAlert from './ui/alerts/ErrorAlert';
+
+import createErrorToast from '@/util/createErrorToast';
+import toast from 'react-hot-toast';
 import Button from './ui/forms/Button';
 import FormError from './ui/forms/FormError';
 import FormInfo from './ui/forms/FormInfo';
@@ -21,7 +23,6 @@ const RegisterUserForm: FC = () => {
   >({ resolver: zodResolver(CreateUserValidationSchemaWithUsernameAndEmailCheck) });
 
   const { errors } = formState;
-  const [serverResponseError, setServerResponseError] = useState('');
 
   const onSubmit = async (
     data: z.infer<typeof CreateUserValidationSchemaWithUsernameAndEmailCheck>,
@@ -31,11 +32,10 @@ const RegisterUserForm: FC = () => {
       reset();
       router.push('/', undefined, { shallow: true });
     } catch (error) {
-      setServerResponseError(
-        error instanceof Error
-          ? error.message
-          : 'Something went wrong. We could not register your account.',
-      );
+      createErrorToast({
+        toast,
+        error,
+      });
     }
   };
   return (
@@ -44,11 +44,6 @@ const RegisterUserForm: FC = () => {
       noValidate
       onSubmit={handleSubmit(onSubmit)}
     >
-      <div>
-        {serverResponseError && (
-          <ErrorAlert error={serverResponseError} setError={setServerResponseError} />
-        )}
-      </div>
       <div>
         <div className="flex flex-col lg:flex-row lg:space-x-3">
           <div className="lg:w-[50%]">

src/components/ui/CustomToast.tsx

@@ -1,4 +1,3 @@
-import ToastContext from '@/contexts/ToastContext';
 import { FC, ReactNode } from 'react';
 import toast, { Toast, Toaster, resolveValue } from 'react-hot-toast';
 import { FaTimes } from 'react-icons/fa';
@@ -22,29 +21,31 @@ const toastToClassName = (toastType: Toast['type']) => {
 
 const CustomToast: FC<{ children: ReactNode }> = ({ children }) => {
   return (
-    <ToastContext.Provider value={{ toast }}>
+    <>
       <Toaster>
         {(t) => {
           const alertType = toastToClassName(t.type);
           return (
-            <div className="flex w-full items-center justify-center">
-              <div
-                className={`alert ${alertType} w-11/12 flex-row items-center py-[0.5rem] shadow-lg animate-in fade-in duration-200 lg:w-6/12`}
-              >
-                <div>{resolveValue(t.message, t)}</div>
-                <button
-                  className="btn-ghost btn-circle btn"
-                  onClick={() => toast.dismiss(t.id)}
-                >
-                  <FaTimes />
-                </button>
-              </div>
+            <div
+              className={`alert ${alertType} w-11/12 flex-row items-center shadow-lg animate-in fade-in duration-200 lg:w-6/12`}
+            >
+              <p>{resolveValue(t.message, t)}</p>
+              {t.type !== 'loading' && (
+                <div>
+                  <button
+                    className="btn-ghost btn-xs btn-circle btn"
+                    onClick={() => toast.dismiss(t.id)}
+                  >
+                    <FaTimes />
+                  </button>
+                </div>
+              )}
             </div>
           );
         }}
       </Toaster>
       {children}
-    </ToastContext.Provider>
+    </>
   );
 };
 export default CustomToast;

src/components/ui/alerts/ErrorAlert.tsx

@@ -1,32 +0,0 @@
-import { Dispatch, FC, SetStateAction } from 'react';
-import { FiAlertTriangle } from 'react-icons/fi';
-
-interface ErrorAlertProps {
-  error: string;
-  setError: Dispatch<SetStateAction<string>>;
-}
-
-const ErrorAlert: FC<ErrorAlertProps> = ({ error, setError }) => {
-  return (
-    <div className="alert alert-error flex-row shadow-lg">
-      <div className="space-x-1">
-        <FiAlertTriangle className="h-6 w-6" />
-        <span>{error}</span>
-      </div>
-
-      <div className="flex-none">
-        <button
-          className="btn-ghost btn-sm btn"
-          type="button"
-          onClick={() => {
-            setError('');
-          }}
-        >
-          OK
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default ErrorAlert;

src/contexts/ToastContext.ts

@@ -1,8 +0,0 @@
-import { createContext } from 'react';
-import toast from 'react-hot-toast';
-
-const ToastContext = createContext<{
-  toast: typeof toast;
-}>({ toast });
-
-export default ToastContext;

src/requests/BeerPost/deleteBeerPostRequest.ts

@@ -0,0 +1,22 @@
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+
+const deleteBeerPostRequest = async (id: string) => {
+  const response = await fetch(`/api/beers/${id}`, {
+    method: 'DELETE',
+  });
+  if (!response.ok) {
+    throw new Error(response.statusText);
+  }
+
+  const json = await response.json();
+
+  const parsed = APIResponseValidationSchema.safeParse(json);
+
+  if (!parsed.success) {
+    throw new Error('Could not successfully parse the response.');
+  }
+
+  return parsed;
+};
+
+export default deleteBeerPostRequest;

src/requests/User/validateEmailRequest.ts

@@ -1,7 +1,7 @@
 import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
 import { z } from 'zod';
 
-const validateEmail = async (email: string) => {
+const validateEmailRequest = async (email: string) => {
   const response = await fetch(`/api/users/check-email?email=${email}`);
   const json = await response.json();
 
@@ -22,4 +22,4 @@ const validateEmail = async (email: string) => {
   return !parsedPayload.data.emailIsTaken;
 };
 
-export default validateEmail;
+export default validateEmailRequest;

src/requests/validateUsernameRequest.ts

@@ -1,7 +1,7 @@
 import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
 import { z } from 'zod';
 
-const validateUsername = async (username: string) => {
+const validateUsernameRequest = async (username: string) => {
   const response = await fetch(`/api/users/check-username?username=${username}`);
   const json = await response.json();
 
@@ -22,4 +22,4 @@ const validateUsername = async (username: string) => {
   return !parsedPayload.data.usernameIsTaken;
 };
 
-export default validateUsername;
+export default validateUsernameRequest;

src/services/BeerPost/schema/BeerRecommendationQueryResult.ts

@@ -1,15 +0,0 @@
-import { BeerPost } from '@prisma/client';
-
-type BeerRecommendationQueryResult = BeerPost & {
-  brewery: {
-    id: string;
-    name: string;
-  };
-  beerImages: {
-    id: string;
-    alt: string;
-    url: string;
-  }[];
-};
-
-export default BeerRecommendationQueryResult;

src/services/User/schema/CreateUserValidationSchemas.ts

@@ -1,5 +1,5 @@
-import validateEmail from '@/requests/valdiateEmail';
-import validateUsername from '@/requests/validateUsername';
+import validateEmailRequest from '@/requests/User/validateEmailRequest';
+import validateUsernameRequest from '@/requests/validateUsernameRequest';
 import sub from 'date-fns/sub';
 import { z } from 'zod';
 
@@ -55,14 +55,14 @@ export const CreateUserValidationSchemaWithUsernameAndEmailCheck =
     email: z
       .string()
       .email({ message: 'Email must be a valid email address.' })
-      .refine(async (email) => validateEmail(email), {
+      .refine(async (email) => validateEmailRequest(email), {
         message: 'Email is already taken.',
       }),
     username: z
       .string()
       .min(1, { message: 'Username must not be empty.' })
       .max(20, { message: 'Username must be less than 20 characters.' })
-      .refine(async (username) => validateUsername(username), {
+      .refine(async (username) => validateUsernameRequest(username), {
         message: 'Username is already taken.',
       }),
   }).refine((data) => data.password === data.confirmPassword, {

src/util/createErrorToast.ts

@@ -0,0 +1,13 @@
+import toast from 'react-hot-toast';
+
+/**
+ * @param error - The error to display.
+ *
+ *   Creates a toast message with the error message.
+ */
+const createErrorToast = (error: unknown) => {
+  const errorMessage = error instanceof Error ? error.message : 'Something went wrong.';
+  toast.error(errorMessage);
+};
+
+export default createErrorToast;