varminer-app-header 2.1.4 → 2.1.5

package/dist/index.js

@@ -340,6 +340,87 @@ const getAllDataFromStorage = () => {
         };
     }
 };
+/**
+ * Get profile picture URL from object store API using tenant_id and user_id from JWT token
+ * @param baseUrl - Base URL for the object store API (default: http://objectstore.impact0mics.local:9012)
+ * @returns Profile picture URL or null if tenant_id or user_id is not available
+ */
+const getProfilePictureUrl = (baseUrl = "http://objectstore.impact0mics.local:9012") => {
+    try {
+        const allData = getAllDataFromStorage();
+        // Get tenant_id and user_id from decoded token
+        let tenantId = null;
+        let userId = null;
+        if (allData.decodedToken) {
+            tenantId = allData.decodedToken.tenant_id || allData.decodedToken.tenant || null;
+            userId = allData.decodedToken.user_id || null;
+        }
+        // If not found in decoded token, try auth data
+        if ((!tenantId || !userId) && allData.auth) {
+            tenantId = tenantId || allData.auth.tenant_id || allData.auth.tenant || null;
+            userId = userId || allData.auth.user_id || null;
+        }
+        // Construct URL if we have both tenant_id and user_id
+        if (tenantId && userId) {
+            // Remove trailing slash from baseUrl if present
+            const cleanBaseUrl = baseUrl.replace(/\/$/, '');
+            return `${cleanBaseUrl}/v1/objectStore/profilePicture/path/${tenantId}/${userId}`;
+        }
+        return null;
+    }
+    catch (err) {
+        console.error("Error getting profile picture URL:", err);
+        return null;
+    }
+};
+/**
+ * Fetch profile picture from API with headers and return as blob URL
+ * This function fetches the image with required headers (X-Message-Id, X-Correlation-Id)
+ * and converts it to a blob URL that can be used in img src
+ * @param baseUrl - Base URL for the object store API (default: http://objectstore.impact0mics.local:9012)
+ * @param messageId - Optional message ID for X-Message-Id header (default: generated UUID)
+ * @param correlationId - Optional correlation ID for X-Correlation-Id header (default: generated UUID)
+ * @returns Promise that resolves to blob URL string or null if fetch fails
+ */
+const fetchProfilePictureAsBlobUrl = async (baseUrl = "http://objectstore.impact0mics.local:9012", messageId, correlationId) => {
+    try {
+        const profilePictureUrl = getProfilePictureUrl(baseUrl);
+        if (!profilePictureUrl) {
+            return null;
+        }
+        // Generate message ID and correlation ID if not provided
+        const msgId = messageId || `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const corrId = correlationId || `corr-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        // Fetch the image with required headers
+        const response = await fetch(profilePictureUrl, {
+            method: 'GET',
+            headers: {
+                'X-Message-Id': msgId,
+                'X-Correlation-Id': corrId,
+            },
+        });
+        // Check if the response is successful
+        if (!response.ok) {
+            console.warn(`Failed to fetch profile picture: ${response.status} ${response.statusText}`);
+            return null;
+        }
+        // Check if the response is an image
+        const contentType = response.headers.get('content-type');
+        if (!contentType || !contentType.startsWith('image/')) {
+            console.warn(`Profile picture response is not an image: ${contentType}`);
+            return null;
+        }
+        // Convert response to blob
+        const blob = await response.blob();
+        // Create blob URL
+        const blobUrl = URL.createObjectURL(blob);
+        return blobUrl;
+    }
+    catch (err) {
+        console.error("Error fetching profile picture:", err);
+        return null;
+    }
+};
 
 const translations = {
     en: {
@@ -547,6 +628,34 @@ const AppHeader = ({ language: languageProp }) => {
     const [messageCount, setMessageCount] = React.useState(() => {
         return getMessageCountFromStorage() ?? undefined;
     });
+    // State for profile picture blob URL
+    const [profilePictureBlobUrl, setProfilePictureBlobUrl] = React.useState(null);
+    // Fetch profile picture from API when component mounts or user data changes
+    React.useEffect(() => {
+        const fetchProfilePicture = async () => {
+            // Try to fetch profile picture from API
+            const blobUrl = await fetchProfilePictureAsBlobUrl();
+            if (blobUrl) {
+                // Clean up previous blob URL if it exists
+                setProfilePictureBlobUrl((prevUrl) => {
+                    if (prevUrl) {
+                        URL.revokeObjectURL(prevUrl);
+                    }
+                    return blobUrl;
+                });
+            }
+        };
+        fetchProfilePicture();
+        // Cleanup function to revoke blob URL when component unmounts or effect re-runs
+        return () => {
+            setProfilePictureBlobUrl((prevUrl) => {
+                if (prevUrl) {
+                    URL.revokeObjectURL(prevUrl);
+                }
+                return null;
+            });
+        };
+    }, []); // Only run once on mount - fetch when component loads
     React.useEffect(() => {
         const allData = getAllDataFromStorage();
         // Try to get user data from various sources
@@ -609,11 +718,12 @@ const AppHeader = ({ language: languageProp }) => {
                 userInitials = userInitials || profileData.initials || undefined;
             }
         }
+        // Use fetched blob URL if available, otherwise fall back to other sources
         setUser({
             name: userName || "",
             email: userEmail || "",
             role: userRole || "",
-            avatar: userAvatar,
+            avatar: profilePictureBlobUrl || userAvatar,
             initials: userInitials,
         });
         // Update online status
@@ -638,7 +748,7 @@ const AppHeader = ({ language: languageProp }) => {
             setCurrentLanguage(languageProp);
             setI18nLocaleToStorage(languageProp);
         }
-    }, [languageProp]);
+    }, [languageProp, profilePictureBlobUrl]); // Also update when profile picture is fetched
     const finalRoutes = DEFAULT_ROUTES;
     // Get online status from localStorage dynamically
     const [isOnlineStatus, setIsOnlineStatus] = React.useState(() => {