[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:
f0x52
2022-11-08 17:51:44 +01:00
committed by GitHub
parent be011b1641
commit eb25739c34
32 changed files with 1467 additions and 506 deletions

View File

@@ -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;
};

View File

@@ -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
};

View File

@@ -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");

View File

@@ -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>
);
}
};

View 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: () => ({})
});

View 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});

View 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")
};