Use query hooks in category details view
This commit is contained in:
dominik-zeglen
parent
419525f493
commit
ce2624bb9f
1 changed files with 186 additions and 195 deletions
|
|
@ -17,8 +17,7 @@ import { FormattedMessage, useIntl } from "react-intl";
|
||||||
|
|
||||||
import { PAGINATE_BY } from "../../config";
|
import { PAGINATE_BY } from "../../config";
|
||||||
import { maybe } from "../../misc";
|
import { maybe } from "../../misc";
|
||||||
import { TypedProductBulkDeleteMutation } from "../../products/mutations";
|
import { useProductBulkDeleteMutation } from "../../products/mutations";
|
||||||
import { productBulkDelete } from "../../products/types/productBulkDelete";
|
|
||||||
import { productAddUrl, productUrl } from "../../products/urls";
|
import { productAddUrl, productUrl } from "../../products/urls";
|
||||||
import { CategoryInput } from "../../types/globalTypes";
|
import { CategoryInput } from "../../types/globalTypes";
|
||||||
import {
|
import {
|
||||||
|
|
@ -129,6 +128,23 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
|
||||||
onCompleted: handleBulkCategoryDelete
|
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) => {
|
const changeTab = (tabName: CategoryPageTab) => {
|
||||||
reset();
|
reset();
|
||||||
navigate(
|
navigate(
|
||||||
|
|
@ -143,18 +159,6 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
|
||||||
CategoryUrlQueryParams
|
CategoryUrlQueryParams
|
||||||
>(navigate, params => categoryUrl(id, params), params);
|
>(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(
|
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||||
params.activeTab === CategoryPageTab.categories
|
params.activeTab === CategoryPageTab.categories
|
||||||
? maybe(() => data.category.children.pageInfo)
|
? maybe(() => data.category.children.pageInfo)
|
||||||
|
|
@ -166,191 +170,178 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<WindowTitle title={maybe(() => data.category.name)} />
|
<WindowTitle title={maybe(() => data.category.name)} />
|
||||||
<TypedProductBulkDeleteMutation onCompleted={handleBulkProductDelete}>
|
<CategoryUpdatePage
|
||||||
{(productBulkDelete, productBulkDeleteOpts) => (
|
changeTab={changeTab}
|
||||||
<>
|
currentTab={params.activeTab}
|
||||||
<CategoryUpdatePage
|
category={maybe(() => data.category)}
|
||||||
changeTab={changeTab}
|
disabled={loading}
|
||||||
currentTab={params.activeTab}
|
errors={updateResult.data?.categoryUpdate.errors || []}
|
||||||
category={maybe(() => data.category)}
|
onAddCategory={() => navigate(categoryAddUrl(id))}
|
||||||
disabled={loading}
|
onAddProduct={() => navigate(productAddUrl)}
|
||||||
errors={updateResult.data?.categoryUpdate.errors || []}
|
onBack={() =>
|
||||||
onAddCategory={() => navigate(categoryAddUrl(id))}
|
navigate(
|
||||||
onAddProduct={() => navigate(productAddUrl)}
|
maybe(() => categoryUrl(data.category.parent.id), categoryListUrl())
|
||||||
onBack={() =>
|
)
|
||||||
navigate(
|
}
|
||||||
maybe(
|
onCategoryClick={id => () => navigate(categoryUrl(id))}
|
||||||
() => categoryUrl(data.category.parent.id),
|
onDelete={() => openModal("delete")}
|
||||||
categoryListUrl()
|
onImageDelete={() =>
|
||||||
)
|
updateCategory({
|
||||||
)
|
variables: {
|
||||||
|
id,
|
||||||
|
input: {
|
||||||
|
backgroundImage: null
|
||||||
}
|
}
|
||||||
onCategoryClick={id => () => navigate(categoryUrl(id))}
|
}
|
||||||
onDelete={() => openModal("delete")}
|
})
|
||||||
onImageDelete={() =>
|
}
|
||||||
updateCategory({
|
onImageUpload={file =>
|
||||||
variables: {
|
updateCategory({
|
||||||
id,
|
variables: {
|
||||||
input: {
|
id,
|
||||||
backgroundImage: null
|
input: {
|
||||||
}
|
backgroundImage: file
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
onImageUpload={file =>
|
}
|
||||||
updateCategory({
|
})
|
||||||
variables: {
|
}
|
||||||
id,
|
onNextPage={loadNextPage}
|
||||||
input: {
|
onPreviousPage={loadPreviousPage}
|
||||||
backgroundImage: file
|
pageInfo={pageInfo}
|
||||||
}
|
onProductClick={id => () => navigate(productUrl(id))}
|
||||||
}
|
onSubmit={formData =>
|
||||||
})
|
updateCategory({
|
||||||
|
variables: {
|
||||||
|
id,
|
||||||
|
input: {
|
||||||
|
backgroundImageAlt: formData.backgroundImageAlt,
|
||||||
|
descriptionJson: JSON.stringify(formData.description),
|
||||||
|
name: formData.name,
|
||||||
|
seo: {
|
||||||
|
description: formData.seoDescription,
|
||||||
|
title: formData.seoTitle
|
||||||
|
}
|
||||||
}
|
}
|
||||||
onNextPage={loadNextPage}
|
}
|
||||||
onPreviousPage={loadPreviousPage}
|
})
|
||||||
pageInfo={pageInfo}
|
}
|
||||||
onProductClick={id => () => navigate(productUrl(id))}
|
products={maybe(() =>
|
||||||
onSubmit={formData =>
|
data.category.products.edges.map(edge => edge.node)
|
||||||
updateCategory({
|
|
||||||
variables: {
|
|
||||||
id,
|
|
||||||
input: {
|
|
||||||
backgroundImageAlt: formData.backgroundImageAlt,
|
|
||||||
descriptionJson: JSON.stringify(formData.description),
|
|
||||||
name: formData.name,
|
|
||||||
seo: {
|
|
||||||
description: formData.seoDescription,
|
|
||||||
title: formData.seoTitle
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
products={maybe(() =>
|
|
||||||
data.category.products.edges.map(edge => edge.node)
|
|
||||||
)}
|
|
||||||
saveButtonBarState={updateResult.status}
|
|
||||||
subcategories={maybe(() =>
|
|
||||||
data.category.children.edges.map(edge => edge.node)
|
|
||||||
)}
|
|
||||||
subcategoryListToolbar={
|
|
||||||
<IconButton
|
|
||||||
color="primary"
|
|
||||||
onClick={() =>
|
|
||||||
openModal("delete-categories", {
|
|
||||||
ids: listElements
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<DeleteIcon />
|
|
||||||
</IconButton>
|
|
||||||
}
|
|
||||||
productListToolbar={
|
|
||||||
<IconButton
|
|
||||||
color="primary"
|
|
||||||
onClick={() =>
|
|
||||||
openModal("delete-products", {
|
|
||||||
ids: listElements
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<DeleteIcon />
|
|
||||||
</IconButton>
|
|
||||||
}
|
|
||||||
isChecked={isSelected}
|
|
||||||
selected={listElements.length}
|
|
||||||
toggle={toggle}
|
|
||||||
toggleAll={toggleAll}
|
|
||||||
/>
|
|
||||||
<ActionDialog
|
|
||||||
confirmButtonState={deleteResult.status}
|
|
||||||
onClose={closeModal}
|
|
||||||
onConfirm={() => deleteCategory({ variables: { id } })}
|
|
||||||
open={params.action === "delete"}
|
|
||||||
title={intl.formatMessage({
|
|
||||||
defaultMessage: "Delete category",
|
|
||||||
description: "dialog title"
|
|
||||||
})}
|
|
||||||
variant="delete"
|
|
||||||
>
|
|
||||||
<DialogContentText>
|
|
||||||
<FormattedMessage
|
|
||||||
defaultMessage="Are you sure you want to delete {categoryName}?"
|
|
||||||
values={{
|
|
||||||
categoryName: (
|
|
||||||
<strong>{maybe(() => data.category.name, "...")}</strong>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</DialogContentText>
|
|
||||||
<DialogContentText>
|
|
||||||
<FormattedMessage defaultMessage="Remember this will also unpin all products assigned to this category, making them unavailable in storefront." />
|
|
||||||
</DialogContentText>
|
|
||||||
</ActionDialog>
|
|
||||||
<ActionDialog
|
|
||||||
open={
|
|
||||||
params.action === "delete-categories" &&
|
|
||||||
maybe(() => params.ids.length > 0)
|
|
||||||
}
|
|
||||||
confirmButtonState={categoryBulkDeleteOpts.status}
|
|
||||||
onClose={closeModal}
|
|
||||||
onConfirm={() =>
|
|
||||||
categoryBulkDelete({
|
|
||||||
variables: { ids: params.ids }
|
|
||||||
}).then(() => refetch())
|
|
||||||
}
|
|
||||||
title={intl.formatMessage({
|
|
||||||
defaultMessage: "Delete categories",
|
|
||||||
description: "dialog title"
|
|
||||||
})}
|
|
||||||
variant="delete"
|
|
||||||
>
|
|
||||||
<DialogContentText>
|
|
||||||
<FormattedMessage
|
|
||||||
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>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</DialogContentText>
|
|
||||||
<DialogContentText>
|
|
||||||
<FormattedMessage defaultMessage="Remember this will also delete all products assigned to this category." />
|
|
||||||
</DialogContentText>
|
|
||||||
</ActionDialog>
|
|
||||||
<ActionDialog
|
|
||||||
open={params.action === "delete-products"}
|
|
||||||
confirmButtonState={productBulkDeleteOpts.status}
|
|
||||||
onClose={closeModal}
|
|
||||||
onConfirm={() =>
|
|
||||||
productBulkDelete({
|
|
||||||
variables: { ids: params.ids }
|
|
||||||
}).then(() => refetch())
|
|
||||||
}
|
|
||||||
title={intl.formatMessage({
|
|
||||||
defaultMessage: "Delete products",
|
|
||||||
description: "dialog title"
|
|
||||||
})}
|
|
||||||
variant="delete"
|
|
||||||
>
|
|
||||||
<DialogContentText>
|
|
||||||
<FormattedMessage
|
|
||||||
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>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</DialogContentText>
|
|
||||||
</ActionDialog>
|
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
</TypedProductBulkDeleteMutation>
|
saveButtonBarState={updateResult.status}
|
||||||
|
subcategories={maybe(() =>
|
||||||
|
data.category.children.edges.map(edge => edge.node)
|
||||||
|
)}
|
||||||
|
subcategoryListToolbar={
|
||||||
|
<IconButton
|
||||||
|
color="primary"
|
||||||
|
onClick={() =>
|
||||||
|
openModal("delete-categories", {
|
||||||
|
ids: listElements
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<DeleteIcon />
|
||||||
|
</IconButton>
|
||||||
|
}
|
||||||
|
productListToolbar={
|
||||||
|
<IconButton
|
||||||
|
color="primary"
|
||||||
|
onClick={() =>
|
||||||
|
openModal("delete-products", {
|
||||||
|
ids: listElements
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<DeleteIcon />
|
||||||
|
</IconButton>
|
||||||
|
}
|
||||||
|
isChecked={isSelected}
|
||||||
|
selected={listElements.length}
|
||||||
|
toggle={toggle}
|
||||||
|
toggleAll={toggleAll}
|
||||||
|
/>
|
||||||
|
<ActionDialog
|
||||||
|
confirmButtonState={deleteResult.status}
|
||||||
|
onClose={closeModal}
|
||||||
|
onConfirm={() => deleteCategory({ variables: { id } })}
|
||||||
|
open={params.action === "delete"}
|
||||||
|
title={intl.formatMessage({
|
||||||
|
defaultMessage: "Delete category",
|
||||||
|
description: "dialog title"
|
||||||
|
})}
|
||||||
|
variant="delete"
|
||||||
|
>
|
||||||
|
<DialogContentText>
|
||||||
|
<FormattedMessage
|
||||||
|
defaultMessage="Are you sure you want to delete {categoryName}?"
|
||||||
|
values={{
|
||||||
|
categoryName: (
|
||||||
|
<strong>{maybe(() => data.category.name, "...")}</strong>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</DialogContentText>
|
||||||
|
<DialogContentText>
|
||||||
|
<FormattedMessage defaultMessage="Remember this will also unpin all products assigned to this category, making them unavailable in storefront." />
|
||||||
|
</DialogContentText>
|
||||||
|
</ActionDialog>
|
||||||
|
<ActionDialog
|
||||||
|
open={
|
||||||
|
params.action === "delete-categories" &&
|
||||||
|
maybe(() => params.ids.length > 0)
|
||||||
|
}
|
||||||
|
confirmButtonState={categoryBulkDeleteOpts.status}
|
||||||
|
onClose={closeModal}
|
||||||
|
onConfirm={() =>
|
||||||
|
categoryBulkDelete({
|
||||||
|
variables: { ids: params.ids }
|
||||||
|
}).then(() => refetch())
|
||||||
|
}
|
||||||
|
title={intl.formatMessage({
|
||||||
|
defaultMessage: "Delete categories",
|
||||||
|
description: "dialog title"
|
||||||
|
})}
|
||||||
|
variant="delete"
|
||||||
|
>
|
||||||
|
<DialogContentText>
|
||||||
|
<FormattedMessage
|
||||||
|
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>
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</DialogContentText>
|
||||||
|
<DialogContentText>
|
||||||
|
<FormattedMessage defaultMessage="Remember this will also delete all products assigned to this category." />
|
||||||
|
</DialogContentText>
|
||||||
|
</ActionDialog>
|
||||||
|
<ActionDialog
|
||||||
|
open={params.action === "delete-products"}
|
||||||
|
confirmButtonState={productBulkDeleteOpts.status}
|
||||||
|
onClose={closeModal}
|
||||||
|
onConfirm={() =>
|
||||||
|
productBulkDelete({
|
||||||
|
variables: { ids: params.ids }
|
||||||
|
}).then(() => refetch())
|
||||||
|
}
|
||||||
|
title={intl.formatMessage({
|
||||||
|
defaultMessage: "Delete products",
|
||||||
|
description: "dialog title"
|
||||||
|
})}
|
||||||
|
variant="delete"
|
||||||
|
>
|
||||||
|
<DialogContentText>
|
||||||
|
<FormattedMessage
|
||||||
|
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>
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</DialogContentText>
|
||||||
|
</ActionDialog>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue