@refinedev/core 4.47.2 → 4.49.0

package/src/hooks/show/useShow.ts

@@ -1,77 +1,81 @@
 import React, { useState } from "react";
+
 import { QueryObserverResult, UseQueryOptions } from "@tanstack/react-query";
 import warnOnce from "warn-once";
 
+import { pickNotDeprecated } from "@definitions/helpers";
 import { useMeta, useOne } from "@hooks";
 
 import {
-    BaseRecord,
-    GetOneResponse,
-    SuccessErrorNotification,
-    MetaQuery,
-    LiveModeProps,
-    BaseKey,
-    HttpError,
-    Prettify,
-} from "../../interfaces";
+  BaseKey,
+  BaseRecord,
+  GetOneResponse,
+  HttpError,
+  MetaQuery,
+  Prettify,
+} from "../../contexts/data/types";
+import { LiveModeProps } from "../../contexts/live/types";
+import { SuccessErrorNotification } from "../../contexts/notification/types";
 import { useResource } from "../resource/useResource";
-import { pickNotDeprecated } from "@definitions/helpers";
 import {
-    useLoadingOvertime,
-    UseLoadingOvertimeOptionsProps,
-    UseLoadingOvertimeReturnType,
+  UseLoadingOvertimeOptionsProps,
+  UseLoadingOvertimeReturnType,
+  useLoadingOvertime,
 } from "../useLoadingOvertime";
 
