@spteck/react-controls-v2 2.0.1 → 2.0.3

package/dist/index.mjs

@@ -25945,6 +25945,27 @@ const useUserProfile = (userId, providedContext) => {
       return null;
     }
   }, [graphClient]);
+  const getUserPhoto = useCallback(async (id) => {
+    if (!graphClient) {
+      console.warn("Graph client not available");
+      return void 0;
+    }
+    try {
+      const photoBlob = await graphClient.getBlob(`/users/${id}/photo/$value`);
+      if (photoBlob) {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onloadend = () => resolve(reader.result);
+          reader.onerror = reject;
+          reader.readAsDataURL(photoBlob);
+        });
+      }
+      return void 0;
+    } catch (error) {
+      console.debug("No photo available for user:", id);
+      return void 0;
+    }
+  }, [graphClient]);
   const fetchUser = useCallback(async () => {
     var _a3;
     if (!userId) {
@@ -25962,6 +25983,7 @@ const useUserProfile = (userId, providedContext) => {
       const fetchedUser = await getUserById(userId);
       if (!fetchedUser) return;
       let presence = { availability: "Offline", activity: "Offline" };
+      let userPhoto;
       try {
         if (fetchedUser.id) {
           const fetchedPresence = await getUserPresence(fetchedUser.id);
@@ -25988,7 +26010,18 @@ const useUserProfile = (userId, providedContext) => {
           );
         }
       }
-      const userData = { ...fetchedUser, presence };
+      try {
+        if (fetchedUser.id) {
+          userPhoto = await getUserPhoto(fetchedUser.id);
+        }
+      } catch (error) {
+        logError(
+          "fetchUser: Error fetching user photo",
+          error,
+          ErrorType.Warning
+        );
+      }
+      const userData = { ...fetchedUser, presence, userPhoto };
       userCache.set(userId, {
         data: userData,
         timestamp: now,
@@ -26000,7 +26033,7 @@ const useUserProfile = (userId, providedContext) => {
     } finally {
       setLoading(false);
     }
-  }, [userId, getUserById, getUserPresence, logError]);
+  }, [userId, getUserById, getUserPresence, getUserPhoto, logError]);
   const checkUserPresence = useCallback(async () => {
     var _a3;
     if (!userId || !user) return;
@@ -26831,20 +26864,26 @@ const AppDashboard = ({
   const layoutCacheKey = `${cacheKeyPrefix}-layout-settings`;
   const orderCacheKey = `${cacheKeyPrefix}-card-order`;
   const { getCachedData, setCachedData } = useIndexedDBCache();
-  const getData = (key) => getCachedData(key);
-  const setData = (key, value) => setCachedData(key, value, CACHE_EXPIRATION_DAYS * 24 * 60);
+  const getData = useCallback((key) => getCachedData(key), [getCachedData]);
+  const setData = useCallback(
+    (key, value) => setCachedData(key, value, CACHE_EXPIRATION_DAYS * 24 * 60),
+    [setCachedData]
+  );
   const {
     getCachedData: getOrderCachedData,
     setCachedData: setOrderCachedData
   } = useIndexedDBCache();
-  const getOrderData = (key) => getOrderCachedData(key);
-  const setOrderData = (key, value) => setOrderCachedData(key, value, CACHE_EXPIRATION_DAYS * 24 * 60);
+  const getOrderData = useCallback((key) => getOrderCachedData(key), [getOrderCachedData]);
+  const setOrderData = useCallback(
+    (key, value) => setOrderCachedData(key, value, CACHE_EXPIRATION_DAYS * 24 * 60),
+    [setOrderCachedData]
+  );
   const [cardContainers, setCardContainers] = useState([]);
   const [sizes, setSizes] = useState({});
   const dragItem = useRef(null);
   const dragOverItem = useRef(null);
   const containerRef = useRef(null);
-  React__default.useEffect(() => {
+  useEffect(() => {
     const initializeData = async () => {
       try {
         let orderedCards = cards;
@@ -26896,10 +26935,10 @@ const AppDashboard = ({
         setSizes(fallbackSizes);
       }
     };
-    initializeData();
-  }, [cards, enableCache, layoutCacheKey, orderCacheKey]);
+    void initializeData();
+  }, [cards, enableCache, layoutCacheKey, orderCacheKey, getData, getOrderData]);
   useEffect(() => {
-    if (!enableCache) return;
+    if (!enableCache || Object.keys(sizes).length === 0) return;
     const saveSizesToCache = async () => {
       try {
         await setData(layoutCacheKey, sizes);
@@ -26907,12 +26946,10 @@ const AppDashboard = ({
         console.warn("Failed to save dashboard layout to cache:", error);
       }
     };
-    if (Object.keys(sizes).length > 0) {
-      saveSizesToCache();
-    }
+    void saveSizesToCache();
   }, [sizes, enableCache, layoutCacheKey, setData]);
   useEffect(() => {
-    if (!enableCache) return;
+    if (!enableCache || cardContainers.length === 0) return;
     const saveOrderToCache = async () => {
       try {
         const cardOrder = cardContainers.map((card) => card.id);
@@ -26921,9 +26958,7 @@ const AppDashboard = ({
         console.warn("Failed to save dashboard order to cache:", error);
       }
     };
-    if (cardContainers.length > 0) {
-      saveOrderToCache();
-    }
+    void saveOrderToCache();
   }, [cardContainers, enableCache, orderCacheKey, setOrderData]);
   useEffect(() => {
     if (containerWidth <= MINIMUM_DASHBOARD_WIDTH) {
@@ -26996,21 +27031,16 @@ const AppDashboard = ({
     return cardContainers.map((cardContainer, idx) => {
       var _a3, _b2, _c2, _d2;
       const shouldShowZoom = cardContainer.showZoom !== false && showZoom;
-      let headerAction = void 0;
-      if (cardContainer.headerAction) {
-        headerAction = cardContainer.headerAction;
-      } else if (shouldShowZoom) {
-        headerAction = /* @__PURE__ */ jsx$2(
-          SelectZoom,
-          {
-            values: sizes[cardContainer.id] || defaultColsAndRowSpanBasedOnNumberColumns[cardContainer.id] || { spanCols: 1, spanRows: 1 },
-            maxCols: maxZoom,
-            maxRows: maxSpanRows,
-            IsOpen: false,
-            onChange: (v) => handleZoomSelect(cardContainer.id, v)
-          }
-        );
-      }
+      const headerAction = cardContainer.headerAction || (shouldShowZoom ? /* @__PURE__ */ jsx$2(
+        SelectZoom,
+        {
+          values: sizes[cardContainer.id] || defaultColsAndRowSpanBasedOnNumberColumns[cardContainer.id] || { spanCols: 1, spanRows: 1 },
+          maxCols: maxZoom,
+          maxRows: maxSpanRows,
+          IsOpen: false,
+          onChange: (v) => handleZoomSelect(cardContainer.id, v)
+        }
+      ) : void 0);
       return /* @__PURE__ */ jsx$2(
         "div",
         {
@@ -27029,7 +27059,7 @@ const AppDashboard = ({
             /* @__PURE__ */ jsx$2(
               CardHeader,
               {
-                header: /* @__PURE__ */ jsxs$1("div", { children: [
+                header: /* @__PURE__ */ jsxs$1(StackV2, { gap: "0px", children: [
                   /* @__PURE__ */ jsx$2(Text, { weight: "semibold", size: 400, children: cardContainer.cardTitle }),
                   cardContainer.cardDescription && /* @__PURE__ */ jsx$2(Text, { className: styles2.cardDescription, size: 200, children: cardContainer.cardDescription })
                 ] }),