fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-23 23:11:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Admin Settings: Bugfixes (#1313)

Browse source 
* move loading state to AdminSettings, pass as prop, tweak margin on some labels, add missing bind

* default loading state to false on setup.tsx, add util

* rename util to make more sense

* make @dessalines suggested changes
This commit is contained in:
Alec Armbruster 2023-06-16 11:52:47 -04:00 committed by GitHub
parent 48ced9bd34
commit 80e2c9602e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 63 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/shared/components/home/admin-settings.tsx
View file

@ -39,6 +39,8 @@ interface AdminSettingsState {
instancesRes: RequestState<GetFederatedInstancesResponse>;
bannedRes: RequestState<BannedPersonsResponse>;
leaveAdminTeamRes: RequestState<GetSiteResponse>;
emojiLoading: boolean;
loading: boolean;
themeList: string[];
isIsomorphic: boolean;
}
@ -52,6 +54,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
bannedRes: { state: "empty" },
instancesRes: { state: "empty" },
leaveAdminTeamRes: { state: "empty" },
emojiLoading: false,
loading: false,
themeList: [],
isIsomorphic: false,
};
@ -81,6 +85,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
bannedRes: { state: "loading" },
instancesRes: { state: "loading" },
themeList: [],
loading: true,
});
const auth = myAuthRequired();
@ -95,6 +100,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
bannedRes,
instancesRes,
themeList,
loading: false,
});
}
@ -156,6 +162,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
onSaveSite={this.handleEditSite}
siteRes={this.state.siteRes}
themeList={this.state.themeList}
loading={this.state.loading}
/>
</div>
<div className="col-12 col-md-6">
@ -174,6 +181,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
this.state.siteRes.site_view.local_site_rate_limit
}
onSaveSite={this.handleEditSite}
loading={this.state.loading}
/>
),
},
@ -185,6 +193,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
<TaglineForm
taglines={this.state.siteRes.taglines}
onSaveSite={this.handleEditSite}
loading={this.state.loading}
/>
</div>
),
@ -198,6 +207,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
onCreate={this.handleCreateEmoji}
onDelete={this.handleDeleteEmoji}
onEdit={this.handleEditEmoji}
loading={this.state.emojiLoading}
/>
</div>
),
@ -266,6 +276,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
}
async handleEditSite(form: EditSite) {
this.setState({ loading: true });
const editRes = await HttpService.client.editSite(form);
if (editRes.state === "success") {
@ -278,6 +290,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
toast(i18n.t("site_saved"));
}
this.setState({ loading: false });
return editRes;
}
@ -300,23 +314,35 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
}
async handleEditEmoji(form: EditCustomEmoji) {
this.setState({ emojiLoading: true });
const res = await HttpService.client.editCustomEmoji(form);
if (res.state === "success") {
updateEmojiDataModel(res.data.custom_emoji);
}
this.setState({ emojiLoading: false });
}
async handleDeleteEmoji(form: DeleteCustomEmoji) {
this.setState({ emojiLoading: true });
const res = await HttpService.client.deleteCustomEmoji(form);
if (res.state === "success") {
removeFromEmojiDataModel(res.data.id);
}
this.setState({ emojiLoading: false });
}
async handleCreateEmoji(form: CreateCustomEmoji) {
this.setState({ emojiLoading: true });
const res = await HttpService.client.createCustomEmoji(form);
if (res.state === "success") {
updateEmojiDataModel(res.data.custom_emoji);
}
this.setState({ emojiLoading: false });
}
}

7
src/shared/components/home/emojis-form.tsx
View file

