mirror of
https://github.com/superseriousbusiness/gotosocial
synced 2025-06-05 21:59:39 +02:00
[frontend] Custom Emoji Deletion (#994)
* re-add eslint * fix oauth url getting too long * actually attach single emoji get and delete routes * basic emoji details + deletion using rtk query * refactor emoji upload to rtk query * clean up old redux api+reducers for custom emoji * fix validation order * refactor custom emoji form fields * remove unused requires * cleanup, fix most eslint errors * more small eslint fixes * fix max emoji size * tiny bit of function documentation
This commit is contained in:
@@ -160,33 +160,6 @@ module.exports = function ({ apiCall, getChanges }) {
|
||||
});
|
||||
};
|
||||
},
|
||||
|
||||
fetchCustomEmoji: function fetchCustomEmoji() {
|
||||
return function (dispatch, _getState) {
|
||||
return Promise.try(() => {
|
||||
return dispatch(apiCall("GET", "/api/v1/admin/custom_emojis?filter=domain:local&limit=0"));
|
||||
}).then((emoji) => {
|
||||
return dispatch(admin.setEmoji(emoji));
|
||||
});
|
||||
};
|
||||
},
|
||||
|
||||
newEmoji: function newEmoji() {
|
||||
return function (dispatch, getState) {
|
||||
return Promise.try(() => {
|
||||
const state = getState().admin.newEmoji;
|
||||
|
||||
const update = getChanges(state, {
|
||||
formKeys: ["shortcode"],
|
||||
fileKeys: ["image"]
|
||||
});
|
||||
|
||||
return dispatch(apiCall("POST", "/api/v1/admin/custom_emojis", update, "form"));
|
||||
}).then((emoji) => {
|
||||
return dispatch(admin.addEmoji(emoji));
|
||||
});
|
||||
};
|
||||
}
|
||||
};
|
||||
return adminAPI;
|
||||
};
|
@@ -24,14 +24,12 @@ const d = require("dotty");
|
||||
|
||||
const { APIError, AuthenticationError } = require("../errors");
|
||||
const { setInstanceInfo, setNamedInstanceInfo } = require("../../redux/reducers/instances").actions;
|
||||
const oauth = require("../../redux/reducers/oauth").actions;
|
||||
|
||||
function apiCall(method, route, payload, type = "json") {
|
||||
return function (dispatch, getState) {
|
||||
const state = getState();
|
||||
let base = state.oauth.instance;
|
||||
let auth = state.oauth.token;
|
||||
console.log(method, base, route, "auth:", auth != undefined);
|
||||
|
||||
return Promise.try(() => {
|
||||
let url = new URL(base);
|
||||
@@ -51,21 +49,7 @@ function apiCall(method, route, payload, type = "json") {
|
||||
headers["Content-Type"] = "application/json";
|
||||
body = JSON.stringify(payload);
|
||||
} else if (type == "form") {
|
||||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
body = formData;
|
||||
body = convertToForm(payload);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -100,6 +84,28 @@ function apiCall(method, route, payload, type = "json") {
|
||||
};
|
||||
}
|
||||
|
||||
/*
|
||||
Takes an object with (nested) keys, and transforms it into
|
||||
a FormData object to be sent over the API
|
||||
*/
|
||||
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) {
|
||||
const { formKeys = [], fileKeys = [], renamedKeys = {} } = keys;
|
||||
const update = {};
|
||||
@@ -129,7 +135,8 @@ function getChanges(state, keys) {
|
||||
}
|
||||
|
||||
function getCurrentUrl() {
|
||||
return `${window.location.origin}${window.location.pathname}`;
|
||||
let [pre, _past] = window.location.pathname.split("/settings");
|
||||
return `${window.location.origin}${pre}/settings`;
|
||||
}
|
||||
|
||||
function fetchInstanceWithoutStore(domain) {
|
||||
@@ -181,5 +188,6 @@ module.exports = {
|
||||
user: require("./user")(submoduleArgs),
|
||||
admin: require("./admin")(submoduleArgs),
|
||||
apiCall,
|
||||
convertToForm,
|
||||
getChanges
|
||||
};
|
@@ -19,8 +19,7 @@
|
||||
"use strict";
|
||||
|
||||
const React = require("react");
|
||||
const Redux = require("react-redux");
|
||||
const { Link, Route, Switch, Redirect } = require("wouter");
|
||||
const { Link, Route, Redirect } = require("wouter");
|
||||
const { ErrorBoundary } = require("react-error-boundary");
|
||||
|
||||
const ErrorFallback = require("../components/error");
|
||||
|
@@ -1,134 +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 ReactDom = require("react-dom");
|
||||
|
||||
const oauthLib = require("./oauth");
|
||||
|
||||
module.exports = function createPanel(clientName, scope, Component) {
|
||||
ReactDom.render(<Panel/>, document.getElementById("root"));
|
||||
|
||||
function Panel() {
|
||||
const [oauth, setOauth] = React.useState();
|
||||
const [hasAuth, setAuth] = React.useState(false);
|
||||
const [oauthState, setOauthState] = React.useState(localStorage.getItem("oauth"));
|
||||
|
||||
React.useEffect(() => {
|
||||
let state = localStorage.getItem("oauth");
|
||||
if (state != undefined) {
|
||||
state = JSON.parse(state);
|
||||
let restoredOauth = oauthLib(state.config, state);
|
||||
Promise.try(() => {
|
||||
return restoredOauth.callback();
|
||||
}).then(() => {
|
||||
setAuth(true);
|
||||
});
|
||||
setOauth(restoredOauth);
|
||||
}
|
||||
}, [setAuth, setOauth]);
|
||||
|
||||
if (!hasAuth && oauth && oauth.isAuthorized()) {
|
||||
setAuth(true);
|
||||
}
|
||||
|
||||
if (oauth && oauth.isAuthorized()) {
|
||||
return <Component oauth={oauth} />;
|
||||
} else if (oauthState != undefined) {
|
||||
return "processing oauth...";
|
||||
} else {
|
||||
return <Auth setOauth={setOauth} />;
|
||||
}
|
||||
}
|
||||
|
||||
function Auth({setOauth}) {
|
||||
const [ instance, setInstance ] = React.useState("");
|
||||
|
||||
React.useEffect(() => {
|
||||
let isStillMounted = true;
|
||||
// check if current domain runs an instance
|
||||
let thisUrl = new URL(window.location.origin);
|
||||
thisUrl.pathname = "/api/v1/instance";
|
||||
Promise.try(() => {
|
||||
return fetch(thisUrl.href);
|
||||
}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
return res.json();
|
||||
}
|
||||
}).then((json) => {
|
||||
if (json && json.uri && isStillMounted) {
|
||||
setInstance(json.uri);
|
||||
}
|
||||
}).catch((e) => {
|
||||
console.log("error checking instance response:", e);
|
||||
});
|
||||
|
||||
return () => {
|
||||
// cleanup function
|
||||
isStillMounted = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
function doAuth() {
|
||||
return Promise.try(() => {
|
||||
return new URL(instance);
|
||||
}).catch(TypeError, () => {
|
||||
return new URL(`https://${instance}`);
|
||||
}).then((parsedURL) => {
|
||||
let url = parsedURL.toString();
|
||||
let oauth = oauthLib({
|
||||
instance: url,
|
||||
client_name: clientName,
|
||||
scope: scope,
|
||||
website: window.location.href
|
||||
});
|
||||
setOauth(oauth);
|
||||
setInstance(url);
|
||||
return oauth.register().then(() => {
|
||||
return oauth;
|
||||
});
|
||||
}).then((oauth) => {
|
||||
return oauth.authorize();
|
||||
}).catch((e) => {
|
||||
console.log("error authenticating:", e);
|
||||
});
|
||||
}
|
||||
|
||||
function updateInstance(e) {
|
||||
if (e.key == "Enter") {
|
||||
doAuth();
|
||||
} else {
|
||||
setInstance(e.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="login">
|
||||
<h1>OAUTH Login:</h1>
|
||||
<form onSubmit={(e) => e.preventDefault()}>
|
||||
<label htmlFor="instance">Instance: </label>
|
||||
<input value={instance} onChange={updateInstance} id="instance"/>
|
||||
<button onClick={doAuth}>Authenticate</button>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
};
|
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: () => ({})
|
||||
});
|
66
web/source/settings/lib/query/custom-emoji.js
Normal file
66
web/source/settings/lib/query/custom-emoji.js
Normal file
@@ -0,0 +1,66 @@
|
||||
/*
|
||||
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 base = require("./base");
|
||||
|
||||
const endpoints = (build) => ({
|
||||
getAllEmoji: build.query({
|
||||
query: (params = {}) => ({
|
||||
url: "/api/v1/admin/custom_emojis",
|
||||
params: {
|
||||
limit: 0,
|
||||
...params
|
||||
}
|
||||
}),
|
||||
providesTags: (res) =>
|
||||
res
|
||||
? [...res.map((emoji) => ({type: "Emojis", id: emoji.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.mutation({
|
||||
query: (form) => {
|
||||
return {
|
||||
method: "POST",
|
||||
url: `/api/v1/admin/custom_emojis`,
|
||||
asForm: true,
|
||||
body: form
|
||||
};
|
||||
},
|
||||
invalidatesTags: (res) =>
|
||||
res
|
||||
? [{type: "Emojis", id: "LIST"}, {type: "Emojis", id: res.id}]
|
||||
: [{type: "Emojis", id: "LIST"}]
|
||||
}),
|
||||
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")
|
||||
};
|
Reference in New Issue
Block a user