Merge pull request #107 from MeetDOD/issue-103

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

backend/.env.example

@@ -1,6 +1,6 @@
-DATABASE_URL="mongodb+srv://<username>:<password>@<cluster-name>/syleshare"
-JWT_SECRET="secret"
-PORT=3001
-# EMAIL_USER=user_email_id
-# EMAIL_PASS=16char_app_password
-# SEND_EMAIL=true
+# DATABASE_URL="mongodb+srv://<username>:<password>@<cluster-name>/syleshare"
+# JWT_SECRET="secret"
+# PORT=3001
+# # EMAIL_USER=user_email_id
+# # EMAIL_PASS=16char_app_password
+# # SEND_EMAIL=true

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

@@ -18,6 +18,7 @@ import ContactUs from "./pages/ContactUs";
 import About from "./pages/About";
 import Policy from "./pages/Policy";
 import GoTop from "./components/GoTop";
+import { Toaster } from 'react-hot-toast';
 // import axios from "axios";
 // axios.defaults.baseURL = "http://localhost:3001/";
 
@@ -90,6 +91,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

@@ -9,6 +9,7 @@ import { GoUnverified } from "react-icons/go";
 import { GoVerified } from "react-icons/go";
 import { MdOutlineMailOutline } from "react-icons/md";
 import { AiTwotoneInfoCircle } from "react-icons/ai";
+import toast from "react-hot-toast";
 
 const Profile = () => {
   const [user, setUser] = useState<IUser | null>(null);
@@ -40,15 +41,16 @@ 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("OTP sent to your mail");
     } catch (error:any) {
-      console.log(error)
+      toast.error('Failed to generate OTP');
       setVerificationError(error.response.data.error.message||'Failed to generate OTP');
     }
   };
@@ -61,17 +63,18 @@ const Profile = () => {
         }
       });
 
-      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:any) {
-      console.log(error)
+      toast.error('Failed to verify OTP');
       setVerificationError(error.response.data.error.message||'Failed to generate OTP');
     }
   };

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