From 5456d1d9850e6014875847d77fb6fb10b17defa4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Wed, 18 Oct 2023 18:56:09 +0100
Subject: [PATCH] feat: add message banner API hooks (#5078)

https://linear.app/unleash/issue/2-1510/create-message-banner-hooks-that-connect-to-the-new-api-endpoints

Adds new message banner API hooks that will allow us to do CRUD
operations for message banners in the UI.
---
 .../useMessageBannersApi.ts                   | 68 +++++++++++++++++++
 .../useMessageBanners/useMessageBanners.ts    | 38 +++++++++++
 2 files changed, 106 insertions(+)
 create mode 100644 frontend/src/hooks/api/actions/useMessageBannersApi/useMessageBannersApi.ts
 create mode 100644 frontend/src/hooks/api/getters/useMessageBanners/useMessageBanners.ts

diff --git a/frontend/src/hooks/api/actions/useMessageBannersApi/useMessageBannersApi.ts b/frontend/src/hooks/api/actions/useMessageBannersApi/useMessageBannersApi.ts
new file mode 100644
index 0000000000..384cba2402
--- /dev/null
+++ b/frontend/src/hooks/api/actions/useMessageBannersApi/useMessageBannersApi.ts
@@ -0,0 +1,68 @@
+import { IInternalMessageBanner } from 'interfaces/messageBanner';
+import useAPI from '../useApi/useApi';
+
+const ENDPOINT = 'api/admin/message-banners';
+
+type AddOrUpdateMessageBanner = Omit<
+    IInternalMessageBanner,
+    'id' | 'createdAt'
+>;
+
+export const useMessageBannersApi = () => {
+    const { loading, makeRequest, createRequest, errors } = useAPI({
+        propagateErrors: true,
+    });
+
+    const addMessageBanner = async (
+        messageBanner: AddOrUpdateMessageBanner,
+    ) => {
+        const requestId = 'addMessageBanner';
+        const req = createRequest(
+            ENDPOINT,
+            {
+                method: 'POST',
+                body: JSON.stringify(messageBanner),
+            },
+            requestId,
+        );
+
+        const response = await makeRequest(req.caller, req.id);
+        return response.json();
+    };
+
+    const updateMessageBanner = async (
+        messageBannerId: number,
+        messageBanner: AddOrUpdateMessageBanner,
+    ) => {
+        const requestId = 'updateMessageBanner';
+        const req = createRequest(
+            `${ENDPOINT}/${messageBannerId}`,
+            {
+                method: 'PUT',
+                body: JSON.stringify(messageBanner),
+            },
+            requestId,
+        );
+
+        await makeRequest(req.caller, req.id);
+    };
+
+    const removeMessageBanner = async (messageBannerId: number) => {
+        const requestId = 'removeMessageBanner';
+        const req = createRequest(
+            `${ENDPOINT}/${messageBannerId}`,
+            { method: 'DELETE' },
+            requestId,
+        );
+
+        await makeRequest(req.caller, req.id);
+    };
+
+    return {
+        addMessageBanner,
+        updateMessageBanner,
+        removeMessageBanner,
+        errors,
+        loading,
+    };
+};
diff --git a/frontend/src/hooks/api/getters/useMessageBanners/useMessageBanners.ts b/frontend/src/hooks/api/getters/useMessageBanners/useMessageBanners.ts
new file mode 100644
index 0000000000..0bfdbd92fa
--- /dev/null
+++ b/frontend/src/hooks/api/getters/useMessageBanners/useMessageBanners.ts
@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { formatApiPath } from 'utils/formatPath';
+import handleErrorResponses from '../httpErrorResponseHandler';
+import { useConditionalSWR } from '../useConditionalSWR/useConditionalSWR';
+import useUiConfig from '../useUiConfig/useUiConfig';
+import { useUiFlag } from 'hooks/useUiFlag';
+import { IInternalMessageBanner } from 'interfaces/messageBanner';
+
+const ENDPOINT = 'api/admin/message-banners';
+
+export const useMessageBanners = () => {
+    const { isEnterprise } = useUiConfig();
+    const internalMessageBanners = useUiFlag('internalMessageBanners');
+
+    const { data, error, mutate } = useConditionalSWR(
+        isEnterprise() && internalMessageBanners,
+        { messageBanners: [] },
+        formatApiPath(ENDPOINT),
+        fetcher,
+    );
+
+    return useMemo(
+        () => ({
+            messageBanners: (data?.messageBanners ??
+                []) as IInternalMessageBanner[],
+            loading: !error && !data,
+            refetch: () => mutate(),
+            error,
+        }),
+        [data, error, mutate],
+    );
+};
+
+const fetcher = (path: string) => {
+    return fetch(path)
+        .then(handleErrorResponses('Message Banners'))
+        .then((res) => res.json());
+};