Fix: Ensure email change request is sent.

The email change request was failing with a 400 error. This commit addresses the issue by ensuring the email change request is correctly sent when a user updates their email in the profile dashboard.

application/src/pages/Profile.tsx

@@ -1,5 +1,5 @@
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { Header } from "@/components/dashboard/Header";
 import { Sidebar } from "@/components/dashboard/Sidebar";
 import { authService } from "@/services/authService";
@@ -24,49 +24,49 @@ const Profile = () => {
   const { toast } = useToast();
   
   // Fetch complete user data
-  useEffect(() => {
-    const fetchUserData = async () => {
-      if (!currentUser?.id) {
-        console.error("No current user ID found");
-        setLoading(false);
-        setError("No user found. Please login again.");
-        return;
-      }
+  const fetchUserData = useCallback(async () => {
+    if (!currentUser?.id) {
+      console.error("No current user ID found");
+      setLoading(false);
+      setError("No user found. Please login again.");
+      return;
+    }
+    
+    try {
+      console.log("Fetching user data for ID:", currentUser.id);
+      const data = await userService.getUser(currentUser.id);
+      console.log("Received user data:", data);
       
-      try {
-        console.log("Fetching user data for ID:", currentUser.id);
-        const data = await userService.getUser(currentUser.id);
-        console.log("Received user data:", data);
-        
-        if (data) {
-          setUserData(data);
-          setError(null);
-        } else {
-          console.error("No user data returned");
-          setError("Could not load user data");
-          toast({
-            title: "Error",
-            description: "Could not load user data. Please try again later.",
-            variant: "destructive",
-          });
-        }
-      } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : "Unknown error";
-        console.error("Failed to load user data:", error);
-        setError(errorMessage);
+      if (data) {
+        setUserData(data);
+        setError(null);
+      } else {
+        console.error("No user data returned");
+        setError("Could not load user data");
         toast({
           title: "Error",
-          description: "Failed to load user profile. Please try again later.",
+          description: "Could not load user data. Please try again later.",
           variant: "destructive",
         });
-      } finally {
-        setLoading(false);
       }
-    };
-    
-    fetchUserData();
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Unknown error";
+      console.error("Failed to load user data:", error);
+      setError(errorMessage);
+      toast({
+        title: "Error",
+        description: "Failed to load user profile. Please try again later.",
+        variant: "destructive",
+      });
+    } finally {
+      setLoading(false);
+    }
   }, [currentUser?.id, toast]);
   
+  useEffect(() => {
+    fetchUserData();
+  }, [fetchUserData]);
+  
   // Handle logout
   const handleLogout = () => {
     authService.logout();
@@ -118,14 +118,17 @@ const Profile = () => {
                 <p>{error}</p>
               </div>
               <button 
-                onClick={() => window.location.reload()}
+                onClick={() => fetchUserData()}
                 className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
               >
                 Retry
               </button>
             </div>
           ) : (
-            <ProfileContent currentUser={userData} />
+            <ProfileContent 
+              currentUser={userData} 
+              onUserUpdated={fetchUserData}
+            />
           )}
         </div>
       </div>
@@ -133,4 +136,4 @@ const Profile = () => {
   );
 };
 
-export default Profile;
+export default Profile;