@refinedev/core 4.0.0

package/src/hooks/menu/useMenu.tsx

@@ -0,0 +1,153 @@
+import React from "react";
+import { useTranslate, useResource, useParsed, useRouterContext } from "..";
+import { userFriendlyResourceName, pickNotDeprecated } from "@definitions";
+import { useRouterType } from "../../contexts/router-picker";
+import { createResourceKey } from "../../definitions/helpers/menu/create-resource-key";
+import { useGetToPath } from "../router/use-get-to-path/index";
+import { getParentResource } from "@definitions/helpers/router";
+import {
+    FlatTreeItem,
+    createTree,
+} from "@definitions/helpers/menu/create-tree";
+
+type UseMenuReturnType = {
+    defaultOpenKeys: string[];
+    selectedKey: string;
+    menuItems: TreeMenuItem[];
+};
+
+export type UseMenuProps = {
+    meta?: Record<string, any>;
+    hideOnMissingParameter?: boolean;
+};
+
+export type TreeMenuItem = FlatTreeItem & {
+    route?: string;
+    icon?: React.ReactNode;
+    label?: string;
+    children: TreeMenuItem[];
+};
+
+const getCleanPath = (pathname: string) => {
+    return pathname
+        .split("?")[0]
+        .split("#")[0]
+        .replace(/(.+)(\/$)/, "$1");
+};
+
+/**
+ * `useMenu` is used to get menu items of the default sidebar.
+ * These items include a link to dashboard page (if it exists) and links to the user defined resources
+ * (passed as children to {@link https://refine.dev/docs/core/components/refine-config `<Refine>`}).
+ * This hook can also be used to build custom menus, which is also used by default sidebar to show menu items.
+ *
+ * @see {@link https://refine.dev/docs/core/hooks/ui/useMenu} for more details.
+ */
+export const useMenu = (
+    { meta, hideOnMissingParameter }: UseMenuProps = {
+        hideOnMissingParameter: true,
+    },
+): UseMenuReturnType => {
+    const translate = useTranslate();
+
+    const getToPath = useGetToPath();
+    const routerType = useRouterType();
+    const { resource, resources } = useResource();
+    const { pathname } = useParsed();
+    const { useLocation } = useRouterContext();
+    const { pathname: legacyPath } = useLocation();
+
+    const cleanPathname =
+        routerType === "legacy"
+            ? getCleanPath(legacyPath)
+            : pathname
+            ? getCleanPath(pathname)
+            : undefined;
+
+    const cleanRoute = `/${(cleanPathname ?? "").replace(/^\//, "")}`;
+
+    const selectedKey = resource
+        ? createResourceKey(resource, resources, routerType === "legacy")
+        : cleanRoute ?? "";
+
+    const defaultOpenKeys = React.useMemo(() => {
+        if (!resource) return [];
+        let parent = getParentResource(resource, resources);
+        const keys = [createResourceKey(resource, resources)];
+        while (parent) {
+            keys.push(createResourceKey(parent, resources));
+            parent = getParentResource(parent, resources);
+        }
+        return keys;
+    }, []);
+
+    const prepareItem = React.useCallback(
+        (item: FlatTreeItem): TreeMenuItem | undefined => {
+            if (item?.meta?.hide ?? item?.options?.hide) return undefined;
+            if (!item?.list && item.children.length === 0) return undefined;
+
+            const composed = item.list
+                ? getToPath({
+                      resource: item,
+                      action: "list",
+                      legacy: routerType === "legacy",
+                      meta,
+                  })
+                : undefined;
+
+            if (
+                hideOnMissingParameter &&
+                composed &&
+                composed.match(/(\/|^):(.+?)(\/|$){1}/)
+            )
+                return undefined;
+
+            return {
+                ...item,
+                route: composed,
+                icon: pickNotDeprecated(
+                    item.meta?.icon,
+                    item.options?.icon,
+                    item.icon,
+                ),
+                label:
+                    pickNotDeprecated(
+                        item?.meta?.label,
+                        item?.options?.label,
+                    ) ??
+                    translate(
+                        `${item.name}.${item.name}`,
+                        userFriendlyResourceName(item.name, "plural"),
+                    ),
+            };
+        },
+        [routerType, meta, translate, hideOnMissingParameter],
+    );
+
+    const treeItems = React.useMemo(() => {
+        const treeMenuItems = createTree(resources, routerType === "legacy");
+
+        // add paths to items and their nodes recursively
+        const prepare = (items: TreeMenuItem[]): TreeMenuItem[] => {
+            return items.flatMap((item) => {
+                const preparedNodes = prepare(item.children);
+                const newItem = prepareItem({
+                    ...item,
+                    children: preparedNodes,
+                });
+
+                if (!newItem) return [];
+
+                return [newItem];
+            });
+        };
+
+        return prepare(treeMenuItems);
+    }, [resources, routerType]);
+
+    return {
+        defaultOpenKeys,
+        selectedKey,
+        menuItems: treeItems,
+    };
+};

