4 files changed, 21 insertions, 19 deletions

diff --git a/web/source/settings/admin/emoji/local/detail.js b/web/source/settings/admin/emoji/local/detail.js
index 101652686..6b583b0b9 100644
--- a/web/source/settings/admin/emoji/local/detail.js
+++ b/web/source/settings/admin/emoji/local/detail.js
@@ -28,6 +28,7 @@ const { useComboBoxInput, useFileInput, useValue } = require("../../../lib/form"
 const { CategorySelect } = require("../category-select");
 
 const useFormSubmit = require("../../../lib/form/submit");
+const { useBaseUrl } = require("../../../lib/navigation/util");
 
 const FakeToot = require("../../../components/fake-toot");
 const FormWithData = require("../../../lib/form/form-with-data");
@@ -36,16 +37,15 @@ const { FileInput } = require("../../../components/form/inputs");
 const MutationButton = require("../../../components/form/mutation-button");
 const { Error } = require("../../../components/error");
 
-const base = "/settings/custom-emoji/local";
-
-module.exports = function EmojiDetailRoute() {
-	let [_match, params] = useRoute(`${base}/:emojiId`);
+module.exports = function EmojiDetailRoute({ }) {
+	const baseUrl = useBaseUrl();
+	let [_match, params] = useRoute(`${baseUrl}/:emojiId`);
 	if (params?.emojiId == undefined) {
-		return <Redirect to={base} />;
+		return <Redirect to={baseUrl} />;
 	} else {
 		return (
 			<div className="emoji-detail">
-				<Link to={base}><a>&lt; go back</a></Link>
+				<Link to={baseUrl}><a>&lt; go back</a></Link>
 				<FormWithData dataQuery={query.useGetEmojiQuery} queryArg={params.emojiId} DataForm={EmojiDetailForm} />
 			</div>
 		);
@@ -53,6 +53,7 @@ module.exports = function EmojiDetailRoute() {
 };
 
 function EmojiDetailForm({ data: emoji }) {
+	const baseUrl = useBaseUrl();
 	const form = {
 		id: useValue("id", emoji.id),
 		category: useComboBoxInput("category", { source: emoji }),
@@ -78,7 +79,7 @@ function EmojiDetailForm({ data: emoji }) {
 	const [deleteEmoji, deleteResult] = query.useDeleteEmojiMutation();
 
 	if (deleteResult.isSuccess) {
-		return <Redirect to={base} />;
+		return <Redirect to={baseUrl} />;
 	}
 
 	return (
diff --git a/web/source/settings/admin/emoji/local/index.js b/web/source/settings/admin/emoji/local/index.js
index 3c88f49c3..56695094c 100644
--- a/web/source/settings/admin/emoji/local/index.js
+++ b/web/source/settings/admin/emoji/local/index.js
@@ -25,15 +25,13 @@ const { Switch, Route } = require("wouter");
 const EmojiOverview = require("./overview");
 const EmojiDetail = require("./detail");
 
-const base = "/settings/custom-emoji/local";
-
-module.exports = function CustomEmoji() {
+module.exports = function CustomEmoji({ baseUrl }) {
 	return (
 		<Switch>
-			<Route path={`${base}/:emojiId`}>
-				<EmojiDetail baseUrl={base} />
+			<Route path={`${baseUrl}/:emojiId`}>
+				<EmojiDetail />
 			</Route>
-			<EmojiOverview baseUrl={base} />
+			<EmojiOverview />
 		</Switch>
 	);
 };
diff --git a/web/source/settings/admin/emoji/local/overview.js b/web/source/settings/admin/emoji/local/overview.js
index 616c5144b..757729c38 100644
--- a/web/source/settings/admin/emoji/local/overview.js
+++ b/web/source/settings/admin/emoji/local/overview.js
@@ -29,12 +29,13 @@ const { useTextInput } = require("../../../lib/form");
 
 const query = require("../../../lib/query");
 const { useEmojiByCategory } = require("../category-select");
+const { useBaseUrl } = require("../../../lib/navigation/util");
 
 const Loading = require("../../../components/loading");
 const { Error } = require("../../../components/error");
 const { TextInput } = require("../../../components/form/inputs");
 
-module.exports = function EmojiOverview({ baseUrl }) {
+module.exports = function EmojiOverview({ }) {
 	const {
 		data: emoji = [],
 		isLoading,
@@ -51,7 +52,7 @@ module.exports = function EmojiOverview({ baseUrl }) {
 	} else {
 		content = (
 			<>
-				<EmojiList emoji={emoji} baseUrl={baseUrl} />
+				<EmojiList emoji={emoji} />
 				<NewEmojiForm emoji={emoji} />
 			</>
 		);
@@ -70,7 +71,7 @@ module.exports = function EmojiOverview({ baseUrl }) {
 	);
 };
 
-function EmojiList({ emoji, baseUrl }) {
+function EmojiList({ emoji }) {
 	const filterField = useTextInput("filter");
 	const filter = filterField.value;
 
@@ -116,7 +117,7 @@ function EmojiList({ emoji, baseUrl }) {
 						? (
 							<div className="entries scrolling">
 								{filteredEmoji.map(([category, entries]) => {
-									return <EmojiCategory key={category} category={category} entries={entries} baseUrl={baseUrl} />;
+									return <EmojiCategory key={category} category={category} entries={entries} />;
 								})}
 							</div>
 						)
@@ -128,7 +129,8 @@ function EmojiList({ emoji, baseUrl }) {
 	);
 }
 
-function EmojiCategory({ category, entries, baseUrl }) {
+function EmojiCategory({ category, entries }) {
+	const baseUrl = useBaseUrl();
 	return (
 		<div className="entry">
 			<b>{category}</b>
diff --git a/web/source/settings/admin/emoji/remote/index.js b/web/source/settings/admin/emoji/remote/index.js
index 757e443a4..bf7113b49 100644
--- a/web/source/settings/admin/emoji/remote/index.js
+++ b/web/source/settings/admin/emoji/remote/index.js
@@ -25,6 +25,7 @@ const ParseFromToot = require("./parse-from-toot");
 
 const query = require("../../../lib/query");
 const Loading = require("../../../components/loading");
+const { Error } = require("../../../components/error");
 
 module.exports = function RemoteEmoji() {
 	// local emoji are queried for shortcode collision detection
@@ -42,7 +43,7 @@ module.exports = function RemoteEmoji() {
 		<>
 			<h1>Custom Emoji (remote)</h1>
 			{error &&
-				<div className="error accent">{error}</div>
+				<Error error={error} />
 			}
 			{isLoading
 				? <Loading />