From c27609604131511bad0b8e563c98b52686c41965 Mon Sep 17 00:00:00 2001
From: Krzysztof Bialoglowicz <krzysztof@mirumee.com>
Date: Thu, 17 Oct 2019 16:39:37 +0200
Subject: [PATCH] Fix webhooks evetns checkbox

---
 .../WebhookEvents/WebhookEvents.tsx           | 20 ++++---------------
 .../WebhooksDetailsPage.tsx                   |  4 +++-
 src/webhooks/views/WebhooksDetails.tsx        |  2 +-
 3 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/webhooks/components/WebhookEvents/WebhookEvents.tsx b/src/webhooks/components/WebhookEvents/WebhookEvents.tsx
index 21659b006..5ae897912 100644
--- a/src/webhooks/components/WebhookEvents/WebhookEvents.tsx
+++ b/src/webhooks/components/WebhookEvents/WebhookEvents.tsx
@@ -8,6 +8,7 @@ import { ChangeEvent } from "@saleor/hooks/useForm";
 import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
+import { toggle } from "@saleor/utils/lists";
 
 interface WebhookEventsProps {
   data: {
@@ -57,26 +58,13 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
     })
   };
 
-  const handleAllEventsChange = (event: ChangeEvent) =>
-    onChange(event, () =>
-      onChange({
-        target: {
-          name: "events",
-          value: event.target.value ? WebhookEventTypeEnum.ANY_EVENTS : []
-        }
-      })
-    );
-
-  const handleEventsChange = (event: ChangeEvent) => {
+  const handleEventsChange = (event: ChangeEvent) =>
     onChange({
       target: {
         name: "events",
-        value: event.target.value
-          ? data.events.concat([event.target.name])
-          : data.events.filter(events => events !== event.target.name)
+        value: toggle(event.target.name, data.events, (a, b) => a === b)
       }
     });
-  };
 
   return (
     <Card>
@@ -99,7 +87,7 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
           disabled={disabled}
           label={translatedEvents.ANY_EVENTS}
           name="allEvents"
-          onChange={handleAllEventsChange}
+          onChange={onChange}
         />
         {!data.allEvents && (
           <>
diff --git a/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx b/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx
index 6f53bcc69..9d6c54a18 100644
--- a/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx
+++ b/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx
@@ -60,7 +60,9 @@ const WebhooksDetailsPage: React.FC<WebhooksDetailsPageProps> = ({
     allEvents: !!maybe(() => webhook.events, []).find(
       event => event.eventType === WebhookEventTypeEnum.ANY_EVENTS
     ),
-    events: maybe(() => webhook.events, []).map(event => event.eventType),
+    events: maybe(() => webhook.events, [])
+      .map(event => event.eventType)
+      .filter(event => event !== WebhookEventTypeEnum.ANY_EVENTS),
     id: maybe(() => webhook.id, null),
     isActive: maybe(() => webhook.isActive, false),
     name: maybe(() => webhook.name, ""),
diff --git a/src/webhooks/views/WebhooksDetails.tsx b/src/webhooks/views/WebhooksDetails.tsx
index 89099dc50..c7fffc2f6 100644
--- a/src/webhooks/views/WebhooksDetails.tsx
+++ b/src/webhooks/views/WebhooksDetails.tsx
@@ -129,7 +129,7 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
                                 input: {
                                   events: data.allEvents
                                     ? [WebhookEventTypeEnum.ANY_EVENTS]
-                                    : data.events.slice(1),
+                                    : data.events,
                                   isActive: data.isActive,
                                   name: data.name,
                                   secretKey: data.secretKey,