diff --git a/docs/content/admin/routes.md b/docs/content/admin/routes.md index dfa65a8293..96f900d9e2 100644 --- a/docs/content/admin/routes.md +++ b/docs/content/admin/routes.md @@ -176,6 +176,45 @@ When using the `develop` command, the admin dashboard will run in development mo --- +## Route Props + +Every route receives props of the type `RouteProps`, which includes the `notify` prop. The `notify` prop is an object that includes the following attributes: + +- `success`: a function that can be used to show a success message. +- `error`: a function that can be used to show an error message. +- `warn`: a function that can be used to show a warning message. +- `info`: a function that can be used to show an info message. + +For example: + +```tsx +import { Post } from "../../../../../models/post" +import PostForm from "../../../../components/post/form" +import { RouteProps } from "@medusajs/admin-ui" + +const BlogPostCreatePage = ({ + notify, +}: RouteProps) => { + const onSuccess = (post: Post) => { + notify.success( + "Success", + `Post ${post.title} created successfully` + ) + } + + return ( +
+

Create Post

+ +
+ ) +} + +export default BlogPostCreatePage +``` + +--- + ## Show Route in Sidebar You can add your routes into the admin dashboard sidebar by exporting an object of type `RouteConfig` import from `@medusajs/admin` in the same route file. @@ -326,6 +365,8 @@ const CustomPage = () => { export default CustomPage ``` +### Custom Endpoints + You can also use `medusa-react` to interact with custom endpoints using [Custom Hooks utility functions](../medusa-react/overview.mdx#custom-hooks). --- diff --git a/docs/content/admin/setting-pages.md b/docs/content/admin/setting-pages.md index 5a4ea085aa..3ec93d16b3 100644 --- a/docs/content/admin/setting-pages.md +++ b/docs/content/admin/setting-pages.md @@ -11,11 +11,11 @@ In this document, you’ll learn how to create a setting page in the admin. ## Overview -The admin UI routes allow you to add new pages to the admin dashboard. However, they can’t be used to add a new tab under the Setting page. +The [admin UI routes](./routes.md) allow you to add new pages to the admin dashboard. However, they can’t be used to add a new tab under the Setting page. To do that, you need to create an Admin setting page. The page will automatically be shown as a tab under the Setting page in the admin. The tab leads to the content of your custom page. -An admin UI route is essentially a React Component created under the `src/admin/settings` directory. +A setting page is essentially a React Component created under the `src/admin/settings` directory. This guide explains how to create a new setting page in the admin dashboard with some examples. @@ -130,7 +130,7 @@ For example, if you want the setting page to be available in the admin dashboard ### Step 2: Create React Component in File -For an admin route to be valid, it must default export a React component. There are no restrictions on the content of the React component. It must also export a configuration object that indicates how the tab is shown on the Setting page. +For a setting page to be valid, it must default export a React component. There are no restrictions on the content of the React component. It must also export a configuration object that indicates how the tab is shown on the Setting page. For example, you can create the file `src/admin/settings/custom/page.tsx` with the following content: @@ -176,6 +176,51 @@ If you click on the tab, a new page will open with the content as defined in you --- +## Setting Page Props + +Every route receives props of the type `RouteProps`, which includes the `notify` prop. The `notify` prop is an object that includes the following attributes: + +- `success`: a function that can be used to show a success message. +- `error`: a function that can be used to show an error message. +- `warn`: a function that can be used to show a warning message. +- `info`: a function that can be used to show an info message. + +For example: + +```tsx title=src/admin/settings/custom/page.tsx +import type { SettingConfig } from "@medusajs/admin" +import type { SettingProps } from "@medusajs/admin-ui" + +const CustomSettingPage = ({ + notify, +}: SettingProps) => { + + const handleClick = () => { + notify.success("Success", "You clicked the button") + } + + return ( +
+

Custom Setting Page

