@refinedev/core 4.22.0 → 4.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/core",
-  "version": "4.22.0",
+  "version": "4.24.0",
   "description": "refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.",
   "private": false,
   "main": "dist/index.js",

package/src/components/canAccess/index.tsx

@@ -1,20 +1,7 @@
 import React from "react";
 
-import {
-    useCan,
-    useParsed,
-    useResource,
-    useResourceWithRoute,
-    useRouterContext,
-    useRouterType,
-} from "@hooks";
-import {
-    BaseKey,
-    IResourceItem,
-    ITreeMenu,
-    ResourceRouterParams,
-} from "../../interfaces";
-import { pickResource } from "@definitions/helpers/pick-resource";
+import { useCan, useResource } from "@hooks";
+import { BaseKey, IResourceItem, ITreeMenu } from "../../interfaces";
 
 type CanAccessBaseProps = {
     /**
@@ -54,95 +41,33 @@ export type CanAccessProps = CanAccessBaseProps | CanAccessWithoutParamsProps;
 
 export const CanAccess: React.FC<CanAccessProps> = ({
     resource: resourceFromProp,
-    action,
+    action: actionFromProp,
     params,
     fallback,
     children,
     ...rest
 }) => {
-    const routerType = useRouterType();
-    const { resources } = useResource();
-    const { useParams } = useRouterContext();
     const {
-        resource: resourceFromRouter,
-        id: idFromRouter,
-        action: actionFromRouter,
-    } = useParsed();
+        resource,
+        id: idFromRoute,
+        action: actionFromRoute,
+    } = useResource(resourceFromProp);
+    const { identifier } = useResource();
 
-    const {
-        resource: legacyResourceFromRoute,
-        id: legacyIdFromParams,
-        action: legacyActionFromParams,
-    } = useParams<ResourceRouterParams>();
-
-    const newResourceNameFromRouter = resourceFromRouter?.name;
-
-    /** 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)
-            ? params?.id ??
-              (routerType === "legacy" ? legacyIdFromParams : idFromRouter)
-            : params?.id;
-
-    /** `resourceName` fallback value depends on the router type */
-    const resourceName =
-        resourceFromProp ??
-        (routerType === "legacy"
-            ? legacyResourceFromRoute
-            : newResourceNameFromRouter);
-
-    let resource: IResourceItem | undefined;
+    const getDefaultId = () => {
+        const idFromPropsOrRoute = params?.id ?? idFromRoute;
 
-    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;
-            }
+        if (resourceFromProp && resourceFromProp !== identifier) {
+            return params?.id;
         }
-    }
+
+        return idFromPropsOrRoute;
+    };
+    const defaultId = getDefaultId();
 
     const { data } = useCan({
         resource: resourceFromProp ?? resource?.name,
-        action:
-            action ??
-            (routerType === "legacy"
-                ? legacyActionFromParams
-                : actionFromRouter) ??
-            "",
+        action: actionFromProp ?? actionFromRoute ?? "",
         params: params ?? {
             id: defaultId,
             resource: resource,

package/src/contexts/refine/IRefineContext.ts

@@ -10,6 +10,7 @@ import {
     LiveModeProps,
     RedirectAction,
 } from "../../interfaces";
+import { UseLoadingOvertimeRefineContext } from "../../hooks/useLoadingOvertime";
 
 export interface IRefineOptions {
     breadcrumb?: ReactNode;
@@ -28,6 +29,7 @@ export interface IRefineOptions {
         clientConfig?: QueryClientConfig | InstanceType<typeof QueryClient>;
         devtoolConfig?: React.ComponentProps<typeof ReactQueryDevtools> | false;
     };
+    overtime?: UseLoadingOvertimeRefineContext;
 }
 
 export interface IRefineContextOptions {
@@ -42,6 +44,7 @@ export interface IRefineContextOptions {
         afterClone: RedirectAction;
         afterEdit: RedirectAction;
     };
+    overtime: UseLoadingOvertimeRefineContext;
 }
 
 export interface IRefineContext {

package/src/contexts/refine/index.tsx

@@ -20,6 +20,9 @@ export const defaultRefineOptions: IRefineContextOptions = {
         afterClone: "list",
         afterEdit: "list",
     },
+    overtime: {
+        interval: 1000,
+    },
 };
 
 export const RefineContext = React.createContext<IRefineContext>({

package/src/definitions/helpers/generateDocumentTitle/index.ts

@@ -26,12 +26,14 @@ export function generateDefaultDocumentTitle(
         list: "",
     };
 
+    const identifier = resource?.identifier ?? resource?.name;
+
     const resourceName =
         resource?.label ??
         resource?.meta?.label ??
         capitalize(
             userFriendlyResourceName(
-                resource?.name,
+                identifier,
                 action === "list" ? "plural" : "singular",
             ),
         );
@@ -40,9 +42,9 @@ export function generateDefaultDocumentTitle(
     const suffix = translate("documentTitle.suffix", " | refine");
     let autoGeneratedTitle = defaultTitle;
 
-    if (action && resource?.name) {
+    if (action && identifier) {
         autoGeneratedTitle = translate(
-            `documentTitle.${resource.name}.${action}`,
+            `documentTitle.${identifier}.${action}`,
             { id },
             `${
                 actionPrefixMatcher[

package/src/definitions/helpers/handleRefineOptions/index.ts

@@ -74,6 +74,7 @@ export const handleRefineOptions = ({
                 options?.redirect?.afterEdit ??
                 defaultRefineOptions.redirect.afterEdit,
         },
+        overtime: options?.overtime ?? defaultRefineOptions.overtime,
     };
 
     const disableTelemetryWithDefault =

package/src/definitions/helpers/pick-resource/index.ts

@@ -32,9 +32,10 @@ export const pickResource = (
         return resource;
     }
 
-    const resource = resources.find(
-        (r) => (r.identifier ?? r.name) === identifier,
-    );
+    let resource = resources.find((r) => r.identifier === identifier);
+    if (!resource) {
+        resource = resources.find((r) => r.name === identifier);
+    }
 
     return resource;
 };

package/src/hooks/data/useCreate.ts

@@ -29,6 +29,11 @@ import {
     useOnError,
     useMeta,
 } from "@hooks";
+import {
+    useLoadingOvertime,
+    UseLoadingOvertimeOptionsProps,
+    UseLoadingOvertimeReturnType,
+} from "../useLoadingOvertime";
 
 type useCreateParams<TData, TError, TVariables> = {
     /**
@@ -83,7 +88,7 @@ export type UseCreateProps<
         >,
         "mutationFn" | "onError" | "onSuccess"
     >;
-};
+} & UseLoadingOvertimeOptionsProps;
 
 /**
  * `useCreate` is a modified version of `react-query`'s {@link https://react-query.tanstack.com/reference/useMutation `useMutation`} for create mutations.
@@ -104,18 +109,20 @@ export const useCreate = <
     TVariables = {},
 >({
     mutationOptions,
+    overtimeOptions,
 }: UseCreateProps<TData, TError, TVariables> = {}): UseCreateReturnType<
     TData,
     TError,
     TVariables
-> => {
+> &
+    UseLoadingOvertimeReturnType => {
     const authProvider = useActiveAuthProvider();
     const { mutate: checkError } = useOnError({
         v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
     });
     const dataProvider = useDataProvider();
     const invalidateStore = useInvalidate();
-    const { resources } = useResource();
+    const { resources, select } = useResource();
     const translate = useTranslate();
     const publish = usePublish();
     const { log } = useLog();
@@ -129,20 +136,23 @@ export const useCreate = <
         unknown
     >(
         ({
-            resource,
+            resource: resourceName,
             values,
             meta,
             metaData,
             dataProviderName,
         }: useCreateParams<TData, TError, TVariables>) => {
+            const { resource, identifier } = select(resourceName);
+
             const combinedMeta = getMeta({
+                resource,
                 meta: pickNotDeprecated(meta, metaData),
             });
 
             return dataProvider(
-                pickDataProvider(resource, dataProviderName, resources),
+                pickDataProvider(identifier, dataProviderName, resources),
             ).create<TData, TVariables>({
-                resource,
+                resource: resource.name,
                 variables: values,
                 meta: combinedMeta,
                 metaData: combinedMeta,
@@ -152,7 +162,7 @@ export const useCreate = <
             onSuccess: (
                 data,
                 {
-                    resource,
+                    resource: resourceName,
                     successNotification: successNotificationFromProp,
                     dataProviderName,
                     invalidates = ["list", "many"],
@@ -161,20 +171,22 @@ export const useCreate = <
                     metaData,
                 },
             ) => {
-                const resourceSingular = pluralize.singular(resource);
+                const { resource, identifier } = select(resourceName);
+
+                const resourceSingular = pluralize.singular(identifier);
 
                 const notificationConfig =
                     typeof successNotificationFromProp === "function"
-                        ? successNotificationFromProp(data, values, resource)
+                        ? successNotificationFromProp(data, values, identifier)
                         : successNotificationFromProp;
 
                 handleNotification(notificationConfig, {
-                    key: `create-${resource}-notification`,
+                    key: `create-${identifier}-notification`,
                     message: translate(
                         "notifications.createSuccess",
                         {
                             resource: translate(
-                                `${resource}.${resource}`,
+                                `${identifier}.${identifier}`,
                                 resourceSingular,
                             ),
                         },
@@ -185,9 +197,9 @@ export const useCreate = <
                 });
 
                 invalidateStore({
-                    resource,
+                    resource: identifier,
                     dataProviderName: pickDataProvider(
-                        resource,
+                        identifier,
                         dataProviderName,
                         resources,
                     ),
@@ -195,7 +207,7 @@ export const useCreate = <
                 });
 
                 publish?.({
-                    channel: `resources/${resource}`,
+                    channel: `resources/${resource.name}`,
                     type: "created",
                     payload: {
                         ids: data?.data?.id ? [data.data.id] : undefined,
@@ -203,16 +215,21 @@ export const useCreate = <
                     date: new Date(),
                 });
 
+                const combinedMeta = getMeta({
+                    resource,
+                    meta: pickNotDeprecated(meta, metaData),
+                });
+
                 const { fields, operation, variables, ...rest } =
-                    pickNotDeprecated(meta, metaData) || {};
+                    combinedMeta || {};
 
                 log?.mutate({
                     action: "create",
-                    resource,
+                    resource: resource.name,
                     data: values,
                     meta: {
                         dataProviderName: pickDataProvider(
-                            resource,
+                            identifier,
                             dataProviderName,
                             resources,
                         ),
@@ -224,27 +241,30 @@ export const useCreate = <
             onError: (
                 err: TError,
                 {
-                    resource,
+                    resource: resourceName,
                     errorNotification: errorNotificationFromProp,
                     values,
                 },
             ) => {
                 checkError(err);
-                const resourceSingular = pluralize.singular(resource);
+
+                const { identifier } = select(resourceName);
+
+                const resourceSingular = pluralize.singular(identifier);
 
                 const notificationConfig =
                     typeof errorNotificationFromProp === "function"
-                        ? errorNotificationFromProp(err, values, resource)
+                        ? errorNotificationFromProp(err, values, identifier)
                         : errorNotificationFromProp;
 
                 handleNotification(notificationConfig, {
-                    key: `create-${resource}-notification`,
+                    key: `create-${identifier}-notification`,
                     description: err.message,
                     message: translate(
                         "notifications.createError",
                         {
                             resource: translate(
-                                `${resource}.${resource}`,
+                                `${identifier}.${identifier}`,
                                 resourceSingular,
                             ),
                             statusCode: err.statusCode,
@@ -258,5 +278,11 @@ export const useCreate = <
         },
     );
 
-    return mutation;
+    const { elapsedTime } = useLoadingOvertime({
+        isLoading: mutation.isLoading,
+        interval: overtimeOptions?.interval,
+        onInterval: overtimeOptions?.onInterval,
+    });
+
+    return { ...mutation, overtime: { elapsedTime } };
 };

package/src/hooks/data/useCreateMany.ts

@@ -28,6 +28,11 @@ import {
     pickDataProvider,
     pickNotDeprecated,
 } from "@definitions";
+import {
+    useLoadingOvertime,
+    UseLoadingOvertimeOptionsProps,
+    UseLoadingOvertimeReturnType,
+} from "../useLoadingOvertime";
 
 type useCreateManyParams<TData, TError, TVariables> = {
     resource: string;
@@ -62,7 +67,7 @@ export type UseCreateManyProps<
         >,
         "mutationFn" | "onError" | "onSuccess"
     >;
-};
+} & UseLoadingOvertimeOptionsProps;
 
 /**
  * `useCreateMany` is a modified version of `react-query`'s {@link https://react-query.tanstack.com/reference/useMutation `useMutation`} for multiple create mutations.
@@ -82,13 +87,15 @@ export const useCreateMany = <
     TVariables = {},
 >({
     mutationOptions,
+    overtimeOptions,
 }: UseCreateManyProps<TData, TError, TVariables> = {}): UseCreateManyReturnType<
     TData,
     TError,
     TVariables
-> => {
+> &
+    UseLoadingOvertimeReturnType => {
     const dataProvider = useDataProvider();
-    const { resources } = useResource();
+    const { resources, select } = useResource();
     const translate = useTranslate();
     const publish = usePublish();
     const handleNotification = useHandleNotification();
@@ -102,23 +109,26 @@ export const useCreateMany = <
         useCreateManyParams<TData, TError, TVariables>
     >(
         ({
-            resource,
+            resource: resourceName,
             values,
             meta,
             metaData,
             dataProviderName,
         }: useCreateManyParams<TData, TError, TVariables>) => {
+            const { resource, identifier } = select(resourceName);
+
             const combinedMeta = getMeta({
+                resource,
                 meta: pickNotDeprecated(meta, metaData),
             });
 
             const selectedDataProvider = dataProvider(
-                pickDataProvider(resource, dataProviderName, resources),
+                pickDataProvider(identifier, dataProviderName, resources),
             );
 
             if (selectedDataProvider.createMany) {
                 return selectedDataProvider.createMany<TData, TVariables>({
-                    resource,
+                    resource: resource.name,
                     variables: values,
                     meta: combinedMeta,
                     metaData: combinedMeta,
@@ -127,7 +137,7 @@ export const useCreateMany = <
                 return handleMultiple(
                     values.map((val) =>
                         selectedDataProvider.create<TData, TVariables>({
-                            resource,
+                            resource: resource.name,
                             variables: val,
                             meta: combinedMeta,
                             metaData: combinedMeta,
@@ -140,7 +150,7 @@ export const useCreateMany = <
             onSuccess: (
                 response,
                 {
-                    resource,
+                    resource: resourceName,
                     successNotification,
                     dataProviderName,
                     invalidates = ["list", "many"],
@@ -149,21 +159,23 @@ export const useCreateMany = <
                     metaData,
                 },
             ) => {
-                const resourcePlural = pluralize.plural(resource);
+                const { resource, identifier } = select(resourceName);
+
+                const resourcePlural = pluralize.plural(identifier);
 
                 const notificationConfig =
                     typeof successNotification === "function"
-                        ? successNotification(response, values, resource)
+                        ? successNotification(response, values, identifier)
                         : successNotification;
 
                 handleNotification(notificationConfig, {
-                    key: `createMany-${resource}-notification`,
+                    key: `createMany-${identifier}-notification`,
                     message: translate(
                         "notifications.createSuccess",
                         {
                             resource: translate(
-                                `${resource}.${resource}`,
-                                resource,
+                                `${identifier}.${identifier}`,
+                                identifier,
                             ),
                         },
                         `Successfully created ${resourcePlural}`,
@@ -173,9 +185,9 @@ export const useCreateMany = <
                 });
 
                 invalidateStore({
-                    resource,
+                    resource: identifier,
                     dataProviderName: pickDataProvider(
-                        resource,
+                        identifier,
                         dataProviderName,
                         resources,
                     ),
@@ -187,7 +199,7 @@ export const useCreateMany = <
                     .map((item) => item.id!);
 
                 publish?.({
-                    channel: `resources/${resource}`,
+                    channel: `resources/${resource.name}`,
                     type: "created",
                     payload: {
                         ids,
@@ -195,16 +207,21 @@ export const useCreateMany = <
                     date: new Date(),
                 });
 
+                const combinedMeta = getMeta({
+                    resource,
+                    meta: pickNotDeprecated(meta, metaData),
+                });
+
                 const { fields, operation, variables, ...rest } =
-                    pickNotDeprecated(meta, metaData) || {};
+                    combinedMeta || {};
 
                 log?.mutate({
                     action: "createMany",
-                    resource,
+                    resource: resource.name,
                     data: values,
                     meta: {
                         dataProviderName: pickDataProvider(
-                            resource,
+                            identifier,
                             dataProviderName,
                             resources,
                         ),
@@ -213,25 +230,30 @@ export const useCreateMany = <
                     },
                 });
             },
-            onError: (err: TError, { resource, errorNotification, values }) => {
+            onError: (
+                err: TError,
+                { resource: resourceName, errorNotification, values },
+            ) => {
+                const { identifier } = select(resourceName);
+
                 const notificationConfig =
                     typeof errorNotification === "function"
-                        ? errorNotification(err, values, resource)
+                        ? errorNotification(err, values, identifier)
                         : errorNotification;
 
                 handleNotification(notificationConfig, {
-                    key: `createMany-${resource}-notification`,
+                    key: `createMany-${identifier}-notification`,
                     description: err.message,
                     message: translate(
                         "notifications.createError",
                         {
                             resource: translate(
-                                `${resource}.${resource}`,
-                                resource,
+                                `${identifier}.${identifier}`,
+                                identifier,
                             ),
                             statusCode: err.statusCode,
                         },
-                        `There was an error creating ${resource} (status code: ${err.statusCode}`,
+                        `There was an error creating ${identifier} (status code: ${err.statusCode}`,
                     ),
                     type: "error",
                 });
@@ -240,5 +262,11 @@ export const useCreateMany = <
         },
     );
 
-    return mutation;
+    const { elapsedTime } = useLoadingOvertime({
+        isLoading: mutation.isLoading,
+        interval: overtimeOptions?.interval,
+        onInterval: overtimeOptions?.onInterval,
+    });
+
+    return { ...mutation, overtime: { elapsedTime } };
 };