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.

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,
+    };
+};

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());
+};