[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
This commit is contained in:
f0x52 2022-10-13 10:42:54 +02:00 committed by GitHub
parent 30aaedb0a8
commit 3ca7164455
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 77 additions and 30 deletions

View file

@ -30,21 +30,11 @@ const { formFields } = require("../components/form-fields");
const api = require("../lib/api"); const api = require("../lib/api");
const adminActions = require("../redux/reducers/admin").actions; const adminActions = require("../redux/reducers/admin").actions;
const submit = require("../lib/submit"); const submit = require("../lib/submit");
const BackButton = require("../components/back-button");
const base = "/settings/admin/custom-emoji"; const base = "/settings/admin/custom-emoji";
module.exports = function CustomEmoji() { module.exports = function CustomEmoji() {
return (
<Switch>
<Route path={`${base}/:emojiId`}>
<EmojiDetailWrapped />
</Route>
<EmojiOverview />
</Switch>
);
};
function EmojiOverview() {
const dispatch = Redux.useDispatch(); const dispatch = Redux.useDispatch();
const [loaded, setLoaded] = React.useState(false); const [loaded, setLoaded] = React.useState(false);
@ -74,12 +64,25 @@ function EmojiOverview() {
return ( return (
<> <>
<h1>Custom Emoji</h1>
<EmojiList/>
<NewEmoji/>
{errorMsg.length > 0 && {errorMsg.length > 0 &&
<div className="error accent">{errorMsg}</div> <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"> <div className="emoji-group">
{entries.map((e) => { {entries.map((e) => {
return ( return (
// <Link key={e.static_url} to={`${base}/${e.shortcode}`}> <Link key={e.id} to={`${base}/${e.id}`}>
<Link key={e.static_url} to={`${base}`}> {/* <Link key={e.static_url} to={`${base}`}> */}
<a> <a>
<img src={e.static_url} alt={e.shortcode} title={`:${e.shortcode}:`}/> <img src={e.url} alt={e.shortcode} title={`:${e.shortcode}:`}/>
</a> </a>
</Link> </Link>
); );
@ -195,6 +198,13 @@ function EmojiDetailWrapped() {
inputs get re-created on every change, causing them to lose focus, and bad performance inputs get re-created on every change, causing them to lose focus, and bad performance
*/ */
let [_match, {emojiId}] = useRoute(`${base}/:emojiId`); 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]) { function alterEmoji([key, val]) {
return adminActions.updateDomainBlockVal([emojiId, key, val]); return adminActions.updateDomainBlockVal([emojiId, key, val]);
@ -202,11 +212,18 @@ function EmojiDetailWrapped() {
const fields = formFields(alterEmoji, (state) => state.admin.blockedInstances[emojiId]); 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 ( return (
"Not implemented yet" <div>
<h1><BackButton to={base}/> Custom Emoji: {emoji.shortcode}</h1>
<p>
Editing custom emoji isn&apos;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>
); );
} }

View file

@ -29,6 +29,7 @@ const { formFields } = require("../components/form-fields");
const api = require("../lib/api"); const api = require("../lib/api");
const adminActions = require("../redux/reducers/admin").actions; const adminActions = require("../redux/reducers/admin").actions;
const submit = require("../lib/submit"); const submit = require("../lib/submit");
const BackButton = require("../components/back-button");
const base = "/settings/admin/federation"; const base = "/settings/admin/federation";
@ -280,14 +281,6 @@ function BulkBlocking() {
); );
} }
function BackButton() {
return (
<Link to={base}>
<a className="button">&lt; back</a>
</Link>
);
}
function InstancePageWrapped() { function InstancePageWrapped() {
/* We wrap the component to generate formFields with a setter depending on the domain /* 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, if formFields() is used inside the same component that is re-rendered with their state,
@ -345,7 +338,7 @@ function InstancePage({domain, Form}) {
return ( return (
<div> <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:"} {entry.new && "No stored block yet, you can add one below:"}
<Form.TextArea <Form.TextArea

View file

@ -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">&lt; back</a>
</Link>
);
};

View file

@ -164,7 +164,7 @@ module.exports = function ({ apiCall, getChanges }) {
fetchCustomEmoji: function fetchCustomEmoji() { fetchCustomEmoji: function fetchCustomEmoji() {
return function (dispatch, _getState) { return function (dispatch, _getState) {
return Promise.try(() => { 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) => { }).then((emoji) => {
return dispatch(admin.setEmoji(emoji)); return dispatch(admin.setEmoji(emoji));
}); });

View file

@ -37,6 +37,7 @@ function emptyBlock() {
function emptyEmojiForm() { function emptyEmojiForm() {
return { return {
id: Date.now(),
shortcode: "" shortcode: ""
}; };
} }
@ -53,6 +54,7 @@ module.exports = createSlice({
}, },
newInstanceBlocks: {}, newInstanceBlocks: {},
emoji: {}, emoji: {},
emojiById: {},
newEmoji: emptyEmojiForm() newEmoji: emptyEmojiForm()
}, },
reducers: { reducers: {
@ -113,6 +115,7 @@ module.exports = createSlice({
} }
state.emoji[emoji.category] = defaultValue(state.emoji[emoji.category], []); state.emoji[emoji.category] = defaultValue(state.emoji[emoji.category], []);
state.emoji[emoji.category].push(emoji); state.emoji[emoji.category].push(emoji);
state.emojiById[emoji.id] = emoji;
}); });
}, },
@ -124,8 +127,12 @@ module.exports = createSlice({
if (emoji.category == undefined) { if (emoji.category == undefined) {
emoji.category = "Unsorted"; emoji.category = "Unsorted";
} }
if (emoji.id == undefined) {
emoji.id = Date.now();
}
state.emoji[emoji.category] = defaultValue(state.emoji[emoji.category], []); state.emoji[emoji.category] = defaultValue(state.emoji[emoji.category], []);
state.emoji[emoji.category].push(emoji); state.emoji[emoji.category].push(emoji);
state.emojiById[emoji.id] = emoji;
}, },
} }
}); });