@webiny/app-aco 6.0.0-beta.0 → 6.0.0-rc.1

package/contexts/acoList.js

@@ -1,28 +1,18 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AcoListProvider = exports.AcoListContext = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _dotPropImmutable = _interopRequireDefault(require("dot-prop-immutable"));
-var _pick = _interopRequireDefault(require("lodash/pick"));
-var _appAdmin = require("@webiny/app-admin");
-var _appSecurity = require("@webiny/app-security");
-var _hooks = require("../hooks");
-var _folders = require("./folders");
-var _records = require("./records");
-var _sorting = require("../sorting");
-var _constants = require("../constants");
-var _excluded = ["children"];
-var AcoListContext = exports.AcoListContext = /*#__PURE__*/_react.default.createContext(undefined);
-var initializeAcoListState = function initializeAcoListState() {
+import React, { useCallback, useContext, useEffect, useMemo } from "react";
+import dotPropImmutable from "dot-prop-immutable";
+import pick from "lodash/pick.js";
+import { useStateIfMounted } from "@webiny/app-admin";
+import { useSecurity } from "@webiny/app-admin";
+import { useGetDescendantFolders } from "../features/folders/getDescendantFolders/index.js";
+import { useListFoldersByParentIds } from "../features/folders/listFoldersByParentIds/index.js";
+import { useLoadFolderHierarchy } from "../features/folders/loadFolderHierarchy/index.js";
+import { useAcoApp, useNavigateFolder } from "../hooks/index.js";
+import { FoldersContext } from "./folders.js";
+import { SearchRecordsContext } from "./records.js";
+import { sortTableItems, validateOrGetDefaultDbSort } from "../sorting.js";
+import { ROOT_FOLDER } from "../constants.js";
+export const AcoListContext = /*#__PURE__*/React.createContext(undefined);
+const initializeAcoListState = () => {
   return {
     after: undefined,
     filters: undefined,
@@ -32,100 +22,96 @@ var initializeAcoListState = function initializeAcoListState() {
     listSort: [],
     searchQuery: "",
     selected: [],
-    showingFilters: false
+    showingFilters: false,
+    showingSelectAll: false,
+    isSelectedAll: false
   };
 };
-var getCurrentFolderList = function getCurrentFolderList(folders, currentFolderId) {
+const getCurrentFolderList = (folders, currentFolderId) => {
   if (!folders) {
     return [];
   }
-  if (!currentFolderId || currentFolderId.toLowerCase() === _constants.ROOT_FOLDER) {
-    return folders.filter(function (folder) {
-      return !folder.parentId || folder.parentId.toLowerCase() === _constants.ROOT_FOLDER;
-    });
+  if (!currentFolderId || currentFolderId.toLowerCase() === ROOT_FOLDER) {
+    return folders.filter(folder => !folder.parentId || folder.parentId.toLowerCase() === ROOT_FOLDER);
   }
-  return folders.filter(function (folder) {
-    return folder.parentId === currentFolderId;
-  });
+  return folders.filter(folder => folder.parentId === currentFolderId);
 };
-var getCurrentRecordList = function getCurrentRecordList(records, folderIdPath, currentFolderId) {
+const getCurrentRecordList = (records, folderIdPath, currentFolderId) => {
   if (!records) {
     return [];
   }
   if (!currentFolderId) {
     return records;
   }
-  return records.filter(function (record) {
-    return _dotPropImmutable.default.get(record, folderIdPath) === currentFolderId;
-  });
+  return records.filter(record => dotPropImmutable.get(record, folderIdPath) === currentFolderId);
 };
-var AcoListProvider = exports.AcoListProvider = function AcoListProvider(_ref) {
-  var children = _ref.children,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useSecurity = (0, _appSecurity.useSecurity)(),
-    identity = _useSecurity.identity;
-  var _useNavigateFolder = (0, _hooks.useNavigateFolder)(),
-    currentFolderId = _useNavigateFolder.currentFolderId;
-  var _useAcoApp = (0, _hooks.useAcoApp)(),
-    folderIdPath = _useAcoApp.folderIdPath,
-    folderIdInPath = _useAcoApp.folderIdInPath;
-  var folderContext = (0, _react.useContext)(_folders.FoldersContext);
-  var searchContext = (0, _react.useContext)(_records.SearchRecordsContext);
+export const AcoListProvider = ({
+  children,
+  ...props
+}) => {
+  const {
+    identity
+  } = useSecurity();
+  const {
+    currentFolderId
+  } = useNavigateFolder();
+  const {
+    folderIdPath,
+    folderIdInPath
+  } = useAcoApp();
+  const {
+    folders: originalFolders,
+    loadFolderHierarchy
+  } = useLoadFolderHierarchy();
+  const {
+    getDescendantFolders
+  } = useGetDescendantFolders();
+  const {
+    listFoldersByParentIds
+  } = useListFoldersByParentIds();
+  const folderContext = useContext(FoldersContext);
+  const searchContext = useContext(SearchRecordsContext);
   if (!folderContext || !searchContext) {
     throw new Error("useAcoList must be used within a ACOProvider");
   }
-  var _useStateIfMounted = (0, _appAdmin.useStateIfMounted)([]),
-    _useStateIfMounted2 = (0, _slicedToArray2.default)(_useStateIfMounted, 2),
-    folders = _useStateIfMounted2[0],
-    setFolders = _useStateIfMounted2[1];
-  var _useStateIfMounted3 = (0, _appAdmin.useStateIfMounted)([]),
-    _useStateIfMounted4 = (0, _slicedToArray2.default)(_useStateIfMounted3, 2),
-    records = _useStateIfMounted4[0],
-    setRecords = _useStateIfMounted4[1];
-  var _useStateIfMounted5 = (0, _appAdmin.useStateIfMounted)(undefined),
-    _useStateIfMounted6 = (0, _slicedToArray2.default)(_useStateIfMounted5, 2),
-    listTitle = _useStateIfMounted6[0],
-    setListTitle = _useStateIfMounted6[1];
-  var _useStateIfMounted7 = (0, _appAdmin.useStateIfMounted)(initializeAcoListState()),
-    _useStateIfMounted8 = (0, _slicedToArray2.default)(_useStateIfMounted7, 2),
-    state = _useStateIfMounted8[0],
-    setState = _useStateIfMounted8[1];
-  var originalFolders = folderContext.folders,
-    foldersLoading = folderContext.loading,
-    listFolders = folderContext.listFolders,
-    getDescendantFolders = folderContext.getDescendantFolders;
-  var originalRecords = searchContext.records,
-    recordsLoading = searchContext.loading,
-    listRecords = searchContext.listRecords,
-    meta = searchContext.meta;
+  const [folders, setFolders] = useStateIfMounted([]);
+  const [records, setRecords] = useStateIfMounted([]);
+  const [listTitle, setListTitle] = useStateIfMounted(undefined);
+  const [state, setState] = useStateIfMounted(initializeAcoListState());
+  const {
+    records: originalRecords,
+    loading: recordsLoading,
+    listRecords,
+    meta
+  } = searchContext;
 
   /**
-   * On first mount, call `listFolders` and `setState`, which will either issue a network request, or load folders and records from cache.
+   * On first mount, call `getFolderHierarchy` and `setState`, which will either issue a network request, or load folders and records from cache.
    * We don't need to store the result of it to any local state; that is managed by the context provider.
    *
-   * IMPORTANT: we check if the folders[type] array exists: the hook can be used from multiple components and
-   * fetch the outdated list from Apollo Cache. Since the state is managed locally, we fetch the folders only
-   * at the first mount.
-   *
    * We don't call `listRecords` directly, instead we call `setState` making it the only driver to fetch records from the apis.
    */
-  (0, _react.useEffect)(function () {
-    if (!currentFolderId) {
-      return;
+  useEffect(() => {
+    // The folders collection is empty, it must be the first render, let's load the full hierarchy.
+    if (folders.length === 0) {
+      loadFolderHierarchy(currentFolderId);
+    } else {
+      // Otherwise let's load only the current folder sub-tree
+      listFoldersByParentIds([currentFolderId]);
     }
-    if (!originalFolders) {
-      listFolders();
-    }
-    setState(function (state) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+    setState(state => {
+      return {
+        ...state,
         after: undefined,
         filters: undefined,
         folderId: currentFolderId,
         isSearch: false,
         searchQuery: "",
         selected: [],
-        showingFilters: false
-      });
+        showingFilters: false,
+        showingSelectAll: false,
+        isSelectedAll: false
+      };
     });
   }, [currentFolderId]);
 
@@ -135,18 +121,16 @@ var AcoListProvider = exports.AcoListProvider = function AcoListProvider(_ref) {
    * - we set the list filtered by the current `type` and parent `folderId`, sorted according to the current `sort` value;
    * - we set the current folder name.
    */
-  (0, _react.useEffect)(function () {
-    var currentFolder = originalFolders?.find(function (folder) {
-      return folder.id === (state.folderId || _constants.ROOT_FOLDER);
-    });
+  useEffect(() => {
+    const currentFolder = originalFolders?.find(folder => folder.id === (state.folderId || ROOT_FOLDER));
     setListTitle(currentFolder?.title);
     if (state.isSearch) {
       setFolders([]);
       return;
     }
-    var subFolders = getCurrentFolderList(originalFolders, state.folderId);
-    setFolders(function () {
-      return (0, _sorting.sortTableItems)(subFolders, state.listSort);
+    const subFolders = getCurrentFolderList(originalFolders, state.folderId);
+    setFolders(() => {
+      return sortTableItems(subFolders, state.listSort);
     });
   }, [originalFolders, state.folderId, state.isSearch]);
 
@@ -155,12 +139,12 @@ var AcoListProvider = exports.AcoListProvider = function AcoListProvider(_ref) {
    * - we set all `records` in case of search query;
    * - we set the `records` list filtered by the current `folderId`.
    */
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (state.isSearch) {
       setRecords(originalRecords);
       return;
     }
-    var subRecords = getCurrentRecordList(originalRecords, folderIdPath, state.folderId);
+    const subRecords = getCurrentRecordList(originalRecords, folderIdPath, state.folderId);
     setRecords(subRecords);
   }, [originalRecords, state.folderId, state.isSearch]);
 
@@ -168,136 +152,234 @@ var AcoListProvider = exports.AcoListProvider = function AcoListProvider(_ref) {
    * Any time we receive a new `sort` value:
    * - we sort the current `folders` list according to `sorting` value;
    */
-  (0, _react.useEffect)(function () {
-    setFolders(function (prev) {
-      var titleField = props?.titleFieldId || "id";
-      return (0, _sorting.sortTableItems)(prev, state.listSort, (0, _defineProperty2.default)({}, titleField, "title"));
+  useEffect(() => {
+    setFolders(prev => {
+      const titleField = props?.titleFieldId || "id";
+      return sortTableItems(prev, state.listSort, {
+        [titleField]: "title"
+      });
     });
   }, [state.listSort]);
 
   /**
    * Utility function to list/load more records, the `meta` state is tracked internally.
    */
-  var listMoreRecords = (0, _react.useCallback)(function () {
-    var hasMoreItems = meta.hasMoreItems,
-      cursor = meta.cursor;
+  const listMoreRecords = useCallback(() => {
+    const {
+      hasMoreItems,
+      cursor
+    } = meta;
     if (hasMoreItems && cursor) {
-      setState(function (state) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-          after: cursor
-        });
-      });
+      setState(state => ({
+        ...state,
+        after: cursor
+      }));
     }
   }, [meta]);
 
+  /**
+   * Constructs a "where" condition object based on the current state and properties.
+   *
+   * This function creates a "where" object used to filter data based on the current folder ID,
+   * ownership status, and other existing filters in the state.
+   *
+   * @returns {Object} A "where" condition object containing filters for querying data.
+   */
+  const getWhere = useCallback(() => {
+    // Initialize an empty object
+    let where = {};
+    if (!state.folderId) {
+      return where;
+    }
+
+    // Check if the current folder ID is not the ROOT_FOLDER folder
+    if (state.folderId !== ROOT_FOLDER) {
+      // Get descendant folder IDs of the current folder
+      const descendantFolderIds = getDescendantFolders(state.folderId).map(folder => folder.id);
+
+      // Set the locationWhere object with descendant folder IDs
+      where = dotPropImmutable.set({}, folderIdInPath, descendantFolderIds);
+    }
+    return {
+      createdBy: props.own ? identity.id : undefined,
+      // Set 'createdBy' based on the ownership status
+      ...state.filters,
+      // Merge existing filters into the 'where' condition
+      ...where // Include where condition if applicable
+    };
+  }, [folders, state.folderId, state.filters, props.own, identity]);
+
   /**
    * Any time we receive new useful `state` params:
    * - we fetch records according to the new params
    */
-  (0, _react.useEffect)(function () {
-    var listItems = async function listItems() {
+  useEffect(() => {
+    const listItems = async () => {
       if (!state.folderId) {
         return;
       }
-      var isSearch = Boolean(state.searchQuery || state.filters && Object.values(state.filters).filter(Boolean).length);
-      var locationWhere = _dotPropImmutable.default.set({}, folderIdPath, state.folderId);
+      const isSearch = Boolean(state.searchQuery || state.filters && Object.values(state.filters).filter(Boolean).length);
+      let where = dotPropImmutable.set({}, folderIdPath, state.folderId);
+
+      // In case of a search or filters applied, let's get the where condition based on the current folder ID,
+      // ownership status, and other existing filters in the state.
       if (isSearch) {
-        if (state.folderId === _constants.ROOT_FOLDER) {
-          locationWhere = undefined;
-        } else {
-          var descendantFolderIds = getDescendantFolders(state.folderId).map(function (folder) {
-            return folder.id;
-          });
-          locationWhere = _dotPropImmutable.default.set({}, folderIdInPath, descendantFolderIds);
-        }
+        where = getWhere();
       }
-      var params = {
+      const params = {
         limit: state.limit,
-        sort: (0, _sorting.validateOrGetDefaultDbSort)(state.listSort),
+        sort: validateOrGetDefaultDbSort(state.listSort),
         search: state.searchQuery,
         after: state.after,
-        where: (0, _objectSpread2.default)((0, _objectSpread2.default)({
-          createdBy: props.own ? identity.id : undefined
-        }, locationWhere), state.filters)
+        where
       };
       await listRecords(params);
-      setState(function (state) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-          isSearch: isSearch
-        });
-      });
+      setState(state => ({
+        ...state,
+        isSearch
+      }));
     };
     listItems();
-  }, [state.folderId, state.filters, state.searchQuery, state.after, state.listSort]);
-  var context = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _pick.default)(state, ["isSearch", "selected", "showingFilters"])), {}, {
-    folders: folders,
-    records: records,
-    listTitle: listTitle,
-    isListLoading: Boolean(recordsLoading.INIT || foldersLoading.INIT || recordsLoading.LIST || foldersLoading.LIST),
+  }, [state.folderId, state.filters, state.searchQuery, state.after, state.listSort, state.limit, props.own, identity]);
+
+  /**
+   * useEffect hook to determine if the "Select All" option should be displayed based on the current state and meta properties:
+   *  - if in the root folder with no folders, checks if all records are selected.
+   *  - if in a non-root folder with multiple descendant folders, checks if all records are selected.
+   *  - if there are more items to load, checks if all records are selected.
+   */
+  useEffect(() => {
+    // Destructure relevant properties from state and meta
+    const {
+      selected,
+      folderId
+    } = state;
+    const {
+      hasMoreItems
+    } = meta;
+
+    // Retrieve all descendant folders of the current folderId
+    const folderWithChildren = folderId ? getDescendantFolders(folderId) : [];
+
+    // Compute the lengths of various arrays for later comparisons
+    const foldersLength = folders.length;
+    const recordsLength = records.length;
+    const selectedLength = selected.length;
+    const folderWithChildrenLength = folderWithChildren.length;
+
+    // Function to determine if all records are selected
+    const getAllRecordsAreSelected = () => !!recordsLength && recordsLength === selectedLength;
+
+    // Initialize a flag to determine if the "Select All" option should be shown
+    let showingSelectAll = false;
+
+    // If in the root folder and there are some folders, check if all records are selected
+    if (folderId === ROOT_FOLDER && foldersLength > 0) {
+      showingSelectAll = getAllRecordsAreSelected();
+    }
+
+    // If not in the root folder and there are multiple descendant folders, check if all records are selected
+    if (folderId !== ROOT_FOLDER && folderWithChildrenLength > 1) {
+      showingSelectAll = getAllRecordsAreSelected();
+    }
+
+    // If there are more items to load, check if all records are selected
+    if (hasMoreItems) {
+      showingSelectAll = getAllRecordsAreSelected();
+    }
+
+    // Update the component's state based on the computed showingSelectAll flag
+    setState(prevState => {
+      // Only update if there is a change in showingSelectAll or if isSelectedAll was true previously
+      if (!prevState.isSelectedAll && prevState.showingSelectAll === showingSelectAll) {
+        return prevState;
+      }
+
+      // Return the new state with updated showingSelectAll and reset isSelectedAll to false
+      return {
+        ...prevState,
+        isSelectedAll: false,
+        showingSelectAll
+      };
+    });
+  }, [records.length, folders.length, state.isSearch, meta.hasMoreItems, state.selected.length, state.folderId]);
+  const currentFolder = useMemo(() => {
+    return originalFolders?.find(folder => folder.id === currentFolderId);
+  }, [originalFolders, currentFolderId]);
+  const context = {
+    ...pick(state, ["isSearch", "searchQuery", "selected", "showingFilters", "showingSelectAll", "isSelectedAll"]),
+    folders,
+    currentFolder,
+    records,
+    listTitle,
+    isListLoading: Boolean(recordsLoading.INIT || recordsLoading.LIST),
     isListLoadingMore: Boolean(recordsLoading.LIST_MORE),
-    meta: meta,
-    setSearchQuery: function setSearchQuery(query) {
-      setState(function (state) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-          searchQuery: query,
-          after: undefined
-        });
-      });
+    meta,
+    setSearchQuery(query) {
+      setState(state => ({
+        ...state,
+        searchQuery: query,
+        after: undefined
+      }));
     },
-    setFilters: function setFilters(data) {
-      setState(function (state) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-          filters: data,
-          after: undefined
-        });
-      });
+    setFilters(data) {
+      setState(state => ({
+        ...state,
+        filters: data,
+        after: undefined
+      }));
       // Create filters object excluding entries with `undefined` values
-      var filters = Object.fromEntries(Object.entries(data).filter(function (_ref2) {
-        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-          value = _ref3[1];
-        return value !== undefined;
+      const filters = Object.fromEntries(Object.entries(data).filter(([, value]) => value !== undefined));
+      setState(state => ({
+        ...state,
+        filters: Object.keys(filters).length ? filters : undefined,
+        after: undefined
       }));
-      setState(function (state) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-          filters: Object.keys(filters).length ? filters : undefined,
-          after: undefined
-        });
-      });
     },
-    setListSort: function setListSort(sort) {
-      setState(function (state) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-          listSort: sort,
-          after: undefined
-        });
-      });
+    setListSort(sort) {
+      setState(state => ({
+        ...state,
+        listSort: sort,
+        after: undefined
+      }));
     },
-    setSelected: function setSelected(selected) {
-      setState(function (state) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-          selected: selected
-        });
-      });
+    setSelected(selected) {
+      setState(state => ({
+        ...state,
+        selected
+      }));
     },
-    hideFilters: function hideFilters() {
-      setState(function (state) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-          filters: undefined,
-          showingFilters: false,
-          after: undefined
-        });
-      });
+    hideFilters() {
+      setState(state => ({
+        ...state,
+        filters: undefined,
+        showingFilters: false,
+        after: undefined
+      }));
     },
-    showFilters: function showFilters() {
-      setState(function (state) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-          showingFilters: true
-        });
-      });
+    showFilters() {
+      setState(state => ({
+        ...state,
+        showingFilters: true
+      }));
+    },
+    selectAll() {
+      setState(state => ({
+        ...state,
+        isSelectedAll: true
+      }));
     },
-    listMoreRecords: listMoreRecords
-  });
-  return /*#__PURE__*/_react.default.createElement(AcoListContext.Provider, {
+    unselectAll() {
+      setState(state => ({
+        ...state,
+        selected: [],
+        isSelectedAll: false
+      }));
+    },
+    getWhere,
+    listMoreRecords
+  };
+  return /*#__PURE__*/React.createElement(AcoListContext.Provider, {
     value: context
   }, children);
 };