SuperSeriousBusiness/GoToSocial
1
1
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial synced 2025-06-05 21:59:39 +02:00
Code Issues Projects Releases Wiki Activity

[frogend] Settings refactor (#1318)

Browse Source 
* yakshave new form field structure

* fully refactor user profile settings form

* use rtk query api for profile settings

* refactor user post settings

* refactor password change form

* refactor admin settings

* FormWithData structure for user forms

* admin actions refactor

* whitespace

* fix user settings data prop

* remove superfluous logging

* cleanup old code

* refactor federation/suspend (overview, detail)

* mostly abstracted (emoji) checkbox list

* refactor parse-from-toot

* refactor custom-emoji, progress on federation bulk

* loading icon styling to prevent big spinny

* refactor federation import-export interface

* cleanup old files

* [chore] Update/add license headers for 2023

* redux fixes

* text-field exports

* appease the linter

* refactor authentication with RTK Query

* fix login/logout state transition weirdness

* fixes/cleanup

* small linter-related fixes

* add eslint license header check, fix existing files

* remove old code, clarify comment

* clarify suspend on subdomains

* collapse if/else

* fa-fw width info comment
This commit is contained in:
f0x52
2023-01-18 14:45:14 +01:00
committed by GitHub
parent 974ec80a20
commit 9b139b6320
69 changed files with 3129 additions and 2663 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
web/source/settings/admin/emoji/local/detail.js
View File

@@ -19,155 +19,128 @@
"use strict";
const React = require("react");
const { useRoute, Link, Redirect } = require("wouter");
const { CategorySelect } = require("../category-select");
const { useComboBoxInput, useFileInput } = require("../../../components/form");
const query = require("../../../lib/query");
const { useComboBoxInput, useFileInput, useValue } = require("../../../lib/form");
const { CategorySelect } = require("../category-select");
const useFormSubmit = require("../../../lib/form/submit");
const FakeToot = require("../../../components/fake-toot");
const FormWithData = require("../../../lib/form/form-with-data");
const Loading = require("../../../components/loading");
const { FileInput } = require("../../../components/form/inputs");
const MutationButton = require("../../../components/form/mutation-button");
const { Error } = require("../../../components/error");
const base = "/settings/custom-emoji/local";
module.exports = function EmojiDetailRoute() {
let [_match, params] = useRoute(`${base}/:emojiId`);
if (params?.emojiId == undefined) {
return <Redirect to={base}/>;
return <Redirect to={base} />;
} else {
return (
<div className="emoji-detail">
<Link to={base}><a>&lt; go back</a></Link>
<EmojiDetailData emojiId={params.emojiId}/>
<FormWithData dataQuery={query.useGetEmojiQuery} queryArg={params.emojiId} DataForm={EmojiDetailForm} />
</div>
);
}
};
function EmojiDetailData({emojiId}) {
const {currentData: emoji, isLoading, error} = query.useGetEmojiQuery(emojiId);
function EmojiDetailForm({ data: emoji }) {
const form = {
id: useValue("id", emoji.id),
category: useComboBoxInput("category", { defaultValue: emoji.category }),
image: useFileInput("image", {
withPreview: true,
maxSize: 50 * 1024 // TODO: get from instance api
})
};
if (error) {
return (
<div className="error accent">
{error.status}: {error.data.error}
</div>
);
} else if (isLoading) {
return (
<div>
<Loading/>
</div>
);
} else {
return <EmojiDetail emoji={emoji}/>;
}
}
function EmojiDetail({emoji}) {
const [modifyEmoji, modifyResult] = query.useEditEmojiMutation();
const [isNewCategory, setIsNewCategory] = React.useState(false);
const [categoryState, _resetCategory, { category }] = useComboBoxInput("category", {defaultValue: emoji.category});
const [onFileChange, _resetFile, { image, imageURL, imageInfo }] = useFileInput("image", {
withPreview: true,
maxSize: 50 * 1024
});
function modifyCategory() {
modifyEmoji({id: emoji.id, category: category.trim()});
}
function modifyImage() {
modifyEmoji({id: emoji.id, image: image});
}
const [modifyEmoji, result] = useFormSubmit(form, query.useEditEmojiMutation());
// Automatic submitting of category change
React.useEffect(() => {
if (category != emoji.category && !categoryState.open && !isNewCategory && category.trim().length > 0) {
console.log("updating to", category);
modifyEmoji({id: emoji.id, category: category.trim()});
if (
form.category.hasChanged() &&
!form.category.state.open &&
!form.category.isNew) {
modifyEmoji();
}
}, [isNewCategory, category, categoryState.open, emoji.category, emoji.id, modifyEmoji]);
/* eslint-disable-next-line react-hooks/exhaustive-deps */
}, [form.category.hasChanged(), form.category.isNew, form.category.state.open]);
const [deleteEmoji, deleteResult] = query.useDeleteEmojiMutation();
if (deleteResult.isSuccess) {
return <Redirect to={base} />;
}
return (
<>
<div className="emoji-header">
<img src={emoji.url} alt={emoji.shortcode} title={emoji.shortcode}/>
<img src={emoji.url} alt={emoji.shortcode} title={emoji.shortcode} />
<div>
<h2>{emoji.shortcode}</h2>
<DeleteButton id={emoji.id}/>
<MutationButton
label="Delete"
type="button"
onClick={() => deleteEmoji(emoji.id)}
className="danger"
showError={false}
result={deleteResult}
/>
</div>
</div>
<div className="left-border">
<h2>Modify this emoji {modifyResult.isLoading && "(processing..)"}</h2>
{modifyResult.error && <div className="error">
{modifyResult.error.status}: {modifyResult.error.data.error}
</div>}
<form onSubmit={modifyEmoji} className="left-border">
<h2>Modify this emoji {result.isLoading && <Loading />}</h2>
<div className="update-category">
<CategorySelect
value={category}
categoryState={categoryState}
setIsNew={setIsNewCategory}
field={form.category}
>
<button style={{visibility: (isNewCategory ? "initial" : "hidden")}} onClick={modifyCategory}>
Create
</button>
<MutationButton
name="create-category"
label="Create"
result={result}
showError={false}
style={{ visibility: (form.category.isNew ? "initial" : "hidden") }}
/>
</CategorySelect>
</div>
<div className="update-image">
<b>Image</b>
<div className="form-field file">
<label className="file-input button" htmlFor="image">
Browse
</label>
{imageInfo}
<input
className="hidden"
type="file"
id="image"
name="Image"
accept="image/png,image/gif"
onChange={onFileChange}
/>
</div>
<FileInput
field={form.image}
label="Image"
accept="image/png,image/gif"
/>
<button onClick={modifyImage} disabled={image == undefined}>Replace image</button>
<MutationButton
name="image"
label="Replace image"
showError={false}
result={result}
/>
<FakeToot>
Look at this new custom emoji <img
className="emoji"
src={imageURL ?? emoji.url}
src={form.image.previewURL ?? emoji.url}
title={`:${emoji.shortcode}:`}
alt={emoji.shortcode}
/> isn&apos;t it cool?
</FakeToot>
{result.error && <Error error={result.error} />}
{deleteResult.error && <Error error={deleteResult.error} />}
</div>
</div>
</form>
</>
);
}
function DeleteButton({id}) {
// TODO: confirmation dialog?
const [deleteEmoji, deleteResult] = query.useDeleteEmojiMutation();
let text = "Delete";
if (deleteResult.isLoading) {
text = "Deleting...";
}
if (deleteResult.isSuccess) {
return <Redirect to={base}/>;
}
return (
<button className="danger" onClick={() => deleteEmoji(id)} disabled={deleteResult.isLoading}>{text}</button>
);
}

16
web/source/settings/admin/emoji/local/index.js
View File

@@ -19,7 +19,7 @@
"use strict";
const React = require("react");
const {Switch, Route} = require("wouter");
const { Switch, Route } = require("wouter");
const EmojiOverview = require("./overview");
const EmojiDetail = require("./detail");
@@ -28,13 +28,11 @@ const base = "/settings/custom-emoji/local";
module.exports = function CustomEmoji() {
return (
<>
<Switch>
<Route path={`${base}/:emojiId`}>
<EmojiDetail />
</Route>
<EmojiOverview />
</Switch>
</>
<Switch>
<Route path={`${base}/:emojiId`}>
<EmojiDetail baseUrl={base} />
</Route>
<EmojiOverview baseUrl={base} />
</Switch>
);
};

152
web/source/settings/admin/emoji/local/new-emoji.js
View File

@@ -18,101 +18,61 @@
"use strict";
const Promise = require('bluebird');
const React = require("react");
const FakeToot = require("../../../components/fake-toot");
const MutateButton = require("../../../components/mutation-button");
const query = require("../../../lib/query");
const {
useTextInput,
useFileInput,
useComboBoxInput
} = require("../../../components/form");
} = require("../../../lib/form");
const useShortcode = require("./use-shortcode");
const useFormSubmit = require("../../../lib/form/submit");
const {
TextInput, FileInput
} = require("../../../components/form/inputs");
const query = require("../../../lib/query");
const { CategorySelect } = require('../category-select');
const FakeToot = require("../../../components/fake-toot");
const MutationButton = require("../../../components/form/mutation-button");
const shortcodeRegex = /^[a-z0-9_]+$/;
module.exports = function NewEmojiForm() {
const shortcode = useShortcode();
module.exports = function NewEmojiForm({ emoji }) {
const emojiCodes = React.useMemo(() => {
return new Set(emoji.map((e) => e.shortcode));
}, [emoji]);
const [addEmoji, result] = query.useAddEmojiMutation();
const [onFileChange, resetFile, { image, imageURL, imageInfo }] = useFileInput("image", {
const image = useFileInput("image", {
withPreview: true,
maxSize: 50 * 1024
maxSize: 50 * 1024 // TODO: get from instance api?
});
const [onShortcodeChange, resetShortcode, { shortcode, setShortcode, shortcodeRef }] = useTextInput("shortcode", {
validator: function validateShortcode(code) {
// technically invalid, but hacky fix to prevent validation error on page load
if (shortcode == "") {return "";}
const category = useComboBoxInput("category");
if (emojiCodes.has(code)) {
return "Shortcode already in use";
}
if (code.length < 2 || code.length > 30) {
return "Shortcode must be between 2 and 30 characters";
}
if (code.toLowerCase() != code) {
return "Shortcode must be lowercase";
}
if (!shortcodeRegex.test(code)) {
return "Shortcode must only contain lowercase letters, numbers, and underscores";
}
return "";
}
});
const [categoryState, resetCategory, { category }] = useComboBoxInput("category");
const [submitForm, result] = useFormSubmit({
shortcode, image, category
}, query.useAddEmojiMutation());
React.useEffect(() => {
if (shortcode.length == 0) {
if (image != undefined) {
let [name, _ext] = image.name.split(".");
setShortcode(name);
if (shortcode.value.length == 0) {
if (image.value != undefined) {
let [name, _ext] = image.value.name.split(".");
shortcode.setter(name);
}
}
// we explicitly don't want to add 'shortcode' as a dependency here
// because we only want this to update to the filename if the field is empty
// at the moment the file is selected, not some time after when the field is emptied
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [image]);
function uploadEmoji(e) {
if (e) {
e.preventDefault();
}
/* We explicitly don't want to have 'shortcode' as a dependency here
because we only want to change the shortcode to the filename if the field is empty
at the moment the file is selected, not some time after when the field is emptied
*/
/* eslint-disable-next-line react-hooks/exhaustive-deps */
}, [image.value]);
Promise.try(() => {
return addEmoji({
image,
shortcode,
category
}).unwrap();
}).then(() => {
resetFile();
resetShortcode();
resetCategory();
}).catch((e) => {
console.error("Emoji upload error:", e);
});
}
let emojiOrShortcode = `:${shortcode.value}:`;
let emojiOrShortcode = `:${shortcode}:`;
if (imageURL != undefined) {
if (image.previewValue != undefined) {
emojiOrShortcode = <img
className="emoji"
src={imageURL}
src={image.previewValue}
title={`:${shortcode}:`}
alt={shortcode}
/>;
@@ -126,42 +86,22 @@ module.exports = function NewEmojiForm({ emoji }) {
Look at this new custom emoji {emojiOrShortcode} isn&apos;t it cool?
</FakeToot>
<form onSubmit={uploadEmoji} className="form-flex">
<div className="form-field file">
<label className="file-input button" htmlFor="image">
Browse
</label>
{imageInfo}
<input
className="hidden"
type="file"
id="image"
name="Image"
accept="image/png,image/gif"
onChange={onFileChange}
/>
</div>
<div className="form-field text">
<label htmlFor="shortcode">
Shortcode, must be unique among the instance's local emoji
</label>
<input
type="text"
id="shortcode"
name="Shortcode"
ref={shortcodeRef}
onChange={onShortcodeChange}
value={shortcode}
/>
</div>
<CategorySelect
value={category}
categoryState={categoryState}
<form onSubmit={submitForm} className="form-flex">
<FileInput
field={image}
accept="image/png,image/gif"
/>
<MutateButton text="Upload emoji" result={result} />
<TextInput
field={shortcode}
label="Shortcode, must be unique among the instance's local emoji"
/>
<CategorySelect
field={category}
/>
<MutationButton label="Upload emoji" result={result} />
</form>
</div>
);

51
web/source/settings/admin/emoji/local/overview.js
View File

@@ -1,25 +1,25 @@
/*
GoToSocial
Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
GoToSocial
Copyright (C) 2021-2023 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 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.
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/>.
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");
const { Link } = require("wouter");
const NewEmojiForm = require("./new-emoji");
@@ -27,33 +27,31 @@ const query = require("../../../lib/query");
const { useEmojiByCategory } = require("../category-select");
const Loading = require("../../../components/loading");
const base = "/settings/custom-emoji/local";
module.exports = function EmojiOverview() {
module.exports = function EmojiOverview({ baseUrl }) {
const {
data: emoji = [],
isLoading,
error
} = query.useGetAllEmojiQuery({filter: "domain:local"});
} = query.useGetAllEmojiQuery({ filter: "domain:local" });
return (
<>
<h1>Custom Emoji (local)</h1>
{error &&
{error &&
<div className="error accent">{error}</div>
}
{isLoading
? <Loading/>
? <Loading />
: <>
<EmojiList emoji={emoji}/>
<NewEmojiForm emoji={emoji}/>
<EmojiList emoji={emoji} baseUrl={baseUrl} />
<NewEmojiForm emoji={emoji} />
</>
}
</>
);
};
function EmojiList({emoji}) {
function EmojiList({ emoji, baseUrl }) {
const emojiByCategory = useEmojiByCategory(emoji);
return (
@@ -62,24 +60,23 @@ function EmojiList({emoji}) {
<div className="list emoji-list">
{emoji.length == 0 && "No local emoji yet, add one below"}
{Object.entries(emojiByCategory).map(([category, entries]) => {
return <EmojiCategory key={category} category={category} entries={entries}/>;
return <EmojiCategory key={category} category={category} entries={entries} baseUrl={baseUrl} />;
})}
</div>
</div>
);
}
function EmojiCategory({category, entries}) {
function EmojiCategory({ category, entries, baseUrl }) {
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}`}> */}
<Link key={e.id} to={`${baseUrl}/${e.id}`}>
<a>
<img src={e.url} alt={e.shortcode} title={`:${e.shortcode}:`}/>
<img src={e.url} alt={e.shortcode} title={`:${e.shortcode}:`} />
</a>
</Link>
);

61
web/source/settings/admin/emoji/local/use-shortcode.js Normal file
View File

@@ -0,0 +1,61 @@
/*
GoToSocial
Copyright (C) 2021-2023 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 query = require("../../../lib/query");
const { useTextInput } = require("../../../lib/form");
const shortcodeRegex = /^[a-z0-9_]+$/;
module.exports = function useShortcode() {
const {
data: emoji = []
} = query.useGetAllEmojiQuery({ filter: "domain:local" });
const emojiCodes = React.useMemo(() => {
return new Set(emoji.map((e) => e.shortcode));
}, [emoji]);
return useTextInput("shortcode", {
validator: function validateShortcode(code) {
// technically invalid, but hacky fix to prevent validation error on page load
if (code == "") { return ""; }
if (emojiCodes.has(code)) {
return "Shortcode already in use";
}
if (code.length < 2 || code.length > 30) {
return "Shortcode must be between 2 and 30 characters";
}
if (code.toLowerCase() != code) {
return "Shortcode must be lowercase";
}
if (!shortcodeRegex.test(code)) {
return "Shortcode must only contain lowercase letters, numbers, and underscores";
}
return "";
}
});
};