feat: add react-hot-toast for toast notifs

package-lock.json

@@ -39,6 +39,7 @@
         "react-dom": "^18.2.0",
         "react-email": "^1.9.3",
         "react-hook-form": "^7.43.9",
+        "react-hot-toast": "^2.4.1",
         "react-icons": "^4.8.0",
         "react-intersection-observer": "^9.4.3",
         "react-map-gl": "^7.0.23",
@@ -3541,8 +3542,7 @@
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
-      "dev": true
     },
     "node_modules/daisyui": {
       "version": "2.51.6",
@@ -5719,6 +5719,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.13",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.13.tgz",
+      "integrity": "sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -9353,6 +9361,21 @@
         "react": "^16.8.0 || ^17 || ^18"
       }
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+      "dependencies": {
+        "goober": "^2.1.10"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-icons": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
@@ -11233,9 +11256,9 @@
       }
     },
     "node_modules/vm2": {
-      "version": "3.9.17",
+      "version": "3.9.19",
-      "resolved": "https://registry.npmjs.org/vm2/-/vm2-3.9.17.tgz",
+      "resolved": "https://registry.npmjs.org/vm2/-/vm2-3.9.19.tgz",
-      "integrity": "sha512-AqwtCnZ/ERcX+AVj9vUsphY56YANXxRuqMb7GsDtAr0m0PcQX3u0Aj3KWiXM0YAHy7i6JEeHrwOnwXbGYgRpAw==",
+      "integrity": "sha512-J637XF0DHDMV57R6JyVsTak7nIL8gy5KH4r1HiwWLf/4GBbb5MKL5y7LpmF4A8E2nR6XmzpmMFQ7V7ppPTmUQg==",
       "optional": true,
       "dependencies": {
         "acorn": "^8.7.0",
@@ -13934,8 +13957,7 @@
     "csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
-      "dev": true
     },
     "daisyui": {
       "version": "2.51.6",
@@ -15557,6 +15579,12 @@
         "slash": "^3.0.0"
       }
     },
+    "goober": {
+      "version": "2.1.13",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.13.tgz",
+      "integrity": "sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==",
+      "requires": {}
+    },
     "gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -17998,6 +18026,14 @@
       "integrity": "sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==",
       "requires": {}
     },
+    "react-hot-toast": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+      "requires": {
+        "goober": "^2.1.10"
+      }
+    },
     "react-icons": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
@@ -19389,9 +19425,9 @@
       }
     },
     "vm2": {
-      "version": "3.9.17",
+      "version": "3.9.19",
-      "resolved": "https://registry.npmjs.org/vm2/-/vm2-3.9.17.tgz",
+      "resolved": "https://registry.npmjs.org/vm2/-/vm2-3.9.19.tgz",
-      "integrity": "sha512-AqwtCnZ/ERcX+AVj9vUsphY56YANXxRuqMb7GsDtAr0m0PcQX3u0Aj3KWiXM0YAHy7i6JEeHrwOnwXbGYgRpAw==",
+      "integrity": "sha512-J637XF0DHDMV57R6JyVsTak7nIL8gy5KH4r1HiwWLf/4GBbb5MKL5y7LpmF4A8E2nR6XmzpmMFQ7V7ppPTmUQg==",
       "optional": true,
       "requires": {
         "acorn": "^8.7.0",

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -42,6 +42,7 @@
     "react-dom": "^18.2.0",
     "react-email": "^1.9.3",
     "react-hook-form": "^7.43.9",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^4.8.0",
     "react-intersection-observer": "^9.4.3",
     "react-map-gl": "^7.0.23",

src/components/BeerBreweryComments/CommentCardBody.tsx

@@ -4,6 +4,7 @@ import { FC, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { z } from 'zod';
 import CreateCommentValidationSchema from '@/services/types/CommentSchema/CreateCommentValidationSchema';
+
 import CommentContentBody from './CommentContentBody';
 import EditCommentBody from './EditCommentBody';
 

src/components/BeerBreweryComments/CommentCardDropdown.tsx

@@ -1,4 +1,4 @@
-import UserContext from '@/contexts/userContext';
+import UserContext from '@/contexts/UserContext';
 import { Dispatch, SetStateAction, FC, useContext } from 'react';
 import { FaEllipsisH } from 'react-icons/fa';
 import CommentQueryResult from '@/services/types/CommentSchema/CommentQueryResult';

src/components/BeerBreweryComments/CommentContentBody.tsx

@@ -1,4 +1,4 @@
-import UserContext from '@/contexts/userContext';
+import UserContext from '@/contexts/UserContext';
 import useTimeDistance from '@/hooks/utilities/useTimeDistance';
 import { format } from 'date-fns';
 import { Dispatch, FC, SetStateAction, useContext } from 'react';

src/components/BeerBreweryComments/EditCommentBody.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { FC, useState, Dispatch, SetStateAction } from 'react';
+import { FC, useState, Dispatch, SetStateAction, useContext } from 'react';
 import { Rating } from 'react-daisyui';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { z } from 'zod';
@@ -7,6 +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 FormError from '../ui/forms/FormError';
 import FormInfo from '../ui/forms/FormInfo';
 import FormLabel from '../ui/forms/FormLabel';
@@ -42,6 +43,7 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
     resolver: zodResolver(CreateCommentValidationSchema),
   });
 
+  const { toast } = useContext(ToastContext);
   const { errors } = formState;
 
   const [isDeleting, setIsDeleting] = useState(false);
@@ -58,6 +60,7 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
     setInEditMode(true);
     await handleEditRequest(comment.id, data);
     await mutate();
+    toast.success('Submitted edits');
     setInEditMode(false);
   };
 