package/src/hooks/modal/index.ts

@@ -0,0 +1 @@
+export * from "./useModal";

package/src/hooks/modal/useModal/index.tsx

@@ -0,0 +1,29 @@
+import { useCallback, useState } from "react";
+
+export type useModalReturnType = {
+    visible: boolean;
+    show: () => void;
+    close: () => void;
+};
+
+export type useModalProps = {
+    /**
+     * Initial state of the modal
+     */
+    defaultVisible?: boolean;
+};
+
+export const useModal = ({
+    defaultVisible = false,
+}: useModalProps = {}): useModalReturnType => {
+    const [visible, setVisible] = useState(defaultVisible);
+
+    const show = useCallback(() => setVisible(true), [visible]);
+    const close = useCallback(() => setVisible(false), [visible]);
+
+    return {
+        visible,
+        show,
+        close,
+    };
+};

package/src/hooks/navigation/index.ts

@@ -0,0 +1,385 @@
+import { useRouterContext, useResource } from "@hooks";
+import { BaseKey, IResourceItem, MetaDataQuery } from "../../interfaces";
+import { useGo } from "@hooks/router/use-go";
+import { useParsed } from "@hooks/router/use-parsed";
+import { useRouterType } from "@contexts/router-picker";
+import { getActionRoutesFromResource } from "@definitions/helpers/router";
+import { pickResource } from "@definitions/helpers/pick-resource";
+import { composeRoute } from "@definitions/helpers/router/compose-route";
+import { useBack } from "@hooks/router/use-back";
+
+export type HistoryType = "push" | "replace";
+
+/**
+ * `refine` uses {@link https://reactrouter.com/web/api/Hooks `React Router`} and comes with all redirects out of the box.
+ * It allows you to manage your routing operations in refine.
+ * Using this hook, you can manage all the routing operations of your application very easily.
+ *
+ * @internal This is an internal hook of refine. Do not use it directly.
+ *
+ * @see {@link https://refine.dev/docs/core/hooks/navigation/useNavigation} for more details.
+ */
+export const useNavigation = () => {
+    const { resources } = useResource();
+    const routerType = useRouterType();
+    const { useHistory } = useRouterContext();
+    const history = useHistory();
+    const parsed = useParsed();
+    const go = useGo();
+    const back = useBack();
+
+    const handleUrl = (url: string, type: HistoryType = "push") => {
+        if (routerType === "legacy") {
+            history[type](url);
+        } else {
+            go({ to: url, type });
+        }
+    };
+
+    const createUrl = (
+        resource: string | IResourceItem,
+        meta: MetaDataQuery = {},
+    ) => {
+        if (routerType === "legacy") {
+            const resourceItem =
+                typeof resource === "string"
+                    ? pickResource(resource, resources, true) ?? {
+                          name: resource,
+                          route: resource,
+                      }
+                    : resource;
+
+            const createActionRoute = getActionRoutesFromResource(
+                resourceItem,
+                resources,
+                true,
+            ).find((r) => r.action === "create");
+
+            if (!createActionRoute) {
+                return "";
+            }
+
+            return composeRoute(createActionRoute.route, parsed, meta);
+        } else {
+            const resourceItem =
+                typeof resource === "string"
+                    ? pickResource(resource, resources) ?? { name: resource }
+                    : resource;
+
+            const createActionRoute = getActionRoutesFromResource(
+                resourceItem,
+                resources,
+            ).find((r) => r.action === "create")?.route;
+
+            if (!createActionRoute) {
+                return "";
+            }
+
+            return go({
+                to: composeRoute(createActionRoute, parsed, meta),
+                type: "path",
+            }) as string;
+        }
+    };
+
+    const editUrl = (
+        resource: string | IResourceItem,
+        id: BaseKey,
+        meta: MetaDataQuery = {},
+    ) => {
+        const encodedId = encodeURIComponent(id);
+        if (routerType === "legacy") {
+            const resourceItem =
+                typeof resource === "string"
+                    ? pickResource(resource, resources, true) ?? {
+                          name: resource,
+                          route: resource,
+                      }
+                    : resource;
+
+            const editActionRoute = getActionRoutesFromResource(
+                resourceItem,
+                resources,
+                true,
+            ).find((r) => r.action === "edit");
+
+            if (!editActionRoute) {
+                return "";
+            }
+
+            return composeRoute(editActionRoute.route, parsed, {
+                ...meta,
+                id: encodedId,
+            });
+        } else {
+            const resourceItem =
+                typeof resource === "string"
+                    ? pickResource(resource, resources) ?? { name: resource }
+                    : resource;
+
+            const editActionRoute = getActionRoutesFromResource(
+                resourceItem,
+                resources,
+            ).find((r) => r.action === "edit")?.route;
+
+            if (!editActionRoute) {
+                return "";
+            }
+
+            return go({
+                to: composeRoute(editActionRoute, parsed, {
+                    ...meta,
+                    id: encodedId,
+                }),
+                type: "path",
+            }) as string;
+        }
+    };
+
+    const cloneUrl = (
+        resource: string | IResourceItem,
+        id: BaseKey,
+        meta: MetaDataQuery = {},
+    ) => {
+        const encodedId = encodeURIComponent(id);
+
+        if (routerType === "legacy") {
+            const resourceItem =
+                typeof resource === "string"
+                    ? pickResource(resource, resources, true) ?? {
+                          name: resource,
+                          route: resource,
+                      }
+                    : resource;
+
+            const cloneActionRoute = getActionRoutesFromResource(
+                resourceItem,
+                resources,
+                true,
+            ).find((r) => r.action === "clone");
+
+            if (!cloneActionRoute) {
+                return "";
+            }
+
+            return composeRoute(cloneActionRoute.route, parsed, {
+                ...meta,
+                id: encodedId,
+            });
+        } else {
+            const resourceItem =
+                typeof resource === "string"
+                    ? pickResource(resource, resources) ?? { name: resource }
+                    : resource;
+
+            const cloneActionRoute = getActionRoutesFromResource(
+                resourceItem,
+                resources,
+            ).find((r) => r.action === "clone")?.route;
+
+            if (!cloneActionRoute) {
+                return "";
+            }
+
+            return go({
+                to: composeRoute(cloneActionRoute, parsed, {
+                    ...meta,
+                    id: encodedId,
+                }),
+                type: "path",
+            }) as string;
+        }
+    };
+
+    const showUrl = (
+        resource: string | IResourceItem,
+        id: BaseKey,
+        meta: MetaDataQuery = {},
+    ) => {
+        const encodedId = encodeURIComponent(id);
+        if (routerType === "legacy") {
+            const resourceItem =
+                typeof resource === "string"
+                    ? pickResource(resource, resources, true) ?? {
+                          name: resource,
+                          route: resource,
+                      }
+                    : resource;
+
+            const showActionRoute = getActionRoutesFromResource(
+                resourceItem,
+                resources,
+                true,
+            ).find((r) => r.action === "show");
+
+            if (!showActionRoute) {
+                return "";
+            }
+
+            return composeRoute(showActionRoute.route, parsed, {
+                ...meta,
+                id: encodedId,
+            });
+        } else {
+            const resourceItem =
+                typeof resource === "string"
+                    ? pickResource(resource, resources) ?? { name: resource }
+                    : resource;
+
+            const showActionRoute = getActionRoutesFromResource(
+                resourceItem,
+                resources,
+            ).find((r) => r.action === "show")?.route;
+
+            if (!showActionRoute) {
+                return "";
+            }
+
+            return go({
+                to: composeRoute(showActionRoute, parsed, {
+                    ...meta,
+                    id: encodedId,
+                }),
+                type: "path",
+            }) as string;
+        }
+    };
+
+    const listUrl = (
+        resource: string | IResourceItem,
+        meta: MetaDataQuery = {},
+    ) => {
+        if (routerType === "legacy") {
+            const resourceItem =
+                typeof resource === "string"
+                    ? pickResource(resource, resources, true) ?? {
+                          name: resource,
+                          route: resource,
+                      }
+                    : resource;
+
+            const listActionRoute = getActionRoutesFromResource(
+                resourceItem,
+                resources,
+                true,
+            ).find((r) => r.action === "list");
+
+            if (!listActionRoute) {
+                return "";
+            }
+
+            return composeRoute(listActionRoute.route, parsed, meta);
+        } else {
+            const resourceItem =
+                typeof resource === "string"
+                    ? pickResource(resource, resources) ?? { name: resource }
+                    : resource;
+
+            const listActionRoute = getActionRoutesFromResource(
+                resourceItem,
+                resources,
+            ).find((r) => r.action === "list")?.route;
+
+            if (!listActionRoute) {
+                return "";
+            }
+
+            return go({
+                to: composeRoute(listActionRoute, parsed, meta),
+                type: "path",
+            }) as string;
+        }
+    };
+
+    const create = (
+        resource: string | IResourceItem,
+        type: HistoryType = "push",
+        meta: MetaDataQuery = {},
+    ) => {
+        handleUrl(createUrl(resource, meta), type);
+    };
+
+    const edit = (
+        resource: string | IResourceItem,
+        id: BaseKey,
+        type: HistoryType = "push",
+        meta: MetaDataQuery = {},
+    ) => {
+        handleUrl(editUrl(resource, id, meta), type);
+    };
+
+    const clone = (
+        resource: string | IResourceItem,
+        id: BaseKey,
+        type: HistoryType = "push",
+        meta: MetaDataQuery = {},
+    ) => {
+        handleUrl(cloneUrl(resource, id, meta), type);
+    };
+
+    const show = (
+        resource: string | IResourceItem,
+        id: BaseKey,
+        type: HistoryType = "push",
+        meta: MetaDataQuery = {},
+    ) => {
+        handleUrl(showUrl(resource, id, meta), type);
+    };
+
+    const list = (
+        resource: string | IResourceItem,
+        type: HistoryType = "push",
+        meta: MetaDataQuery = {},
+    ) => {
+        handleUrl(listUrl(resource, meta), type);
+    };
+
+    /**
+     * @deprecated Please use `useGo` hook instead.
+     */
+    const push = (path: string, ...rest: unknown[]) => {
+        if (routerType === "legacy") {
+            history.push(path, ...rest);
+        } else {
+            go({ to: path, type: "push" });
+        }
+    };
+
+    /**
+     * @deprecated Please use `useGo` hook instead.
+     */
+    const replace = (path: string, ...rest: unknown[]) => {
+        if (routerType === "legacy") {
+            history.replace(path, ...rest);
+        } else {
+            go({ to: path, type: "replace" });
+        }
+    };
+
+    /**
+     * @deprecated Please use `useBack` hook instead.
+     */
+    const goBack = () => {
+        if (routerType === "legacy") {
+            history.goBack();
+        } else {
+            back();
+        }
+    };
+
+    return {
+        create,
+        createUrl,
+        edit,
+        editUrl,
+        clone,
+        cloneUrl,
+        show,
+        showUrl,
+        list,
+        listUrl,
+        push,
+        replace,
+        goBack,
+    };
+};

