From 4ca607914b88b509c0bf698de7a4b086bd7d75e4 Mon Sep 17 00:00:00 2001
From: f0x <f0x@cthu.lu>
Date: Sun, 8 Jan 2023 17:18:41 +0000
Subject: [PATCH] admin actions refactor

---
 web/source/settings/admin/actions.js   | 41 +++++++++++++-------------
 web/source/settings/lib/query/admin.js |  9 ++++++
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/web/source/settings/admin/actions.js b/web/source/settings/admin/actions.js
index 66caa1794..7bbdf548c 100644
--- a/web/source/settings/admin/actions.js
+++ b/web/source/settings/admin/actions.js
@@ -19,42 +19,43 @@
 "use strict";
 
 const React = require("react");
-const Redux = require("react-redux");
 
-const Submit = require("../components/submit");
+const query = require("../lib/query");
 
-const api = require("../lib/api");
-const submit = require("../lib/submit");
+const { useTextInput } = require("../lib/form");
+const { TextInput } = require("../components/form/inputs");
+
+const MutationButton = require("../components/form/mutation-button");
 
 module.exports = function AdminActionPanel() {
-	const dispatch = Redux.useDispatch();
+	const daysField = useTextInput("days", {defaultValue: 30});
 
-	const [days, setDays] = React.useState(30);
+	const [mediaCleanup, mediaCleanupResult] = query.useMediaCleanupMutation();
 
-	const [errorMsg, setError] = React.useState("");
-	const [statusMsg, setStatus] = React.useState("");
-
-	const removeMedia = submit(
-		() => dispatch(api.admin.mediaCleanup(days)),
-		{setStatus, setError}
-	);
+	function submitMediaCleanup(e) {
+		e.preventDefault();
+		mediaCleanup(daysField.value);
+	}
 
 	return (
 		<>
 			<h1>Admin Actions</h1>
-			<div>
+			<form onSubmit={submitMediaCleanup}>
 				<h2>Media cleanup</h2>
 				<p>
 					Clean up remote media older than the specified number of days.
 					If the remote instance is still online they will be refetched when needed.
 					Also cleans up unused headers and avatars from the media cache.
 				</p>
-				<div>
-					<label htmlFor="days">Days: </label>
-					<input id="days" type="number" value={days} onChange={(e) => setDays(e.target.value)}/>
-				</div>
-				<Submit onClick={removeMedia} label="Remove media" errorMsg={errorMsg} statusMsg={statusMsg} />
-			</div>
+				<TextInput
+					field={daysField}
+					label="Days"
+					type="number"
+					min="0"
+					placeholder="30"
+				/>
+				<MutationButton text="Remove old media" result={mediaCleanupResult} />
+			</form>
 		</>
 	);
 };
\ No newline at end of file
diff --git a/web/source/settings/lib/query/admin.js b/web/source/settings/lib/query/admin.js
index 9a73c9e30..e96d91762 100644
--- a/web/source/settings/lib/query/admin.js
+++ b/web/source/settings/lib/query/admin.js
@@ -30,6 +30,15 @@ const endpoints = (build) => ({
 			body: formData
 		}),
 		...updateCacheOnMutation("instance")
+	}),
+	mediaCleanup: build.mutation({
+		query: (days) => ({
+			method: "POST",
+			url: `/api/v1/admin/media_cleanup`,
+			params: {
+				remote_cache_days: days 
+			}
+		})
 	})
 });