From ef221487f680453541d251845e2794300f18cf02 Mon Sep 17 00:00:00 2001
From: Artem Astapenko <jamakase54@gmail.com>
Date: Mon, 28 Mar 2022 21:16:23 +0300
Subject: [PATCH] Refactor notification resoruce to use react-query

---
 .../notification/NotificationService.tsx      | 21 ++++++++
 .../src/core/domain/notification/types.tsx    |  4 ++
 .../src/core/resources/Notifications.ts       | 31 -----------
 .../src/hooks/services/useWorkspace.tsx       | 51 ++++++++++++-------
 .../NotificationPage/NotificationPage.tsx     |  6 +--
 5 files changed, 58 insertions(+), 55 deletions(-)
 create mode 100644 airbyte-webapp/src/core/domain/notification/NotificationService.tsx
 create mode 100644 airbyte-webapp/src/core/domain/notification/types.tsx
 delete mode 100644 airbyte-webapp/src/core/resources/Notifications.ts

diff --git a/airbyte-webapp/src/core/domain/notification/NotificationService.tsx b/airbyte-webapp/src/core/domain/notification/NotificationService.tsx
new file mode 100644
index 000000000000..dbcff1434d55
--- /dev/null
+++ b/airbyte-webapp/src/core/domain/notification/NotificationService.tsx
@@ -0,0 +1,21 @@
+import { AirbyteRequestService } from "core/request/AirbyteRequestService";
+import { NotificationStatus } from "./types";
+
+class NotificationService extends AirbyteRequestService {
+  get url(): string {
+    return "notifications";
+  }
+
+  public try(payload: {
+    notificationType: "slack";
+    sendOnSuccess: boolean;
+    sendOnFailure: boolean;
+    slackConfiguration: {
+      webhook: string;
+    };
+  }): Promise<NotificationStatus> {
+    return this.fetch<NotificationStatus>(`${this.url}/try`, payload);
+  }
+}
+
+export { NotificationService };
diff --git a/airbyte-webapp/src/core/domain/notification/types.tsx b/airbyte-webapp/src/core/domain/notification/types.tsx
new file mode 100644
index 000000000000..3ee8af84729f
--- /dev/null
+++ b/airbyte-webapp/src/core/domain/notification/types.tsx
@@ -0,0 +1,4 @@
+export interface NotificationStatus {
+  status: string;
+  message: string;
+}
diff --git a/airbyte-webapp/src/core/resources/Notifications.ts b/airbyte-webapp/src/core/resources/Notifications.ts
deleted file mode 100644
index 45cc981914be..000000000000
--- a/airbyte-webapp/src/core/resources/Notifications.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { MutateShape, Resource, SchemaDetail } from "rest-hooks";
-import BaseResource from "./BaseResource";
-
-export interface Notifications {
-  status: string;
-  message: string;
-}
-
-export default class NotificationsResource
-  extends BaseResource
-  implements Notifications {
-  readonly status: string = "";
-  readonly message: string = "";
-
-  pk(): string {
-    return "";
-  }
-
-  static urlRoot = "notifications";
-
-  static tryShape<T extends typeof Resource>(
-    this: T
-  ): MutateShape<SchemaDetail<Notifications>> {
-    return {
-      ...super.partialUpdateShape(),
-      fetch: async (params) =>
-        this.fetch("post", `${this.url(params)}/try`, params),
-      schema: this,
-    };
-  }
-}
diff --git a/airbyte-webapp/src/hooks/services/useWorkspace.tsx b/airbyte-webapp/src/hooks/services/useWorkspace.tsx
index 2261c2ce7ed8..7d28b535aec1 100644
--- a/airbyte-webapp/src/hooks/services/useWorkspace.tsx
+++ b/airbyte-webapp/src/hooks/services/useWorkspace.tsx
@@ -1,14 +1,17 @@
 import { useFetcher } from "rest-hooks";
+import { useMutation } from "react-query";
 
 import WorkspaceResource from "core/resources/Workspace";
