@refinedev/core 4.22.0 → 4.24.0

package/src/hooks/useLoadingOvertime/index.ts

@@ -0,0 +1,114 @@
+import { useEffect, useState } from "react";
+import { useRefineContext } from "..";
+
+export type UseLoadingOvertimeRefineContext = Omit<
+    UseLoadingOvertimeCoreProps,
+    "isLoading" | "interval"
+> &
+    Required<Pick<UseLoadingOvertimeCoreProps, "interval">>;
+
+export type UseLoadingOvertimeOptionsProps = {
+    overtimeOptions?: UseLoadingOvertimeCoreOptions;
+};
+
+export type UseLoadingOvertimeReturnType = {
+    overtime: {
+        elapsedTime?: number;
+    };
+};
+
+type UseLoadingOvertimeCoreOptions = Omit<
+    UseLoadingOvertimeCoreProps,
+    "isLoading"
+>;
+
+type UseLoadingOvertimeCoreReturnType = {
+    elapsedTime?: number;
+};
+
+export type UseLoadingOvertimeCoreProps = {
+    /**
+     * The loading state. If true, the elapsed time will be calculated.
+     */
+    isLoading: boolean;
+
+    /**
+     * The interval in milliseconds. If the loading time exceeds this time, the `onInterval` callback will be called.
+     * If not specified, the `interval` value from the `overtime` option of the `RefineProvider` will be used.
+     *
+     * @default: 1000 (1 second)
+     */
+    interval?: number;
+
+    /**
+     * The callback function that will be called when the loading time exceeds the specified time.
+     * If not specified, the `onInterval` value from the `overtime` option of the `RefineProvider` will be used.
+     *
+     * @param elapsedInterval The elapsed time in milliseconds.
+     */
+    onInterval?: (elapsedInterval: number) => void;
+};
+
+/**
+ * if you need to do something when the loading time exceeds the specified time, refine provides the `useLoadingOvertime` hook.
+ * It returns the elapsed time in milliseconds.
+ *
+ * @example
+ * const { elapsedTime } = useLoadingOvertime({
+ *    isLoading,
+ *    interval: 1000,
+ *    onInterval(elapsedInterval) {
+ *        console.log("loading overtime", elapsedInterval);
+ *    },
+ * });
+ */
+export const useLoadingOvertime = ({
+    isLoading,
+    interval: intervalProp,
+    onInterval: onIntervalProp,
+}: UseLoadingOvertimeCoreProps): UseLoadingOvertimeCoreReturnType => {
+    const [elapsedTime, setElapsedTime] = useState<number | undefined>(
+        undefined,
+    );
+    // get overtime options from refine context
+    const { options } = useRefineContext();
+    const { overtime } = options;
+
+    // pick props or refine context options
+    const interval = intervalProp ?? overtime.interval;
+    const onInterval = onIntervalProp ?? overtime?.onInterval;
+
+    useEffect(() => {
+        let intervalFn: ReturnType<typeof setInterval>;
+
+        if (isLoading) {
+            intervalFn = setInterval(() => {
+                // increase elapsed time
+                setElapsedTime((prevElapsedTime) => {
+                    if (prevElapsedTime === undefined) {
+                        return interval;
+                    }
+
+                    return prevElapsedTime + interval;
+                });
+            }, interval);
+        }
+
+        return () => {
+            clearInterval(intervalFn);
+            // reset elapsed time
+            setElapsedTime(undefined);
+        };
+    }, [isLoading, interval]);
+
+    useEffect(() => {
+        // call onInterval callback
+        if (onInterval && elapsedTime) {
+            onInterval(elapsedTime);
+        }
+    }, [elapsedTime]);
+
+    return {
+        elapsedTime,
+    };
+};

package/src/hooks/useSelect/index.ts

@@ -21,9 +21,13 @@ import {
     Prettify,
 } from "../../interfaces";
 import { pickNotDeprecated } from "@definitions/helpers";
-import { pickResource } from "@definitions/helpers/pick-resource";
 import { useResource } from "../resource/useResource/index";
 import { BaseListProps } from "../data/useList";
