feat: Added Toast Notification to the whole webapp Successfully Issue 103

backend/src/routes/post/controller.ts

@@ -237,7 +237,7 @@ export const likePostController = async (req: UserAuthRequest, res: Response) =>
     });
 
     res.status(200).json({
-      message: "Post liked successfully!",
+      message: "Post liked successful",
       likes: post?.likes,
       dislikes: post?.dislikes
     });
@@ -303,7 +303,7 @@ export const dislikePostController = async (req: UserAuthRequest, res: Response)
     });
 
     res.status(200).json({
-      message: "Post disliked successfully!",
+      message: "Post disliked successful",
       dislikes: post?.dislikes,
       likes: post?.likes
     });

frontend/package.json

@@ -15,10 +15,11 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "axios": "^1.7.2",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.2.10",
     "dompurify": "^3.1.4",
+    "framer-motion": "^11.2.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
     "recoil": "^0.7.7",

frontend/src/App.tsx

@@ -17,6 +17,7 @@ import Loader from "./components/Loader";
 import ContactUs from "./pages/ContactUs";
 import About from "./pages/About";
 import Policy from "./pages/Policy";
+import { Toaster } from 'react-hot-toast';
 // import axios from "axios";
 // axios.defaults.baseURL = "http://localhost:3001/";
 
@@ -89,6 +90,7 @@ function App() {
           <Footer />
         </React.Suspense>
       </RecoilRoot>
+      <Toaster/>
     </BrowserRouter>
   );
 }

frontend/src/components/Navbar.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { loggedInState, tokenState } from "../store/atoms/auth";
 import { Link, useLocation } from "react-router-dom";