+ +
+ ) +} + +export const config: SettingConfig = { + card: { + label: "Custom", + description: "Manage your custom settings", + }, +} + +export default CustomSettingPage +``` + +--- + ## Styling Setting Page Admin setting pages support [Tailwind CSS](https://tailwindcss.com/) by default. @@ -295,6 +340,8 @@ export const config: SettingConfig = { export default CustomSettingPage ``` +### Custom Endpoints + You can also use `medusa-react` to interact with custom endpoints using [Custom Hooks utility functions](../medusa-react/overview.mdx#custom-hooks). --- diff --git a/docs/content/admin/widgets.md b/docs/content/admin/widgets.md index 2b56108790..9173b602d7 100644 --- a/docs/content/admin/widgets.md +++ b/docs/content/admin/widgets.md @@ -1103,35 +1103,6 @@ Open `localhost:7001` in your browser and log in. Then, go to the details page o Try making any changes to the component. The development server will hot-reload and your widget will be updated immediately. -### Styling your Widget - -Admin Widgets support [Tailwind CSS](https://tailwindcss.com/) out of the box. - -For example, you can update the widget you created earlier to use Tailwind CSS classes: - - - -```tsx title=src/admin/widgets/product-widget.tsx -import type { - WidgetConfig, -} from "@medusajs/admin" - -const ProductWidget = () => { - return ( -
-

Product Widget

-
- ) -} - -export const config: WidgetConfig = { - zone: "product.details.after", -} - -export default ProductWidget -``` - ### Widget Props Every widget receives props of the type `WidgetProps`, which includes the `notify` prop. The `notify` prop is an object that includes the following attributes: @@ -1179,7 +1150,40 @@ export const config: WidgetConfig = { export default ProductWidget ``` -### Routing Functionalities +--- + +## Styling your Widget + +Admin Widgets support [Tailwind CSS](https://tailwindcss.com/) out of the box. + +For example, you can update the widget you created earlier to use Tailwind CSS classes: + + + +```tsx title=src/admin/widgets/product-widget.tsx +import type { + WidgetConfig, +} from "@medusajs/admin" + +const ProductWidget = () => { + return ( +
+

Product Widget

+
+ ) +} + +export const config: WidgetConfig = { + zone: "product.details.after", +} + +export default ProductWidget +``` + +--- + +## Routing Functionalities If you want to navigate to other pages, link to other pages, or use other routing functionalities, you can use [react-router-dom](https://reactrouter.com/en/main) package. @@ -1224,7 +1228,9 @@ export default ProductWidget View [react-router-dom’s documentation](https://reactrouter.com/en/main) for other available components and hooks. -### Querying and Mutating Data +--- + +## Querying and Mutating Data You will most likely need to interact with the Medusa backend from your Widgets. To do so, you can utilize the Medusa React package. It contains a collection of queries and mutation built on `@tanstack/react-query` that lets you interact with the Medusa backend. @@ -1273,6 +1279,8 @@ export const config: WidgetConfig = { export default ProductWidget ``` +### Custom Endpoints + You can also use `medusa-react` to interact with custom endpoints using the [createCustomAdminHooks utility function](../medusa-react/overview.mdx#custom-hooks). --- diff --git a/docs/content/medusa-react/overview.mdx b/docs/content/medusa-react/overview.mdx index 5f281e2111..ec5cf0248c 100644 --- a/docs/content/medusa-react/overview.mdx +++ b/docs/content/medusa-react/overview.mdx @@ -270,7 +270,7 @@ type AdminBlogPostRes = { const BlogPost = () => { const { id } = useParams() - const { data: { post }, isLoading } = useAdminCustomQuery< + const { data, isLoading } = useAdminCustomQuery< AdminBlogPostQuery, AdminBlogPostRes >( @@ -284,7 +284,7 @@ const BlogPost = () => { return ( <> {isLoading && Loading...} - {post && {post.title}} + {data && data.post && {data.post.title}} ) } @@ -320,7 +320,7 @@ type AdminBlogPostsQuery = { const AuthorsBlogPosts = () => { const { id } = useParams() - const { data: { posts }, isLoading } = useAdminCustomQuery< + const { data, isLoading } = useAdminCustomQuery< AdminBlogPostsQuery, AdminBlogPostsRes >( `/blog/posts`, // path @@ -334,9 +334,13 @@ const AuthorsBlogPosts = () => { return ( <> {isLoading && Loading...} - {posts && {posts.map((post, index) => ( - {post.title} - ))}} + {data && data.posts && ( + + {data.posts.map((post, index) => ( + {post.title} + ))} + + )} ) } @@ -427,10 +431,10 @@ export default CreateBlogPost #### useAdminCustomDelete -The `useAdminCustomDelete` utility hook can be used to send a `DELETE` request to a custom endpoint in your Medusa backend. It's a generic function, so you can pass a type for the request body if you're using TypeScript in your development: +The `useAdminCustomDelete` utility hook can be used to send a `DELETE` request to a custom endpoint in your Medusa backend. It's a generic function, so you can pass a type for the expected response if you're using TypeScript in your development: ```ts -useAdminCustomPost +useAdminCustomDelete ``` The hook accepts the following parameters: