@webiny/app-aco 6.3.0 → 6.4.0-beta.1

package/contexts/acoList.js

@@ -1,8 +1,7 @@
-import React, { useCallback, useContext, useEffect, useMemo } from "react";
-import dotPropImmutable from "dot-prop-immutable";
+import react, { useCallback, useContext, useEffect, useMemo } from "react";
+import dot_prop_immutable from "dot-prop-immutable";
 import pick from "lodash/pick.js";
-import { useStateIfMounted } from "@webiny/app-admin";
-import { useSecurity } from "@webiny/app-admin";
+import { useSecurity, useStateIfMounted } 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";
@@ -11,394 +10,294 @@ 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,
-    folderId: undefined,
-    isSearch: false,
-    limit: 50,
-    listSort: [],
-    searchQuery: "",
-    selected: [],
-    showingFilters: false,
-    showingSelectAll: false,
-    isSelectedAll: false
-  };
-};
-const getCurrentFolderList = (folders, currentFolderId) => {
-  if (!folders) {
-    return [];
-  }
-  if (!currentFolderId || currentFolderId.toLowerCase() === ROOT_FOLDER) {
-    return folders.filter(folder => !folder.parentId || folder.parentId.toLowerCase() === ROOT_FOLDER);
-  }
-  return folders.filter(folder => folder.parentId === currentFolderId);
-};
-const getCurrentRecordList = (records, folderIdPath, currentFolderId) => {
-  if (!records) {
-    return [];
-  }
-  if (!currentFolderId) {
-    return records;
-  }
-  return records.filter(record => dotPropImmutable.get(record, folderIdPath) === currentFolderId);
-};
-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");
-  }
-  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.
-   * We don't need to store the result of it to any local state; that is managed by the context provider.
-   *
-   * We don't call `listRecords` directly, instead we call `setState` making it the only driver to fetch records from the apis.
-   */
-  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]);
-    }
-    setState(state => {
-      return {
-        ...state,
-        after: undefined,
-        filters: undefined,
-        folderId: currentFolderId,
+const AcoListContext = /*#__PURE__*/ react.createContext(void 0);
+const initializeAcoListState = ()=>({
+        after: void 0,
+        filters: void 0,
+        folderId: void 0,
         isSearch: false,
+        limit: 50,
+        listSort: [],
         searchQuery: "",
         selected: [],
         showingFilters: false,
         showingSelectAll: false,
         isSelectedAll: false
-      };
-    });
-  }, [currentFolderId]);
-
-  /**
-   * Any time we receive a `folders` list update:
-   * - we set an empty array in case of search;
-   * - 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.
-   */
-  useEffect(() => {
-    const currentFolder = originalFolders?.find(folder => folder.id === (state.folderId || ROOT_FOLDER));
-    setListTitle(currentFolder?.title);
-    if (state.isSearch) {
-      setFolders([]);
-      return;
-    }
-    const subFolders = getCurrentFolderList(originalFolders, state.folderId);
-    setFolders(() => {
-      return sortTableItems(subFolders, state.listSort);
-    });
-  }, [originalFolders, state.folderId, state.isSearch]);
-
-  /**
-   * Any time we receive a `records` list or `folderId` update:
-   * - we set all `records` in case of search query;
-   * - we set the `records` list filtered by the current `folderId`.
-   */
-  useEffect(() => {
-    if (state.isSearch) {
-      setRecords(originalRecords);
-      return;
-    }
-    const subRecords = getCurrentRecordList(originalRecords, folderIdPath, state.folderId);
-    setRecords(subRecords);
-  }, [originalRecords, state.folderId, state.isSearch]);
-
-  /**
-   * Any time we receive a new `sort` value:
-   * - we sort the current `folders` list according to `sorting` value;
-   */
-  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.
-   */
-  const listMoreRecords = useCallback(() => {
-    const {
-      hasMoreItems,
-      cursor
-    } = meta;
-    if (hasMoreItems && 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]);
-  const buildListParams = useCallback(() => {
-    if (!state.folderId) {
-      return null;
-    }
-    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();
-    }
-    return {
-      params: {
-        limit: state.limit,
-        sort: validateOrGetDefaultDbSort(state.listSort),
-        search: state.searchQuery,
-        after: state.after,
-        where
-      },
-      isSearch
-    };
-  }, [state.folderId, state.filters, state.searchQuery, state.after, state.listSort, state.limit, getWhere, folderIdPath]);
-
-  /**
-   * Any time we receive new useful `state` params:
-   * - we fetch records according to the new params
-   */
-  useEffect(() => {
-    const listItems = async () => {
-      const result = buildListParams();
-      if (!result) {
-        return;
-      }
-      await listRecords(result.params);
-      setState(state => ({
-        ...state,
-        isSearch: result.isSearch
-      }));
+const getCurrentFolderList = (folders, currentFolderId)=>{
+    if (!folders) return [];
+    if (!currentFolderId || currentFolderId.toLowerCase() === ROOT_FOLDER) return folders.filter((folder)=>!folder.parentId || folder.parentId.toLowerCase() === ROOT_FOLDER);
+    return folders.filter((folder)=>folder.parentId === currentFolderId);
+};
+const getCurrentRecordList = (records, folderIdPath, currentFolderId)=>{
+    if (!records) return [];
+    if (!currentFolderId) return records;
+    return records.filter((record)=>dot_prop_immutable.get(record, folderIdPath) === currentFolderId);
+};
+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");
+    const [folders, setFolders] = useStateIfMounted([]);
+    const [records, setRecords] = useStateIfMounted([]);
+    const [listTitle, setListTitle] = useStateIfMounted(void 0);
+    const [state, setState] = useStateIfMounted(initializeAcoListState());
+    const { records: originalRecords, loading: recordsLoading, listRecords, meta } = searchContext;
+    useEffect(()=>{
+        if (0 === folders.length) loadFolderHierarchy(currentFolderId);
+        else listFoldersByParentIds([
+            currentFolderId
+        ]);
+        setState((state)=>({
+                ...state,
+                after: void 0,
+                filters: void 0,
+                folderId: currentFolderId,
+                isSearch: false,
+                searchQuery: "",
+                selected: [],
+                showingFilters: false,
+                showingSelectAll: false,
+                isSelectedAll: false
+            }));
+    }, [
+        currentFolderId
+    ]);
+    useEffect(()=>{
+        const currentFolder = originalFolders?.find((folder)=>folder.id === (state.folderId || ROOT_FOLDER));
+        setListTitle(currentFolder?.title);
+        if (state.isSearch) return void setFolders([]);
+        const subFolders = getCurrentFolderList(originalFolders, state.folderId);
+        setFolders(()=>sortTableItems(subFolders, state.listSort));
+    }, [
+        originalFolders,
+        state.folderId,
+        state.isSearch
+    ]);
+    useEffect(()=>{
+        if (state.isSearch) return void setRecords(originalRecords);
+        const subRecords = getCurrentRecordList(originalRecords, folderIdPath, state.folderId);
+        setRecords(subRecords);
+    }, [
+        originalRecords,
+        state.folderId,
+        state.isSearch
+    ]);
+    useEffect(()=>{
+        setFolders((prev)=>{
+            const titleField = props?.titleFieldId || "id";
+            return sortTableItems(prev, state.listSort, {
+                [titleField]: "title"
+            });
+        });
+    }, [
+        state.listSort
+    ]);
+    const listMoreRecords = useCallback(()=>{
+        const { hasMoreItems, cursor } = meta;
+        if (hasMoreItems && cursor) setState((state)=>({
+                ...state,
+                after: cursor
+            }));
+    }, [
+        meta
+    ]);
+    const getWhere = useCallback(()=>{
+        let where = {};
+        if (!state.folderId) return where;
+        if (state.folderId !== ROOT_FOLDER) {
+            const descendantFolderIds = getDescendantFolders(state.folderId).map((folder)=>folder.id);
+            where = dot_prop_immutable.set({}, folderIdInPath, descendantFolderIds);
+        }
+        return {
+            createdBy: props.own ? identity.id : void 0,
+            ...state.filters,
+            ...where
+        };
+    }, [
+        folders,
+        state.folderId,
+        state.filters,
+        props.own,
+        identity
+    ]);
+    const buildListParams = useCallback(()=>{
+        if (!state.folderId) return null;
+        const isSearch = Boolean(state.searchQuery || state.filters && Object.values(state.filters).filter(Boolean).length);
+        let where = dot_prop_immutable.set({}, folderIdPath, state.folderId);
+        if (isSearch) where = getWhere();
+        return {
+            params: {
+                limit: state.limit,
+                sort: validateOrGetDefaultDbSort(state.listSort),
+                search: state.searchQuery,
+                after: state.after,
+                where
+            },
+            isSearch
+        };
+    }, [
+        state.folderId,
+        state.filters,
+        state.searchQuery,
+        state.after,
+        state.listSort,
+        state.limit,
+        getWhere,
+        folderIdPath
+    ]);
+    useEffect(()=>{
+        const listItems = async ()=>{
+            const result = buildListParams();
+            if (!result) return;
+            await listRecords(result.params);
+            setState((state)=>({
+                    ...state,
+                    isSearch: result.isSearch
+                }));
+        };
+        listItems();
+    }, [
+        state.folderId,
+        state.filters,
+        state.searchQuery,
+        state.after,
+        state.listSort,
+        state.limit,
+        props.own,
+        identity
+    ]);
+    const refresh = useCallback(async ()=>{
+        const result = buildListParams();
+        if (!result) return;
+        await listRecords(result.params);
+    }, [
+        buildListParams,
+        listRecords
+    ]);
+    useEffect(()=>{
+        const { selected, folderId } = state;
+        const { hasMoreItems } = meta;
+        const folderWithChildren = folderId ? getDescendantFolders(folderId) : [];
+        const foldersLength = folders.length;
+        const recordsLength = records.length;
+        const selectedLength = selected.length;
+        const folderWithChildrenLength = folderWithChildren.length;
+        const getAllRecordsAreSelected = ()=>!!recordsLength && recordsLength === selectedLength;
+        let showingSelectAll = false;
+        if (folderId === ROOT_FOLDER && foldersLength > 0) showingSelectAll = getAllRecordsAreSelected();
+        if (folderId !== ROOT_FOLDER && folderWithChildrenLength > 1) showingSelectAll = getAllRecordsAreSelected();
+        if (hasMoreItems) showingSelectAll = getAllRecordsAreSelected();
+        setState((prevState)=>{
+            if (!prevState.isSelectedAll && prevState.showingSelectAll === showingSelectAll) return prevState;
+            return {
+                ...prevState,
+                isSelectedAll: false,
+                showingSelectAll
+            };
+        });
+    }, [
+        records.length,
+        folders.length,
+        state.isSearch,
+        meta.hasMoreItems,
+        state.selected.length,
+        state.folderId
+    ]);
+    const currentFolder = useMemo(()=>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,
+        setSearchQuery (query) {
+            setState((state)=>({
+                    ...state,
+                    searchQuery: query,
+                    after: void 0
+                }));
+        },
+        setFilters (data) {
+            setState((state)=>({
+                    ...state,
+                    filters: data,
+                    after: void 0
+                }));
+            const filters = Object.fromEntries(Object.entries(data).filter(([, value])=>void 0 !== value));
+            setState((state)=>({
+                    ...state,
+                    filters: Object.keys(filters).length ? filters : void 0,
+                    after: void 0
+                }));
+        },
+        setListSort (sort) {
+            setState((state)=>({
+                    ...state,
+                    listSort: sort,
+                    after: void 0
+                }));
+        },
+        setSelected (selected) {
+            setState((state)=>({
+                    ...state,
+                    selected
+                }));
+        },
+        hideFilters () {
+            setState((state)=>({
+                    ...state,
+                    filters: void 0,
+                    showingFilters: false,
+                    after: void 0
+                }));
+        },
+        showFilters () {
+            setState((state)=>({
+                    ...state,
+                    showingFilters: true
+                }));
+        },
+        selectAll () {
+            setState((state)=>({
+                    ...state,
+                    isSelectedAll: true
+                }));
+        },
+        unselectAll () {
+            setState((state)=>({
+                    ...state,
+                    selected: [],
+                    isSelectedAll: false
+                }));
+        },
+        getWhere,
+        listMoreRecords,
+        refresh
     };
-    listItems();
-  }, [state.folderId, state.filters, state.searchQuery, state.after, state.listSort, state.limit, props.own, identity]);
-  const refresh = useCallback(async () => {
-    const result = buildListParams();
-    if (!result) {
-      return;
-    }
-    await listRecords(result.params);
-  }, [buildListParams, listRecords]);
-
-  /**
-   * 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,
-    setSearchQuery(query) {
-      setState(state => ({
-        ...state,
-        searchQuery: query,
-        after: undefined
-      }));
-    },
-    setFilters(data) {
-      setState(state => ({
-        ...state,
-        filters: data,
-        after: undefined
-      }));
-      // Create filters object excluding entries with `undefined` values
-      const filters = Object.fromEntries(Object.entries(data).filter(([, value]) => value !== undefined));
-      setState(state => ({
-        ...state,
-        filters: Object.keys(filters).length ? filters : undefined,
-        after: undefined
-      }));
-    },
-    setListSort(sort) {
-      setState(state => ({
-        ...state,
-        listSort: sort,
-        after: undefined
-      }));
-    },
-    setSelected(selected) {
-      setState(state => ({
-        ...state,
-        selected
-      }));
-    },
-    hideFilters() {
-      setState(state => ({
-        ...state,
-        filters: undefined,
-        showingFilters: false,
-        after: undefined
-      }));
-    },
-    showFilters() {
-      setState(state => ({
-        ...state,
-        showingFilters: true
-      }));
-    },
-    selectAll() {
-      setState(state => ({
-        ...state,
-        isSelectedAll: true
-      }));
-    },
-    unselectAll() {
-      setState(state => ({
-        ...state,
-        selected: [],
-        isSelectedAll: false
-      }));
-    },
-    getWhere,
-    listMoreRecords,
-    refresh
-  };
-  return /*#__PURE__*/React.createElement(AcoListContext.Provider, {
-    value: context
-  }, children);
+    return /*#__PURE__*/ react.createElement(AcoListContext.Provider, {
+        value: context
+    }, children);
 };
+export { AcoListContext, AcoListProvider };
 
 //# sourceMappingURL=acoList.js.map