refact(rss): instant toggle instead of save

This reverts commit 77718b8.
Axobot-org · Jan 18, 2025 · a589596 · a589596
1 parent 488c35e
commit a589596
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 9 deletions.
diff --git a/src/components/GuildDashboard/SpecialCategoryComponents/RssFeeds/FeedComponent.tsx b/src/components/GuildDashboard/SpecialCategoryComponents/RssFeeds/FeedComponent.tsx
@@ -49,7 +49,7 @@ export default function FeedComponent({ feed, editFeed }: FeedComponentProps) {
         </Stack>
 
         <Stack direction="row">
-          <FeedToggle feed={feed} editFeed={editFeed} disabled={isTwitter || isMarkedForDeletion} />
+          <FeedToggle feed={feed} disabled={isTwitter || isMarkedForDeletion} />
           <IconButton onClick={toggleCollapsedZone}>
             <Icon />
           </IconButton>

diff --git a/src/components/GuildDashboard/SpecialCategoryComponents/RssFeeds/FeedToggle.tsx b/src/components/GuildDashboard/SpecialCategoryComponents/RssFeeds/FeedToggle.tsx
@@ -1,18 +1,19 @@
 import { Switch, Tooltip } from "@mui/material";
 
+import { useGuildConfigEditionContext } from "../../../../repository/context/GuildConfigEditionContext";
+import { useToggleGuildRssFeedMutation } from "../../../../repository/redux/api/api";
 import { RssFeed } from "../../../../repository/types/api";
 
 interface FeedToggleProps {
-  feed: RssFeed;
-  editFeed: (feed: RssFeed) => void;
+  feed: Pick<RssFeed, "id" | "enabled">;
   disabled?: boolean;
 }
-export default function FeedToggle({ feed, editFeed, disabled }: FeedToggleProps) {
+export default function FeedToggle({ feed, disabled }: FeedToggleProps) {
+  const { guildId } = useGuildConfigEditionContext();
+  const [toggleFeedMutation, { isLoading }] = useToggleGuildRssFeedMutation();
+
   function onChange() {
-    editFeed({
-      ...feed,
-      enabled: !feed.enabled,
-    });
+    toggleFeedMutation({ guildId, feedId: feed.id.toString() });
   }
 
   return (
@@ -21,7 +22,7 @@ export default function FeedToggle({ feed, editFeed, disabled }: FeedToggleProps
         checked={feed.enabled}
         onChange={onChange}
         onClick={(e) => e.stopPropagation()}
-        disabled={disabled}
+        disabled={isLoading || disabled}
       />
     </Tooltip>
   );

diff --git a/src/repository/redux/api/api.ts b/src/repository/redux/api/api.ts
@@ -193,6 +193,26 @@ export const axoApi = createApi({
         } catch { /* don't update cache on error */ }
       },
     }),
+    toggleGuildRssFeed: builder.mutation<RssFeed, { guildId: string; feedId: string }>({
+      query: ({ guildId, feedId }) => ({
+        url: `discord/guild/${guildId}/rss-feeds/${feedId}/toggle`,
+        method: "POST",
+      }),
+      async onQueryStarted({ guildId }, { dispatch, queryFulfilled }) {
+        // update fetchGuildRssFeeds cache with returned updated data
+        try {
+          const { data } = await queryFulfilled;
+          dispatch(
+            axoApi.util.updateQueryData("fetchGuildRssFeeds", { guildId }, (draft) => {
+              const feedIndex = draft.findIndex((feed) => feed.id === data.id);
+              if (feedIndex !== -1) {
+                draft[feedIndex] = data;
+              }
+            })
+          );
+        } catch { /* don't update cache on error */ }
+      },
+    }),
     patchGuildRssFeeds: builder.mutation<RssFeed[], { guildId: string; feeds: RssFeedPUTData }>({
       query: ({ guildId, feeds }) => ({
         url: `discord/guild/${guildId}/rss-feeds`,
@@ -232,5 +252,6 @@ export const {
   usePatchGuildConfigMutation,
   usePutGuildLeaderboardMutation,
   usePutGuildRoleRewardsMutation,
+  useToggleGuildRssFeedMutation,
   usePatchGuildRssFeedsMutation,
 } = axoApi;