@ -23,12 +23,12 @@ interface EmojiFormProps {
onEdit(form: EditCustomEmoji): void;
onCreate(form: CreateCustomEmoji): void;
onDelete(form: DeleteCustomEmoji): void;
loading: boolean;
}
interface EmojiFormState {
siteRes: GetSiteResponse;
customEmojis: CustomEmojiViewForm[];
loading: boolean;
page: number;
}
@ -47,7 +47,6 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
private isoData = setIsoData(this.context);
private itemsPerPage = 15;
private emptyState: EmojiFormState = {
loading: false,
siteRes: this.isoData.site_res,
customEmojis: this.isoData.site_res.custom_emojis.map((x, index) => ({
id: x.custom_emoji.id,
@ -223,7 +222,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
data-tippy-content={i18n.t("save")}
aria-label={i18n.t("save")}
disabled={
this.state.loading ||
this.props.loading ||
!this.canEdit(cv) ||
!cv.changed
}
@ -243,7 +242,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
)}
data-tippy-content={i18n.t("delete")}
aria-label={i18n.t("delete")}
disabled={this.state.loading}
disabled={this.props.loading}
title={i18n.t("delete")}
>
<Icon

8
src/shared/components/home/rate-limit-form.tsx
View file

@ -24,6 +24,7 @@ interface RateLimitsProps {
interface RateLimitFormProps {
rateLimits: LocalSiteRateLimit;
onSaveSite(form: EditSite): void;
loading: boolean;
}
interface RateLimitFormState {
@ -41,7 +42,6 @@ interface RateLimitFormState {
register?: number;
register_per_second?: number;
};
loading: boolean;
}
function RateLimits({
@ -117,7 +117,6 @@ function submitRateLimitForm(i: RateLimitsForm, event: any) {
}
);
i.setState({ loading: true });
i.props.onSaveSite(form);
}
@ -126,7 +125,6 @@ export default class RateLimitsForm extends Component<
RateLimitFormState
> {
state: RateLimitFormState = {
loading: false,
form: this.props.rateLimits,
};
constructor(props: RateLimitFormProps, context: any) {
@ -164,9 +162,9 @@ export default class RateLimitsForm extends Component<
<button
type="submit"
className="btn btn-secondary mr-2"
disabled={this.state.loading}
disabled={this.props.loading}
>
{this.state.loading ? (
{this.props.loading ? (
<Spinner />
) : (
capitalizeFirstLetter(i18n.t("save"))

1
src/shared/components/home/setup.tsx
View file

@ -73,6 +73,7 @@ export class Setup extends Component<any, State> {
onSaveSite={this.handleCreateSite}
siteRes={this.state.siteRes}
themeList={this.state.themeList}
loading={false}
/>
)}
</div>

38
src/shared/components/home/site-form.tsx
View file

@ -12,7 +12,11 @@ import {
ListingType,
} from "lemmy-js-client";
import { i18n } from "../../i18next";
import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
import {
capitalizeFirstLetter,
myAuthRequired,
validInstanceTLD,
} from "../../utils";
import { Icon, Spinner } from "../common/icon";
import { ImageUploadForm } from "../common/image-upload-form";
import { LanguageSelect } from "../common/language-select";
@ -27,11 +31,11 @@ interface SiteFormProps {
themeList?: string[];
onSaveSite(form: EditSite): void;
siteRes: GetSiteResponse;
loading: boolean;
}
interface SiteFormState {
siteForm: EditSite;
loading: boolean;
instance_select: {
allowed_instances: string;
blocked_instances: string;
@ -44,7 +48,6 @@ type InstanceKey = "allowed_instances" | "blocked_instances";
export class SiteForm extends Component<SiteFormProps, SiteFormState> {
state: SiteFormState = {
siteForm: this.initSiteForm(),
loading: false,
instance_select: {
allowed_instances: "",
blocked_instances: "",
@ -107,23 +110,21 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
this.handleDiscussionLanguageChange =
this.handleDiscussionLanguageChange.bind(this);
this.handleAddInstance = this.handleAddInstance.bind(this);
this.handleRemoveInstance = this.handleRemoveInstance.bind(this);
this.handleInstanceEnterPress = this.handleInstanceEnterPress.bind(this);
this.handleInstanceTextChange = this.handleInstanceTextChange.bind(this);
}
// Necessary to stop the loading
componentWillReceiveProps() {
this.setState({ loading: false });
}
render() {
const siteSetup = this.props.siteRes.site_view.local_site.site_setup;
return (
<form onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}>
<NavigationPrompt
when={
!this.state.loading &&
!this.props.loading &&
!siteSetup &&
!!(
this.state.siteForm.name ||
@ -136,8 +137,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
/>
<h5>{`${
siteSetup
? capitalizeFirstLetter(i18n.t("save"))
: capitalizeFirstLetter(i18n.t("name"))
? capitalizeFirstLetter(i18n.t("edit"))
: capitalizeFirstLetter(i18n.t("setup"))
} ${i18n.t("your_site")}`}</h5>
<div className="form-group row">
<label className="col-12 col-form-label" htmlFor="create-site-name">
@ -157,7 +158,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
</div>
</div>
<div className="form-group">
<label>{i18n.t("icon")}</label>
<label className="mr-2">{i18n.t("icon")}</label>
<ImageUploadForm
uploadTitle={i18n.t("upload_icon")}
imageSrc={this.state.siteForm.icon}
@ -167,7 +168,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
/>
</div>
<div className="form-group">
<label>{i18n.t("banner")}</label>
<label className="mr-2">{i18n.t("banner")}</label>
<ImageUploadForm
uploadTitle={i18n.t("upload_banner")}
imageSrc={this.state.siteForm.banner}
@ -609,9 +610,9 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
<button
type="submit"
className="btn btn-secondary mr-2"
disabled={this.state.loading}
disabled={this.props.loading}
>
{this.state.loading ? (
{this.props.loading ? (
<Spinner />
) : siteSetup ? (
capitalizeFirstLetter(i18n.t("save"))
@ -717,7 +718,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
event.preventDefault();
const auth = myAuthRequired();
i.setState(s => ((s.siteForm.auth = auth), s));
i.setState({ loading: true, submitted: true });
i.setState({ submitted: true });
const stateSiteForm = i.state.siteForm;
@ -780,6 +781,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
handleAddInstance(key: InstanceKey) {
const instance = this.state.instance_select[key].trim();
if (!validInstanceTLD(instance)) {
return;
}
if (!this.state.siteForm[key]?.includes(instance)) {
this.setState(s => ({
...s,

12
src/shared/components/home/tagline-form.tsx
View file

@ -9,17 +9,16 @@ import { MarkdownTextArea } from "../common/markdown-textarea";
interface TaglineFormProps {
taglines: Array<Tagline>;
onSaveSite(form: EditSite): void;
loading: boolean;
}
interface TaglineFormState {
taglines: Array<string>;
loading: boolean;
editingRow?: number;
}
export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
state: TaglineFormState = {
loading: false,
editingRow: undefined,
taglines: this.props.taglines.map(x => x.content),
};
@ -30,10 +29,6 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
return i18n.t("taglines");
}
componentWillReceiveProps() {
this.setState({ loading: false });
}
render() {
return (
<div className="col-12">
@ -110,9 +105,9 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
<button
onClick={linkEvent(this, this.handleSaveClick)}
className="btn btn-secondary mr-2"
disabled={this.state.loading}
disabled={this.props.loading}
>
{this.state.loading ? (
{this.props.loading ? (
<Spinner />
) : (
capitalizeFirstLetter(i18n.t("save"))
@ -153,7 +148,6 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
}
async handleSaveClick(i: TaglineForm) {
i.setState({ loading: true });
i.props.onSaveSite({
taglines: i.state.taglines,
auth: myAuthRequired(),

5
src/shared/utils.ts
View file

@ -316,6 +316,7 @@ export function amTopMod(
const imageRegex = /(http)?s?:?(\/\/[^"']*\.(?:jpg|jpeg|gif|png|svg|webp))/;
const videoRegex = /(http)?s?:?(\/\/[^"']*\.(?:mp4|webm))/;
const tldRegex = /([a-z0-9]+\.)*[a-z0-9]+\.[a-z]+/;
export function isImage(url: string) {
return imageRegex.test(url);
@ -329,6 +330,10 @@ export function validURL(str: string) {
return !!new URL(str);
}
export function validInstanceTLD(str: string) {
return tldRegex.test(str);
}
export function communityRSSUrl(actorId: string, sort: string): string {
const url = new URL(actorId);
return `${url.origin}/feeds${url.pathname}.xml?sort=${sort}`;