mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2024-12-22 18:22:11 +00:00
[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
GitHub
parent
30aaedb0a8
commit
3ca7164455
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
30
web/source/settings/components/back-button.jsx
Normal file
30
web/source/settings/components/back-button.jsx
Normal 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">< back</a>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
|
@ -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));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
},
|
||||
}
|
||||
});
|
||||
Loading…
Reference in a new issue