1 import { Component, FormEventHandler, linkEvent } from "inferno";
2 import { EditSite, LocalSiteRateLimit } from "lemmy-js-client";
3 import { i18n } from "../../i18next";
4 import { WebSocketService } from "../../services";
5 import { capitalizeFirstLetter, myAuth, wsClient } 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;
25 interface RateLimitFormProps {
26 localSiteRateLimit: LocalSiteRateLimit;
27 applicationQuestion?: string;
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;
50 handleRateLimitPerSecond,
51 rateLimitPerSecondValue,
55 <div className="form-group row">
56 <label className="col-12 col-form-label" htmlFor="rate-limit">
57 {i18n.t("rate_limit")}
62 className="form-control col-12"
64 value={rateLimitValue}
65 onInput={handleRateLimit}
67 <label className="col-12 col-form-label" htmlFor="rate-limit-per-second">
68 {i18n.t("per_second")}
72 id="rate-limit-per-second"
73 className="form-control col-12"
75 value={rateLimitPerSecondValue}
76 onInput={handleRateLimitPerSecond}
82 function handleRateLimitChange(
83 { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
86 ctx.setState(prev => ({
90 [rateLimitType]: Number(event.target.value),
95 function handlePerSecondChange(
96 { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
99 ctx.setState(prev => ({
103 [`${rateLimitType}_per_second`]: Number(event.target.value),
108 function submitRateLimitForm(i: RateLimitsForm, event: any) {
109 event.preventDefault();
110 const auth = myAuth() ?? "TODO";
111 const form: EditSite = Object.entries(i.state.form).reduce(
112 (acc, [key, val]) => {
113 acc[`rate_limit_${key}`] = val;
116 { auth, application_question: i.props.applicationQuestion }
119 i.setState({ loading: true });
121 WebSocketService.Instance.send(wsClient.editSite(form));
124 export default class RateLimitsForm extends Component<
128 state: RateLimitFormState = {
132 constructor(props: RateLimitFormProps, context) {
133 super(props, context);
148 } = props.localSiteRateLimit;
171 <form onSubmit={linkEvent(this, submitRateLimitForm)}>
172 <h5>{i18n.t("rate_limit_header")}</h5>
174 tabs={rateLimitTypes.map(rateLimitType => ({
176 label: i18n.t(`rate_limit_${rateLimitType}`),
179 handleRateLimit={linkEvent(
180 { rateLimitType, ctx: this },
181 handleRateLimitChange
183 handleRateLimitPerSecond={linkEvent(
184 { rateLimitType, ctx: this },
185 handlePerSecondChange
187 rateLimitValue={this.state.form[rateLimitType]}
188 rateLimitPerSecondValue={
189 this.state.form[`${rateLimitType}_per_second`]
195 <div className="form-group row">
196 <div className="col-12">
199 className="btn btn-secondary mr-2"
200 disabled={this.state.loading}
202 {this.state.loading ? (
205 capitalizeFirstLetter(i18n.t("save"))
214 componentDidUpdate({ localSiteRateLimit }: RateLimitFormProps) {
216 this.state.loading &&
217 Object.entries(localSiteRateLimit).some(
218 ([key, val]) => this.state.form[key] !== val
221 this.setState({ loading: false });