Add delete unused images button

drawref · Jul 20, 2024 · e853a98 · e853a98
1 parent 2c78435
commit e853a98
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/src/app/apiSlice.ts b/src/app/apiSlice.ts
@@ -159,6 +159,15 @@ export const api = createApi({
         body,
       }),
     }),
+    deleteUnusedImages: build.mutation<OkResponse, RequestWithToken>({
+      query: ({ token }) => ({
+        url: `image/unused`,
+        method: "DELETE",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }),
+    }),
     addImageToCategory: build.mutation<OkResponse, AddImageToCategoryRequest>({
       query: ({ token, category, image, body }) => ({
         url: `categories/${category}/images/${image}`,
@@ -265,6 +274,7 @@ export const {
   useGetCategoriesQuery,
   useGetCategoryQuery,
   useAddImageMutation,
+  useDeleteUnusedImagesMutation,
   useAddImageToCategoryMutation,
   useDeleteImageFromCategoryMutation,
   useGetCategoryImagesQuery,

diff --git a/src/routes/AdminDashboard.tsx b/src/routes/AdminDashboard.tsx
@@ -7,11 +7,12 @@ import TheFooter from "../components/TheFooter";
 import TheLoadingModal from "../components/TheLoadingModal";
 
 import { useAppSelector } from "../app/hooks";
-import { useGetCategoriesQuery, useDeleteCategoryMutation } from "../app/apiSlice";
+import { useGetCategoriesQuery, useDeleteCategoryMutation, useDeleteUnusedImagesMutation } from "../app/apiSlice";
 
 function AdminDashboard() {
   const { data: categories, isLoading } = useGetCategoriesQuery();
   const [deleteCategory] = useDeleteCategoryMutation();
+  const [deleteUnusedImages] = useDeleteUnusedImagesMutation();
 
   const user = useAppSelector((state) => state.userProfile);
 
@@ -65,6 +66,26 @@ function AdminDashboard() {
               </Link>
             )}
           </div>
+
+          <div className="mx-auto mt-6 flex w-[20em] max-w-full flex-col border-[5px] border-primary-700 bg-primary-900">
+            <button
+              className="block py-3 hover:bg-primary-800"
+              onClick={async (e) => {
+                if (window.confirm(`Delete unused images?`)) {
+                  try {
+                    await deleteUnusedImages({
+                      token: user.token,
+                    });
+                  } catch (err) {
+                    console.error(err);
+                    return;
+                  }
+                }
+              }}
+            >
+              Delete unused images
+            </button>
+          </div>
         </div>
         <TheFooter />
       </div>