commit 3ca716445522d3fdc2f685f5e8524f2356a7cd4a
parent 30aaedb0a831110fb9775033196b08ffc7c8be4f
Author: f0x52 <f0x@cthu.lu>
Date: Thu, 13 Oct 2022 10:42:54 +0200
[frontend] Use new GET custom_emoji admin api (#908)
* use new GET custom_emoji admin api
* use url instead of static_url, add link to emoji admin api tracking issue
* fetch all local emoji
Diffstat:
5 files changed, 78 insertions(+), 30 deletions(-)
diff --git a/web/source/settings/admin/emoji.js b/web/source/settings/admin/emoji.js
@@ -30,21 +30,11 @@ const { formFields } = require("../components/form-fields");
const api = require("../lib/api");
const adminActions = require("../redux/reducers/admin").actions;
const submit = require("../lib/submit");
+const BackButton = require("../components/back-button");
const base = "/settings/admin/custom-emoji";
module.exports = function CustomEmoji() {
- return (
- <Switch>
- <Route path={`${base}/:emojiId`}>
- <EmojiDetailWrapped />
- </Route>
- <EmojiOverview />
- </Switch>
- );
-};
-
-function EmojiOverview() {
const dispatch = Redux.useDispatch();
const [loaded, setLoaded] = React.useState(false);
@@ -74,12 +64,25 @@ function EmojiOverview() {
return (
<>
- <h1>Custom Emoji</h1>
- <EmojiList/>
- <NewEmoji/>
{errorMsg.length > 0 &&
<div className="error accent">{errorMsg}</div>
}
+ <Switch>
+ <Route path={`${base}/:emojiId`}>
+ <EmojiDetailWrapped />
+ </Route>
+ <EmojiOverview />
+ </Switch>
+ </>
+ );
+};
+
+function EmojiOverview() {
+ return (
+ <>
+ <h1>Custom Emoji</h1>
+ <EmojiList/>
+ <NewEmoji/>
</>
);
}
@@ -176,10 +179,10 @@ function EmojiCategory({category, entries}) {
<div className="emoji-group">
{entries.map((e) => {
return (
- // <Link key={e.static_url} to={`${base}/${e.shortcode}`}>
- <Link key={e.static_url} to={`${base}`}>
+ <Link key={e.id} to={`${base}/${e.id}`}>
+ {/* <Link key={e.static_url} to={`${base}`}> */}
<a>
- <img src={e.static_url} alt={e.shortcode} title={`:${e.shortcode}:`}/>
+ <img src={e.url} alt={e.shortcode} title={`:${e.shortcode}:`}/>
</a>
</Link>
);
@@ -195,6 +198,13 @@ function EmojiDetailWrapped() {
inputs get re-created on every change, causing them to lose focus, and bad performance
*/
let [_match, {emojiId}] = useRoute(`${base}/:emojiId`);
+ const emojiById = Redux.useSelector((state) => state.admin.emojiById);
+ const emoji = emojiById[emojiId];
+ if (emoji == undefined) {
+ return (
+ <h1><BackButton to={base}/> Custom Emoji: </h1>
+ );
+ }
function alterEmoji([key, val]) {
return adminActions.updateDomainBlockVal([emojiId, key, val]);
@@ -202,11 +212,18 @@ function EmojiDetailWrapped() {
const fields = formFields(alterEmoji, (state) => state.admin.blockedInstances[emojiId]);
- return <EmojiDetail id={emojiId} Form={fields} />;
+ return <EmojiDetail emoji={emoji} Form={fields} />;
}
-function EmojiDetail({id, Form}) {
+function EmojiDetail({emoji, Form}) {
return (
- "Not implemented yet"
+ <div>
+ <h1><BackButton to={base}/> Custom Emoji: {emoji.shortcode}</h1>
+ <p>
+ Editing custom emoji isn't implemented yet.<br/>
+ <a target="_blank" rel="noreferrer" href="https://github.com/superseriousbusiness/gotosocial/issues/797">View implementation progress.</a>
+ </p>
+ <img src={emoji.url} alt={emoji.shortcode} title={`:${emoji.shortcode}:`}/>
+ </div>
);
}
\ No newline at end of file
diff --git a/web/source/settings/admin/federation.js b/web/source/settings/admin/federation.js
@@ -29,6 +29,7 @@ const { formFields } = require("../components/form-fields");
const api = require("../lib/api");
const adminActions = require("../redux/reducers/admin").actions;
const submit = require("../lib/submit");
+const BackButton = require("../components/back-button");
const base = "/settings/admin/federation";
@@ -280,14 +281,6 @@ function BulkBlocking() {
);
}
-function BackButton() {
- return (
- <Link to={base}>
- <a className="button">< back</a>
- </Link>
- );
-}
-
function InstancePageWrapped() {
/* We wrap the component to generate formFields with a setter depending on the domain
if formFields() is used inside the same component that is re-rendered with their state,
@@ -345,7 +338,7 @@ function InstancePage({domain, Form}) {
return (
<div>
- <h1><BackButton/> Federation settings for: {domain}</h1>
+ <h1><BackButton to={base}/> Federation settings for: {domain}</h1>
{entry.new && "No stored block yet, you can add one below:"}
<Form.TextArea
diff --git a/web/source/settings/components/back-button.jsx b/web/source/settings/components/back-button.jsx
@@ -0,0 +1,30 @@
+/*
+ GoToSocial
+ Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program. If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const React = require("react");
+const { Link } = require("wouter");
+
+module.exports = function BackButton({to}) {
+ return (
+ <Link to={to}>
+ <a className="button">< back</a>
+ </Link>
+ );
+};
+\ No newline at end of file
diff --git a/web/source/settings/lib/api/admin.js b/web/source/settings/lib/api/admin.js
@@ -164,7 +164,7 @@ module.exports = function ({ apiCall, getChanges }) {
fetchCustomEmoji: function fetchCustomEmoji() {
return function (dispatch, _getState) {
return Promise.try(() => {
- return dispatch(apiCall("GET", "/api/v1/custom_emojis"));
+ return dispatch(apiCall("GET", "/api/v1/admin/custom_emojis?filter=domain:local&limit=0"));
}).then((emoji) => {
return dispatch(admin.setEmoji(emoji));
});
diff --git a/web/source/settings/redux/reducers/admin.js b/web/source/settings/redux/reducers/admin.js
@@ -37,6 +37,7 @@ function emptyBlock() {
function emptyEmojiForm() {
return {
+ id: Date.now(),
shortcode: ""
};
}
@@ -53,6 +54,7 @@ module.exports = createSlice({
},
newInstanceBlocks: {},
emoji: {},
+ emojiById: {},
newEmoji: emptyEmojiForm()
},
reducers: {
@@ -113,6 +115,7 @@ module.exports = createSlice({
}
state.emoji[emoji.category] = defaultValue(state.emoji[emoji.category], []);
state.emoji[emoji.category].push(emoji);
+ state.emojiById[emoji.id] = emoji;
});
},
@@ -124,8 +127,12 @@ module.exports = createSlice({
if (emoji.category == undefined) {
emoji.category = "Unsorted";
}
+ if (emoji.id == undefined) {
+ emoji.id = Date.now();
+ }
state.emoji[emoji.category] = defaultValue(state.emoji[emoji.category], []);
state.emoji[emoji.category].push(emoji);
+ state.emojiById[emoji.id] = emoji;
},
}
});
\ No newline at end of file
