@webiny/app-aco 5.43.3 → 6.0.0-alpha.1

package/contexts/acoList.js

@@ -1,29 +1,16 @@
-"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 _features = require("../features");
-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 } from "react";
+import dotPropImmutable from "dot-prop-immutable";
+import pick from "lodash/pick";
+import { useStateIfMounted } from "@webiny/app-admin";
+import { useSecurity } from "@webiny/app-security";
+import { useAcoApp, useNavigateFolder } from "../hooks";
+import { useGetDescendantFolders, useGetFolderHierarchy, useListFoldersByParentIds } from "../features";
+import { FoldersContext } from "./folders";
+import { SearchRecordsContext } from "./records";
+import { sortTableItems, validateOrGetDefaultDbSort } from "../sorting";
+import { ROOT_FOLDER } from "../constants";
+export const AcoListContext = /*#__PURE__*/React.createContext(undefined);
+const initializeAcoListState = () => {
   return {
     after: undefined,
     filters: undefined,
@@ -38,73 +25,64 @@ var initializeAcoListState = function initializeAcoListState() {
     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 _useGetFolderHierarch = (0, _features.useGetFolderHierarchy)(),
-    originalFolders = _useGetFolderHierarch.folders,
-    getIsFolderLoading = _useGetFolderHierarch.getIsFolderLoading,
-    getFolderHierarchy = _useGetFolderHierarch.getFolderHierarchy;
-  var _useGetDescendantFold = (0, _features.useGetDescendantFolders)(),
-    getDescendantFolders = _useGetDescendantFold.getDescendantFolders;
-  var _useListFoldersByPare = (0, _features.useListFoldersByParentIds)(),
-    listFoldersByParentIds = _useListFoldersByPare.listFoldersByParentIds;
-  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,
+    getIsFolderLoading,
+    getFolderHierarchy
+  } = useGetFolderHierarchy();
+  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 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 `getFolderHierarchy` and `setState`, which will either issue a network request, or load folders and records from cache.
@@ -112,7 +90,7 @@ var AcoListProvider = exports.AcoListProvider = function AcoListProvider(_ref) {
    *
    * 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 () {
+  useEffect(() => {
     // The folders collection is empty, it must be the first render, let's load the full hierarchy.
     if (folders.length === 0) {
       getFolderHierarchy(currentFolderId);
@@ -120,8 +98,9 @@ var AcoListProvider = exports.AcoListProvider = function AcoListProvider(_ref) {
       // Otherwise let's load only the current folder sub-tree
       listFoldersByParentIds([currentFolderId]);
     }
-    setState(function (state) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+    setState(state => {
+      return {
+        ...state,
         after: undefined,
         filters: undefined,
         folderId: currentFolderId,
@@ -131,7 +110,7 @@ var AcoListProvider = exports.AcoListProvider = function AcoListProvider(_ref) {
         showingFilters: false,
         showingSelectAll: false,
         isSelectedAll: false
-      });
+      };
     });
   }, [currentFolderId]);
 
@@ -141,18 +120,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]);
 
@@ -161,12 +138,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]);
 
@@ -174,25 +151,28 @@ 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]);
 
