@bindu-dashing/dam-solution-v2 5.8.27 → 5.8.28

package/build/MyDrive/FolderTree.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, Dropdown, Grid, Input, Select, Tooltip, Tree } from "antd";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, useRef } from "react";
 import { get, map, isArray, isObject, cloneDeep, first, sortBy, } from "lodash";
 import { FaAngleLeft, FaAngleRight } from "react-icons/fa";
 import { deleteFolders, } from "../react-query/services/folder-services";
@@ -111,6 +111,33 @@ function FolderTree({ currentRootId, expandedKeys, selectedKeys, handleExpand, s
         globalSearchValue: "",
     });
     const { showConfirmationModal, showEditModal, selectedFolder, loading, isSorting, enableDrag, sortMode, sortOrder, tempFolders, parentFolder, globalSearchValue, } = state;
+    // Fetch children for a specific folder and insert them into the tree (same logic as fetchFolders)
+    const fetchFolderChildren = (folderId) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { loading: true });
+            });
+            const response = yield api.get(`${FETCH_FOLDER_URL.replace(":folderId", folderId)}?isPagination=false&includeFiles=false&includeSubFoldersCount=true&fetchMainFolders=true&globalSearch=`);
+            const newFolders = get(response, "data.folders", []);
+            // Simply use the same logic as fetchFolders - sort and insert recursively
+            const sorted = sortFoldersRecursively(newFolders, "name", sortOrder);
+            const newChildren = insertSubfoldersRecursively(sorted);
+            console.log('## Fetching children for folder:', folderId, 'New children:', newChildren);
+            // Insert the fetched children into the clicked folder in the tree
+            setFolders((prevFolders) => {
+                return insertSubfolders(prevFolders, folderId, newChildren);
+            });
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { loading: false });
+            });
+        }
+        catch (error) {
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { loading: false });
+            });
+        }
+    });
     const fetchFolders = (fid) => __awaiter(this, void 0, void 0, function* () {
         try {
             setState((prevState) => {
@@ -124,18 +151,11 @@ function FolderTree({ currentRootId, expandedKeys, selectedKeys, handleExpand, s
                 setFolders(sortFoldersRecursively(newFolders, "name", sortOrder));
             }
             else {
-                // // Simply use folder info from API response and newFolders as children
-                // const sorted = sortFoldersRecursively(newFolders, "name", sortOrder);
-                // console.log('## Folder info:', folderInfo, 'New children:', insertSubfoldersRecursively(sorted));
-                // setFolders([{
-                //   ...folderInfo,
-                //   children: insertSubfoldersRecursively(sorted),
-                // }]);
-                setFolders((prev) => {
-                    const cloned = cloneDeep(prev);
-                    const sorted = sortFoldersRecursively(newFolders, "name", sortOrder);
-                    return insertSubfolders(cloned, fid, sorted);
-                });
+                // Simply use folder info from API response and newFolders as children
+                const sorted = sortFoldersRecursively(newFolders, "name", sortOrder);
+                console.log('## Folder info:', folderInfo, 'New children:', insertSubfoldersRecursively(sorted));
+                const newChildren = insertSubfoldersRecursively(sorted);
+                setFolders([Object.assign(Object.assign({}, folderInfo), { children: newChildren })]);
             }
             setState((prevState) => {
                 return Object.assign(Object.assign({}, prevState), { parentFolder: get(response, "data.folder", {}), loading: false, globalSearchValue: globalSearch || "" });
@@ -149,8 +169,17 @@ function FolderTree({ currentRootId, expandedKeys, selectedKeys, handleExpand, s
         }
     });
     // ✅ Load on mount & when currentRootId changes
+    // Use ref to track previous currentRootId to prevent unnecessary fetches
+    const prevCurrentRootIdRef = useRef(null);
     useEffect(() => {
-        if (currentRootId) {
+        if (currentRootId && currentRootId !== prevCurrentRootIdRef.current) {
+            console.log('## FolderTree useEffect - currentRootId changed from', prevCurrentRootIdRef.current, 'to', currentRootId, 'rootFolderId:', rootFolderId);
+            prevCurrentRootIdRef.current = currentRootId;
+            fetchFolders(currentRootId);
+        }
+        else if (globalSearch !== globalSearchValue && currentRootId === rootFolderId) {
+            // Only refetch on global search change if we're on root folder
+            console.log('## FolderTree useEffect - globalSearch changed, refetching root folder');
             fetchFolders(currentRootId);
         }
     }, [currentRootId, globalSearch]);
@@ -181,6 +210,7 @@ function FolderTree({ currentRootId, expandedKeys, selectedKeys, handleExpand, s
     const toggleEditModal = (folder = {}) => setState((prev) => (Object.assign(Object.assign({}, prev), { selectedFolder: folder, showEditModal: !prev.showEditModal })));
     const toggleDeleteModal = (folder = {}) => setState((prev) => (Object.assign(Object.assign({}, prev), { selectedFolder: folder, showConfirmationModal: !prev.showConfirmationModal })));
     const getFoldersTree = (folders = []) => {
+        console.log('## folders', folders);
         const transform = (tree = []) => map(tree, (folder) => {
             const key = get(folder, "_id", "");
             const name = get(folder, "name", "");
@@ -228,6 +258,19 @@ function FolderTree({ currentRootId, expandedKeys, selectedKeys, handleExpand, s
             return get(item, "_id") !== rootFolderId;
         });
     }, [parentFolder]);
+    // Wrapper for handleExpand that also fetches children when a folder is expanded
+    const handleExpandWithFetch = (keys) => {
+        handleExpand(keys);
+        const newExpanded = map(keys, (k) => k.toString());
+        const currentExpanded = isArray(expandedKeys) ? expandedKeys : [expandedKeys].filter(Boolean);
+        const newlyExpanded = newExpanded.filter(id => !currentExpanded.includes(id));
+        // Fetch children for newly expanded folders using the same simple logic
+        newlyExpanded.forEach(expandedId => {
+            if (expandedId !== rootFolderId && expandedId !== currentRootId) {
+                fetchFolderChildren(expandedId);
+            }
+        });
+    };
     const handleSelect = (keys) => {
         // console.log("keys", keys);
         const selected = map(keys, (k) => k.toString());
@@ -236,6 +279,11 @@ function FolderTree({ currentRootId, expandedKeys, selectedKeys, handleExpand, s
         if (get(selected, "length") > 0) {
             const selectedId = selected[get(selected, "length", 0) - 1];
             // navigate(SUBFOLDERS_SCREEN.replace(":folderId", selectedId));
+            console.log('## selectedId', selectedId);
+            // If the selected folder is not the root folder, fetch its children
+            if (selectedId !== rootFolderId && selectedId !== currentRootId) {
+                fetchFolderChildren(selectedId);
+            }
         }
     };
     useEffect(() => {
@@ -341,6 +389,7 @@ function FolderTree({ currentRootId, expandedKeys, selectedKeys, handleExpand, s
             return Object.assign(Object.assign({}, prevState), { tempFolders: cloneDeep(customSorted), sortMode: "custom", enableDrag: false });
         });
     };
+    console.log('## folders in FolderTree', tempFolders, folders);
     return (_jsxs(_Fragment, { children: [!screens.md && collapse && (_jsxs("div", { className: `md-lib-bg-textColorActive dark:md-lib-bg-darkSecondaryColor md-lib-p-1 md-lib-rounded md-lib-absolute md-lib-top-16 md-lib-left-1`, children: [" ", _jsx(FaAngleRightbtn, { size: 24, className: "md-lib-text-textColor dark:md-lib-text-darkTextColor", onClick: toggleMenu })] })), _jsxs("div", { className: `md-lib-border-r md-lib-inline-table md-lib-border-borderColor dark:md-lib-border-darkBorderColor md-lib-bg-white dark:md-lib-bg-darkPrimaryHoverColor md-lib-px-2 md-lib-pt-1 md-lib-max-h-[calc(100%-76px)] md-lib-overflow-x-auto ${!screens.md &&
                     "md-lib-absolute md-lib-left-0 md-lib-z-30 md-lib-h-full"} ${!screens.md && collapse && "!-md-lib-left-full"}`, children: [!screens.md && !collapse && (_jsxs("div", { className: `md-lib-bg-textColorActive dark:md-lib-bg-darkSecondaryColor md-lib-p-1 md-lib-rounded md-lib-absolute md-lib-top-1 md-lib-right-1 md-lib-z-50`, children: [" ", _jsx(FaAngleLeftbtn, { size: 24, className: "md-lib-text-textColor dark:md-lib-text-darkTextColor", onClick: toggleMenu })] })), _jsx("div", { className: "md-lib-mb-2", children: _jsx(Input, { placeholder: "Search files (min. 2 characters required)", onChange: (e) => setState((prevState) => {
                                 return Object.assign(Object.assign({}, prevState), { globalSearchValue: e.target.value });
@@ -359,6 +408,6 @@ function FolderTree({ currentRootId, expandedKeys, selectedKeys, handleExpand, s
                                     }, icon: sortOrder == "desc" ? (_jsx(AiOutlineSortAscendingbtn, { className: "md-lib-cursor-pointer" })) : (_jsx(AiOutlineSortDescendingbtn, { className: "md-lib-cursor-pointer" })) }) })), sortMode === "custom" && !enableDrag && !globalSearch && (_jsx(Tooltip, { title: "Enable Drag", children: _jsx(Button, { icon: _jsx(GrSortIcon, {}), onClick: toggleEnableDrag }) })), enableDrag && (_jsxs("div", { className: "md-lib-flex md-lib-gap-2 md-lib-ml-2", children: [_jsx(Button, { type: "primary", onClick: handleSave, loading: isSorting, children: "Save" }), _jsx(Button, { onClick: handleCancel, children: "Cancel" })] })), loading && _jsx(CustomLoader, {})] }), _jsx(DirectoryTree, { treeData: getFoldersTree(sortMode === "custom" ? tempFolders : folders), draggable: {
                             icon: true,
                             nodeDraggable: (node) => sortMode === "custom" && enableDrag ? !(node === null || node === void 0 ? void 0 : node.parentId) : false,
-                        }, onDrop: sortMode === "custom" && enableDrag ? onDrop : undefined, blockNode: true, showIcon: false, selectable: !enableDrag, selectedKeys: isArray(selectedKeys) ? selectedKeys : [selectedKeys], expandedKeys: expandedKeys, onSelect: handleSelect, onExpand: handleExpand })] }), showConfirmationModal && (_jsx(DeleteConfirmationModal, { showDeleteModal: showConfirmationModal, toggleDeleteModal: toggleDeleteModal, okText: DELETE_OK_TEXT, description: DELETE_CONFIRMATION_MESSAGE.replace(":action", "delete").replace(":entity", get(selectedFolder, "name", "this folder")), onOk: onDeleteFolder, loading: loading })), showEditModal && (_jsx(AddFolder, { open: showEditModal, handleCancel: toggleEditModal, folder: selectedFolder }))] }));
+                        }, onDrop: sortMode === "custom" && enableDrag ? onDrop : undefined, blockNode: true, showIcon: false, selectable: !enableDrag, selectedKeys: isArray(selectedKeys) ? selectedKeys : [selectedKeys], expandedKeys: expandedKeys, onSelect: handleSelect, onExpand: handleExpandWithFetch })] }), showConfirmationModal && (_jsx(DeleteConfirmationModal, { showDeleteModal: showConfirmationModal, toggleDeleteModal: toggleDeleteModal, okText: DELETE_OK_TEXT, description: DELETE_CONFIRMATION_MESSAGE.replace(":action", "delete").replace(":entity", get(selectedFolder, "name", "this folder")), onOk: onDeleteFolder, loading: loading })), showEditModal && (_jsx(AddFolder, { open: showEditModal, handleCancel: toggleEditModal, folder: selectedFolder }))] }));
 }
 export default FolderTree;

package/build/hocs/DamConfigContext.js

@@ -19,7 +19,7 @@ import { SUBSCRIPTION_EXPIRED_ERROR_MESSAGE } from "./appConstants";
 const DamConfigContext = createContext(null);
 export const DamConfigProvider = ({ children, config }) => {
     // console.log(config);
-    const { damAccessKey, secretKey, subdomain, teamIds, appType, initialRootFolderId, folderId, id, parentId, showSubfolders, routerVersion } = config;
+    const { damAccessKey, secretKey, subdomain, teamIds, appType, initialRootFolderId } = config;
     const [accessToken, setAccessToken] = useState(null);
     const [user, setDamUser] = useState(null);
     const [brand, setBrand] = useState(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bindu-dashing/dam-solution-v2",
-  "version": "5.8.27",
+  "version": "5.8.28",
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
     "@emoji-mart/data": "^1.2.1",