+import {
+    useLoadingOvertime,
+    UseLoadingOvertimeOptionsProps,
+    UseLoadingOvertimeReturnType,
+} from "../useLoadingOvertime";
 
 export type UseSelectProps<TQueryFnData, TError, TData> = {
     /**
@@ -132,14 +136,15 @@ export type UseSelectProps<TQueryFnData, TError, TData> = {
     TError,
     Prettify<BaseListProps>
 > &
-    LiveModeProps;
+    LiveModeProps &
+    UseLoadingOvertimeOptionsProps;
 
 export type UseSelectReturnType<TData extends BaseRecord = BaseRecord> = {
     queryResult: QueryObserverResult<GetListResponse<TData>>;
     defaultValueQueryResult: QueryObserverResult<GetManyResponse<TData>>;
     onSearch: (value: string) => void;
     options: Option[];
-};
+} & UseLoadingOvertimeReturnType;
 
 /**
  * `useSelect` hook is used to fetch data from the dataProvider and return the options for the select box.
@@ -189,20 +194,15 @@ export const useSelect = <
         meta,
         metaData,
         dataProviderName,
+        overtimeOptions,
     } = props;
 
-    const { resources } = useResource();
-    const getMeta = useMeta();
-
-    /**
-     * Since `identifier` is an optional but prioritized way to match resources, users can provide identifier instead of resource name.
-     */
-    const pickedResource = pickResource(resourceFromProps, resources);
+    const { resource, identifier } = useResource(resourceFromProps);
 
-    const resource = pickedResource?.name ?? resourceFromProps;
+    const getMeta = useMeta();
 
     const combinedMeta = getMeta({
-        resource: pickedResource,
+        resource,
         meta: pickNotDeprecated(meta, metaData),
     });
 
@@ -226,7 +226,7 @@ export const useSelect = <
         defaultValueQueryOptionsFromProps ?? (queryOptions as any);
 
     const defaultValueQueryResult = useMany<TQueryFnData, TError, TData>({
-        resource,
+        resource: identifier,
         ids: defaultValues,
         queryOptions: {
             ...defaultValueQueryOptions,
@@ -259,7 +259,7 @@ export const useSelect = <
     );
 
     const queryResult = useList<TQueryFnData, TError, TData>({
-        resource,
+        resource: identifier,
         sorters: pickNotDeprecated(sorters, sort),
         filters: filters.concat(search),
         pagination: {
@@ -305,6 +305,12 @@ export const useSelect = <
         }
     };
 
+    const { elapsedTime } = useLoadingOvertime({
+        isLoading: queryResult.isFetching || defaultValueQueryResult.isFetching,
+        interval: overtimeOptions?.interval,
+        onInterval: overtimeOptions?.onInterval,
+    });
+
     return {
         queryResult,
         defaultValueQueryResult,
@@ -313,5 +319,6 @@ export const useSelect = <
             [options, selectedOptions],
         ),
         onSearch: debounce(onSearch, debounceValue),
+        overtime: { elapsedTime },
     };
 };

package/src/hooks/useTable/index.ts

@@ -40,6 +40,11 @@ import {
 } from "../../interfaces";
 import { useGo } from "@hooks/router/use-go";
 import { BaseListProps } from "../data/useList";
+import {
+    useLoadingOvertime,
+    UseLoadingOvertimeOptionsProps,
+    UseLoadingOvertimeReturnType,
+} from "../useLoadingOvertime";
 
 type SetFilterBehavior = "merge" | "replace";
 
@@ -173,7 +178,8 @@ export type useTableProps<TQueryFnData, TError, TData> = {
     TError,
     Prettify<BaseListProps>
 > &
-    LiveModeProps;
+    LiveModeProps &
+    UseLoadingOvertimeOptionsProps;
 
 type ReactSetState<T> = React.Dispatch<React.SetStateAction<T>>;
 
@@ -211,7 +217,7 @@ export type useTableReturnType<
     pageSize: number;
     setPageSize: ReactSetState<useTableReturnType["pageSize"]>;
     pageCount: number;
-};
+} & UseLoadingOvertimeReturnType;
 
 /**
  * By using useTable, you are able to get properties that are compatible with
@@ -256,6 +262,7 @@ export function useTable<
     meta,
     metaData,
     dataProviderName,
+    overtimeOptions,
 }: useTableProps<TQueryFnData, TError, TData> = {}): useTableReturnType<
     TData,
     TError
@@ -350,21 +357,19 @@ export function useTable<
     /** New way of `replace` calls to the router is using `useGo` */
     const go = useGo();
 
-    const { resource } = useResource(resourceFromProp);
+    const { resource, identifier } = useResource(resourceFromProp);
 
     const combinedMeta = getMeta({
         resource,
         meta: preferredMeta,
     });
 
-    const resourceInUse = resource?.name;
-
     React.useEffect(() => {
         warnOnce(
-            typeof resourceInUse === "undefined",
+            typeof identifier === "undefined",
             `useTable: \`resource\` is not defined.`,
         );
-    }, [resourceInUse]);
+    }, [identifier]);
 
     const [sorters, setSorters] = useState<CrudSorting>(
         setInitialSorters(preferredPermanentSorters, defaultSorter ?? []),
@@ -509,7 +514,7 @@ export function useTable<
     }, [syncWithLocation, current, pageSize, sorters, filters]);
 
     const queryResult = useList<TQueryFnData, TError, TData>({
-        resource: resourceInUse,
+        resource: identifier,
         hasPagination,
         pagination: { current, pageSize, mode: pagination?.mode },
         filters: isServerSideFilteringEnabled
@@ -566,6 +571,12 @@ export function useTable<
         setSorters(() => unionSorters(preferredPermanentSorters, newSorter));
     };
 
+    const { elapsedTime } = useLoadingOvertime({
+        isLoading: queryResult.isFetching,
+        interval: overtimeOptions?.interval,
+        onInterval: overtimeOptions?.onInterval,
+    });
+
     return {
         tableQueryResult: queryResult,
         sorters,
@@ -582,5 +593,8 @@ export function useTable<
             ? Math.ceil((queryResult.data?.total ?? 0) / pageSize)
             : 1,
         createLinkForSyncWithLocation,
+        overtime: {
+            elapsedTime,
+        },
     };
 }