Add webhook delele to list

This commit is contained in:
Krzysztof Bialoglowicz 2019-10-10 08:09:29 +02:00
parent 834addf3c0
commit d802ae90ce
3 changed files with 83 additions and 86 deletions

View file

@ -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 />

View file

@ -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> = ({

View file

@ -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>
);
};