@refinedev/core 4.22.0 → 4.24.0

package/src/hooks/form/useForm.ts

@@ -3,8 +3,6 @@ import { QueryObserverResult, UseQueryOptions } from "@tanstack/react-query";
 import warnOnce from "warn-once";
 
 import {
-    useResourceWithRoute,
-    useRouterContext,
     useWarnAboutChange,
     useCreate,
     useUpdate,
@@ -21,7 +19,6 @@ import {
     GetOneResponse,
     HttpError,
     LiveModeProps,
-    ResourceRouterParams,
     RedirectAction,
     SuccessErrorNotification,
     UpdateResponse,
@@ -29,7 +26,6 @@ import {
     BaseKey,
     IQueryKeys,
     FormAction,
-    IResourceItem,
     MetaQuery,
 } from "../../interfaces";
 import {
@@ -39,11 +35,13 @@ import {
 } from "../data/useUpdate";
 import { UseCreateProps, UseCreateReturnType } from "../data/useCreate";
 import { redirectPage } from "@definitions/helpers";
-import { useRouterType } from "@contexts/router-picker";
-import { useParsed } from "@hooks/router/use-parsed";
-import { pickResource } from "@definitions/helpers/pick-resource";
 import { useResource } from "../resource/useResource";
 import { pickNotDeprecated } from "@definitions/helpers";
+import {
+    useLoadingOvertime,
+    UseLoadingOvertimeOptionsProps,
+    UseLoadingOvertimeReturnType,
+} from "../useLoadingOvertime";
 
 export type ActionParams = {
     /**
@@ -178,7 +176,8 @@ export type UseFormProps<
     TResponseError
 > &
     ActionParams &
-    LiveModeProps;
+    LiveModeProps &
+    UseLoadingOvertimeOptionsProps;
 
 export type UseFormReturnType<
     TQueryFnData extends BaseRecord = BaseRecord,
@@ -203,7 +202,7 @@ export type UseFormReturnType<
         idFromFunction?: BaseKey | undefined,
         routeParams?: Record<string, string | number>,
     ) => void;
-};
+} & UseLoadingOvertimeReturnType;
 
 /**
  * `useForm` is used to manage forms. It uses Ant Design {@link https://ant.design/components/form/ Form} data scope management under the hood and returns the required props for managing the form actions.
@@ -248,6 +247,7 @@ export const useForm = <
     queryOptions,
     createMutationOptions,
     updateMutationOptions,
+    overtimeOptions,
 }: UseFormProps<
     TQueryFnData,
     TError,
@@ -264,37 +264,28 @@ export const useForm = <
     TResponseError
 > => {
     const { options } = useRefineContext();
-    const { resources } = useResource();
-    const routerType = useRouterType();
-    const {
-        resource: resourceFromRouter,
-        id: idFromRouter,
-        action: actionFromRouter,
-    } = useParsed();
-    const { useParams } = useRouterContext();
-    const {
-        resource: legacyResourceFromRoute,
-        action: legacyActionFromRoute,
-        id: legacyIdFromParams,
-    } = useParams<ResourceRouterParams>();
     const getMeta = useMeta();
 
-    const newResourceNameFromRouter =
-        typeof resourceFromRouter === "string"
-            ? resourceFromRouter
-            : resourceFromRouter?.name;
+    const {
+        resource,
+        id: idFromRoute,
+        action: actionFromRoute,
+        identifier,
+    } = useResource(resourceFromProps);
+    const { identifier: inferredIdentifier } = useResource();
 
     /** We only accept `id` from URL params if `resource` is not explicitly passed. */
     /** This is done to avoid sending wrong requests for custom `resource` and an async `id` */
-    const defaultId =
-        !resourceFromProps ||
-        resourceFromProps ===
-            (routerType === "legacy"
-                ? legacyResourceFromRoute
-                : newResourceNameFromRouter)
-            ? idFromProps ??
-              (routerType === "legacy" ? legacyIdFromParams : idFromRouter)
-            : idFromProps;
+    const getDefaultId = () => {
+        const idFromPropsOrRoute = idFromProps ?? idFromRoute;
+
+        if (resourceFromProps && resourceFromProps !== inferredIdentifier) {
+            return idFromProps;
+        }
+
+        return idFromPropsOrRoute;
+    };
+    const defaultId = getDefaultId();
 
     // id state is needed to determine selected record in a context for example useModal
     const [id, setId] = React.useState<BaseKey | undefined>(defaultId);
@@ -310,65 +301,13 @@ export const useForm = <
         setId(defaultId);
     }, [defaultId]);
 
-    /** `resourceName` fallback value depends on the router type */
-    const resourceName =
-        resourceFromProps ??
-        (routerType === "legacy"
-            ? legacyResourceFromRoute
-            : newResourceNameFromRouter);
-    /** `action` fallback value depends on the router type */
-    /**
-     * In earlier versions, we've trivially inferred the action type as `create` in `show` types.
-     * This is probably done to cover cases with modals and drawers.
-     *
-     * This is not right, as we should not do trivial inference of the action type.
-     * Users should explicitly pass the action type when needed.
-     */
-    const fallbackAction =
-        routerType === "legacy" ? legacyActionFromRoute : actionFromRouter;
-    const action =
-        actionFromProps ??
-        (fallbackAction === "edit" || fallbackAction === "clone"
-            ? fallbackAction
-            : "create");
-
-    const resourceWithRoute = useResourceWithRoute();
-    let resource: IResourceItem | undefined;
-
-    if (routerType === "legacy") {
-        if (resourceName) {
-            resource = resourceWithRoute(resourceName);
-        }
-    } else {
-        /** If `resource` is provided by the user, then try to pick the resource of create a dummy one */
-        if (resourceFromProps) {
-            const picked = pickResource(resourceFromProps, resources);
-            if (picked) {
-                resource = picked;
-            } else {
-                resource = {
-                    name: resourceFromProps,
-                    route: resourceFromProps,
-                };
-            }
-        } else {
-            /** If `resource` is not provided, check the resource from the router params */
-            if (typeof resourceFromRouter === "string") {
-                const picked = pickResource(resourceFromRouter, resources);
-                if (picked) {
-                    resource = picked;
-                } else {
-                    resource = {
-                        name: resourceFromRouter,
-                        route: resourceFromRouter,
-                    };
-                }
-            } else {
-                /** If `resource` is passed as an IResourceItem, use it or `resource` is undefined and cannot be inferred. */
-                resource = resourceFromRouter;
-            }
-        }
-    }
+    const getAction = () => {
+        if (actionFromProps) return actionFromProps;
+        else if (actionFromRoute === "edit" || actionFromRoute === "clone")
+            return actionFromRoute;
+        else return "create";
+    };
+    const action = getAction();
 
     const combinedMeta = getMeta({
         resource,
@@ -386,7 +325,7 @@ export const useForm = <
         (isClone || isEdit) &&
             Boolean(resourceFromProps) &&
             !Boolean(idFromProps),
-        `[useForm]: action: "${action}", resource: "${resourceName}", id: ${id} \n\n` +
+        `[useForm]: action: "${action}", resource: "${identifier}", id: ${id} \n\n` +
             `If you don't use the \`setId\` method to set the \`id\`, you should pass the \`id\` prop to \`useForm\`. Otherwise, \`useForm\` will not be able to infer the \`id\` from the current URL. \n\n` +
             `See https://refine.dev/docs/api-reference/core/hooks/useForm/#resource`,
     );
@@ -403,7 +342,7 @@ export const useForm = <
     const enableQuery = id !== undefined && (isEdit || isClone);
 
     const queryResult = useOne<TQueryFnData, TError, TData>({
-        resource: resource?.name,
+        resource: identifier,
         id: id ?? "",
         queryOptions: {
             enabled: enableQuery,
@@ -472,7 +411,7 @@ export const useForm = <
                 return mutateCreate(
                     {
                         values,
-                        resource: resource.name,
+                        resource: identifier ?? resource.name,
                         successNotification,
                         errorNotification,
                         meta: { ...combinedMeta, ...mutationMeta },
@@ -512,7 +451,7 @@ export const useForm = <
         const variables: UpdateParams<TResponse, TResponseError, TVariables> = {
             id: id ?? "",
             values,
-            resource: resource.name,
+            resource: identifier ?? resource.name,
             mutationMode,
             undoableTimeout,
             successNotification,
@@ -584,6 +523,12 @@ export const useForm = <
 
     const result = isCreate || isClone ? createResult : editResult;
 
+    const { elapsedTime } = useLoadingOvertime({
+        isLoading: result.mutationResult.isLoading || queryResult.isFetching,
+        interval: overtimeOptions?.interval,
+        onInterval: overtimeOptions?.onInterval,
+    });
+
     return {
         ...result,
         queryResult,
@@ -602,5 +547,8 @@ export const useForm = <
                 meta: pickNotDeprecated(meta, metaData),
             });
         },
+        overtime: {
+            elapsedTime,
+        },
     };
 };

package/src/hooks/import/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { parse, ParseConfig } from "papaparse";
 import chunk from "lodash/chunk";
 
-import { useCreate, useCreateMany, useResource } from "@hooks";
+import { useCreate, useCreateMany, useMeta, useResource } from "@hooks";
 import { MapDataFn, BaseRecord, HttpError, MetaQuery } from "../../interfaces";
 import {
     importCSVMapper,
@@ -151,11 +151,20 @@ export const useImport = <
     const [totalAmount, setTotalAmount] = useState<number>(0);
     const [isLoading, setIsLoading] = useState(false);
 
-    const { resource } = useResource(resourceFromProps ?? resourceName);
+    const { resource, identifier } = useResource(
+        resourceFromProps ?? resourceName,
+    );
+
+    const getMeta = useMeta();
 
     const createMany = useCreateMany<TData, TError, TVariables>();
     const create = useCreate<TData, TError, TVariables>();
 
+    const combinedMeta = getMeta({
+        resource,
+        meta: pickNotDeprecated(meta, metaData),
+    });
+
     let mutationResult:
         | UseCreateReturnType<TData, TError, TVariables>
         | UseCreateManyReturnType<TData, TError, TVariables>;
@@ -208,16 +217,13 @@ export const useImport = <
                             const valueFns = values.map((value) => {
                                 const fn = async () => {
                                     const response = await create.mutateAsync({
-                                        resource: resource?.name ?? "",
+                                        resource: identifier ?? "",
                                         values: value,
                                         successNotification: false,
                                         errorNotification: false,
                                         dataProviderName,
-                                        meta: pickNotDeprecated(meta, metaData),
-                                        metaData: pickNotDeprecated(
-                                            meta,
-                                            metaData,
-                                        ),
+                                        meta: combinedMeta,
+                                        metaData: combinedMeta,
                                     });
 
                                     return { response, value };
@@ -256,19 +262,13 @@ export const useImport = <
                                 const fn = async () => {
                                     const response =
                                         await createMany.mutateAsync({
-                                            resource: resource?.name ?? "",
+                                            resource: identifier ?? "",
                                             values: chunkedValues,
                                             successNotification: false,
                                             errorNotification: false,
                                             dataProviderName,
-                                            meta: pickNotDeprecated(
-                                                meta,
-                                                metaData,
-                                            ),
-                                            metaData: pickNotDeprecated(
-                                                meta,
-                                                metaData,
-                                            ),
+                                            meta: combinedMeta,
+                                            metaData: combinedMeta,
                                         });
 
                                     return {

package/src/hooks/index.ts

@@ -23,3 +23,4 @@ export * from "./invalidate";
 export * from "./breadcrumb";
 export * from "./menu";
 export * from "./useMeta";
+export * from "./useLoadingOvertime";

package/src/hooks/live/useResourceSubscription/index.ts

@@ -14,6 +14,7 @@ import {
 import { LiveContext } from "@contexts/live";
 import { RefineContext } from "@contexts/refine";
 import { queryKeys } from "@definitions";
+import { useResource } from "@hooks/resource";
 
 export type UseResourceSubscriptionProps = {
     channel: string;
@@ -49,7 +50,7 @@ export type PublishType = {
 };
 
 export const useResourceSubscription = ({
-    resource,
+    resource: resourceFromProp,
     params,
     channel,
     types,
@@ -58,7 +59,9 @@ export const useResourceSubscription = ({
     onLiveEvent,
 }: UseResourceSubscriptionProps): void => {
     const queryClient = useQueryClient();
-    const queryKey = queryKeys(resource);
+
+    const { resource, identifier } = useResource(resourceFromProp);
+    const queryKey = queryKeys(identifier);
 
     const liveDataContext = useContext<ILiveContext>(LiveContext);
     const {
@@ -75,7 +78,7 @@ export const useResourceSubscription = ({
             subscription = liveDataContext?.subscribe({
                 channel,
                 params: {
-                    resource,
+                    resource: resource?.name,
                     ...params,
                 },
                 types,

package/src/hooks/resource/useResource/index.ts

@@ -37,7 +37,11 @@ export type UseResourceLegacyProps = {
  */
 export type UseResourceParam = string | undefined;
 
-type UseResourceReturnType = {
+type SelectReturnType<T extends boolean> = T extends true
+    ? { resource: IResourceItem; identifier: string }
+    : { resource: IResourceItem; identifier: string } | undefined;
+
+export type UseResourceReturnType = {
     resources: IResourceItem[];
     resource?: IResourceItem;
     /**
@@ -46,10 +50,16 @@ type UseResourceReturnType = {
     resourceName?: string;
     id?: BaseKey;
     action?: Action;
+    select: <T extends boolean = true>(
+        resourceName: string,
+        force?: T,
+    ) => SelectReturnType<T>;
+    identifier?: string;
 };
 
 type UseResourceReturnTypeWithResource = UseResourceReturnType & {
     resource: IResourceItem;
+    identifier: string;
 };
 
 /**
@@ -89,6 +99,37 @@ export function useResource(
             args && typeof args !== "string" ? args.recordItemId : undefined,
     };
 
+    const select = <T extends boolean = true>(
+        resourceName: string,
+        force = true,
+    ): SelectReturnType<T> => {
+        const isLegacy = routerType === "legacy";
+        const pickedResource = pickResource(resourceName, resources, isLegacy);
+
+        if (pickedResource) {
+            return {
+                resource: pickedResource,
+                identifier: pickedResource.identifier ?? pickedResource.name,
+            } as SelectReturnType<T>;
+        }
+
+        if (force) {
+            const resource: IResourceItem = {
+                name: resourceName,
+                identifier: resourceName,
+            };
+
+            const identifier = resource.identifier ?? resource.name;
+
+            return {
+                resource,
+                identifier,
+            } as SelectReturnType<T>;
+        }
+
+        return undefined as SelectReturnType<T>;
+    };
+
     /**
      * Legacy Router - Start
      *
@@ -112,6 +153,8 @@ export function useResource(
         const legacyAction = legacyParams.action;
         const legacyResourceName =
             oldProps?.resourceName ?? legacyResource?.name;
+        const legacyIdentifier =
+            legacyResource?.identifier ?? legacyResource?.name;
 
         return {
             resources,
@@ -119,6 +162,8 @@ export function useResource(
             resourceName: legacyResourceName,
             id: legacyId,
             action: legacyAction,
+            select,
+            identifier: legacyIdentifier,
         };
     }
     /** Legacy Router - End */
@@ -147,5 +192,7 @@ export function useResource(
         resourceName: resource?.name,
         id: params.id,
         action: params.action,
+        select,
+        identifier: resource?.identifier ?? resource?.name,
     };
 }

package/src/hooks/show/useShow.ts

@@ -2,15 +2,9 @@ import React, { useState } from "react";
 import { QueryObserverResult, UseQueryOptions } from "@tanstack/react-query";
 import warnOnce from "warn-once";
 
-import {
-    useMeta,
-    useOne,
-    useResourceWithRoute,
-    useRouterContext,
-} from "@hooks";
+import { useMeta, useOne } from "@hooks";
 
 import {
-    ResourceRouterParams,
     BaseRecord,
     GetOneResponse,
     SuccessErrorNotification,
@@ -18,20 +12,21 @@ import {
     LiveModeProps,
     BaseKey,
     HttpError,
-    IResourceItem,
     Prettify,
 } from "../../interfaces";
-import { useRouterType } from "@contexts/router-picker";
-import { useParsed } from "@hooks/router/use-parsed";
-import { pickResource } from "@definitions/helpers/pick-resource";
 import { useResource } from "../resource/useResource";
 import { pickNotDeprecated } from "@definitions/helpers";
+import {
+    useLoadingOvertime,
+    UseLoadingOvertimeOptionsProps,
+    UseLoadingOvertimeReturnType,
+} from "../useLoadingOvertime";
 
 export type useShowReturnType<TData extends BaseRecord = BaseRecord> = {
     queryResult: QueryObserverResult<GetOneResponse<TData>>;
     showId?: BaseKey;
     setShowId: React.Dispatch<React.SetStateAction<BaseKey | undefined>>;
-};
+} & UseLoadingOvertimeReturnType;
 
 export type useShowProps<
     TQueryFnData extends BaseRecord = BaseRecord,
@@ -75,7 +70,8 @@ export type useShowProps<
         GetOneResponse<TData>,
         TError,
         Prettify<{ id?: BaseKey } & MetaQuery>
-    >;
+    > &
+    UseLoadingOvertimeOptionsProps;
 
 /**
  * `useShow` hook allows you to fetch the desired record.
@@ -105,33 +101,30 @@ export const useShow = <
     onLiveEvent,
     dataProviderName,
     queryOptions,
+    overtimeOptions,
 }: useShowProps<
     TQueryFnData,
     TError,
     TData
 > = {}): useShowReturnType<TData> => {
-    const routerType = useRouterType();
-    const { resources } = useResource();
-    const { useParams } = useRouterContext();
-    const { resource: resourceFromRouter, id: idFromRouter } = useParsed();
-
-    const { resource: legacyResourceFromRoute, id: legacyIdFromParams } =
-        useParams<ResourceRouterParams>();
+    const {
+        resource,
+        id: idFromRoute,
+        identifier,
+    } = useResource(resourceFromProp);
+    const { identifier: inferredIdentifier } = useResource();
     const getMeta = useMeta();
 
-    const newResourceNameFromRouter = resourceFromRouter?.name;
+    const getDefaultId = () => {
+        const idFromPropsOrRoute = id ?? idFromRoute;
+
+        if (resourceFromProp && resourceFromProp !== inferredIdentifier) {
+            return id;
+        }
 
-    /** We only accept `id` from URL params if `resource` is not explicitly passed. */
-    /** This is done to avoid sending wrong requests for custom `resource` and an async `id` */
-    const defaultId =
-        !resourceFromProp ||
-        resourceFromProp ===
-            (routerType === "legacy"
-                ? legacyResourceFromRoute
-                : newResourceNameFromRouter)
-            ? id ??
-              (routerType === "legacy" ? legacyIdFromParams : idFromRouter)
-            : id;
+        return idFromPropsOrRoute;
+    };
+    const defaultId = getDefaultId();
 
     const [showId, setShowId] = useState<BaseKey | undefined>(defaultId);
 
@@ -139,52 +132,6 @@ export const useShow = <
         setShowId(defaultId);
     }, [defaultId]);
 
-    /** `resourceName` fallback value depends on the router type */
-    const resourceName =
-        resourceFromProp ??
-        (routerType === "legacy"
-            ? legacyResourceFromRoute
-            : newResourceNameFromRouter);
-
-    let resource: IResourceItem | undefined;
-
-    const resourceWithRoute = useResourceWithRoute();
-
-    if (routerType === "legacy") {
-        if (resourceName) {
-            resource = resourceWithRoute(resourceName);
-        }
-    } else {
-        /** If `resource` is provided by the user, then try to pick the resource of create a dummy one */
-        if (resourceFromProp) {
-            const picked = pickResource(resourceFromProp, resources);
-            if (picked) {
-                resource = picked;
-            } else {
-                resource = {
-                    name: resourceFromProp,
-                    route: resourceFromProp,
-                };
-            }
-        } else {
-            /** If `resource` is not provided, check the resource from the router params */
-            if (typeof resourceFromRouter === "string") {
-                const picked = pickResource(resourceFromRouter, resources);
-                if (picked) {
-                    resource = picked;
-                } else {
-                    resource = {
-                        name: resourceFromRouter,
-                        route: resourceFromRouter,
-                    };
-                }
-            } else {
-                /** If `resource` is passed as an IResourceItem, use it or `resource` is undefined and cannot be inferred. */
-                resource = resourceFromRouter;
-            }
-        }
-    }
-
     const combinedMeta = getMeta({
         resource,
         meta: pickNotDeprecated(meta, metaData),
@@ -192,13 +139,13 @@ export const useShow = <
 
     warnOnce(
         Boolean(resourceFromProp) && !Boolean(id),
-        `[useShow]: resource: "${resourceName}", id: ${id} \n\n` +
+        `[useShow]: resource: "${identifier}", id: ${id} \n\n` +
             `If you don't use the \`setShowId\` method to set the \`showId\`, you should pass the \`id\` prop to \`useShow\`. Otherwise, \`useShow\` will not be able to infer the \`id\` from the current URL. \n\n` +
             `See https://refine.dev/docs/api-reference/core/hooks/show/useShow/#resource`,
     );
 
     const queryResult = useOne<TQueryFnData, TError, TData>({
-        resource: resource?.name,
+        resource: identifier,
         id: showId ?? "",
         queryOptions: {
             enabled: showId !== undefined,
@@ -213,9 +160,16 @@ export const useShow = <
         dataProviderName,
     });
 
+    const { elapsedTime } = useLoadingOvertime({
+        isLoading: queryResult.isFetching,
+        interval: overtimeOptions?.interval,
+        onInterval: overtimeOptions?.onInterval,
+    });
+
     return {
         queryResult,
         showId,
         setShowId,
+        overtime: { elapsedTime },
     };
 };