src/components/BeerById/BeerInfoHeader.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import format from 'date-fns/format';
 import { FC, useContext } from 'react';
 
-import UserContext from '@/contexts/userContext';
+import UserContext from '@/contexts/UserContext';
 import { FaRegEdit } from 'react-icons/fa';
 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import { z } from 'zod';

src/components/BeerById/BeerPostCommentsSection.tsx

@@ -1,4 +1,4 @@
-import UserContext from '@/contexts/userContext';
+import UserContext from '@/contexts/UserContext';
 
 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 

src/components/BeerIndex/BeerCard.tsx

@@ -3,7 +3,7 @@ import { FC, useContext } from 'react';
 import Image from 'next/image';
 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import { z } from 'zod';
-import UserContext from '@/contexts/userContext';
+import UserContext from '@/contexts/UserContext';
 import useGetBeerPostLikeCount from '@/hooks/data-fetching/beer-likes/useBeerPostLikeCount';
 import BeerPostLikeButton from '../BeerById/BeerPostLikeButton';
 

src/components/BreweryById/BreweryBeerSection.tsx

@@ -5,7 +5,7 @@ import { FC, MutableRefObject, useContext, useRef } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { z } from 'zod';
 import { FaPlus } from 'react-icons/fa';
-import UserContext from '@/contexts/userContext';
+import UserContext from '@/contexts/UserContext';
 import BeerRecommendationLoadingComponent from '../BeerById/BeerRecommendationLoadingComponent';
 
 interface BreweryCommentsSectionProps {

src/components/BreweryById/BreweryCommentsSection.tsx

@@ -1,4 +1,4 @@
-import UserContext from '@/contexts/userContext';
+import UserContext from '@/contexts/UserContext';
 import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
 import { FC, MutableRefObject, useContext, useRef } from 'react';
 import { z } from 'zod';
@@ -9,6 +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 LoadingComponent from '../BeerById/LoadingComponent';
 import CommentsComponent from '../ui/CommentsComponent';
 import CommentForm from '../ui/CommentForm';
@@ -63,6 +64,7 @@ const BreweryCommentForm: FC<BreweryCommentFormProps> = ({ breweryPost, mutate }
     resolver: zodResolver(CreateCommentValidationSchema),
   });
 
+  const { toast } = useContext(ToastContext);
   const onSubmit: SubmitHandler<z.infer<typeof CreateCommentValidationSchema>> = async (
     data,
   ) => {
@@ -72,6 +74,7 @@ const BreweryCommentForm: FC<BreweryCommentFormProps> = ({ breweryPost, mutate }
       breweryPostId: breweryPost.id,
     });
     await mutate();
+    toast.loading('Created new comment.');
     reset();
   };
 

src/components/BreweryById/BreweryInfoHeader.tsx

@@ -1,4 +1,4 @@
-import UserContext from '@/contexts/userContext';
+import UserContext from '@/contexts/UserContext';
 import useGetBreweryPostLikeCount from '@/hooks/data-fetching/brewery-likes/useGetBreweryPostLikeCount';
 import useTimeDistance from '@/hooks/utilities/useTimeDistance';
 import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';

src/components/BreweryIndex/BreweryCard.tsx

@@ -1,4 +1,4 @@
-import UserContext from '@/contexts/userContext';
+import UserContext from '@/contexts/UserContext';
 import useGetBreweryPostLikeCount from '@/hooks/data-fetching/brewery-likes/useGetBreweryPostLikeCount';
 import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
 import { FC, useContext } from 'react';

src/components/Login/LoginForm.tsx

