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="form-group row">
55 <label className="col-12 col-form-label" htmlFor="rate-limit">
56 {i18n.t("rate_limit")}
61 className="form-control col-12"
63 value={rateLimitValue}
64 onInput={handleRateLimit}
66 <label className="col-12 col-form-label" htmlFor="rate-limit-per-second">
67 {i18n.t("per_second")}
71 id="rate-limit-per-second"
72 className="form-control col-12"
74 value={rateLimitPerSecondValue}
75 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);
136 <form onSubmit={linkEvent(this, submitRateLimitForm)}>
137 <h5>{i18n.t("rate_limit_header")}</h5>
139 tabs={rateLimitTypes.map(rateLimitType => ({
141 label: i18n.t(`rate_limit_${rateLimitType}`),
144 handleRateLimit={linkEvent(
145 { rateLimitType, ctx: this },
146 handleRateLimitChange
148 handleRateLimitPerSecond={linkEvent(
149 { rateLimitType, ctx: this },
150 handlePerSecondChange
152 rateLimitValue={this.state.form[rateLimitType]}
153 rateLimitPerSecondValue={
154 this.state.form[`${rateLimitType}_per_second`]
160 <div className="form-group row">
161 <div className="col-12">
164 className="btn btn-secondary mr-2"
165 disabled={this.props.loading}
167 {this.props.loading ? (
170 capitalizeFirstLetter(i18n.t("save"))