-import NotificationsResource, {
-  Notifications,
-} from "core/resources/Notifications";
 
 import { useAnalyticsService } from "hooks/services/Analytics";
 import { useCurrentWorkspace } from "services/workspaces/WorkspacesService";
 import { Destination, Source } from "core/domain/connector";
 import { Workspace } from "core/domain/workspace/Workspace";
+import { NotificationStatus } from "core/domain/notification/types";
+import { useConfig } from "config";
+import { useDefaultRequestMiddlewares } from "services/useDefaultRequestMiddlewares";
+import { useInitService } from "services/useInitService";
+import { NotificationService } from "core/domain/notification/NotificationService";
 
 export type WebhookPayload = {
   webhook: string;
@@ -16,6 +19,17 @@ export type WebhookPayload = {
   sendOnFailure: boolean;
 };
 
+function useGetNotificationService(): NotificationService {
+  const { apiUrl } = useConfig();
+
+  const requestAuthMiddleware = useDefaultRequestMiddlewares();
+
+  return useInitService(
+    () => new NotificationService(apiUrl, requestAuthMiddleware),
+    [apiUrl, requestAuthMiddleware]
+  );
+}
+
 const useWorkspace = (): {
   workspace: Workspace;
   updatePreferences: (data: {
@@ -25,7 +39,7 @@ const useWorkspace = (): {
     securityUpdates: boolean;
   }) => Promise<Workspace>;
   updateWebhook: (data: WebhookPayload) => Promise<Workspace>;
-  testWebhook: (data: WebhookPayload) => Promise<Notifications>;
+  testWebhook: (data: WebhookPayload) => Promise<NotificationStatus>;
   setInitialSetupConfig: (data: {
     email: string;
     anonymousDataCollection: boolean;
@@ -43,8 +57,9 @@ const useWorkspace = (): {
     destination: Destination;
   }) => Promise<void>;
 } => {
+  const notificationService = useGetNotificationService();
   const updateWorkspace = useFetcher(WorkspaceResource.updateShape());
-  const tryWebhookUrl = useFetcher(NotificationsResource.tryShape());
+
   const workspace = useCurrentWorkspace();
 
   const analyticsService = useAnalyticsService();
@@ -130,19 +145,6 @@ const useWorkspace = (): {
       }
     );
 
-  const testWebhook = async (data: WebhookPayload) =>
-    await tryWebhookUrl(
-      {
-        notificationType: "slack",
-        sendOnSuccess: data.sendOnSuccess,
-        sendOnFailure: data.sendOnFailure,
-        slackConfiguration: {
-          webhook: data.webhook,
-        },
-      },
-      {}
-    );
-
   const updateWebhook = async (data: WebhookPayload) =>
     await updateWorkspace(
       {},
@@ -166,13 +168,24 @@ const useWorkspace = (): {
       }
     );
 
+  const tryWebhookUrl = useMutation((data: WebhookPayload) =>
+    notificationService.try({
+      notificationType: "slack",
+      sendOnSuccess: data.sendOnSuccess,
+      sendOnFailure: data.sendOnFailure,
+      slackConfiguration: {
+        webhook: data.webhook,
+      },
+    })
+  );
+
   return {
     workspace,
     finishOnboarding,
     setInitialSetupConfig,
     updatePreferences,
     updateWebhook,
-    testWebhook,
+    testWebhook: tryWebhookUrl.mutateAsync,
     sendFeedback,
   };
 };
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/NotificationPage.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/NotificationPage.tsx
index b08448aa27a3..fe393e8d8b90 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/NotificationPage.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/NotificationPage.tsx
@@ -47,10 +47,6 @@ const NotificationPage: React.FC = () => {
     successMessage,
   } = useAsyncWithTimeout(async (data: WebhookPayload) => updateWebhook(data));
 
-  const onTestWebhook = async (data: WebhookPayload) => {
-    await testWebhook(data);
-  };
-
   const firstNotification = workspace.notifications?.[0];
 
   const initialValues = useMemo(
@@ -74,7 +70,7 @@ const NotificationPage: React.FC = () => {
           <WebHookForm
             webhook={initialValues}
             onSubmit={onSubmitWebhook}
-            onTest={onTestWebhook}
+            onTest={testWebhook}
             errorMessage={errorMessage}
             successMessage={successMessage}
           />