refactor(app-aco): introduce Folders features

packages/app-aco/package.json

@@ -21,6 +21,7 @@
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-headless-cms-common": "0.0.0",
     "@webiny/app-security": "0.0.0",
+    "@webiny/app-utils": "0.0.0",
     "@webiny/app-wcp": "0.0.0",
     "@webiny/form": "0.0.0",
     "@webiny/plugins": "0.0.0",

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>();
@@ -67,13 +69,10 @@ export const List = ({
 
             setTreeData(newTree);
 
-            await updateFolder(
-                {
-                    ...item,
-                    parentId: dropTargetId !== ROOT_FOLDER ? (dropTargetId as string) : null
-                },
-                { refetchFoldersList: true }
-            );
+            await updateFolder({
+                ...item,
+                parentId: dropTargetId !== ROOT_FOLDER ? (dropTargetId as string) : null
+            });
         } catch (error) {
             // If an error occurred, revert the tree back to its previous state
             setTreeData(oldTree);
@@ -98,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 } = useFolders();
+    const { loading, folders } = useListFolders();
+    const { getFolderLevelPermission: canManageStructure } =
+        useGetFolderLevelPermission("canManageStructure");
+
     const localFolders = useMemo(() => {
         if (!folders) {
             return [];
@@ -44,13 +47,13 @@ export const FolderTree = ({
     }, [folders]);
 
     const renderList = () => {
-        if (!folders) {
+        if (loading.INIT || loading.LIST) {
             return <Loader />;
         }
 
         let createButton = null;
         if (enableCreate) {
-            const canCreate = flp.canManageStructure(focusedFolderId!);
+            const canCreate = canManageStructure(focusedFolderId!);
 
             createButton = <CreateButton disabled={!canCreate} />;