From 492213cf0384c4fa281b313a9c86606db402eed7 Mon Sep 17 00:00:00 2001 From: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com> Date: Tue, 2 Jul 2024 17:34:01 +0200 Subject: [PATCH] fix(dashboard): add delete action to table (#7904) --- .../category-general-section.tsx | 54 ++----------------- .../category-list-table.tsx | 13 ++++- .../use-delete-product-category-action.tsx | 51 ++++++++++++++++++ 3 files changed, 66 insertions(+), 52 deletions(-) create mode 100644 packages/admin-next/dashboard/src/routes/categories/common/hooks/use-delete-product-category-action.tsx diff --git a/packages/admin-next/dashboard/src/routes/categories/category-detail/components/category-general-section/category-general-section.tsx b/packages/admin-next/dashboard/src/routes/categories/category-detail/components/category-general-section/category-general-section.tsx index 861f13dee6..5a29d1c7cf 100644 --- a/packages/admin-next/dashboard/src/routes/categories/category-detail/components/category-general-section/category-general-section.tsx +++ b/packages/admin-next/dashboard/src/routes/categories/category-detail/components/category-general-section/category-general-section.tsx @@ -1,17 +1,9 @@ import { PencilSquare, Trash } from "@medusajs/icons" import { HttpTypes } from "@medusajs/types" -import { - Container, - Heading, - StatusBadge, - Text, - toast, - usePrompt, -} from "@medusajs/ui" +import { Container, Heading, StatusBadge, Text } from "@medusajs/ui" import { useTranslation } from "react-i18next" -import { useNavigate } from "react-router-dom" import { ActionMenu } from "../../../../../components/common/action-menu" -import { useDeleteProductCategory } from "../../../../../hooks/api/categories" +import { useDeleteProductCategoryAction } from "../../../common/hooks/use-delete-product-category-action" import { getIsActiveProps, getIsInternalProps } from "../../../common/utils" type CategoryGeneralSectionProps = { @@ -22,51 +14,11 @@ export const CategoryGeneralSection = ({ category, }: CategoryGeneralSectionProps) => { const { t } = useTranslation() - const navigate = useNavigate() - const prompt = usePrompt() const activeProps = getIsActiveProps(category.is_active, t) const internalProps = getIsInternalProps(category.is_internal, t) - const { mutateAsync } = useDeleteProductCategory(category.id) - - const handleDelete = async () => { - const res = await prompt({ - title: t("general.areYouSure"), - description: t("categories.delete.confirmation", { - name: category.name, - }), - confirmText: t("actions.delete"), - cancelText: t("actions.cancel"), - }) - - if (!res) { - return - } - - await mutateAsync(undefined, { - onSuccess: () => { - toast.success(t("general.success"), { - description: t("categories.delete.successToast", { - name: category.name, - }), - dismissable: true, - dismissLabel: t("actions.close"), - }) - - navigate("/categories", { - replace: true, - }) - }, - onError: (e) => { - toast.error(t("general.error"), { - description: e.message, - dismissable: true, - dismissLabel: t("actions.close"), - }) - }, - }) - } + const handleDelete = useDeleteProductCategoryAction(category) return ( diff --git a/packages/admin-next/dashboard/src/routes/categories/category-list/components/category-list-table/category-list-table.tsx b/packages/admin-next/dashboard/src/routes/categories/category-list/components/category-list-table/category-list-table.tsx index f31a81f973..58272b7dea 100644 --- a/packages/admin-next/dashboard/src/routes/categories/category-list/components/category-list-table/category-list-table.tsx +++ b/packages/admin-next/dashboard/src/routes/categories/category-list/components/category-list-table/category-list-table.tsx @@ -1,4 +1,4 @@ -import { PencilSquare } from "@medusajs/icons" +import { PencilSquare, Trash } from "@medusajs/icons" import { AdminProductCategoryResponse } from "@medusajs/types" import { Button, Container, Heading } from "@medusajs/ui" import { keepPreviousData } from "@tanstack/react-query" @@ -11,6 +11,7 @@ import { ActionMenu } from "../../../../../components/common/action-menu" import { DataTable } from "../../../../../components/table/data-table" import { useProductCategories } from "../../../../../hooks/api/categories" import { useDataTable } from "../../../../../hooks/use-data-table" +import { useDeleteProductCategoryAction } from "../../../common/hooks/use-delete-product-category-action" import { useCategoryTableColumns } from "./use-category-table-columns" import { useCategoryTableQuery } from "./use-category-table-query" @@ -94,6 +95,7 @@ const CategoryRowActions = ({ category: AdminProductCategoryResponse["product_category"] }) => { const { t } = useTranslation() + const handleDelete = useDeleteProductCategoryAction(category) return ( , + onClick: handleDelete, + }, + ], + }, ]} /> ) diff --git a/packages/admin-next/dashboard/src/routes/categories/common/hooks/use-delete-product-category-action.tsx b/packages/admin-next/dashboard/src/routes/categories/common/hooks/use-delete-product-category-action.tsx new file mode 100644 index 0000000000..5265036315 --- /dev/null +++ b/packages/admin-next/dashboard/src/routes/categories/common/hooks/use-delete-product-category-action.tsx @@ -0,0 +1,51 @@ +import { HttpTypes } from "@medusajs/types" +import { toast, usePrompt } from "@medusajs/ui" +import { useTranslation } from "react-i18next" +import { useNavigate } from "react-router-dom" +import { useDeleteProductCategory } from "../../../../hooks/api/categories" + +export const useDeleteProductCategoryAction = ( + category: HttpTypes.AdminProductCategory +) => { + const { t } = useTranslation() + const navigate = useNavigate() + const prompt = usePrompt() + + const { mutateAsync } = useDeleteProductCategory(category.id) + + const handleDelete = async () => { + const res = await prompt({ + title: t("general.areYouSure"), + description: t("categories.delete.confirmation", { + name: category.name, + }), + confirmText: t("actions.delete"), + cancelText: t("actions.cancel"), + }) + + if (!res) { + return + } + + await mutateAsync(undefined, { + onSuccess: () => { + toast.success(t("general.success"), { + description: t("categories.delete.successToast", { + name: category.name, + }), + }) + + navigate("/categories", { + replace: true, + }) + }, + onError: (e) => { + toast.error(t("general.error"), { + description: e.message, + }) + }, + }) + } + + return handleDelete +}