mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2025-01-08 07:30:13 +00:00
basic emoji details + deletion using rtk query
This commit is contained in:
f0x
parent
b19257cf90
commit
bcaf1e95f1
|
|
@ -1,229 +0,0 @@
|
||||||
/*
|
|
||||||
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 Promise = require("bluebird");
|
|
||||||
const React = require("react");
|
|
||||||
const Redux = require("react-redux");
|
|
||||||
const {Switch, Route, Link, Redirect, useRoute, useLocation} = require("wouter");
|
|
||||||
|
|
||||||
const Submit = require("../components/submit");
|
|
||||||
const FakeToot = require("../components/fake-toot");
|
|
||||||
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() {
|
|
||||||
const dispatch = Redux.useDispatch();
|
|
||||||
const [loaded, setLoaded] = React.useState(false);
|
|
||||||
|
|
||||||
const [errorMsg, setError] = React.useState("");
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (!loaded) {
|
|
||||||
Promise.try(() => {
|
|
||||||
return dispatch(api.admin.fetchCustomEmoji());
|
|
||||||
}).then(() => {
|
|
||||||
setLoaded(true);
|
|
||||||
}).catch((e) => {
|
|
||||||
setLoaded(true);
|
|
||||||
setError(e.message);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (!loaded) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<h1>Custom Emoji</h1>
|
|
||||||
Loading...
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{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/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const NewEmojiForm = formFields(adminActions.updateNewEmojiVal, (state) => state.admin.newEmoji);
|
|
||||||
function NewEmoji() {
|
|
||||||
const dispatch = Redux.useDispatch();
|
|
||||||
const newEmojiForm = Redux.useSelector((state) => state.admin.newEmoji);
|
|
||||||
|
|
||||||
const [errorMsg, setError] = React.useState("");
|
|
||||||
const [statusMsg, setStatus] = React.useState("");
|
|
||||||
|
|
||||||
const uploadEmoji = submit(
|
|
||||||
() => dispatch(api.admin.newEmoji()),
|
|
||||||
{
|
|
||||||
setStatus, setError,
|
|
||||||
onSuccess: function() {
|
|
||||||
URL.revokeObjectURL(newEmojiForm.image);
|
|
||||||
return Promise.all([
|
|
||||||
dispatch(adminActions.updateNewEmojiVal(["image", undefined])),
|
|
||||||
dispatch(adminActions.updateNewEmojiVal(["imageFile", undefined])),
|
|
||||||
dispatch(adminActions.updateNewEmojiVal(["shortcode", ""])),
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (newEmojiForm.shortcode.length == 0) {
|
|
||||||
if (newEmojiForm.imageFile != undefined) {
|
|
||||||
let [name, ext] = newEmojiForm.imageFile.name.split(".");
|
|
||||||
dispatch(adminActions.updateNewEmojiVal(["shortcode", name]));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
let emojiOrShortcode = `:${newEmojiForm.shortcode}:`;
|
|
||||||
|
|
||||||
if (newEmojiForm.image != undefined) {
|
|
||||||
emojiOrShortcode = <img
|
|
||||||
className="emoji"
|
|
||||||
src={newEmojiForm.image}
|
|
||||||
title={`:${newEmojiForm.shortcode}:`}
|
|
||||||
alt={newEmojiForm.shortcode}
|
|
||||||
/>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h2>Add new custom emoji</h2>
|
|
||||||
|
|
||||||
<FakeToot>
|
|
||||||
Look at this new custom emoji {emojiOrShortcode} isn't it cool?
|
|
||||||
</FakeToot>
|
|
||||||
|
|
||||||
<NewEmojiForm.File
|
|
||||||
id="image"
|
|
||||||
name="Image"
|
|
||||||
fileType="image/png,image/gif"
|
|
||||||
showSize={true}
|
|
||||||
maxSize={50 * 1000}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<NewEmojiForm.TextInput
|
|
||||||
id="shortcode"
|
|
||||||
name="Shortcode (without : :), must be unique on the instance"
|
|
||||||
placeHolder="blobcat"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Submit onClick={uploadEmoji} label="Upload" errorMsg={errorMsg} statusMsg={statusMsg} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function EmojiList() {
|
|
||||||
const emoji = Redux.useSelector((state) => state.admin.emoji);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h2>Overview</h2>
|
|
||||||
<div className="list emoji-list">
|
|
||||||
{Object.entries(emoji).map(([category, entries]) => {
|
|
||||||
return <EmojiCategory key={category} category={category} entries={entries}/>;
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function EmojiCategory({category, entries}) {
|
|
||||||
return (
|
|
||||||
<div className="entry">
|
|
||||||
<b>{category}</b>
|
|
||||||
<div className="emoji-group">
|
|
||||||
{entries.map((e) => {
|
|
||||||
return (
|
|
||||||
<Link key={e.id} to={`${base}/${e.id}`}>
|
|
||||||
{/* <Link key={e.static_url} to={`${base}`}> */}
|
|
||||||
<a>
|
|
||||||
<img src={e.url} alt={e.shortcode} title={`:${e.shortcode}:`}/>
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function EmojiDetailWrapped() {
|
|
||||||
/* 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,
|
|
||||||
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]);
|
|
||||||
}
|
|
||||||
|
|
||||||
const fields = formFields(alterEmoji, (state) => state.admin.blockedInstances[emojiId]);
|
|
||||||
|
|
||||||
return <EmojiDetail emoji={emoji} Form={fields} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
function EmojiDetail({emoji, Form}) {
|
|
||||||
return (
|
|
||||||
<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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
89
web/source/settings/admin/emoji/detail.js
Normal file
89
web/source/settings/admin/emoji/detail.js
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
/*
|
||||||
|
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 Redux = require("react-redux");
|
||||||
|
|
||||||
|
const { useRoute, Link, Redirect } = require("wouter");
|
||||||
|
|
||||||
|
const adminActions = require("../../redux/reducers/admin").actions;
|
||||||
|
const BackButton = require("../../components/back-button");
|
||||||
|
const { formFields } = require("../../components/form-fields");
|
||||||
|
|
||||||
|
const query = require("../../lib/query");
|
||||||
|
|
||||||
|
const base = "/settings/admin/custom-emoji";
|
||||||
|
|
||||||
|
/* 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,
|
||||||
|
inputs get re-created on every change, causing them to lose focus, and bad performance
|
||||||
|
*/
|
||||||
|
module.exports = function EmojiDetailWrapped() {
|
||||||
|
let [_match, {emojiId}] = useRoute(`${base}/:emojiId`);
|
||||||
|
const {currentData: emoji, isLoading, error} = query.useGetEmojiQuery(emojiId);
|
||||||
|
|
||||||
|
return (<>
|
||||||
|
{error && <div className="error accent">{error.status}: {error.data.error}</div>}
|
||||||
|
{isLoading
|
||||||
|
? "Loading..."
|
||||||
|
: <EmojiDetail emoji={emoji}/>
|
||||||
|
}
|
||||||
|
</>);
|
||||||
|
};
|
||||||
|
|
||||||
|
function EmojiDetail({emoji, Form}) {
|
||||||
|
if (emoji == undefined) {
|
||||||
|
return (<>
|
||||||
|
<Link to={base}>
|
||||||
|
<a className="button">go back</a>
|
||||||
|
</Link>
|
||||||
|
</>);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1><BackButton to={base}/> Custom Emoji: {emoji.shortcode}</h1>
|
||||||
|
<DeleteButton id={emoji.id}/>
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DeleteButton({id}) {
|
||||||
|
// TODO: confirmation dialog?
|
||||||
|
const [deleteEmoji, deleteResult] = query.useDeleteEmojiMutation();
|
||||||
|
|
||||||
|
let text = "Delete this emoji";
|
||||||
|
if (deleteResult.isLoading) {
|
||||||
|
text = "processing...";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (deleteResult.isSuccess) {
|
||||||
|
return <Redirect to={base}/>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button onClick={() => deleteEmoji(id)} disabled={deleteResult.isLoading}>{text}</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
40
web/source/settings/admin/emoji/index.js
Normal file
40
web/source/settings/admin/emoji/index.js
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
/*
|
||||||
|
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 {Switch, Route} = require("wouter");
|
||||||
|
|
||||||
|
const EmojiOverview = require("./overview");
|
||||||
|
const EmojiDetail = require("./detail");
|
||||||
|
|
||||||
|
const base = "/settings/admin/custom-emoji";
|
||||||
|
|
||||||
|
module.exports = function CustomEmoji() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Switch>
|
||||||
|
<Route path={`${base}/:emojiId`}>
|
||||||
|
<EmojiDetail />
|
||||||
|
</Route>
|
||||||
|
<EmojiOverview />
|
||||||
|
</Switch>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
177
web/source/settings/admin/emoji/overview.js
Normal file
177
web/source/settings/admin/emoji/overview.js
Normal file
|
|
@ -0,0 +1,177 @@
|
||||||
|
/*
|
||||||
|
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 Promise = require("bluebird");
|
||||||
|
const React = require("react");
|
||||||
|
const Redux = require("react-redux");
|
||||||
|
const {Link} = require("wouter");
|
||||||
|
const defaultValue = require('default-value');
|
||||||
|
|
||||||
|
const Submit = require("../../components/submit");
|
||||||
|
const FakeToot = require("../../components/fake-toot");
|
||||||
|
const { formFields } = require("../../components/form-fields");
|
||||||
|
|
||||||
|
const api = require("../../lib/api");
|
||||||
|
const adminActions = require("../../redux/reducers/admin").actions;
|
||||||
|
const submit = require("../../lib/submit");
|
||||||
|
|
||||||
|
const query = require("../../lib/query");
|
||||||
|
|
||||||
|
const base = "/settings/admin/custom-emoji";
|
||||||
|
|
||||||
|
module.exports = function EmojiOverview() {
|
||||||
|
const {
|
||||||
|
data: emoji,
|
||||||
|
isLoading,
|
||||||
|
error
|
||||||
|
} = query.useGetAllEmojiQuery({filter: "domain:local"});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h1>Custom Emoji</h1>
|
||||||
|
{error &&
|
||||||
|
<div className="error accent">{error}</div>
|
||||||
|
}
|
||||||
|
{isLoading
|
||||||
|
? "Loading..."
|
||||||
|
: <>
|
||||||
|
<EmojiList emoji={emoji}/>
|
||||||
|
<NewEmoji/>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
function EmojiList({emoji}) {
|
||||||
|
const byCategory = React.useMemo(() => {
|
||||||
|
const categories = {};
|
||||||
|
|
||||||
|
emoji.forEach((emoji) => {
|
||||||
|
let cat = defaultValue(emoji.category, "Unsorted");
|
||||||
|
categories[cat] = defaultValue(categories[cat], []);
|
||||||
|
categories[cat].push(emoji);
|
||||||
|
});
|
||||||
|
|
||||||
|
return categories;
|
||||||
|
}, [emoji]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>Overview</h2>
|
||||||
|
<div className="list emoji-list">
|
||||||
|
{emoji.length == 0 && "No local emoji yet"}
|
||||||
|
{Object.entries(byCategory).map(([category, entries]) => {
|
||||||
|
return <EmojiCategory key={category} category={category} entries={entries}/>;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function EmojiCategory({category, entries}) {
|
||||||
|
return (
|
||||||
|
<div className="entry">
|
||||||
|
<b>{category}</b>
|
||||||
|
<div className="emoji-group">
|
||||||
|
{entries.map((e) => {
|
||||||
|
return (
|
||||||
|
<Link key={e.id} to={`${base}/${e.id}`}>
|
||||||
|
{/* <Link key={e.static_url} to={`${base}`}> */}
|
||||||
|
<a>
|
||||||
|
<img src={e.url} alt={e.shortcode} title={`:${e.shortcode}:`}/>
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const NewEmojiForm = formFields(adminActions.updateNewEmojiVal, (state) => state.admin.newEmoji);
|
||||||
|
function NewEmoji() {
|
||||||
|
const dispatch = Redux.useDispatch();
|
||||||
|
const newEmojiForm = Redux.useSelector((state) => state.admin.newEmoji);
|
||||||
|
|
||||||
|
const [errorMsg, setError] = React.useState("");
|
||||||
|
const [statusMsg, setStatus] = React.useState("");
|
||||||
|
|
||||||
|
const uploadEmoji = submit(
|
||||||
|
() => dispatch(api.admin.newEmoji()),
|
||||||
|
{
|
||||||
|
setStatus, setError,
|
||||||
|
onSuccess: function() {
|
||||||
|
URL.revokeObjectURL(newEmojiForm.image);
|
||||||
|
return Promise.all([
|
||||||
|
dispatch(adminActions.updateNewEmojiVal(["image", undefined])),
|
||||||
|
dispatch(adminActions.updateNewEmojiVal(["imageFile", undefined])),
|
||||||
|
dispatch(adminActions.updateNewEmojiVal(["shortcode", ""])),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (newEmojiForm.shortcode.length == 0) {
|
||||||
|
if (newEmojiForm.imageFile != undefined) {
|
||||||
|
let [name, ext] = newEmojiForm.imageFile.name.split(".");
|
||||||
|
dispatch(adminActions.updateNewEmojiVal(["shortcode", name]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let emojiOrShortcode = `:${newEmojiForm.shortcode}:`;
|
||||||
|
|
||||||
|
if (newEmojiForm.image != undefined) {
|
||||||
|
emojiOrShortcode = <img
|
||||||
|
className="emoji"
|
||||||
|
src={newEmojiForm.image}
|
||||||
|
title={`:${newEmojiForm.shortcode}:`}
|
||||||
|
alt={newEmojiForm.shortcode}
|
||||||
|
/>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>Add new custom emoji</h2>
|
||||||
|
|
||||||
|
<FakeToot>
|
||||||
|
Look at this new custom emoji {emojiOrShortcode} isn't it cool?
|
||||||
|
</FakeToot>
|
||||||
|
|
||||||
|
<NewEmojiForm.File
|
||||||
|
id="image"
|
||||||
|
name="Image"
|
||||||
|
fileType="image/png,image/gif"
|
||||||
|
showSize={true}
|
||||||
|
maxSize={50 * 1000}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<NewEmojiForm.TextInput
|
||||||
|
id="shortcode"
|
||||||
|
name="Shortcode (without : :), must be unique on the instance"
|
||||||
|
placeHolder="blobcat"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Submit onClick={uploadEmoji} label="Upload" errorMsg={errorMsg} statusMsg={statusMsg} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -46,7 +46,7 @@ const nav = {
|
||||||
"Instance Settings": require("./admin/settings.js"),
|
"Instance Settings": require("./admin/settings.js"),
|
||||||
"Actions": require("./admin/actions"),
|
"Actions": require("./admin/actions"),
|
||||||
"Federation": require("./admin/federation.js"),
|
"Federation": require("./admin/federation.js"),
|
||||||
"Custom Emoji": require("./admin/emoji.js"),
|
"Custom Emoji": require("./admin/emoji"),
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -51,21 +51,7 @@ function apiCall(method, route, payload, type = "json") {
|
||||||
headers["Content-Type"] = "application/json";
|
headers["Content-Type"] = "application/json";
|
||||||
body = JSON.stringify(payload);
|
body = JSON.stringify(payload);
|
||||||
} else if (type == "form") {
|
} else if (type == "form") {
|
||||||
const formData = new FormData();
|
body = convertToForm(payload);
|
||||||
Object.entries(payload).forEach(([key, val]) => {
|
|
||||||
if (isPlainObject(val)) {
|
|
||||||
Object.entries(val).forEach(([key2, val2]) => {
|
|
||||||
if (val2 != undefined) {
|
|
||||||
formData.set(`${key}[${key2}]`, val2);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
if (val != undefined) {
|
|
||||||
formData.set(key, val);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
body = formData;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -100,6 +86,24 @@ function apiCall(method, route, payload, type = "json") {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function convertToForm(payload) {
|
||||||
|
const formData = new FormData();
|
||||||
|
Object.entries(payload).forEach(([key, val]) => {
|
||||||
|
if (isPlainObject(val)) {
|
||||||
|
Object.entries(val).forEach(([key2, val2]) => {
|
||||||
|
if (val2 != undefined) {
|
||||||
|
formData.set(`${key}[${key2}]`, val2);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
if (val != undefined) {
|
||||||
|
formData.set(key, val);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return formData;
|
||||||
|
}
|
||||||
|
|
||||||
function getChanges(state, keys) {
|
function getChanges(state, keys) {
|
||||||
const { formKeys = [], fileKeys = [], renamedKeys = {} } = keys;
|
const { formKeys = [], fileKeys = [], renamedKeys = {} } = keys;
|
||||||
const update = {};
|
const update = {};
|
||||||
|
|
@ -182,5 +186,6 @@ module.exports = {
|
||||||
user: require("./user")(submoduleArgs),
|
user: require("./user")(submoduleArgs),
|
||||||
admin: require("./admin")(submoduleArgs),
|
admin: require("./admin")(submoduleArgs),
|
||||||
apiCall,
|
apiCall,
|
||||||
|
convertToForm,
|
||||||
getChanges
|
getChanges
|
||||||
};
|
};
|
||||||
55
web/source/settings/lib/query/base.js
Normal file
55
web/source/settings/lib/query/base.js
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
/*
|
||||||
|
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 { createApi, fetchBaseQuery } = require("@reduxjs/toolkit/query/react");
|
||||||
|
|
||||||
|
const { convertToForm } = require("../api");
|
||||||
|
|
||||||
|
function instanceBasedQuery(args, api, extraOptions) {
|
||||||
|
const state = api.getState();
|
||||||
|
const {instance, token} = state.oauth;
|
||||||
|
|
||||||
|
if (args.baseUrl == undefined) {
|
||||||
|
args.baseUrl = instance;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (args.asForm) {
|
||||||
|
delete args.asForm;
|
||||||
|
args.body = convertToForm(args.body);
|
||||||
|
}
|
||||||
|
|
||||||
|
return fetchBaseQuery({
|
||||||
|
baseUrl: args.baseUrl,
|
||||||
|
prepareHeaders: (headers) => {
|
||||||
|
if (token != undefined) {
|
||||||
|
headers.set('Authorization', token);
|
||||||
|
}
|
||||||
|
headers.set("Accept", "application/json");
|
||||||
|
return headers;
|
||||||
|
},
|
||||||
|
})(args, api, extraOptions);
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = createApi({
|
||||||
|
reducerPath: "api",
|
||||||
|
baseQuery: instanceBasedQuery,
|
||||||
|
tagTypes: ["Emojis"],
|
||||||
|
endpoints: () => ({})
|
||||||
|
});
|
||||||
70
web/source/settings/lib/query/custom-emoji.js
Normal file
70
web/source/settings/lib/query/custom-emoji.js
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
/*
|
||||||
|
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 Promise = require("bluebird");
|
||||||
|
|
||||||
|
const base = require("./base");
|
||||||
|
const { getChanges } = require("../api");
|
||||||
|
|
||||||
|
const endpoints = (build) => ({
|
||||||
|
getAllEmoji: build.query({
|
||||||
|
query: (params = {}) => ({
|
||||||
|
url: "/api/v1/admin/custom_emojis",
|
||||||
|
params: {
|
||||||
|
limit: 0,
|
||||||
|
...params
|
||||||
|
},
|
||||||
|
providesTags: (res) =>
|
||||||
|
res
|
||||||
|
? [...res.map((id) => ({type: "Emojis", id})), {type: "Emojis", id: "LIST"}]
|
||||||
|
: [{type: "Emojis", id: "LIST"}]
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
getEmoji: build.query({
|
||||||
|
query: (id) => ({
|
||||||
|
url: `/api/v1/admin/custom_emojis/${id}`
|
||||||
|
}),
|
||||||
|
providesTags: (res, error, id) => [{type: "Emojis", id}]
|
||||||
|
}),
|
||||||
|
addEmoji: build.query({
|
||||||
|
query: (form) => {
|
||||||
|
const body = getChanges(form, {
|
||||||
|
formKeys: ["shortcode"],
|
||||||
|
fileKeys: ["image"]
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
method: "POST",
|
||||||
|
url: `/api/v1/admin/custom_emojis`,
|
||||||
|
asForm: true,
|
||||||
|
body
|
||||||
|
};
|
||||||
|
},
|
||||||
|
providesTags: (res, error, id) => [{type: "Emojis", id}]
|
||||||
|
}),
|
||||||
|
deleteEmoji: build.mutation({
|
||||||
|
query: (id) => ({
|
||||||
|
method: "DELETE",
|
||||||
|
url: `/api/v1/admin/custom_emojis/${id}`
|
||||||
|
}),
|
||||||
|
invalidatesTags: (res, error, id) => [{type: "Emojis", id}]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = base.injectEndpoints({endpoints});
|
||||||
24
web/source/settings/lib/query/index.js
Normal file
24
web/source/settings/lib/query/index.js
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
/*
|
||||||
|
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";
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
...require("./base"),
|
||||||
|
...require("./custom-emoji.js")
|
||||||
|
};
|
||||||
|
|
@ -18,18 +18,20 @@
|
||||||
|
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
const { createStore, combineReducers, applyMiddleware } = require("redux");
|
const { combineReducers } = require("redux");
|
||||||
const { persistStore, persistReducer } = require("redux-persist");
|
const { configureStore } = require("@reduxjs/toolkit");
|
||||||
const thunk = require("redux-thunk").default;
|
const {
|
||||||
const { composeWithDevTools } = require("redux-devtools-extension");
|
persistStore,
|
||||||
|
persistReducer,
|
||||||
|
FLUSH,
|
||||||
|
REHYDRATE,
|
||||||
|
PAUSE,
|
||||||
|
PERSIST,
|
||||||
|
PURGE,
|
||||||
|
REGISTER,
|
||||||
|
} = require("redux-persist");
|
||||||
|
|
||||||
const persistConfig = {
|
const query = require("../lib/query/base");
|
||||||
key: "gotosocial-settings",
|
|
||||||
storage: require("redux-persist/lib/storage").default,
|
|
||||||
stateReconciler: require("redux-persist/lib/stateReconciler/autoMergeLevel2").default,
|
|
||||||
whitelist: ["oauth"],
|
|
||||||
blacklist: ["temporary"]
|
|
||||||
};
|
|
||||||
|
|
||||||
const combinedReducers = combineReducers({
|
const combinedReducers = combineReducers({
|
||||||
oauth: require("./reducers/oauth").reducer,
|
oauth: require("./reducers/oauth").reducer,
|
||||||
|
|
@ -37,13 +39,27 @@ const combinedReducers = combineReducers({
|
||||||
temporary: require("./reducers/temporary").reducer,
|
temporary: require("./reducers/temporary").reducer,
|
||||||
user: require("./reducers/user").reducer,
|
user: require("./reducers/user").reducer,
|
||||||
admin: require("./reducers/admin").reducer,
|
admin: require("./reducers/admin").reducer,
|
||||||
|
[query.reducerPath]: query.reducer
|
||||||
});
|
});
|
||||||
|
|
||||||
const persistedReducer = persistReducer(persistConfig, combinedReducers);
|
const persistedReducer = persistReducer({
|
||||||
const composedEnhancer = composeWithDevTools(applyMiddleware(thunk));
|
key: "gotosocial-settings",
|
||||||
|
storage: require("redux-persist/lib/storage").default,
|
||||||
|
stateReconciler: require("redux-persist/lib/stateReconciler/autoMergeLevel2").default,
|
||||||
|
whitelist: ["oauth"],
|
||||||
|
}, combinedReducers);
|
||||||
|
|
||||||
|
const store = configureStore({
|
||||||
|
reducer: persistedReducer,
|
||||||
|
middleware: (getDefaultMiddleware) => {
|
||||||
|
return getDefaultMiddleware({
|
||||||
|
serializableCheck: {
|
||||||
|
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, "temporary/setScrollElement"]
|
||||||
|
}
|
||||||
|
}).concat(query.middleware);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// TODO: change to configureStore
|
|
||||||
const store = createStore(persistedReducer, composedEnhancer);
|
|
||||||
const persistor = persistStore(store);
|
const persistor = persistStore(store);
|
||||||
|
|
||||||
module.exports = { store, persistor };
|
module.exports = { store, persistor };
|
||||||
Loading…
Reference in a new issue