@antscorp/antsomi-ui 1.3.5-beta.441 → 1.3.5-beta.443

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.d.ts

@@ -10,7 +10,10 @@ interface TUseDataTableListing<TTableType = any> {
     pagination: PaginationProps;
     table: TableProps<TTableType>;
     search: TSearchActionButton;
-    /** @deprecated This selectedRowKeys is deprecated. Use selectedRow.keys instead. */
+    /**
+     * This selectedRowKeys is deprecated. Use selectedRow.keys instead.
+     * @deprecated
+     */
     selectedRowKeys: React.Key[];
     selectedRow: {
         keys: React.Key[];
@@ -24,6 +27,11 @@ interface TUseDataTableListing<TTableType = any> {
         getFilterMetricList: ReturnType<typeof useGetFilterMetricList>;
         getSearchListing: ReturnType<typeof useGetSearchListing>;
     };
+    /**
+     * Function to refetch table listing
+     * @returns void
+     */
+    refetchTableListing: () => void;
     onChangeSelectedRow: (selectedRowKeys: React.Key[], selectedRows?: TTableType[]) => void;
     setDatTableListingState: React.Dispatch<React.SetStateAction<TState<TTableType>>>;
 }

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.js

@@ -27,7 +27,7 @@ import { useAppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 // Components
 import { Typography, Switch, Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 // Constants
-import { COLUMN_DOMAIN, globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { COLUMN_DOMAIN, QUERY_KEYS, globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { MODIFY_COLUMN_DISABLE_EDITABLE, MODIFY_COLUMN_DISABLE_REMOVE, SAVED_FILTER_DEFAULT, TABLE_LISTING_PREFIX, } from './constants';
 import { DEFAULT_CELL_EMPTY, DEFAULT_TOGGLE_WIDTH, SORT_MAP } from '../../constants';
 // Hooks
@@ -37,6 +37,7 @@ import { useCreateModifyColumn, useDeleteModifyColumn, useDeleteSavedFilter, use
 import { flatTree, safeParseJson } from '@antscorp/antsomi-ui/es/utils';
 import { METRIC_MAP_NUMBER_TYPE } from '../../constants/filter';
 import { mapFiltersToApiFilters, mapFiltersToRules, mapRulesToFilters } from '../../utils';
+import { useQueryClient } from '@tanstack/react-query';
 const { Text } = Typography;
 const initialState = {
     filters: [],
@@ -63,6 +64,7 @@ export function useDataTableListing(props) {
     // Props
     const { config, name = 'default', table: tableProps, search: searchProps, filter: filterProps, } = props || {};
     // Hooks
+    const queryClient = useQueryClient();
     const { appConfig } = useAppConfigContext();
     // State
     const [state, setState] = useState(initialState);
@@ -146,6 +148,7 @@ export function useDataTableListing(props) {
             request: restOfApiListingRequest,
         },
         options: {
+            queryKey: [name],
             keepPreviousData: true,
             enabled: !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.url) && !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.token) && enabledApiListing,
         },
@@ -167,7 +170,7 @@ export function useDataTableListing(props) {
     const { data: columnMetricsData } = getColumnMetrics || {};
     const { data: savedFiltersData } = getSavedFilterList || {};
     const { data: filterMetricsData } = getFilterMetricList || {};
-    const { data: tableListing, isLoading: isTableListingLoading, isRefetching: isTableListingRefetching, refetch: refetchTableListing, } = getTableListing || {};
+    const { data: tableListing, isLoading: isTableListingLoading, isRefetching: isTableListingRefetching, } = getTableListing || {};
     const { body: tableBody, header: tableHeader, total } = tableListing || {};
     const { data: searchListingData, isLoading: isSearchListingLoading, isFetching: isSearchListingFetching, } = getSearchListing || {};
     const { body: searchListingBody } = searchListingData || {};
@@ -329,11 +332,7 @@ export function useDataTableListing(props) {
         updateModifyColumn({
             data: Object.assign(Object.assign({}, mapObject), { modifyColumnId: id, isLasted: 1 }),
         });
-        // Refetch Data table listing
-        setTimeout(() => {
-            refetchTableListing();
-        }, 500);
-    }, [mapObject, refetchTableListing, updateModifyColumn]);
+    }, [mapObject, updateModifyColumn]);
     const onApplyModifyColumn = useCallback((args) => __awaiter(this, void 0, void 0, function* () {
         var _g;
         const { selectedMetrics, columnSetName, existColumnSet } = args || {};
@@ -360,10 +359,6 @@ export function useDataTableListing(props) {
             const { status } = yield updateModifyColumn({
                 data: Object.assign(Object.assign({}, mapObject), { modifyColumnId: exitModifyColumnId, columns: JSON.stringify(selectedColumnMetrics), isLasted: 1 }),
             });
-            setTimeout(() => {
-                // Refetch Data table listing
-                refetchTableListing();
-            }, 500);
             return {
                 success: !!status,
             };
@@ -372,21 +367,10 @@ export function useDataTableListing(props) {
         const { status } = yield createModifyColumn({
             data: Object.assign(Object.assign({}, mapObject), { name: columnSetName || 'Custom', columns: JSON.stringify(selectedColumnMetrics), isLasted: 1 }),
         });
-        setTimeout(() => {
-            // Refetch Data table listing
-            refetchTableListing();
-        }, 500);
         return {
             success: !!status,
         };
-    }), [
-        columnMetricsData,
-        createModifyColumn,
-        mapObject,
-        refetchTableListing,
-        modifyColumnsData,
-        updateModifyColumn,
-    ]);
+    }), [columnMetricsData, createModifyColumn, mapObject, modifyColumnsData, updateModifyColumn]);
     /* Filter */
     const handleUpdateFilter = useCallback((filter) => {
         // Set State
@@ -479,6 +463,12 @@ export function useDataTableListing(props) {
                     [],
             } })));
     }, [mainColumnKey, tableData]);
