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;
29 interface RateLimitFormState {
32 message_per_second?: number;
34 post_per_second?: number;
36 comment_per_second?: number;
38 image_per_second?: number;
40 search_per_second?: number;
42 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.setState({ loading: true });
121 i.props.onSaveSite(form);
124 export default class RateLimitsForm extends Component<
128 state: RateLimitFormState = {
130 form: this.props.rateLimits,
132 constructor(props: RateLimitFormProps, context: any) {
133 super(props, context);
138 <form onSubmit={linkEvent(this, submitRateLimitForm)}>
139 <h5>{i18n.t("rate_limit_header")}</h5>
141 tabs={rateLimitTypes.map(rateLimitType => ({
143 label: i18n.t(`rate_limit_${rateLimitType}`),
146 handleRateLimit={linkEvent(
147 { rateLimitType, ctx: this },
148 handleRateLimitChange
150 handleRateLimitPerSecond={linkEvent(
151 { rateLimitType, ctx: this },
152 handlePerSecondChange
154 rateLimitValue={this.state.form[rateLimitType]}
155 rateLimitPerSecondValue={
156 this.state.form[`${rateLimitType}_per_second`]
162 <div className="form-group row">
163 <div className="col-12">
166 className="btn btn-secondary mr-2"
167 disabled={this.state.loading}
169 {this.state.loading ? (
172 capitalizeFirstLetter(i18n.t("save"))