package/src/hooks/notification/index.ts

@@ -0,0 +1,3 @@
+export * from "./useCancelNotification";
+export * from "./useNotification";
+export * from "./useHandleNotification";

package/src/hooks/notification/useCancelNotification/index.tsx

@@ -0,0 +1,16 @@
+import { useContext } from "react";
+
+import { UndoableQueueContext } from "@contexts/undoableQueue";
+import { IUndoableQueue, IUndoableQueueContext } from "../../../interfaces";
+
+export type UseCancelNotificationType = () => {
+    notifications: IUndoableQueue[];
+    notificationDispatch: React.Dispatch<any>;
+};
+
+export const useCancelNotification: UseCancelNotificationType = () => {
+    const { notifications, notificationDispatch } =
+        useContext<IUndoableQueueContext>(UndoableQueueContext);
+
+    return { notifications, notificationDispatch };
+};

package/src/hooks/notification/useHandleNotification/index.ts

@@ -0,0 +1,26 @@
+import { useCallback } from "react";
+
+import { OpenNotificationParams } from "../../../interfaces";
+import { useNotification } from "@hooks";
+
+export const useHandleNotification = (): typeof handleNotification => {
+    const { open } = useNotification();
+
+    const handleNotification = useCallback(
+        (
+            notification: OpenNotificationParams | false | undefined,
+            fallbackNotification?: OpenNotificationParams,
+        ) => {
+            if (notification !== false) {
+                if (notification) {
+                    open?.(notification);
+                } else if (fallbackNotification) {
+                    open?.(fallbackNotification);
+                }
+            }
+        },
+        [],
+    );
+
+    return handleNotification;
+};