+    /** Refetch */
+    const refetchTableListing = useCallback(() => {
+        queryClient.invalidateQueries([QUERY_KEYS.GET_DATA_TABLE_LISTING, name], {
+            exact: false,
+        });
+    }, [name, queryClient]);
     return {
         /* Modify Column */
         modifyColumn: {
@@ -557,5 +547,7 @@ export function useDataTableListing(props) {
         // Handles
         onChangeSelectedRow,
         setDatTableListingState: setState,
+        // Refetch
+        refetchTableListing,
     };
 }

package/es/components/organism/LeftMenu/components/HomeMenu/useHomeMenu.js

@@ -67,12 +67,12 @@ export const useHomeMenu = (props) => {
             onClickCreateDashboard(e);
         }
         else {
+            urlParams.set('type', HOME_REPORT_ROUTES.CREATE);
             if (env !== ENV.DEV && origin !== (CDP_ROUTE === null || CDP_ROUTE === void 0 ? void 0 : CDP_ROUTE[`${env}`])) {
                 window.location.assign(`${CDP_ROUTE === null || CDP_ROUTE === void 0 ? void 0 : CDP_ROUTE[`${env}`]}${getGeneratePath(HOME_ROUTE, auth)}?${urlParams.toString()}`);
             }
             else {
                 navigate(getGeneratePath(HOME_ROUTE, auth));
-                urlParams.set('type', HOME_REPORT_ROUTES.CREATE);
                 replace({ search: urlParams.toString() });
             }
         }

package/es/queries/DataTable/index.js

@@ -1,5 +1,6 @@
 // Types
 import { useMutation, useQuery, useQueryClient, } from '@tanstack/react-query';
+import { omit } from 'lodash';
 // Services
 import { dataTableServices, } from '../../services/DataTable';
 // Constants
@@ -80,7 +81,7 @@ export const useDeleteSavedFilter = (params) => {
 /* Table Listing */
 export const useGetTableListing = (params) => {
     const { options, args } = params || {};
-    return useQuery(Object.assign({ queryKey: [GET_DATA_TABLE_LISTING, args], queryFn: ({ signal }) => dataTableServices.listing.getTableListing(Object.assign(Object.assign({}, args), { request: Object.assign(Object.assign({}, args.request), { signal }) })) }, options));
+    return useQuery(Object.assign({ queryKey: [GET_DATA_TABLE_LISTING, ...((options === null || options === void 0 ? void 0 : options.queryKey) || []), args], queryFn: ({ signal }) => dataTableServices.listing.getTableListing(Object.assign(Object.assign({}, args), { request: Object.assign(Object.assign({}, args.request), { signal }) })) }, omit(options, 'queryKey')));
 };
 export const useGetSearchListing = (params) => {
     const { args, options } = params || {};

package/es/tests/DataTableTest.js

@@ -25,7 +25,7 @@ export const DataTableTest = () => {
     // Variables
     const { tableCollapsed } = state;
     // Hooks
-    const { modifyColumn, filter, pagination, table, search, selectedRowKeys, selectedRow } = useDataTableListing({
+    const { modifyColumn, filter, pagination, table, search, selectedRowKeys, selectedRow, refetchTableListing, } = useDataTableListing({
         config: {
             // auth: {}, // Default is get from AppConfigProvider
             auth: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.441",
+  "version": "1.3.5-beta.443",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",