From d802ae90ce4164ea882e7d8b9ae9600c46eac592 Mon Sep 17 00:00:00 2001
From: Krzysztof Bialoglowicz <krzysztof@mirumee.com>
Date: Thu, 10 Oct 2019 08:09:29 +0200
Subject: [PATCH] Add webhook delele to list

---
 .../components/WebhooksList/WebhooksList.tsx  |  11 +-
 .../WebhooksListPage/WebhooksListPage.tsx     |   2 +-
 src/webhooks/views/WebhooksList.tsx           | 156 +++++++++---------
 3 files changed, 83 insertions(+), 86 deletions(-)

diff --git a/src/webhooks/components/WebhooksList/WebhooksList.tsx b/src/webhooks/components/WebhooksList/WebhooksList.tsx
index 3d9844bc5..281a6fc1a 100644
--- a/src/webhooks/components/WebhooksList/WebhooksList.tsx
+++ b/src/webhooks/components/WebhooksList/WebhooksList.tsx
@@ -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 />
diff --git a/src/webhooks/components/WebhooksListPage/WebhooksListPage.tsx b/src/webhooks/components/WebhooksListPage/WebhooksListPage.tsx
index e47271d46..27a096ece 100644
--- a/src/webhooks/components/WebhooksListPage/WebhooksListPage.tsx
+++ b/src/webhooks/components/WebhooksListPage/WebhooksListPage.tsx
@@ -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> = ({
diff --git a/src/webhooks/views/WebhooksList.tsx b/src/webhooks/views/WebhooksList.tsx
index 1452105d0..db35f81a0 100644
--- a/src/webhooks/views/WebhooksList.tsx
+++ b/src/webhooks/views/WebhooksList.tsx
@@ -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>
   );
 };