@@ -204,58 +184,59 @@ var AcoListProvider = exports.AcoListProvider = function AcoListProvider(_ref) {
    *
    * @returns {Object} A "where" condition object containing filters for querying data.
    */
-  var getWhere = (0, _react.useCallback)(function () {
+  const getWhere = useCallback(() => {
     // Initialize an empty object
-    var where = {};
+    let where = {};
     if (!state.folderId) {
       return where;
     }
 
     // Check if the current folder ID is not the ROOT_FOLDER folder
-    if (state.folderId !== _constants.ROOT_FOLDER) {
+    if (state.folderId !== ROOT_FOLDER) {
       // Get descendant folder IDs of the current folder
-      var descendantFolderIds = getDescendantFolders(state.folderId).map(function (folder) {
-        return folder.id;
-      });
+      const descendantFolderIds = getDescendantFolders(state.folderId).map(folder => folder.id);
 
       // Set the locationWhere object with descendant folder IDs
-      where = _dotPropImmutable.default.set({}, folderIdInPath, descendantFolderIds);
+      where = dotPropImmutable.set({}, folderIdInPath, descendantFolderIds);
     }
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({
-      createdBy: props.own ? identity?.id : undefined
-    }, state.filters), where);
+    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 where = _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) {
         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: where
+        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, state.limit, props.own, identity]);
@@ -266,36 +247,38 @@ var AcoListProvider = exports.AcoListProvider = function AcoListProvider(_ref) {
    *  - 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.
    */
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     // Destructure relevant properties from state and meta
-    var selected = state.selected,
-      folderId = state.folderId;
-    var hasMoreItems = meta.hasMoreItems;
+    const {
+      selected,
+      folderId
+    } = state;
+    const {
+      hasMoreItems
+    } = meta;
 
     // Retrieve all descendant folders of the current folderId
-    var folderWithChildren = folderId ? getDescendantFolders(folderId) : [];
+    const folderWithChildren = folderId ? getDescendantFolders(folderId) : [];
 
     // Compute the lengths of various arrays for later comparisons
-    var foldersLength = folders.length;
-    var recordsLength = records.length;
-    var selectedLength = selected.length;
-    var folderWithChildrenLength = folderWithChildren.length;
+    const foldersLength = folders.length;
+    const recordsLength = records.length;
+    const selectedLength = selected.length;
+    const folderWithChildrenLength = folderWithChildren.length;
 
     // Function to determine if all records are selected
-    var getAllRecordsAreSelected = function getAllRecordsAreSelected() {
-      return !!recordsLength && recordsLength === selectedLength;
-    };
+    const getAllRecordsAreSelected = () => !!recordsLength && recordsLength === selectedLength;
 
     // Initialize a flag to determine if the "Select All" option should be shown
-    var showingSelectAll = false;
+    let showingSelectAll = false;
 
     // If in the root folder and there are some folders, check if all records are selected
-    if (folderId === _constants.ROOT_FOLDER && foldersLength > 0) {
+    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 !== _constants.ROOT_FOLDER && folderWithChildrenLength > 1) {
+    if (folderId !== ROOT_FOLDER && folderWithChildrenLength > 1) {
       showingSelectAll = getAllRecordsAreSelected();
     }
 
@@ -305,110 +288,93 @@ var AcoListProvider = exports.AcoListProvider = function AcoListProvider(_ref) {
     }
 
     // Update the component's state based on the computed showingSelectAll flag
-    setState(function (prevState) {
+    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 (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prevState), {}, {
+      return {
+        ...prevState,
         isSelectedAll: false,
-        showingSelectAll: showingSelectAll
-      });
+        showingSelectAll
+      };
     });
   }, [records.length, folders.length, state.isSearch, meta.hasMoreItems, state.selected.length, state.folderId]);
-  var currentFolder = (0, _react.useMemo)(function () {
-    return originalFolders?.find(function (folder) {
-      return folder.id === currentFolderId;
-    });
-  }, [originalFolders, currentFolderId]);
-  var context = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _pick.default)(state, ["isSearch", "searchQuery", "selected", "showingFilters", "showingSelectAll", "isSelectedAll"])), {}, {
-    folders: folders,
-    currentFolder: currentFolder,
-    records: records,
-    listTitle: listTitle,
+  const context = {
+    ...pick(state, ["isSearch", "searchQuery", "selected", "showingFilters", "showingSelectAll", "isSelectedAll"]),
+    folders,
+    records,
+    listTitle,
     isListLoading: Boolean(recordsLoading.INIT || recordsLoading.LIST || getIsFolderLoading(currentFolderId)),
     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: function selectAll() {
-      setState(function (state) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-          isSelectedAll: true
-        });
-      });
+    selectAll() {
+      setState(state => ({
+        ...state,
+        isSelectedAll: true
+      }));
     },
-    unselectAll: function unselectAll() {
-      setState(function (state) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-          selected: [],
-          isSelectedAll: false
-        });
-      });
+    unselectAll() {
+      setState(state => ({
+        ...state,
+        selected: [],
+        isSelectedAll: false
+      }));
     },
-    getWhere: getWhere,
-    listMoreRecords: listMoreRecords
-  });
-  return /*#__PURE__*/_react.default.createElement(AcoListContext.Provider, {
+    getWhere,
+    listMoreRecords
+  };
+  return /*#__PURE__*/React.createElement(AcoListContext.Provider, {
     value: context
   }, children);
 };