Add webhook delele to list
This commit is contained in:
parent
834addf3c0
commit
d802ae90ce
3 changed files with 83 additions and 86 deletions
|
@ -19,7 +19,7 @@ import { useIntl } from "react-intl";
|
|||
|
||||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { maybe, renderCollection } from "@saleor/misc";
|
||||
import { maybe, renderCollection, stopPropagation } from "@saleor/misc";
|
||||
import { ListProps } from "@saleor/types";
|
||||
import { Webhooks_webhooks_edges_node } from "../../types/Webhooks";
|
||||
|
||||
|
@ -125,15 +125,18 @@ const WebhooksList = withStyles(styles, { name: "PluginList" })(
|
|||
)}
|
||||
</TableCell>
|
||||
<TableCell className={classes.colAction}>
|
||||
<div
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={webhook ? onRowClick(webhook.id) : undefined}
|
||||
>
|
||||
<EditIcon />
|
||||
</div>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={
|
||||
webhook ? () => onRemove(webhook.id) : undefined
|
||||
webhook
|
||||
? stopPropagation(() => onRemove(webhook.id))
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<DeleteIcon />
|
||||
|
|
|
@ -13,7 +13,7 @@ import WebhooksList from "../WebhooksList/WebhooksList";
|
|||
export interface WebhooksListPageProps extends PageListProps {
|
||||
webhooks: Webhooks_webhooks_edges_node[];
|
||||
onBack: () => void;
|
||||
onRemove: () => void;
|
||||
onRemove: (id: string) => void;
|
||||
}
|
||||
|
||||
const WebhooksListPage: React.StatelessComponent<WebhooksListPageProps> = ({
|
||||
|
|
|
@ -20,8 +20,7 @@ import {
|
|||
webhooksAddUrl,
|
||||
webhooksListUrl,
|
||||
WebhooksListUrlQueryParams,
|
||||
webhooksUrl,
|
||||
WebhookUrlDialog
|
||||
webhooksUrl
|
||||
} from "../urls";
|
||||
|
||||
interface WebhooksListProps {
|
||||
|
@ -50,90 +49,85 @@ export const WebhooksList: React.StatelessComponent<WebhooksListProps> = ({
|
|||
true
|
||||
);
|
||||
|
||||
const openModal = (action: WebhookUrlDialog, id?: string) =>
|
||||
navigate(
|
||||
webhooksListUrl({
|
||||
...params,
|
||||
action,
|
||||
id
|
||||
})
|
||||
);
|
||||
|
||||
const onWebhookDelete = (data: WebhookDelete) => {
|
||||
if (data.webhookDelete.errors.length === 0) {
|
||||
notify({
|
||||
text: intl.formatMessage(commonMessages.savedChanges)
|
||||
});
|
||||
navigate(webhooksListUrl());
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<TypedWebhooksListQuery displayLoader variables={paginationState}>
|
||||
{({ data, loading }) => (
|
||||
<TypedWebhookDelete onCompleted={onWebhookDelete}>
|
||||
{(webhookDelete, webhookDeleteOpts) => {
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
maybe(() => data.webhooks.pageInfo),
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
const handleRemove = (id: string) =>
|
||||
navigate(
|
||||
webhooksListUrl({
|
||||
...params,
|
||||
action: "remove",
|
||||
id
|
||||
})
|
||||
{({ data, loading, refetch }) => {
|
||||
const onWebhookDelete = (data: WebhookDelete) => {
|
||||
if (data.webhookDelete.errors.length === 0) {
|
||||
notify({
|
||||
text: intl.formatMessage(commonMessages.savedChanges)
|
||||
});
|
||||
navigate(webhooksListUrl());
|
||||
refetch();
|
||||
}
|
||||
};
|
||||
return (
|
||||
<TypedWebhookDelete onCompleted={onWebhookDelete}>
|
||||
{(webhookDelete, webhookDeleteOpts) => {
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
maybe(() => data.webhooks.pageInfo),
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
const handleRemoveConfirm = () =>
|
||||
webhookDelete({
|
||||
variables: {
|
||||
id
|
||||
}
|
||||
});
|
||||
const handleRemove = (id: string) => {
|
||||
navigate(
|
||||
webhooksListUrl({
|
||||
...params,
|
||||
action: "remove",
|
||||
id
|
||||
})
|
||||
);
|
||||
};
|
||||
const handleRemoveConfirm = () => {
|
||||
webhookDelete({
|
||||
variables: {
|
||||
id: params.id
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const deleteTransitionState = getMutationState(
|
||||
webhookDeleteOpts.called,
|
||||
webhookDeleteOpts.loading,
|
||||
maybe(() => webhookDeleteOpts.data.webhookDelete.errors)
|
||||
);
|
||||
const deleteTransitionState = getMutationState(
|
||||
webhookDeleteOpts.called,
|
||||
webhookDeleteOpts.loading,
|
||||
maybe(() => webhookDeleteOpts.data.webhookDelete.errors)
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<WebhooksListPage
|
||||
disabled={loading}
|
||||
settings={settings}
|
||||
webhooks={maybe(() =>
|
||||
data.webhooks.edges.map(edge => edge.node)
|
||||
)}
|
||||
pageInfo={pageInfo}
|
||||
onAdd={() => navigate(webhooksAddUrl)}
|
||||
onBack={() => navigate(configurationMenuUrl)}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onRemove={handleRemove}
|
||||
onUpdateListSettings={updateListSettings}
|
||||
onRowClick={id => () => navigate(webhooksUrl(id))}
|
||||
/>
|
||||
<WebhookDeleteDialog
|
||||
confirmButtonState={deleteTransitionState}
|
||||
name={maybe(
|
||||
() =>
|
||||
data.webhooks.edges.find(
|
||||
edge => edge.node.id === params.id
|
||||
).node.name,
|
||||
"..."
|
||||
)}
|
||||
onClose={closeModal}
|
||||
onConfirm={handleRemoveConfirm}
|
||||
open={params.action === "remove"}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</TypedWebhookDelete>
|
||||
)}
|
||||
return (
|
||||
<>
|
||||
<WebhooksListPage
|
||||
disabled={loading}
|
||||
settings={settings}
|
||||
webhooks={maybe(() =>
|
||||
data.webhooks.edges.map(edge => edge.node)
|
||||
)}
|
||||
pageInfo={pageInfo}
|
||||
onAdd={() => navigate(webhooksAddUrl)}
|
||||
onBack={() => navigate(configurationMenuUrl)}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onRemove={handleRemove}
|
||||
onUpdateListSettings={updateListSettings}
|
||||
onRowClick={id => () => navigate(webhooksUrl(id))}
|
||||
/>
|
||||
<WebhookDeleteDialog
|
||||
confirmButtonState={deleteTransitionState}
|
||||
name={maybe(
|
||||
() =>
|
||||
data.webhooks.edges.find(
|
||||
edge => edge.node.id === params.id
|
||||
).node.name,
|
||||
"..."
|
||||
)}
|
||||
onClose={closeModal}
|
||||
onConfirm={handleRemoveConfirm}
|
||||
open={params.action === "remove"}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</TypedWebhookDelete>
|
||||
);
|
||||
}}
|
||||
</TypedWebhooksListQuery>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue