1 import classNames from "classnames";
2 import { Component, FormEventHandler, linkEvent } from "inferno";
3 import { EditSite, LocalSiteRateLimit } from "lemmy-js-client";
4 import { i18n } from "../../i18next";
5 import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
6 import { Spinner } from "../common/icon";
7 import Tabs from "../common/tabs";
9 const rateLimitTypes = [
18 interface RateLimitsProps {
19 handleRateLimit: FormEventHandler<HTMLInputElement>;
20 handleRateLimitPerSecond: FormEventHandler<HTMLInputElement>;
21 rateLimitValue?: number;
22 rateLimitPerSecondValue?: number;
26 interface RateLimitFormProps {
27 rateLimits: LocalSiteRateLimit;
28 onSaveSite(form: EditSite): void;
32 interface RateLimitFormState {
35 message_per_second?: number;
37 post_per_second?: number;
39 comment_per_second?: number;
41 image_per_second?: number;
43 search_per_second?: number;
45 register_per_second?: number;
51 handleRateLimitPerSecond,
52 rateLimitPerSecondValue,
57 <div role="tabpanel" className={classNames("mb-3 row", className)}>
58 <div className="col-md-6">
59 <label htmlFor="rate-limit">{i18n.t("rate_limit")}</label>
63 className="form-control"
65 value={rateLimitValue}
66 onInput={handleRateLimit}
69 <div className="col-md-6">
70 <label htmlFor="rate-limit-per-second">{i18n.t("per_second")}</label>
73 id="rate-limit-per-second"
74 className="form-control"
76 value={rateLimitPerSecondValue}
77 onInput={handleRateLimitPerSecond}
84 function handleRateLimitChange(
85 { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
88 ctx.setState(prev => ({
92 [rateLimitType]: Number(event.target.value),
97 function handlePerSecondChange(
98 { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
101 ctx.setState(prev => ({
105 [`${rateLimitType}_per_second`]: Number(event.target.value),
110 function submitRateLimitForm(i: RateLimitsForm, event: any) {
111 event.preventDefault();
112 const auth = myAuthRequired();
113 const form: EditSite = Object.entries(i.state.form).reduce(
114 (acc, [key, val]) => {
115 acc[`rate_limit_${key}`] = val;
123 i.props.onSaveSite(form);
126 export default class RateLimitsForm extends Component<
130 state: RateLimitFormState = {
131 form: this.props.rateLimits,
133 constructor(props: RateLimitFormProps, context: any) {
134 super(props, context);
140 className="rate-limit-form"
141 onSubmit={linkEvent(this, submitRateLimitForm)}
143 <h5>{i18n.t("rate_limit_header")}</h5>
145 tabs={rateLimitTypes.map(rateLimitType => ({
147 label: i18n.t(`rate_limit_${rateLimitType}`),
148 getNode: isSelected => (
150 className={classNames("tab-pane show", {
153 handleRateLimit={linkEvent(
154 { rateLimitType, ctx: this },
155 handleRateLimitChange
157 handleRateLimitPerSecond={linkEvent(
158 { rateLimitType, ctx: this },
159 handlePerSecondChange
161 rateLimitValue={this.state.form[rateLimitType]}
162 rateLimitPerSecondValue={
163 this.state.form[`${rateLimitType}_per_second`]
169 <div className="col-12 mb-3">
172 className="btn btn-secondary me-2"
173 disabled={this.props.loading}
175 {this.props.loading ? (
178 capitalizeFirstLetter(i18n.t("save"))