feat: use new on/off endpoints in banners toggles (#5144)

https://linear.app/unleash/issue/2-1556/adapt-toggles-in-banners-table-to-use-the-new-on-and-off-endpoints

Uses the new on/off endpoints in the banners table toggles.
Also includes a missing rename for the `useMessageBannersApi` hook, to
`useBannersApi`.

frontend/src/component/admin/banners/BannerModal/BannerModal.tsx

@@ -10,7 +10,7 @@ import { useBanners } from 'hooks/api/getters/useBanners/useBanners';
 import {
     AddOrUpdateBanner,
     useBannersApi,
-} from 'hooks/api/actions/useMessageBannersApi/useMessageBannersApi';
+} from 'hooks/api/actions/useBannersApi/useBannersApi';
 import { BannerForm } from './BannerForm';
 
 const StyledForm = styled('form')(() => ({

frontend/src/component/admin/banners/BannersTable/BannersTable.tsx

@@ -16,32 +16,31 @@ import { Search } from 'component/common/Search/Search';
 import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 import { useSearch } from 'hooks/useSearch';
 import { useBanners } from 'hooks/api/getters/useBanners/useBanners';
-import { useBannersApi } from 'hooks/api/actions/useMessageBannersApi/useMessageBannersApi';
+import { useBannersApi } from 'hooks/api/actions/useBannersApi/useBannersApi';
 import { IInternalBanner } from 'interfaces/banner';
 import { Banner } from 'component/banners/Banner/Banner';
 import { BannersActionsCell } from './BannersActionsCell';
 import { BannerDeleteDialog } from './BannerDeleteDialog';
 import { ToggleCell } from 'component/common/Table/cells/ToggleCell/ToggleCell';
-import omit from 'lodash.omit';
 import { BannerModal } from '../BannerModal/BannerModal';
 
 export const BannersTable = () => {
     const { setToastData, setToastApiError } = useToast();
 
     const { banners, refetch, loading } = useBanners();
-    const { updateBanner, removeBanner } = useBannersApi();
+    const { toggleBanner, removeBanner } = useBannersApi();
 
     const [searchValue, setSearchValue] = useState('');
     const [modalOpen, setModalOpen] = useState(false);
     const [deleteOpen, setDeleteOpen] = useState(false);
     const [selectedBanner, setSelectedBanner] = useState<IInternalBanner>();
 
-    const toggleBanner = async (banner: IInternalBanner, enabled: boolean) => {
+    const onToggleBanner = async (
+        banner: IInternalBanner,
+        enabled: boolean,
+    ) => {
         try {
-            await updateBanner(banner.id, {
+            await toggleBanner(banner.id, enabled);
-                ...omit(banner, ['id', 'createdAt']),
-                enabled,
-            });
             setToastData({
                 title: `"${banner.message}" has been ${
                     enabled ? 'enabled' : 'disabled'
@@ -98,7 +97,9 @@ export const BannersTable = () => {
                 }: { row: { original: IInternalBanner } }) => (
                     <ToggleCell
                         checked={banner.enabled}
-                        setChecked={(enabled) => toggleBanner(banner, enabled)}
+                        setChecked={(enabled) =>
+                            onToggleBanner(banner, enabled)
+                        }
                     />
                 ),
                 sortType: 'boolean',

frontend/src/hooks/api/actions/useBannersApi/useBannersApi.ts

@@ -42,6 +42,40 @@ export const useBannersApi = () => {
         await makeRequest(req.caller, req.id);
     };
 
+    const enableBanner = async (bannerId: number) => {
+        const requestId = 'enableBanner';
+        const req = createRequest(
+            `${ENDPOINT}/${bannerId}/on`,
+            {
+                method: 'POST',
+            },
+            requestId,
+        );
+
+        await makeRequest(req.caller, req.id);
+    };
+
+    const disableBanner = async (bannerId: number) => {
+        const requestId = 'disableBanner';
+        const req = createRequest(
+            `${ENDPOINT}/${bannerId}/off`,
+            {
+                method: 'POST',
+            },
+            requestId,
+        );
+
+        await makeRequest(req.caller, req.id);
+    };
+
+    const toggleBanner = async (bannerId: number, enabled: boolean) => {
+        if (enabled) {
+            await enableBanner(bannerId);
+        } else {
+            await disableBanner(bannerId);
+        }
+    };
+
     const removeBanner = async (bannerId: number) => {
         const requestId = 'removeBanner';
         const req = createRequest(
@@ -57,6 +91,7 @@ export const useBannersApi = () => {
         addBanner,
         updateBanner,
         removeBanner,
+        toggleBanner,
         errors,
         loading,
     };