varminer-app-header 2.1.4 → 2.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AppHeader.d.ts.map +1 -1
- package/dist/index.esm.js +112 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +112 -2
- package/dist/index.js.map +1 -1
- package/dist/utils/localStorage.d.ts +16 -0
- package/dist/utils/localStorage.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/AppHeader.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../src/AppHeader.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAe,MAAM,SAAS,CAAC;AAKtD,OAAO,sBAAsB,CAAC;AAQ9B,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,
|
|
1
|
+
{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../src/AppHeader.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAe,MAAM,SAAS,CAAC;AAKtD,OAAO,sBAAsB,CAAC;AAQ9B,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwwBvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
package/dist/index.esm.js
CHANGED
|
@@ -320,6 +320,87 @@ const getAllDataFromStorage = () => {
|
|
|
320
320
|
};
|
|
321
321
|
}
|
|
322
322
|
};
|
|
323
|
+
/**
|
|
324
|
+
* Get profile picture URL from object store API using tenant_id and user_id from JWT token
|
|
325
|
+
* @param baseUrl - Base URL for the object store API (default: http://objectstore.impact0mics.local:9012)
|
|
326
|
+
* @returns Profile picture URL or null if tenant_id or user_id is not available
|
|
327
|
+
*/
|
|
328
|
+
const getProfilePictureUrl = (baseUrl = "http://objectstore.impact0mics.local:9012") => {
|
|
329
|
+
try {
|
|
330
|
+
const allData = getAllDataFromStorage();
|
|
331
|
+
// Get tenant_id and user_id from decoded token
|
|
332
|
+
let tenantId = null;
|
|
333
|
+
let userId = null;
|
|
334
|
+
if (allData.decodedToken) {
|
|
335
|
+
tenantId = allData.decodedToken.tenant_id || allData.decodedToken.tenant || null;
|
|
336
|
+
userId = allData.decodedToken.user_id || null;
|
|
337
|
+
}
|
|
338
|
+
// If not found in decoded token, try auth data
|
|
339
|
+
if ((!tenantId || !userId) && allData.auth) {
|
|
340
|
+
tenantId = tenantId || allData.auth.tenant_id || allData.auth.tenant || null;
|
|
341
|
+
userId = userId || allData.auth.user_id || null;
|
|
342
|
+
}
|
|
343
|
+
// Construct URL if we have both tenant_id and user_id
|
|
344
|
+
if (tenantId && userId) {
|
|
345
|
+
// Remove trailing slash from baseUrl if present
|
|
346
|
+
const cleanBaseUrl = baseUrl.replace(/\/$/, '');
|
|
347
|
+
return `${cleanBaseUrl}/v1/objectStore/profilePicture/path/${tenantId}/${userId}`;
|
|
348
|
+
}
|
|
349
|
+
return null;
|
|
350
|
+
}
|
|
351
|
+
catch (err) {
|
|
352
|
+
console.error("Error getting profile picture URL:", err);
|
|
353
|
+
return null;
|
|
354
|
+
}
|
|
355
|
+
};
|
|
356
|
+
/**
|
|
357
|
+
* Fetch profile picture from API with headers and return as blob URL
|
|
358
|
+
* This function fetches the image with required headers (X-Message-Id, X-Correlation-Id)
|
|
359
|
+
* and converts it to a blob URL that can be used in img src
|
|
360
|
+
* @param baseUrl - Base URL for the object store API (default: http://objectstore.impact0mics.local:9012)
|
|
361
|
+
* @param messageId - Optional message ID for X-Message-Id header (default: generated UUID)
|
|
362
|
+
* @param correlationId - Optional correlation ID for X-Correlation-Id header (default: generated UUID)
|
|
363
|
+
* @returns Promise that resolves to blob URL string or null if fetch fails
|
|
364
|
+
*/
|
|
365
|
+
const fetchProfilePictureAsBlobUrl = async (baseUrl = "http://objectstore.impact0mics.local:9012", messageId, correlationId) => {
|
|
366
|
+
try {
|
|
367
|
+
const profilePictureUrl = getProfilePictureUrl(baseUrl);
|
|
368
|
+
if (!profilePictureUrl) {
|
|
369
|
+
return null;
|
|
370
|
+
}
|
|
371
|
+
// Generate message ID and correlation ID if not provided
|
|
372
|
+
const msgId = messageId || `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
|
373
|
+
const corrId = correlationId || `corr-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
|
374
|
+
// Fetch the image with required headers
|
|
375
|
+
const response = await fetch(profilePictureUrl, {
|
|
376
|
+
method: 'GET',
|
|
377
|
+
headers: {
|
|
378
|
+
'X-Message-Id': msgId,
|
|
379
|
+
'X-Correlation-Id': corrId,
|
|
380
|
+
},
|
|
381
|
+
});
|
|
382
|
+
// Check if the response is successful
|
|
383
|
+
if (!response.ok) {
|
|
384
|
+
console.warn(`Failed to fetch profile picture: ${response.status} ${response.statusText}`);
|
|
385
|
+
return null;
|
|
386
|
+
}
|
|
387
|
+
// Check if the response is an image
|
|
388
|
+
const contentType = response.headers.get('content-type');
|
|
389
|
+
if (!contentType || !contentType.startsWith('image/')) {
|
|
390
|
+
console.warn(`Profile picture response is not an image: ${contentType}`);
|
|
391
|
+
return null;
|
|
392
|
+
}
|
|
393
|
+
// Convert response to blob
|
|
394
|
+
const blob = await response.blob();
|
|
395
|
+
// Create blob URL
|
|
396
|
+
const blobUrl = URL.createObjectURL(blob);
|
|
397
|
+
return blobUrl;
|
|
398
|
+
}
|
|
399
|
+
catch (err) {
|
|
400
|
+
console.error("Error fetching profile picture:", err);
|
|
401
|
+
return null;
|
|
402
|
+
}
|
|
403
|
+
};
|
|
323
404
|
|
|
324
405
|
const translations = {
|
|
325
406
|
en: {
|
|
@@ -527,6 +608,34 @@ const AppHeader = ({ language: languageProp }) => {
|
|
|
527
608
|
const [messageCount, setMessageCount] = React__default.useState(() => {
|
|
528
609
|
return getMessageCountFromStorage() ?? undefined;
|
|
529
610
|
});
|
|
611
|
+
// State for profile picture blob URL
|
|
612
|
+
const [profilePictureBlobUrl, setProfilePictureBlobUrl] = React__default.useState(null);
|
|
613
|
+
// Fetch profile picture from API when component mounts or user data changes
|
|
614
|
+
React__default.useEffect(() => {
|
|
615
|
+
const fetchProfilePicture = async () => {
|
|
616
|
+
// Try to fetch profile picture from API
|
|
617
|
+
const blobUrl = await fetchProfilePictureAsBlobUrl();
|
|
618
|
+
if (blobUrl) {
|
|
619
|
+
// Clean up previous blob URL if it exists
|
|
620
|
+
setProfilePictureBlobUrl((prevUrl) => {
|
|
621
|
+
if (prevUrl) {
|
|
622
|
+
URL.revokeObjectURL(prevUrl);
|
|
623
|
+
}
|
|
624
|
+
return blobUrl;
|
|
625
|
+
});
|
|
626
|
+
}
|
|
627
|
+
};
|
|
628
|
+
fetchProfilePicture();
|
|
629
|
+
// Cleanup function to revoke blob URL when component unmounts or effect re-runs
|
|
630
|
+
return () => {
|
|
631
|
+
setProfilePictureBlobUrl((prevUrl) => {
|
|
632
|
+
if (prevUrl) {
|
|
633
|
+
URL.revokeObjectURL(prevUrl);
|
|
634
|
+
}
|
|
635
|
+
return null;
|
|
636
|
+
});
|
|
637
|
+
};
|
|
638
|
+
}, []); // Only run once on mount - fetch when component loads
|
|
530
639
|
React__default.useEffect(() => {
|
|
531
640
|
const allData = getAllDataFromStorage();
|
|
532
641
|
// Try to get user data from various sources
|
|
@@ -589,11 +698,12 @@ const AppHeader = ({ language: languageProp }) => {
|
|
|
589
698
|
userInitials = userInitials || profileData.initials || undefined;
|
|
590
699
|
}
|
|
591
700
|
}
|
|
701
|
+
// Use fetched blob URL if available, otherwise fall back to other sources
|
|
592
702
|
setUser({
|
|
593
703
|
name: userName || "",
|
|
594
704
|
email: userEmail || "",
|
|
595
705
|
role: userRole || "",
|
|
596
|
-
avatar: userAvatar,
|
|
706
|
+
avatar: profilePictureBlobUrl || userAvatar,
|
|
597
707
|
initials: userInitials,
|
|
598
708
|
});
|
|
599
709
|
// Update online status
|
|
@@ -618,7 +728,7 @@ const AppHeader = ({ language: languageProp }) => {
|
|
|
618
728
|
setCurrentLanguage(languageProp);
|
|
619
729
|
setI18nLocaleToStorage(languageProp);
|
|
620
730
|
}
|
|
621
|
-
}, [languageProp]);
|
|
731
|
+
}, [languageProp, profilePictureBlobUrl]); // Also update when profile picture is fetched
|
|
622
732
|
const finalRoutes = DEFAULT_ROUTES;
|
|
623
733
|
// Get online status from localStorage dynamically
|
|
624
734
|
const [isOnlineStatus, setIsOnlineStatus] = React__default.useState(() => {
|