refactor: remove useFolders

packages/app-aco/src/components/FolderTree/List/index.tsx

@@ -13,7 +13,7 @@ import { Node } from "../Node";
 import { NodePreview } from "../NodePreview";
 import { Placeholder } from "../Placeholder";
 import { createInitialOpenList, createTreeData } from "./utils";
-import { useFolders } from "~/hooks";
+import { useGetFolderLevelPermission, useUpdateFolder } from "~/features";
 import { ROOT_FOLDER } from "~/constants";
 import { DndFolderItemData, FolderItem } from "~/types";
 import { FolderProvider } from "~/contexts/folder";
@@ -33,7 +33,9 @@ export const List = ({
     hiddenFolderIds,
     enableActions
 }: ListProps) => {
-    const { updateFolder, folderLevelPermissions: flp } = useFolders();
+    const { updateFolder } = useUpdateFolder();
+    const { getFolderLevelPermission: canManageStructure } =
+        useGetFolderLevelPermission("canManageStructure");
     const { showSnackbar } = useSnackbar();
     const [treeData, setTreeData] = useState<NodeModel<DndFolderItemData>[]>([]);
     const [initialOpenList, setInitialOpenList] = useState<undefined | InitialOpen>();
@@ -95,9 +97,9 @@ export const List = ({
     const canDrag = useCallback(
         (folderId: string) => {
             const isRootFolder = folderId === ROOT_FOLDER;
-            return !isRootFolder && flp.canManageStructure(folderId);
+            return !isRootFolder && canManageStructure(folderId);
         },
-        [flp.canManageStructure]
+        [canManageStructure]
     );
 
     return (

packages/app-aco/src/components/FolderTree/List/utils.ts

@@ -3,9 +3,9 @@ import { DndFolderItemData, FolderItem } from "~/types";
 import { ROOT_FOLDER } from "~/constants";
 
 /**
- * Transform an array of folders returned by useFolders hook into an array of elements for the tree component.
+ * Transform an array of folders returned by folders cache into an array of elements for the tree component.
  *
- * @param folders list of folders returned by useFolders hook.
+ * @param folders list of folders returned by folders cache.
  * @param focusedNodeId id of the current folder selected/focused.
  * @param hiddenFolderIds list ids of the folder you don't want to show within the list.
  * @return array of elements to render the tree component.
@@ -37,7 +37,7 @@ export const createTreeData = (
  * Return an array of ids of open folders, based on the current focused folder id, its parent folders and the folders
  * opened by user interaction.
  *
- * @param folders list of folders returned by useFolders hook.
+ * @param folders list of folders returned by folders cache.
  * @param openIds list of open folders ids.
  * @param focusedId id of the current folder selected/focused.
  * @return array of ids of open folders.

packages/app-aco/src/components/FolderTree/index.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { Tooltip } from "@webiny/ui/Tooltip";
-import { useFolders } from "~/hooks/useFolders";
+import { useGetFolderLevelPermission, useListFolders } from "~/features";
 import { CreateButton } from "./ButtonCreate";
 import { Empty } from "./Empty";
 import { Loader } from "./Loader";
@@ -29,7 +29,10 @@ export const FolderTree = ({
     onFolderClick,
     rootFolderLabel
 }: FolderTreeProps) => {
-    const { folders, folderLevelPermissions: flp, loading } = useFolders();
+    const { loading, folders } = useListFolders();
+    const { getFolderLevelPermission: canManageStructure } =
+        useGetFolderLevelPermission("canManageStructure");
+
     const localFolders = useMemo(() => {
         if (!folders) {
             return [];
@@ -50,7 +53,7 @@ export const FolderTree = ({
 
         let createButton = null;
         if (enableCreate) {
-            const canCreate = flp.canManageStructure(focusedFolderId!);
+            const canCreate = canManageStructure(focusedFolderId!);
 
             createButton = <CreateButton disabled={!canCreate} />;
 

packages/app-aco/src/contexts/acoList.tsx

@@ -11,7 +11,8 @@ import {
     ListSearchRecordsSort,
     SearchRecordItem
 } from "~/types";
-import { useAcoApp, useFolders, useNavigateFolder } from "~/hooks";
+import { useAcoApp, useNavigateFolder } from "~/hooks";
+import { useGetDescendantFolders, useListFolders } from "~/features";
 import { FoldersContext } from "~/contexts/folders";
 import { SearchRecordsContext } from "~/contexts/records";
 import { sortTableItems, validateOrGetDefaultDbSort } from "~/sorting";
@@ -120,11 +121,8 @@ export const AcoListProvider = ({ children, ...props }: AcoListProviderProps) =>
     const { identity } = useSecurity();
     const { currentFolderId } = useNavigateFolder();
     const { folderIdPath, folderIdInPath } = useAcoApp();
-    const {
-        folders: originalFolders,
-        loading: foldersLoading,
-        getDescendantFolders
-    } = useFolders();
+    const { folders: originalFolders, loading: foldersLoading } = useListFolders();
+    const { getDescendantFolders } = useGetDescendantFolders();
     const folderContext = useContext(FoldersContext);
     const searchContext = useContext(SearchRecordsContext);
 

packages/app-aco/src/dialogs/useCreateDialog.tsx

@@ -10,7 +10,7 @@ import { validation } from "@webiny/validation";
 import { FolderTree } from "~/components";
 import { useDialogs } from "@webiny/app-admin";
 import { DialogFoldersContainer } from "~/dialogs/styled";
-import { useFolders } from "~/hooks";
+import { useCreateFolder } from "~/features";
 import { ROOT_FOLDER } from "~/constants";
 import { FolderItem } from "~/types";
 
@@ -81,7 +81,7 @@ const FormComponent = ({ currentParentId = null }: FormComponentProps) => {
 
 export const useCreateDialog = (): UseCreateDialogResponse => {
     const dialogs = useDialogs();
-    const { createFolder } = useFolders();
+    const { createFolder } = useCreateFolder();
     const { showSnackbar } = useSnackbar();
 
     const onAccept = useCallback(async (data: FolderItem) => {

packages/app-aco/src/dialogs/useDeleteDialog.tsx

@@ -1,7 +1,7 @@
 import { useSnackbar } from "@webiny/app-admin";
 
 import { useDialogs } from "@webiny/app-admin";
-import { useFolders } from "~/hooks";
+import { useDeleteFolder } from "~/features";
 import { FolderItem } from "~/types";
 import { useCallback } from "react";
 
@@ -15,7 +15,7 @@ interface UseDeleteDialogResponse {
 
 export const useDeleteDialog = (): UseDeleteDialogResponse => {
     const dialogs = useDialogs();
-    const { deleteFolder } = useFolders();
+    const { deleteFolder } = useDeleteFolder();
     const { showSnackbar } = useSnackbar();
 
     const onAccept = useCallback(async (folder: FolderItem) => {

packages/app-aco/src/dialogs/useEditDialog.tsx

@@ -10,7 +10,7 @@ import { FolderTree } from "~/components";
 import { ROOT_FOLDER } from "~/constants";
 import { useDialogs } from "@webiny/app-admin";
 import { DialogFoldersContainer } from "~/dialogs/styled";
-import { useFolders } from "~/hooks";
+import { useUpdateFolder } from "~/features";
 import { FolderItem } from "~/types";
 
 interface ShowDialogParams {
@@ -72,7 +72,7 @@ const FormComponent = ({ folder }: FormComponentProps) => {
 
 export const useEditDialog = (): UseEditDialogResponse => {
     const dialog = useDialogs();
-    const { updateFolder } = useFolders();
+    const { updateFolder } = useUpdateFolder();
     const { showSnackbar } = useSnackbar();
 
     const onAccept = useCallback(async (folder: FolderItem, data: GenericFormData) => {

packages/app-aco/src/dialogs/useSetPermissionsDialog.tsx

@@ -9,7 +9,7 @@ import { UsersTeamsSelection } from "./DialogSetPermissions/UsersTeamsSelection"
 import { LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS } from "./DialogSetPermissions/graphql";
 
 import { useDialogs } from "@webiny/app-admin";
-import { useFolders } from "~/hooks";
+import { useUpdateFolder } from "~/features";
 import { FolderItem, FolderLevelPermissionsTarget, FolderPermission } from "~/types";
 
 interface ShowDialogParams {
@@ -115,7 +115,7 @@ const FormComponent = ({ folder }: FormComponentProps) => {
 
 export const useSetPermissionsDialog = (): UseSetPermissionsDialogResponse => {
     const dialogs = useDialogs();
-    const { updateFolder } = useFolders();
+    const { updateFolder } = useUpdateFolder();
     const { showSnackbar } = useSnackbar();
 
     const onAccept = useCallback(async (folder: FolderItem, data: Partial<FolderItem>) => {

packages/app-aco/src/features/folder/deleteFolder/DeleteFolder.test.ts

@@ -30,7 +30,14 @@ describe("DeleteFolder", () => {
         const item = foldersCache.getItem(folder => folder.id === "any-folder-id");
         expect(item?.id).toEqual("any-folder-id");
 
-        await deleteFolder.execute({ id: "any-folder-id" });
+        await deleteFolder.execute({
+            id: "any-folder-id",
+            title: "New Folder",
+            slug: "new-folder",
+            parentId: null,
+            permissions: [],
+            type
+        });
 
         expect(gateway.execute).toHaveBeenCalledTimes(1);
         expect(foldersCache.hasItems()).toBeFalse();

packages/app-aco/src/features/folder/deleteFolder/IDeleteFolderUseCase.ts

@@ -1,5 +1,12 @@
+import { FolderPermission } from "~/types";
+
 export interface DeleteFolderParams {
     id: string;
+    title: string;
+    slug: string;
+    type: string;
+    parentId: string | null;
+    permissions: FolderPermission[];
 }
 
 export interface IDeleteFolderUseCase {

packages/app-aco/src/features/folder/deleteFolder/useDeleteFolder.ts

@@ -12,7 +12,7 @@ export const useDeleteFolder = () => {
     const foldersContext = useContext(FoldersContext);
 
     if (!foldersContext) {
-        throw new Error("useFolders must be used within a FoldersProvider");
+        throw new Error("useDeleteFolder must be used within a FoldersProvider");
     }
 
     const { type } = foldersContext;

packages/app-aco/src/features/index.ts

@@ -0,0 +1 @@
+export * from "./folder";

packages/app-aco/src/hooks/useFolders.ts

@@ -6,8 +6,13 @@ import {
     useGetFolderLevelPermission,
     useListFolders,
     useUpdateFolder
-} from "~/features/folder";
+} from "~/features";
 
+/**
+ * Custom hook to manage folder operations.
+ *
+ * @deprecated This hook is deprecated. Use the individual hooks directly from "~/features" instead.
+ */
 export const useFolders = () => {
     const { createFolder } = useCreateFolder();
     const { deleteFolder } = useDeleteFolder();

packages/app-aco/src/index.ts

@@ -2,5 +2,6 @@ export * from "./components";
 export * from "./config";
 export * from "./contexts";
 export * from "./hooks";
+export * from "./features";
 export * from "./dialogs";
 export * from "./sorting";

packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerViewProvider/FileManagerViewContext.tsx

@@ -8,7 +8,7 @@ import { initializeState, State } from "./state";
 import { FolderItem, ListMeta, ListSearchRecordsSort } from "@webiny/app-aco/types";
 import { UploadOptions } from "@webiny/app/types";
 import { sortTableItems } from "@webiny/app-aco/sorting";
-import { useFolders, useNavigateFolder } from "@webiny/app-aco";
+import { useListFolders, useNavigateFolder } from "@webiny/app-aco";
 import { ListFilesQueryVariables } from "~/modules/FileManagerApiProvider/graphql";
 import { useListFiles } from "./useListFiles";
 import { useTags } from "./useTags";
@@ -106,7 +106,7 @@ export const FileManagerViewProvider = ({ children, ...props }: FileManagerViewP
     const shiftKeyPressed = useShiftKey();
     const modifiers = { scope: props.scope, own: props.own, accept: props.accept };
     const fileManager = useFileManagerApi();
-    const { folders: originalFolders, loading: foldersLoading } = useFolders();
+    const { folders: originalFolders, loading: foldersLoading } = useListFolders();
     const { currentFolderId = ROOT_FOLDER, navigateToFolder } = useNavigateFolder();
     const tags = useTags(modifiers);
     const [state, setState] = useStateIfMounted(initializeState());

packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerViewProvider/useListFiles.ts

@@ -1,6 +1,6 @@
 import isEqual from "lodash/isEqual";
 import { validateOrGetDefaultDbSort } from "@webiny/app-aco/sorting";
-import { useFolders } from "@webiny/app-aco";
+import { useGetDescendantFolders } from "@webiny/app-aco";
 import { ListMeta } from "@webiny/app-aco/types";
 import { useSecurity } from "@webiny/app-security";
 import { FileItem } from "@webiny/app-admin/types";
@@ -41,7 +41,7 @@ interface UseListFilesParams {
 export function useListFiles({ modifiers, folderId, state }: UseListFilesParams) {
     const { identity } = useSecurity();
     const fileManager = useFileManagerApi();
-    const { getDescendantFolders } = useFolders();
+    const { getDescendantFolders } = useGetDescendantFolders();
     const [meta, setMeta] = useStateIfMounted<ListMeta | undefined>(undefined);
     const [files, setFiles] = useStateIfMounted<FileItem[]>([]);
     const [loading, setLoading] = useStateIfMounted<Loading<LoadingActions>>({});

packages/app-headless-cms/src/admin/views/contentEntries/Table/Main.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import debounce from "lodash/debounce";
-import { useCreateDialog, useFolders } from "@webiny/app-aco";
+import { useCreateDialog, useGetFolderLevelPermission } from "@webiny/app-aco";
 import { Scrollbar } from "@webiny/ui/Scrollbar";
 import { Empty } from "~/admin/components/ContentEntries/Empty";
 import { Filters } from "~/admin/components/ContentEntries/Filters";
@@ -29,15 +29,18 @@ export const Main = ({ folderId: initialFolderId }: MainProps) => {
 
     // We check permissions on two layers - security and folder level permissions.
     const { canCreate, contentModel } = useContentEntry();
-    const { folderLevelPermissions: flp } = useFolders();
+    const { getFolderLevelPermission: canManageContent } =
+        useGetFolderLevelPermission("canManageContent");
+    const { getFolderLevelPermission: canManageStructure } =
+        useGetFolderLevelPermission("canManageStructure");
 
     const canCreateFolder = useMemo(() => {
-        return flp.canManageStructure(folderId);
-    }, [flp, folderId]);
+        return canManageStructure(folderId);
+    }, [canManageStructure, folderId]);
 
     const canCreateContent = useMemo(() => {
-        return canCreate && flp.canManageContent(folderId);
-    }, [flp, folderId]);
+        return canCreate && canManageContent(folderId);
+    }, [canManageContent, folderId]);
 
     const createEntry = useCallback(() => {
         const folder = folderId ? `&folderId=${encodeURIComponent(folderId)}` : "";

packages/app-page-builder/src/admin/components/BulkActions/SecureActionDelete.tsx

@@ -1,24 +1,23 @@
 import React, { useMemo } from "react";
-import { useFolders } from "@webiny/app-aco";
+import { useGetFolderLevelPermission } from "@webiny/app-aco";
 import { observer } from "mobx-react-lite";
 import { PageListConfig } from "~/admin/config/pages";
 import { usePagesPermissions } from "~/hooks/permissions";
 import { ActionDelete as ActionDeleteBase } from "~/admin/components/BulkActions";
 
 export const SecureActionDelete = observer(() => {
     const { canDelete } = usePagesPermissions();
-    const { folderLevelPermissions: flp } = useFolders();
+    const { getFolderLevelPermission: canManageContent } =
+        useGetFolderLevelPermission("canManageContent");
 
     const { useWorker } = PageListConfig.Browser.BulkAction;
     const worker = useWorker();
 
     const canDeleteAll = useMemo(() => {
         return worker.items.every(item => {
-            return (
-                canDelete(item.data.createdBy.id) && flp.canManageContent(item.location?.folderId)
-            );
+            return canDelete(item.data.createdBy.id) && canManageContent(item.location?.folderId);
         });
-    }, [worker.items]);
+    }, [worker.items, canManageContent]);
 
     if (!canDeleteAll) {
         console.log("You don't have permissions to delete pages.");

packages/app-page-builder/src/admin/components/BulkActions/SecureActionDuplicate.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { useFolders } from "@webiny/app-aco";
+import { useGetFolderLevelPermission } from "@webiny/app-aco";
 import { observer } from "mobx-react-lite";
 import { PageListConfig } from "~/admin/config/pages";
 import { usePagesPermissions } from "~/hooks/permissions";
@@ -8,7 +8,8 @@ import { ActionDuplicate } from "~/admin/components/BulkActions/ActionDuplicate"
 export const SecureActionDuplicate = ActionDuplicate.createDecorator(Original => {
     return observer(() => {
         const { canWrite: pagesCanWrite } = usePagesPermissions();
-        const { folderLevelPermissions: flp } = useFolders();
+        const { getFolderLevelPermission: canManageContent } =
+            useGetFolderLevelPermission("canManageContent");
 
         const { useWorker } = PageListConfig.Browser.BulkAction;
         const worker = useWorker();
@@ -17,10 +18,10 @@ export const SecureActionDuplicate = ActionDuplicate.createDecorator(Original =>
             return worker.items.every(item => {
                 return (
                     pagesCanWrite(item.data.createdBy.id) &&
-                    flp.canManageContent(item.location?.folderId)
+                    canManageContent(item.location?.folderId)
                 );
             });
-        }, [worker.items]);
+        }, [worker.items, canManageContent]);
 
         if (!canDuplicateAll) {
             console.log("You don't have permissions to duplicate pages.");

packages/app-page-builder/src/admin/components/BulkActions/SecureActionMove.tsx

@@ -1,19 +1,20 @@
 import React, { useMemo } from "react";
-import { useFolders } from "@webiny/app-aco";
+import { useGetFolderLevelPermission } from "@webiny/app-aco";
 import { observer } from "mobx-react-lite";
 import { PageListConfig } from "~/admin/config/pages";
 import { ActionMove as ActionMoveBase } from "~/admin/components/BulkActions";
 
 export const SecureActionMove = observer(() => {
     const { useWorker } = PageListConfig.Browser.BulkAction;
     const worker = useWorker();
-    const { folderLevelPermissions: flp } = useFolders();
+    const { getFolderLevelPermission: canManageContent } =
+        useGetFolderLevelPermission("canManageContent");
 
     const canMoveAll = useMemo(() => {
         return worker.items.every(item => {
-            return flp.canManageContent(item.location?.folderId);
+            return canManageContent(item.location?.folderId);
         });
-    }, [worker.items]);
+    }, [worker.items, canManageContent]);
 
     if (!canMoveAll) {
         return null;