1 import { myAuthRequired } from "@utils/app";
2 import { capitalizeFirstLetter } from "@utils/helpers";
3 import classNames from "classnames";
4 import { Component, FormEventHandler, linkEvent } from "inferno";
5 import { EditSite, LocalSiteRateLimit } from "lemmy-js-client";
6 import { i18n } from "../../i18next";
7 import { Spinner } from "../common/icon";
8 import Tabs from "../common/tabs";
10 const rateLimitTypes = [
19 interface RateLimitsProps {
20 handleRateLimit: FormEventHandler<HTMLInputElement>;
21 handleRateLimitPerSecond: FormEventHandler<HTMLInputElement>;
22 rateLimitValue?: number;
23 rateLimitPerSecondValue?: number;
27 interface RateLimitFormProps {
28 rateLimits: LocalSiteRateLimit;
29 onSaveSite(form: EditSite): void;
33 interface RateLimitFormState {
36 message_per_second?: number;
38 post_per_second?: number;
40 comment_per_second?: number;
42 image_per_second?: number;
44 search_per_second?: number;
46 register_per_second?: number;
52 handleRateLimitPerSecond,
53 rateLimitPerSecondValue,
58 <div role="tabpanel" className={classNames("mb-3 row", className)}>
59 <div className="col-md-6">
60 <label htmlFor="rate-limit">{i18n.t("rate_limit")}</label>
64 className="form-control"
66 value={rateLimitValue}
67 onInput={handleRateLimit}
70 <div className="col-md-6">
71 <label htmlFor="rate-limit-per-second">{i18n.t("per_second")}</label>
74 id="rate-limit-per-second"
75 className="form-control"
77 value={rateLimitPerSecondValue}
78 onInput={handleRateLimitPerSecond}
85 function handleRateLimitChange(
86 { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
89 ctx.setState(prev => ({
93 [rateLimitType]: Number(event.target.value),
98 function handlePerSecondChange(
99 { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
102 ctx.setState(prev => ({
106 [`${rateLimitType}_per_second`]: Number(event.target.value),
111 function submitRateLimitForm(i: RateLimitsForm, event: any) {
112 event.preventDefault();
113 const auth = myAuthRequired();
114 const form: EditSite = Object.entries(i.state.form).reduce(
115 (acc, [key, val]) => {
116 acc[`rate_limit_${key}`] = val;
124 i.props.onSaveSite(form);
127 export default class RateLimitsForm extends Component<
131 state: RateLimitFormState = {
132 form: this.props.rateLimits,
134 constructor(props: RateLimitFormProps, context: any) {
135 super(props, context);
141 className="rate-limit-form"
142 onSubmit={linkEvent(this, submitRateLimitForm)}
144 <h5>{i18n.t("rate_limit_header")}</h5>
146 tabs={rateLimitTypes.map(rateLimitType => ({
148 label: i18n.t(`rate_limit_${rateLimitType}`),
149 getNode: isSelected => (
151 className={classNames("tab-pane show", {
154 handleRateLimit={linkEvent(
155 { rateLimitType, ctx: this },
156 handleRateLimitChange
158 handleRateLimitPerSecond={linkEvent(
159 { rateLimitType, ctx: this },
160 handlePerSecondChange
162 rateLimitValue={this.state.form[rateLimitType]}
163 rateLimitPerSecondValue={
164 this.state.form[`${rateLimitType}_per_second`]
170 <div className="col-12 mb-3">
173 className="btn btn-secondary me-2"
174 disabled={this.props.loading}
176 {this.props.loading ? (
179 capitalizeFirstLetter(i18n.t("save"))