@@ -5,7 +5,8 @@ import { useRouter } from 'next/router';
 import { useContext, useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { z } from 'zod';
-import UserContext from '@/contexts/userContext';
+import UserContext from '@/contexts/UserContext';
+import ToastContext from '@/contexts/ToastContext';
 import ErrorAlert from '../ui/alerts/ErrorAlert';
 import FormError from '../ui/forms/FormError';
 import FormInfo from '../ui/forms/FormInfo';
@@ -30,12 +31,15 @@ const LoginForm = () => {
   const [responseError, setResponseError] = useState<string>('');
 
   const { mutate } = useContext(UserContext);
+  const { toast } = useContext(ToastContext);
 
   const onSubmit: SubmitHandler<LoginT> = async (data) => {
     try {
+      const id = toast.loading('Logging in.');
       await sendLoginUserRequest(data);
       await mutate!();
       await router.push(`/user/current`);
+      toast.remove(id);
     } catch (error) {
       if (error instanceof Error) {
         setResponseError(error.message);

src/components/ui/CustomToast.tsx

@@ -0,0 +1,50 @@
+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';
+
+const toastToClassName = (toastType: Toast['type']) => {
+  let className: 'alert-success' | 'alert-error' | 'alert-info';
+
+  switch (toastType) {
+    case 'success':
+      className = 'alert-success';
+      break;
+    case 'error':
+      className = 'alert-error';
+      break;
+    default:
+      className = 'alert-info';
+  }
+
+  return className;
+};
+
+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>
+          );
+        }}
+      </Toaster>
+      {children}
+    </ToastContext.Provider>
+  );
+};
+export default CustomToast;

src/contexts/ToastContext.ts

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

src/hooks/auth/useRedirectIfLoggedIn.ts

@@ -1,4 +1,4 @@
-import UserContext from '@/contexts/userContext';
+import UserContext from '@/contexts/UserContext';
 import { useRouter } from 'next/router';
 import { useContext } from 'react';
 

src/hooks/data-fetching/beer-likes/useCheckIfUserLikesBeerPost.ts

@@ -1,4 +1,4 @@
-import UserContext from '@/contexts/userContext';
+import UserContext from '@/contexts/UserContext';
 import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
 import { useContext } from 'react';
 import useSWR from 'swr';

src/hooks/data-fetching/brewery-likes/useCheckIfUserLikesBreweryPost.ts

@@ -1,4 +1,4 @@
-import UserContext from '@/contexts/userContext';
+import UserContext from '@/contexts/UserContext';
 import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
 import { useContext } from 'react';
 import useSWR from 'swr';

src/hooks/utilities/useNavbar.ts

@@ -1,4 +1,4 @@
-import UserContext from '@/contexts/userContext';
+import UserContext from '@/contexts/UserContext';
 import { useRouter } from 'next/router';
 import { useState, useEffect, useContext } from 'react';
 

src/pages/_app.tsx

@@ -1,4 +1,4 @@
-import UserContext from '@/contexts/userContext';
+import UserContext from '@/contexts/UserContext';
 
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
@@ -11,6 +11,7 @@ import { Space_Grotesk } from 'next/font/google';
 import Head from 'next/head';
 import Layout from '@/components/ui/Layout';
 import useUser from '@/hooks/auth/useUser';
+import CustomToast from '@/components/ui/CustomToast';
 
 const spaceGrotesk = Space_Grotesk({
   subsets: ['latin'],
@@ -39,9 +40,12 @@ export default function App({ Component, pageProps }: AppProps) {
       </Head>
       <UserContext.Provider value={{ user, isLoading, error, mutate }}>
         <Layout>
-          <Component {...pageProps} />
+          <CustomToast>
+            <Component {...pageProps} />
+          </CustomToast>
         </Layout>
       </UserContext.Provider>
+
       <Analytics />
     </>
   );

src/pages/breweries/index.tsx

@@ -1,7 +1,7 @@
 import BreweryCard from '@/components/BreweryIndex/BreweryCard';
 import LoadingCard from '@/components/ui/LoadingCard';
 import Spinner from '@/components/ui/Spinner';
-import UserContext from '@/contexts/userContext';
+import UserContext from '@/contexts/UserContext';
 import useBreweryPosts from '@/hooks/data-fetching/brewery-posts/useBreweryPosts';
 import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
 import { NextPage } from 'next';

src/pages/user/current.tsx

@@ -1,6 +1,6 @@
 import Spinner from '@/components/ui/Spinner';
 import withPageAuthRequired from '@/util/withPageAuthRequired';
-import UserContext from '@/contexts/userContext';
+import UserContext from '@/contexts/UserContext';
 
 import { GetServerSideProps, NextPage } from 'next';
 import { useContext } from 'react';