package/src/hooks/notification/useNotification/index.ts

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+
+import { NotificationContext } from "@contexts/notification";
+import { INotificationContext } from "../../../interfaces";
+
+export const useNotification = (): INotificationContext => {
+    const { open, close } = useContext(NotificationContext);
+
+    return { open, close };
+};

package/src/hooks/redirection/index.ts

@@ -0,0 +1,56 @@
+import { useCallback } from "react";
+
+import {
+    BaseKey,
+    IResourceItem,
+    MetaDataQuery,
+    RedirectAction,
+} from "../../interfaces";
+import { useNavigation } from "@hooks";
+
+export type UseRedirectionAfterSubmissionType = () => (options: {
+    redirect: RedirectAction;
+    resource?: IResourceItem;
+    id?: BaseKey;
+    meta?: MetaDataQuery;
+}) => void;
+
+export const useRedirectionAfterSubmission: UseRedirectionAfterSubmissionType =
+    () => {
+        const { show, edit, list, create } = useNavigation();
+
+        const handleSubmitWithRedirect = useCallback(
+            ({
+                redirect,
+                resource,
+                id,
+                meta = {},
+            }: {
+                redirect: RedirectAction;
+                resource?: IResourceItem;
+                id?: BaseKey;
+                meta?: MetaDataQuery;
+            }) => {
+                if (redirect && resource) {
+                    if (!!resource.show && redirect === "show" && id) {
+                        return show(resource, id, undefined, meta);
+                    }
+
+                    if (!!resource.edit && redirect === "edit" && id) {
+                        return edit(resource, id, undefined, meta);
+                    }
+
+                    if (!!resource.create && redirect === "create") {
+                        return create(resource, undefined, meta);
+                    }
+
+                    return list(resource, "push", meta);
+                } else {
+                    return;
+                }
+            },
+            [],
+        );
+
+        return handleSubmitWithRedirect;
+    };

package/src/hooks/refine/index.ts

@@ -0,0 +1,5 @@
+export { useMutationMode } from "./useMutationMode";
+export { useWarnAboutChange } from "./useWarnAboutChange";
+export { useSyncWithLocation } from "./useSyncWithLocation";
+export { useTitle } from "./useTitle";
+export { useRefineContext } from "./useRefineContext";