1 import { Component, FormEventHandler, linkEvent } from "inferno";
2 import { EditSite, LocalSiteRateLimit } from "lemmy-js-client";
3 import { i18n } from "../../i18next";
4 import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
5 import { Spinner } from "../common/icon";
6 import Tabs from "../common/tabs";
8 const rateLimitTypes = [
17 interface RateLimitsProps {
18 handleRateLimit: FormEventHandler<HTMLInputElement>;
19 handleRateLimitPerSecond: FormEventHandler<HTMLInputElement>;
20 rateLimitValue?: number;
21 rateLimitPerSecondValue?: number;
24 interface RateLimitFormProps {
25 rateLimits: LocalSiteRateLimit;
26 onSaveSite(form: EditSite): void;
30 interface RateLimitFormState {
33 message_per_second?: number;
35 post_per_second?: number;
37 comment_per_second?: number;
39 image_per_second?: number;
41 search_per_second?: number;
43 register_per_second?: number;
49 handleRateLimitPerSecond,
50 rateLimitPerSecondValue,
54 <div className="mb-3 row">
55 <div className="col-md-6">
56 <label htmlFor="rate-limit">{i18n.t("rate_limit")}</label>
60 className="form-control"
62 value={rateLimitValue}
63 onInput={handleRateLimit}
66 <div className="col-md-6">
67 <label htmlFor="rate-limit-per-second">{i18n.t("per_second")}</label>
70 id="rate-limit-per-second"
71 className="form-control"
73 value={rateLimitPerSecondValue}
74 onInput={handleRateLimitPerSecond}
81 function handleRateLimitChange(
82 { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
85 ctx.setState(prev => ({
89 [rateLimitType]: Number(event.target.value),
94 function handlePerSecondChange(
95 { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
98 ctx.setState(prev => ({
102 [`${rateLimitType}_per_second`]: Number(event.target.value),
107 function submitRateLimitForm(i: RateLimitsForm, event: any) {
108 event.preventDefault();
109 const auth = myAuthRequired();
110 const form: EditSite = Object.entries(i.state.form).reduce(
111 (acc, [key, val]) => {
112 acc[`rate_limit_${key}`] = val;
120 i.props.onSaveSite(form);
123 export default class RateLimitsForm extends Component<
127 state: RateLimitFormState = {
128 form: this.props.rateLimits,
130 constructor(props: RateLimitFormProps, context: any) {
131 super(props, context);
137 className="rate-limit-form"
138 onSubmit={linkEvent(this, submitRateLimitForm)}
140 <h5>{i18n.t("rate_limit_header")}</h5>
142 tabs={rateLimitTypes.map(rateLimitType => ({
144 label: i18n.t(`rate_limit_${rateLimitType}`),
147 handleRateLimit={linkEvent(
148 { rateLimitType, ctx: this },
149 handleRateLimitChange
151 handleRateLimitPerSecond={linkEvent(
152 { rateLimitType, ctx: this },
153 handlePerSecondChange
155 rateLimitValue={this.state.form[rateLimitType]}
156 rateLimitPerSecondValue={
157 this.state.form[`${rateLimitType}_per_second`]
163 <div className="col-12 mb-3">
166 className="btn btn-secondary me-2"
167 disabled={this.props.loading}
169 {this.props.loading ? (
172 capitalizeFirstLetter(i18n.t("save"))