Use query hooks in category details view

This commit is contained in:
dominik-zeglen 2020-08-24 12:35:10 +02:00
parent 419525f493
commit ce2624bb9f

View file

@ -17,8 +17,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import { PAGINATE_BY } from "../../config";
import { maybe } from "../../misc";
import { TypedProductBulkDeleteMutation } from "../../products/mutations";
import { productBulkDelete } from "../../products/types/productBulkDelete";
import { useProductBulkDeleteMutation } from "../../products/mutations";
import { productAddUrl, productUrl } from "../../products/urls";
import { CategoryInput } from "../../types/globalTypes";
import {
@ -129,6 +128,23 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
onCompleted: handleBulkCategoryDelete
});
const [
productBulkDelete,
productBulkDeleteOpts
] = useProductBulkDeleteMutation({
onCompleted: data => {
if (data.productBulkDelete.errors.length === 0) {
closeModal();
notify({
status: "success",
text: intl.formatMessage(commonMessages.savedChanges)
});
refetch();
reset();
}
}
});
const changeTab = (tabName: CategoryPageTab) => {
reset();
navigate(
@ -143,18 +159,6 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
CategoryUrlQueryParams
>(navigate, params => categoryUrl(id, params), params);
const handleBulkProductDelete = (data: productBulkDelete) => {
if (data.productBulkDelete.errors.length === 0) {
closeModal();
notify({
status: "success",
text: intl.formatMessage(commonMessages.savedChanges)
});
refetch();
reset();
}
};
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
params.activeTab === CategoryPageTab.categories
? maybe(() => data.category.children.pageInfo)
@ -166,9 +170,6 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
return (
<>
<WindowTitle title={maybe(() => data.category.name)} />
<TypedProductBulkDeleteMutation onCompleted={handleBulkProductDelete}>
{(productBulkDelete, productBulkDeleteOpts) => (
<>
<CategoryUpdatePage
changeTab={changeTab}
currentTab={params.activeTab}
@ -179,10 +180,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
onAddProduct={() => navigate(productAddUrl)}
onBack={() =>
navigate(
maybe(
() => categoryUrl(data.category.parent.id),
categoryListUrl()
)
maybe(() => categoryUrl(data.category.parent.id), categoryListUrl())
)
}
onCategoryClick={id => () => navigate(categoryUrl(id))}
@ -311,9 +309,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
defaultMessage="{counter,plural,one{Are you sure you want to delete this category?} other{Are you sure you want to delete {displayQuantity} categories?}}"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
displayQuantity: <strong>{maybe(() => params.ids.length)}</strong>
}}
/>
</DialogContentText>
@ -341,17 +337,12 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
defaultMessage="{counter,plural,one{Are you sure you want to delete this product?} other{Are you sure you want to delete {displayQuantity} products?}}"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
displayQuantity: <strong>{maybe(() => params.ids.length)}</strong>
}}
/>
</DialogContentText>
</ActionDialog>
</>
)}
</TypedProductBulkDeleteMutation>
</>
);
};
export default CategoryDetails;