feat(feeds): clear feed cache (#1071)

web/src/api/APIClient.ts

@@ -131,6 +131,7 @@ export const APIClient = {
     toggleEnable: (id: number, enabled: boolean) => appClient.Patch(`api/feeds/${id}/enabled`, { enabled }),
     update: (feed: Feed) => appClient.Put(`api/feeds/${feed.id}`, feed),
     delete: (id: number) => appClient.Delete(`api/feeds/${id}`),
+    deleteCache: (id: number) => appClient.Delete(`api/feeds/${id}/cache`),
     test: (feed: Feed) => appClient.Post("api/feeds/test", feed)
   },
   indexers: {

web/src/screens/settings/Feed.tsx

@@ -23,6 +23,7 @@ import { DeleteModal } from "@components/modals";
 import { FeedUpdateForm } from "@forms/settings/FeedForms";
 import { EmptySimple } from "@components/emptystates";
 import { ImplementationBadges } from "./Indexer";
+import {ArrowPathIcon} from "@heroicons/react/24/solid";
 
 export const feedKeys = {
   all: ["feeds"] as const,
@@ -230,10 +231,13 @@ const FeedItemDropdown = ({
   toggleUpdate
 }: FeedItemDropdownProps) => {
   const cancelModalButtonRef = useRef(null);
+  const cancelCacheModalButtonRef = useRef(null);
 
   const queryClient = useQueryClient();
 
   const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
+  const [deleteCacheModalIsOpen, toggleDeleteCacheModal] = useToggle(false);
+
   const deleteMutation = useMutation({
     mutationFn: (id: number) => APIClient.feeds.delete(id),
     onSuccess: () => {
@@ -244,6 +248,13 @@ const FeedItemDropdown = ({
     }
   });
 
+  const deleteCacheMutation = useMutation({
+    mutationFn: (id: number) => APIClient.feeds.deleteCache(id),
+    onSuccess: () => {
+      toast.custom((t) => <Toast type="success" body={`Feed ${feed?.name} cache was cleared!`} t={t}/>);
+    }
+  });
+
   return (
     <Menu as="div">
       <DeleteModal
@@ -257,6 +268,16 @@ const FeedItemDropdown = ({
         title={`Remove feed: ${feed.name}`}
         text="Are you sure you want to remove this feed? This action cannot be undone."
       />
+      <DeleteModal
+          isOpen={deleteCacheModalIsOpen}
+          toggle={toggleDeleteCacheModal}
+          buttonRef={cancelCacheModalButtonRef}
+          deleteAction={() => {
+            deleteCacheMutation.mutate(feed.id);
+          }}
+          title={`Remove feed cache: ${feed.name}`}
+          text="Are you sure you want to remove the feed cache? This action cannot be undone."
+      />
       <Menu.Button className="px-4 py-2">
         <EllipsisHorizontalIcon
           className="w-5 h-5 text-gray-700 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-400"
@@ -317,6 +338,7 @@ const FeedItemDropdown = ({
               )}
             </Menu.Item>
           </div>
+          <div>
           <Menu.Item>
             {({ active }) => (
               <a
@@ -339,6 +361,28 @@ const FeedItemDropdown = ({
               </a>
             )}
           </Menu.Item>
+          <Menu.Item>
+            {({ active }) => (
+                <button
+                    className={classNames(
+                        active ? "bg-red-600 text-white" : "text-gray-900 dark:text-gray-300",
+                        "font-medium group flex rounded-md items-center w-full px-2 py-2 text-sm"
+                    )}
+                    onClick={() => toggleDeleteCacheModal()}
+                    title="Manually clear all feed cache"
+                >
+                  <ArrowPathIcon
+                      className={classNames(
+                          active ? "text-white" : "text-red-500",
+                          "w-5 h-5 mr-2"
+                      )}
+                      aria-hidden="true"
+                  />
+                  Clear feed cache
+                </button>
+            )}
+          </Menu.Item>
+          </div>
           <div className="px-1 py-1">
             <Menu.Item>
               {({ active }) => (