qugalet/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-01-07 15:10:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

basic emoji details + deletion using rtk query

Browse source
This commit is contained in:
f0x 2022-11-02 21:18:49 +00:00
parent b19257cf90
commit bcaf1e95f1
10 changed files with 507 additions and 260 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

229
web/source/settings/admin/emoji.js
View file

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

89
web/source/settings/admin/emoji/detail.js Normal file
View 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&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>
);
}
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
View 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
View 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&apos;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>
);
}

2
web/source/settings/index.js
View file

@ -46,7 +46,7 @@ const nav = {
"Instance Settings": require("./admin/settings.js"),
"Actions": require("./admin/actions"),
"Federation": require("./admin/federation.js"),
"Custom Emoji": require("./admin/emoji.js"),
"Custom Emoji": require("./admin/emoji"),
}
};

35
web/source/settings/lib/api/index.js
View file

@ -51,21 +51,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 +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) {
const { formKeys = [], fileKeys = [], renamedKeys = {} } = keys;
const update = {};
@ -182,5 +186,6 @@ module.exports = {
user: require("./user")(submoduleArgs),
admin: require("./admin")(submoduleArgs),
apiCall,
convertToForm,
getChanges
};

55
web/source/settings/lib/query/base.js Normal file
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: () => ({})
});

70
web/source/settings/lib/query/custom-emoji.js Normal file
View 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
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")
};

46
web/source/settings/redux/index.js
View file

@ -18,18 +18,20 @@
"use strict";
const { createStore, combineReducers, applyMiddleware } = require("redux");
const { persistStore, persistReducer } = require("redux-persist");
const thunk = require("redux-thunk").default;
const { composeWithDevTools } = require("redux-devtools-extension");
const { combineReducers } = require("redux");
const { configureStore } = require("@reduxjs/toolkit");
const {
persistStore,
persistReducer,
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
} = require("redux-persist");
const persistConfig = {
key: "gotosocial-settings",
storage: require("redux-persist/lib/storage").default,
stateReconciler: require("redux-persist/lib/stateReconciler/autoMergeLevel2").default,
whitelist: ["oauth"],
blacklist: ["temporary"]
};
const query = require("../lib/query/base");
const combinedReducers = combineReducers({
oauth: require("./reducers/oauth").reducer,
@ -37,13 +39,27 @@ const combinedReducers = combineReducers({
temporary: require("./reducers/temporary").reducer,
user: require("./reducers/user").reducer,
admin: require("./reducers/admin").reducer,
[query.reducerPath]: query.reducer
});
const persistedReducer = persistReducer(persistConfig, combinedReducers);
const composedEnhancer = composeWithDevTools(applyMiddleware(thunk));
const persistedReducer = persistReducer({
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);
module.exports = { store, persistor };