+import toast from "react-hot-toast";
 
 const Navbar = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -21,6 +22,7 @@ const Navbar = () => {
     localStorage.removeItem("token");
     setTokenState("");
     closeMenu();
+    toast.success('Logged out successfully')
   };
 
   const getNavLinkClass = (path: string) => {

frontend/src/pages/NewPost.tsx

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import { useRecoilValue } from "recoil";
 import { tokenState } from "../store/atoms/auth";
 import { useNavigate } from "react-router-dom";
+import toast from 'react-hot-toast';
 
 const NewPost = () => {
   const [title, setTitle] = useState("");
@@ -40,7 +41,6 @@ const NewPost = () => {
       codeSnippet,
       tags,
     };
-    console.log(newPost);
 
     try {
       const response = await axios.post("/api/v1/posts", newPost, {
@@ -49,7 +49,7 @@ const NewPost = () => {
         },
       });
 
-      console.log(response);
+      toast.success(response.data.message)
       navigate(`/app/posts/${response.data?.post?.id}`);
     } catch (e) {
       const axiosError = e as AxiosError<{

frontend/src/pages/Post.tsx

@@ -5,6 +5,7 @@ import { IPost } from '../types';
 import DOMPurify from 'dompurify';
 import { BiDislike,BiLike,BiSolidDislike,BiSolidLike } from "react-icons/bi";
 import Loader from '../components/Loader'
+import toast from 'react-hot-toast';
 
 const Post = () => {
   const { id } = useParams<{ id: string }>();
@@ -96,7 +97,7 @@ const Post = () => {
     try {
       const token = localStorage.getItem('token');
       if (!token) {
-        alert('You need to be logged in to like a post');
+        toast.error('Please login to like a post');
         return;
       }
       const response = await axios.post(`/api/v1/posts/${id}/like`, {}, {
@@ -109,16 +110,17 @@ const Post = () => {
       setUserDisliked(false);
       localStorage.setItem(`post-${id}-liked`, 'true');
       localStorage.removeItem(`post-${id}-disliked`);
+      toast.success(response.data.message)
     } catch (error) {
-      alert('like is done only once, no spam 😊');
+      toast.success('Like is done only once, no spam 😊');
     }
   };
 
   const handleDislike = async () => {
     try {
       const token = localStorage.getItem('token');
       if (!token) {
-        alert('You need to be logged in to dislike a post');
+        toast.error('Please login to dislike a post');
         return;
       }
       const response = await axios.post(`/api/v1/posts/${id}/dislike`, {}, {
@@ -131,8 +133,9 @@ const Post = () => {
       setUserDisliked(true);
       localStorage.setItem(`post-${id}-disliked`, 'true');
       localStorage.removeItem(`post-${id}-liked`);
+      toast.success(response.data.message)
     } catch (error) {
-      alert('Dislike is done only once, no spam 😊');
+      toast.success('Dislike is done only once, no spam 😊');
     }
   };
 

frontend/src/pages/Profile.tsx

@@ -5,6 +5,7 @@ import { useRecoilValue } from "recoil";
 import { tokenState } from "../store/atoms/auth";
 import Loader from "../components/Loader";
 import PostCard from "../components/PostCard";
+import toast from "react-hot-toast";
 
 const Profile = () => {
   const [user, setUser] = useState<IUser | null>(null);
@@ -36,50 +37,49 @@ const Profile = () => {
 
   const handleGenerateOtp = async () => {
     try {
-      await axios.post('/api/v1/user/generate-otp', {}, {
+      const response = await axios.post('/api/v1/user/generate-otp', {}, {
         headers: {
           Authorization: `Bearer ${token}`
         }
       });
       setOtpSent(true);
+      toast.success(response.data.message);
       setVerificationError("");
     } catch (error) {
-      setVerificationError('Failed to generate OTP');
+      toast.error('Failed to generate OTP');
     }
   };
 
   const handleVerifyOtp = async () => {
     try {
-      await axios.post('/api/v1/user/verify-otp', { otp:Number(otp) }, {
+      await axios.post('/api/v1/user/verify-otp', { otp: Number(otp) }, {
         headers: {
           Authorization: `Bearer ${token}`
         }
       });
 
-      setUser(u => {
+      setUser((u) => {
         if (!u) return u;
 
         u.verified = true;
-        return u
+        return u;
       });
       setOtpSent(false);
       setOtp("");
       setVerificationError("");
+      toast.success('OTP verified successfully');
     } catch (error) {
-      setVerificationError('Failed to verify OTP');
+      toast.error('Failed to verify OTP');
     }
   };
 
   if (loading) {
     return <Loader />;
   }
 
-  if (error) {
-    return <div className='text-red-500 font-semibold text-lg text-center'>{error}</div>;
-  }
-
   return (
     <div className="max-w-screen-xl mx-auto p-4 text-white">
+      {error && toast.error(error)}
       <p>Username: {user?.username}</p>
       <p>Email: {user?.email}</p>
 
@@ -113,8 +113,7 @@ const Profile = () => {
       <div className="mt-4">
         <h4 className="font-semibold">Posts</h4>
         <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full">
-
-      {user?.posts.map(post => <PostCard key={post.id} post={post} />)}
+          {user?.posts.map(post => <PostCard key={post.id} post={post} />)}
         </div>
       </div>
     </div>

frontend/src/pages/Signin.tsx

@@ -4,6 +4,7 @@ import { Link, useNavigate } from "react-router-dom";
 import { useSetRecoilState } from "recoil";
 import { tokenState } from "../store/atoms/auth";
 import { AiOutlineEyeInvisible, AiOutlineEye } from "react-icons/ai";
+import toast from "react-hot-toast";
 
 const Signin = () => {
   const [email, setEmail] = useState("");
@@ -27,24 +28,26 @@ const Signin = () => {
         password,
       });
 
-      console.log(response);
       setTokenState(response.data?.token);
       localStorage.setItem("token", response.data?.token || "");
       navigate('/app');
+      toast.success('Login successfully')
     } catch (e) {
       const axiosError = e as AxiosError<{
         error: {
           message: string;
         };
       }>;
-      // console.log(e);
-      setError((e) => {
-        if (axiosError?.response?.data?.error)
-          return axiosError?.response?.data?.error as typeof e;
-
-        e.message = "An unexpected error occurred";
-        return e;
-      });
+      if (axiosError?.response?.data?.error) {
+        const errorMessage = axiosError.response.data.error.message;
+        toast.error(errorMessage);
+        setError({
+          ...error,
+          message: errorMessage,
+        });
+      } else {
+        toast.error("An unexpected error occurred");
+      }
     }
   };
 
@@ -56,9 +59,6 @@ const Signin = () => {
       <h2 className="text-3xl font-bold mb-4 text-white text-center">
         Sign In
       </h2>
-      <p className="text-lg font-semibold mb-2 text-red-600 text-center">
-        {error.message}
-      </p>
       <form onSubmit={handleSubmit}>
         <div className="mb-4">
           <label htmlFor="email" className="block text-white">

frontend/src/pages/Signup.tsx

@@ -7,6 +7,7 @@ import { AiOutlineEyeInvisible, AiOutlineEye } from "react-icons/ai";
 import zxcvbn, { ZXCVBNResult } from "zxcvbn";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faCircle } from "@fortawesome/free-solid-svg-icons";
+import toast from "react-hot-toast";
 
 const Signup = () => {
   const [username, setUsername] = useState("");
@@ -61,6 +62,7 @@ const Signup = () => {
       setTokenState(response.data?.token);
       localStorage.setItem("token", response.data?.token || "");
       navigate("/app");
+      toast.success("Signup successfull")
     } catch (e) {
       const axiosError = e as AxiosError<{
         error: {
@@ -72,7 +74,7 @@ const Signup = () => {
         if (axiosError?.response?.data?.error)
           return axiosError?.response?.data?.error as typeof e;
 
-        e.message = "An unexpected error occurred";
+        toast.error("An unexpected error occurred");
         return e;
       });
     }