From 7b547c8ee40630fec8f08fd280bed0f4c2cb3ff8 Mon Sep 17 00:00:00 2001
From: meet <dodiyameet041@gmail.com>
Date: Tue, 4 Jun 2024 23:22:46 +0530
Subject: [PATCH] Resolved error message and verification error state logic

---
 frontend/src/pages/Profile.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 36d1a35d..243f5ebf 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -14,6 +14,7 @@ import toast from "react-hot-toast";
 const Profile = () => {
   const [user, setUser] = useState<IUser | null>(null);
   const [loading, setLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState("");
   const [otpSent, setOtpSent] = useState(false);
   const [otp, setOtp] = useState("");
   const [verificationError, setVerificationError] = useState("");
@@ -30,7 +31,7 @@ const Profile = () => {
         setUser(response.data.user);
         setLoading(false);
       } catch (error) {
-        console.log('Failed to fetch user details');
+        setErrorMessage('Failed to fetch user details');
         setLoading(false);
       }
     };
@@ -47,9 +48,10 @@ const Profile = () => {
       });
       setOtpSent(true);
       toast.success(response.data.message);
-      setVerificationError("");
-    } catch (error) {
+      setVerificationError("OTP sent to your mail");
+    } catch (error:any) {
       toast.error('Failed to generate OTP');
+      setVerificationError(error.response.data.error.message||'Failed to generate OTP');
     }
   };
 
@@ -71,8 +73,9 @@ const Profile = () => {
       setOtp("");
       setVerificationError("");
       toast.success('OTP verified successfully');
-    } catch (error) {
+    } catch (error:any) {
       toast.error('Failed to verify OTP');
+      setVerificationError(error.response.data.error.message||'Failed to generate OTP');
     }
   };
 
@@ -80,6 +83,10 @@ const Profile = () => {
     return <Loader />;
   }
 
+  if (errorMessage) {
+    return <div className='text-red-500 font-semibold text-lg text-center'>{errorMessage}</div>;
+  }
+
   return (
     <>
       <div className="max-w-screen-xl mx-auto p-4 text-white flex flex-col items-center">