-export type useShowReturnType<TData extends BaseRecord = BaseRecord, TError extends HttpError = HttpError> = {
-    queryResult: QueryObserverResult<GetOneResponse<TData>, TError>;
-    showId?: BaseKey;
-    setShowId: React.Dispatch<React.SetStateAction<BaseKey | undefined>>;
+export type useShowReturnType<
+  TData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+> = {
+  queryResult: QueryObserverResult<GetOneResponse<TData>, TError>;
+  showId?: BaseKey;
+  setShowId: React.Dispatch<React.SetStateAction<BaseKey | undefined>>;
 } & UseLoadingOvertimeReturnType;
 
 export type useShowProps<
-    TQueryFnData extends BaseRecord = BaseRecord,
-    TError extends HttpError = HttpError,
-    TData extends BaseRecord = TQueryFnData,
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+  TData extends BaseRecord = TQueryFnData,
 > = {
-    /**
-     * Resource name for API data interactions
-     * @default Reads `:resource` from the URL
-     */
-    resource?: string;
-    /**
-     * Data item ID for API data interactions
-     * @default Reads `:id` from the URL
-     */
-    id?: BaseKey;
-    /**
-     * react-query's [useQuery](https://tanstack.com/query/v4/docs/reference/useQuery) options
-     */
-    queryOptions?: UseQueryOptions<
-        GetOneResponse<TQueryFnData>,
-        TError,
-        GetOneResponse<TData>
-    >;
-    /**
-     * Additional meta data to pass to the data provider's `getOne`
-     */
-    meta?: MetaQuery;
-    /**
-     * Additional meta data to pass to the data provider's `getOne`
-     * @deprecated `metaData` is deprecated with refine@4, refine will pass `meta` instead, however, we still support `metaData` for backward compatibility.
-     */
-    metaData?: MetaQuery;
-    /**
-     * Target data provider name for API call to be made
-     * @default `"default"`
-     */
-    dataProviderName?: string;
+  /**
+   * Resource name for API data interactions
+   * @default Reads `:resource` from the URL
+   */
+  resource?: string;
+  /**
+   * Data item ID for API data interactions
+   * @default Reads `:id` from the URL
+   */
+  id?: BaseKey;
+  /**
+   * react-query's [useQuery](https://tanstack.com/query/v4/docs/reference/useQuery) options
+   */
+  queryOptions?: UseQueryOptions<
+    GetOneResponse<TQueryFnData>,
+    TError,
+    GetOneResponse<TData>
+  >;
+  /**
+   * Additional meta data to pass to the data provider's `getOne`
+   */
+  meta?: MetaQuery;
+  /**
+   * Additional meta data to pass to the data provider's `getOne`
+   * @deprecated `metaData` is deprecated with refine@4, refine will pass `meta` instead, however, we still support `metaData` for backward compatibility.
+   */
+  metaData?: MetaQuery;
+  /**
+   * Target data provider name for API call to be made
+   * @default `"default"`
+   */
+  dataProviderName?: string;
 } & LiveModeProps &
-    SuccessErrorNotification<
-        GetOneResponse<TData>,
-        TError,
-        Prettify<{ id?: BaseKey } & MetaQuery>
-    > &
-    UseLoadingOvertimeOptionsProps;
+  SuccessErrorNotification<
+    GetOneResponse<TData>,
+    TError,
+    Prettify<{ id?: BaseKey } & MetaQuery>
+  > &
+  UseLoadingOvertimeOptionsProps;
 
 /**
  * `useShow` hook allows you to fetch the desired record.
@@ -87,89 +91,86 @@ export type useShowProps<
  */
 
 export const useShow = <
-    TQueryFnData extends BaseRecord = BaseRecord,
-    TError extends HttpError = HttpError,
-    TData extends BaseRecord = TQueryFnData,
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+  TData extends BaseRecord = TQueryFnData,
 >({
-    resource: resourceFromProp,
-    id,
+  resource: resourceFromProp,
+  id,
+  successNotification,
+  errorNotification,
+  meta,
+  metaData,
+  liveMode,
+  onLiveEvent,
+  dataProviderName,
+  queryOptions,
+  overtimeOptions,
+}: useShowProps<TQueryFnData, TError, TData> = {}): useShowReturnType<
+  TData,
+  TError
+> => {
+  const {
+    resource,
+    id: idFromRoute,
+    identifier,
+  } = useResource(resourceFromProp);
+  const { identifier: inferredIdentifier } = useResource();
+  const getMeta = useMeta();
+
+  const getDefaultId = () => {
+    const idFromPropsOrRoute = id ?? idFromRoute;
+
+    if (resourceFromProp && resourceFromProp !== inferredIdentifier) {
+      return id;
+    }
+
+    return idFromPropsOrRoute;
+  };
+  const defaultId = getDefaultId();
+
+  const [showId, setShowId] = useState<BaseKey | undefined>(defaultId);
+
+  React.useEffect(() => {
+    setShowId(defaultId);
+  }, [defaultId]);
+
+  const combinedMeta = getMeta({
+    resource,
+    meta: pickNotDeprecated(meta, metaData),
+  });
+
+  warnOnce(
+    Boolean(resourceFromProp) && !id,
+    `[useShow]: resource: "${identifier}", id: ${id} \n\nIf 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\nSee https://refine.dev/docs/api-reference/core/hooks/show/useShow/#resource`,
+  );
+
+  const queryResult = useOne<TQueryFnData, TError, TData>({
+    resource: identifier,
+    id: showId ?? "",
+    queryOptions: {
+      enabled: showId !== undefined,
+      ...queryOptions,
+    },
     successNotification,
     errorNotification,
-    meta,
-    metaData,
+    meta: combinedMeta,
+    metaData: combinedMeta,
     liveMode,
     onLiveEvent,
     dataProviderName,
-    queryOptions,
-    overtimeOptions,
-}: useShowProps<
-    TQueryFnData,
-    TError,
-    TData
-> = {}): useShowReturnType<TData, TError> => {
-    const {
-        resource,
-        id: idFromRoute,
-        identifier,
-    } = useResource(resourceFromProp);
-    const { identifier: inferredIdentifier } = useResource();
-    const getMeta = useMeta();
-
-    const getDefaultId = () => {
-        const idFromPropsOrRoute = id ?? idFromRoute;
-
-        if (resourceFromProp && resourceFromProp !== inferredIdentifier) {
-            return id;
-        }
-
-        return idFromPropsOrRoute;
-    };
-    const defaultId = getDefaultId();
-
-    const [showId, setShowId] = useState<BaseKey | undefined>(defaultId);
-
-    React.useEffect(() => {
-        setShowId(defaultId);
-    }, [defaultId]);
-
-    const combinedMeta = getMeta({
-        resource,
-        meta: pickNotDeprecated(meta, metaData),
-    });
-
-    warnOnce(
-        Boolean(resourceFromProp) && !Boolean(id),
-        `[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: identifier,
-        id: showId ?? "",
-        queryOptions: {
-            enabled: showId !== undefined,
-            ...queryOptions,
-        },
-        successNotification,
-        errorNotification,
-        meta: combinedMeta,
-        metaData: combinedMeta,
-        liveMode,
-        onLiveEvent,
-        dataProviderName,
-    });
-
-    const { elapsedTime } = useLoadingOvertime({
-        isLoading: queryResult.isFetching,
-        interval: overtimeOptions?.interval,
-        onInterval: overtimeOptions?.onInterval,
-    });
-
-    return {
-        queryResult,
-        showId,
-        setShowId,
-        overtime: { elapsedTime },
-    };
+  });
+
+  const { elapsedTime } = useLoadingOvertime({
+    isLoading: queryResult.isFetching,
+    interval: overtimeOptions?.interval,
+    onInterval: overtimeOptions?.onInterval,
+  });
+
+  return {
+    queryResult,
+    showId,
+    setShowId,
+    overtime: { elapsedTime },
+  };
 };

package/src/hooks/use-refine-options/index.tsx

@@ -0,0 +1,8 @@
+import { RefineContext } from "@contexts/refine";
+import React from "react";
+
+export const useRefineOptions = () => {
+  const { options } = React.useContext(RefineContext);
+
+  return options;
+};

package/src/hooks/use-resource-params/index.ts

@@ -0,0 +1,89 @@
+import React from "react";
+
+import { useId } from "./use-id";
+import { useAction } from "./use-action";
+import { useResource } from "../resource";
+import { BaseKey } from "../../contexts/data/types";
+import { IResourceItem } from "../../contexts/resource/types";
+import { Action } from "../../contexts/router/types";
+import { FormAction } from "../form/types";
+
+type Props = {
+  id?: BaseKey;
+  resource?: string;
+  action?: Action;
+};
+
+type ResourceParams = {
+  id?: BaseKey;
+  setId: React.Dispatch<React.SetStateAction<BaseKey | undefined>>;
+  resource?: IResourceItem;
+  action?: Action;
+  identifier?: string;
+  formAction: FormAction;
+};
+
+/**
+ * Interactions in Refine has 3 main parameters: resource, action and id.
+ *
+ * This hook is used to manage these parameters based on below conditions and outputs the final parameters.
+ *
+ * `resource`: The resource to be used. (either the identifier or the name of the resource)
+ * - If a `resource` is provided, it will be used (even if it's not defined in the <Refine/> component)
+ * - If a `resource` is not provided, it will be inferred from the route.
+ * `id`: The `id` of the record to be used.
+ * - If an `id` is provided, it will be used.
+ * - If an `id` is not provided, it will either be inferred from the route or will be `undefined`.
+ * -- If a custom resource is provided and it's different from the inferred resource, the id will be undefined.
+ * -- If a custom resource is provided and it's same as the inferred resource, the id will be inferred from the route.
+ * -- If a custom resource is not provided, the id will be inferred from the route.
+ * `action`: The action to be used.
+ * - If an `action` is provided, it will be used.
+ * - If an `action` is not provided, it will be inferred from the route.
+ * `formAction`: The action to be used in the form.
+ * - `formAction` can only be "edit", "clone" or "create".
+ * - If action is "edit" or "clone", `formAction` will be the same as action.
+ * - Same as `id`, if passed resource is different from inferred resource, `formAction` will fallback to "create" and ignore the action from the route.
+ */
+export function useResourceParams(props?: Props): ResourceParams {
+  const { select, identifier: inferredIdentifier } = useResource();
+  const resourceToCheck = props?.resource ?? inferredIdentifier;
+  const { identifier = undefined, resource = undefined } = resourceToCheck
+    ? select(resourceToCheck, true)
+    : {};
+
+  const isSameResource = inferredIdentifier === identifier;
+  const inferredId = useId();
+  const action = useAction(props?.action);
+
+  const defaultId = React.useMemo(() => {
+    if (!isSameResource) return props?.id;
+
+    return props?.id ?? inferredId;
+  }, [isSameResource, props?.id, inferredId]);
+
+  const [id, setId] = React.useState<BaseKey | undefined>(defaultId);
+
+  React.useEffect(() => setId(defaultId), [defaultId]);
+
+  const formAction = React.useMemo(() => {
+    if (!isSameResource && !props?.action) {
+      return "create";
+    }
+
+    if (action === "edit" || action === "clone") {
+      return action;
+    }
+
+    return "create";
+  }, [action, isSameResource, props?.action]);
+
+  return {
+    id,
+    setId,
+    resource,
+    action,
+    identifier,
+    formAction,
+  };
+}

package/src/hooks/use-resource-params/use-action/index.tsx

@@ -0,0 +1,27 @@
+import { useParsed } from "../../router/use-parsed";
+import { useRouterContext } from "../../legacy-router/useRouterContext";
+import { Action } from "../../../contexts/router/types";
+import { useRouterType } from "../../../contexts/router/picker";
+import { ResourceRouterParams } from "../../../contexts/router/legacy/types";
+
+/**
+ * Returns the action from the router regardless of the router type.
+ * In legacy routers, `useParsed` won't work and in the new router bindings, `useParams` won't work.
+ * To make it easier to get the action from the router, this hook can be used.
+ *
+ * Additionally, if an action is provided as a parameter, it will be used instead of the inferred action.
+ *
+ * @internal usage only
+ */
+export const useAction = (action?: Action) => {
+  const routerType = useRouterType();
+  const { useParams } = useRouterContext();
+
+  const parsed = useParsed();
+  const legacyParams = useParams<Partial<ResourceRouterParams>>();
+
+  const inferredAction =
+    routerType === "legacy" ? legacyParams.action : parsed.action;
+
+  return action ?? inferredAction;
+};

package/src/hooks/use-resource-params/use-id/index.tsx

@@ -0,0 +1,26 @@
+import { useParsed } from "../../router/use-parsed";
+import { useRouterContext } from "../../legacy-router/useRouterContext";
+import { BaseKey } from "../../../contexts/data/types";
+import { useRouterType } from "../../../contexts/router/picker";
+import { ResourceRouterParams } from "../../../contexts/router/legacy/types";
+
+/**
+ * Returns the id from the router regardless of the router type.
+ * In legacy routers, `useParsed` won't work and in the new router bindings, `useParams` won't work.
+ * To make it easier to get the id from the router, this hook can be used.
+ *
+ * Additionally, if an id is provided as a parameter, it will be used instead of the inferred id.
+ *
+ * @internal usage only
+ */
+export const useId = (id?: BaseKey) => {
+  const routerType = useRouterType();
+  const { useParams } = useRouterContext();
+
+  const parsed = useParsed();
+  const legacyParams = useParams<Partial<ResourceRouterParams>>();
+
+  const inferredId = routerType === "legacy" ? legacyParams.id : parsed.id;
+
+  return id ?? inferredId;
+};

package/src/hooks/useKeys/index.tsx

@@ -2,12 +2,12 @@ import { useRefineContext } from "..";
 import { keys } from "@definitions/index";
 
 export const useKeys = () => {
-    const {
-        options: { useNewQueryKeys },
-    } = useRefineContext();
+  const {
+    options: { useNewQueryKeys },
+  } = useRefineContext();
 
-    return {
-        keys,
-        preferLegacyKeys: !useNewQueryKeys,
-    };
+  return {
+    keys,
+    preferLegacyKeys: !useNewQueryKeys,
+  };
 };

package/src/hooks/useLoadingOvertime/index.ts

@@ -2,51 +2,51 @@ import { useEffect, useState } from "react";
 import { useRefineContext } from "..";
 
 export type UseLoadingOvertimeRefineContext = Omit<
-    UseLoadingOvertimeCoreProps,
-    "isLoading" | "interval"
+  UseLoadingOvertimeCoreProps,
+  "isLoading" | "interval"
 > &
-    Required<Pick<UseLoadingOvertimeCoreProps, "interval">>;
+  Required<Pick<UseLoadingOvertimeCoreProps, "interval">>;
 
 export type UseLoadingOvertimeOptionsProps = {
-    overtimeOptions?: UseLoadingOvertimeCoreOptions;
+  overtimeOptions?: UseLoadingOvertimeCoreOptions;
 };
 
 export type UseLoadingOvertimeReturnType = {
-    overtime: {
-        elapsedTime?: number;
-    };
+  overtime: {
+    elapsedTime?: number;
+  };
 };
 
 type UseLoadingOvertimeCoreOptions = Omit<
-    UseLoadingOvertimeCoreProps,
-    "isLoading"
+  UseLoadingOvertimeCoreProps,
+  "isLoading"
 >;
 
 type UseLoadingOvertimeCoreReturnType = {
-    elapsedTime?: number;
+  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;
+  /**
+   * 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;
 };
 
 /**
@@ -63,52 +63,50 @@ export type UseLoadingOvertimeCoreProps = {
  * });
  */
 export const useLoadingOvertime = ({
-    isLoading,
-    interval: intervalProp,
-    onInterval: onIntervalProp,
+  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,
+  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,
+  };
 };