Fixing up tagline and ratelimit forms.
This commit is contained in:
parent
27bb9c3d6c
commit
d9553571ff
3 changed files with 56 additions and 111 deletions
|
@ -163,14 +163,24 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
{
|
{
|
||||||
key: "rate_limiting",
|
key: "rate_limiting",
|
||||||
label: "Rate Limiting",
|
label: "Rate Limiting",
|
||||||
getNode: () => <RateLimitForm onSaveSite={this.handleEditSite} />,
|
getNode: () => (
|
||||||
|
<RateLimitForm
|
||||||
|
rateLimits={
|
||||||
|
this.state.siteRes.site_view.local_site_rate_limit
|
||||||
|
}
|
||||||
|
onSaveSite={this.handleEditSite}
|
||||||
|
/>
|
||||||
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "taglines",
|
key: "taglines",
|
||||||
label: i18n.t("taglines"),
|
label: i18n.t("taglines"),
|
||||||
getNode: () => (
|
getNode: () => (
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<TaglineForm onSaveSite={this.handleEditSite} />
|
<TaglineForm
|
||||||
|
taglines={this.state.siteRes.taglines}
|
||||||
|
onSaveSite={this.handleEditSite}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
@ -254,6 +264,11 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
const editRes = await apiWrapper(HttpService.client.editSite(form));
|
const editRes = await apiWrapper(HttpService.client.editSite(form));
|
||||||
|
|
||||||
if (editRes.state === "success") {
|
if (editRes.state === "success") {
|
||||||
|
this.setState(s => {
|
||||||
|
s.siteRes.site_view = editRes.data.site_view;
|
||||||
|
s.siteRes.taglines = editRes.data.taglines;
|
||||||
|
return s;
|
||||||
|
});
|
||||||
toast(i18n.t("site_saved"));
|
toast(i18n.t("site_saved"));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
import { Component, FormEventHandler, linkEvent } from "inferno";
|
import { Component, FormEventHandler, linkEvent } from "inferno";
|
||||||
import { EditSite, GetSiteResponse, SiteResponse } from "lemmy-js-client";
|
import { EditSite, LocalSiteRateLimit } from "lemmy-js-client";
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { RequestState } from "../../services/HttpService";
|
import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
|
||||||
import { capitalizeFirstLetter, myAuthRequired, setIsoData } from "../../utils";
|
|
||||||
import { Spinner } from "../common/icon";
|
import { Spinner } from "../common/icon";
|
||||||
import Tabs from "../common/tabs";
|
import Tabs from "../common/tabs";
|
||||||
|
|
||||||
|
@ -23,11 +22,11 @@ interface RateLimitsProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
interface RateLimitFormProps {
|
interface RateLimitFormProps {
|
||||||
onSaveSite(form: EditSite): Promise<RequestState<SiteResponse>>;
|
rateLimits: LocalSiteRateLimit;
|
||||||
|
onSaveSite(form: EditSite): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface RateLimitFormState {
|
interface RateLimitFormState {
|
||||||
siteRes: GetSiteResponse;
|
|
||||||
form: {
|
form: {
|
||||||
message?: number;
|
message?: number;
|
||||||
message_per_second?: number;
|
message_per_second?: number;
|
||||||
|
@ -105,7 +104,7 @@ function handlePerSecondChange(
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
async function submitRateLimitForm(i: RateLimitsForm, event: any) {
|
function submitRateLimitForm(i: RateLimitsForm, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const auth = myAuthRequired();
|
const auth = myAuthRequired();
|
||||||
const form: EditSite = Object.entries(i.state.form).reduce(
|
const form: EditSite = Object.entries(i.state.form).reduce(
|
||||||
|
@ -115,67 +114,23 @@ async function submitRateLimitForm(i: RateLimitsForm, event: any) {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
auth,
|
auth,
|
||||||
application_question:
|
|
||||||
i.state.siteRes.site_view.local_site.application_question,
|
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
i.setState({ loading: true });
|
i.setState({ loading: true });
|
||||||
|
i.props.onSaveSite(form);
|
||||||
const res = await i.props.onSaveSite(form);
|
|
||||||
|
|
||||||
if (res.state === "success") {
|
|
||||||
i.setState(s => ((s.siteRes.site_view = res.data.site_view), s));
|
|
||||||
}
|
|
||||||
|
|
||||||
i.setState({ loading: false });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class RateLimitsForm extends Component<
|
export default class RateLimitsForm extends Component<
|
||||||
RateLimitFormProps,
|
RateLimitFormProps,
|
||||||
RateLimitFormState
|
RateLimitFormState
|
||||||
> {
|
> {
|
||||||
private isoData = setIsoData(this.context);
|
|
||||||
state: RateLimitFormState = {
|
state: RateLimitFormState = {
|
||||||
siteRes: this.isoData.site_res,
|
|
||||||
loading: false,
|
loading: false,
|
||||||
form: {},
|
form: this.props.rateLimits,
|
||||||
};
|
};
|
||||||
constructor(props: RateLimitFormProps, context) {
|
constructor(props: RateLimitFormProps, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
const {
|
|
||||||
comment,
|
|
||||||
comment_per_second,
|
|
||||||
image,
|
|
||||||
image_per_second,
|
|
||||||
message,
|
|
||||||
message_per_second,
|
|
||||||
post,
|
|
||||||
post_per_second,
|
|
||||||
register,
|
|
||||||
register_per_second,
|
|
||||||
search,
|
|
||||||
search_per_second,
|
|
||||||
} = this.state.siteRes.site_view.local_site_rate_limit;
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
...this.state,
|
|
||||||
form: {
|
|
||||||
comment,
|
|
||||||
comment_per_second,
|
|
||||||
image,
|
|
||||||
image_per_second,
|
|
||||||
message,
|
|
||||||
message_per_second,
|
|
||||||
post,
|
|
||||||
post_per_second,
|
|
||||||
register,
|
|
||||||
register_per_second,
|
|
||||||
search,
|
|
||||||
search_per_second,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
|
@ -1,33 +1,27 @@
|
||||||
import { Component, InfernoMouseEvent, linkEvent } from "inferno";
|
import { Component, InfernoMouseEvent, linkEvent } from "inferno";
|
||||||
import { EditSite, GetSiteResponse, SiteResponse } from "lemmy-js-client";
|
import { EditSite, Tagline } from "lemmy-js-client";
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { RequestState } from "../../services/HttpService";
|
import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
|
||||||
import { capitalizeFirstLetter, myAuthRequired, setIsoData } from "../../utils";
|
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
import { Icon, Spinner } from "../common/icon";
|
import { Icon, Spinner } from "../common/icon";
|
||||||
import { MarkdownTextArea } from "../common/markdown-textarea";
|
import { MarkdownTextArea } from "../common/markdown-textarea";
|
||||||
|
|
||||||
interface TaglineFormProps {
|
interface TaglineFormProps {
|
||||||
onSaveSite(form: EditSite): Promise<RequestState<SiteResponse>>;
|
taglines: Array<Tagline>;
|
||||||
|
onSaveSite(form: EditSite): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TaglineFormState {
|
interface TaglineFormState {
|
||||||
siteRes: GetSiteResponse;
|
taglines: Array<string>;
|
||||||
siteForm: EditSite;
|
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
editingRow?: number;
|
editingRow?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
private isoData = setIsoData(this.context);
|
|
||||||
state: TaglineFormState = {
|
state: TaglineFormState = {
|
||||||
loading: false,
|
loading: false,
|
||||||
siteRes: this.isoData.site_res,
|
|
||||||
editingRow: undefined,
|
editingRow: undefined,
|
||||||
siteForm: {
|
taglines: this.props.taglines.map(x => x.content),
|
||||||
taglines: this.state.siteRes.taglines?.map(x => x.content),
|
|
||||||
auth: "TODO",
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
@ -55,7 +49,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
<th style="width:121px"></th>
|
<th style="width:121px"></th>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{this.state.siteForm.taglines?.map((cv, index) => (
|
{this.state.taglines.map((cv, index) => (
|
||||||
<tr key={index}>
|
<tr key={index}>
|
||||||
<td>
|
<td>
|
||||||
{this.state.editingRow == index && (
|
{this.state.editingRow == index && (
|
||||||
|
@ -65,8 +59,8 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
this.handleTaglineChange(this, index, s)
|
this.handleTaglineChange(this, index, s)
|
||||||
}
|
}
|
||||||
hideNavigationWarnings
|
hideNavigationWarnings
|
||||||
allLanguages={this.state.siteRes.all_languages}
|
allLanguages={[]}
|
||||||
siteLanguages={this.state.siteRes.discussion_languages}
|
siteLanguages={[]}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{this.state.editingRow != index && <div>{cv}</div>}
|
{this.state.editingRow != index && <div>{cv}</div>}
|
||||||
|
@ -75,7 +69,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
<button
|
<button
|
||||||
className="btn btn-link btn-animate text-muted"
|
className="btn btn-link btn-animate text-muted"
|
||||||
onClick={linkEvent(
|
onClick={linkEvent(
|
||||||
{ form: this, index: index },
|
{ i: this, index: index },
|
||||||
this.handleEditTaglineClick
|
this.handleEditTaglineClick
|
||||||
)}
|
)}
|
||||||
data-tippy-content={i18n.t("edit")}
|
data-tippy-content={i18n.t("edit")}
|
||||||
|
@ -87,7 +81,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
<button
|
<button
|
||||||
className="btn btn-link btn-animate text-muted"
|
className="btn btn-link btn-animate text-muted"
|
||||||
onClick={linkEvent(
|
onClick={linkEvent(
|
||||||
{ form: this, index: index },
|
{ i: this, index: index },
|
||||||
this.handleDeleteTaglineClick
|
this.handleDeleteTaglineClick
|
||||||
)}
|
)}
|
||||||
data-tippy-content={i18n.t("delete")}
|
data-tippy-content={i18n.t("delete")}
|
||||||
|
@ -132,51 +126,33 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleTaglineChange(i: TaglineForm, index: number, val: string) {
|
handleTaglineChange(i: TaglineForm, index: number, val: string) {
|
||||||
let taglines = i.state.siteForm.taglines;
|
const newTaglines = [...i.state.taglines];
|
||||||
if (taglines) {
|
newTaglines[index] = val;
|
||||||
taglines[index] = val;
|
i.setState({ taglines: newTaglines });
|
||||||
i.setState(i.state);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDeleteTaglineClick(
|
handleDeleteTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
|
||||||
props: { form: TaglineForm; index: number },
|
|
||||||
event: any
|
|
||||||
) {
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
let taglines = props.form.state.siteForm.taglines;
|
const newTaglines = [...d.i.state.taglines];
|
||||||
if (taglines) {
|
newTaglines.splice(d.index, 1);
|
||||||
taglines.splice(props.index, 1);
|
d.i.setState({ taglines: newTaglines, editingRow: undefined });
|
||||||
props.form.state.siteForm.taglines = undefined;
|
|
||||||
props.form.setState(props.form.state);
|
|
||||||
props.form.state.siteForm.taglines = taglines;
|
|
||||||
props.form.setState({ ...props.form.state, editingRow: undefined });
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleEditTaglineClick(
|
handleEditTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
|
||||||
props: { form: TaglineForm; index: number },
|
|
||||||
event: any
|
|
||||||
) {
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
if (this.state.editingRow == props.index) {
|
if (this.state.editingRow == d.index) {
|
||||||
props.form.setState({ editingRow: undefined });
|
d.i.setState({ editingRow: undefined });
|
||||||
} else {
|
} else {
|
||||||
props.form.setState({ editingRow: props.index });
|
d.i.setState({ editingRow: d.index });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async handleSaveClick(i: TaglineForm) {
|
async handleSaveClick(i: TaglineForm) {
|
||||||
const auth = myAuthRequired();
|
|
||||||
i.setState(s => ((s.siteForm.auth = auth), s));
|
|
||||||
i.setState({ loading: true });
|
i.setState({ loading: true });
|
||||||
const editRes = await i.props.onSaveSite(i.state.siteForm);
|
i.props.onSaveSite({
|
||||||
|
taglines: i.state.taglines,
|
||||||
if (editRes.state === "success") {
|
auth: myAuthRequired(),
|
||||||
i.setState(s => ((s.siteRes.site_view = editRes.data.site_view), s));
|
});
|
||||||
}
|
|
||||||
|
|
||||||
i.setState({ loading: false });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleAddTaglineClick(
|
handleAddTaglineClick(
|
||||||
|
@ -184,13 +160,12 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
event: InfernoMouseEvent<HTMLButtonElement>
|
event: InfernoMouseEvent<HTMLButtonElement>
|
||||||
) {
|
) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
if (!i.state.siteForm.taglines) {
|
const newTaglines = [...i.state.taglines];
|
||||||
i.state.siteForm.taglines = [];
|
newTaglines.push("");
|
||||||
}
|
|
||||||
i.state.siteForm.taglines.push("");
|
|
||||||
i.setState({
|
i.setState({
|
||||||
...i.state,
|
taglines: newTaglines,
|
||||||
editingRow: i.state.siteForm.taglines.length - 1,
|
editingRow: newTaglines.length - 1,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue