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 rateLimitLabel: string;
22 rateLimitValue?: number;
23 rateLimitPerSecondValue?: number;
26 interface RateLimitFormProps {
27 localSiteRateLimit: LocalSiteRateLimit;
28 applicationQuestion?: string;
31 interface RateLimitFormState {
34 message_per_second?: number;
36 post_per_second?: number;
38 comment_per_second?: number;
40 image_per_second?: number;
42 search_per_second?: number;
44 register_per_second?: number;
51 handleRateLimitPerSecond,
53 rateLimitPerSecondValue,
57 <div className="form-group row">
58 <label className="col-12 col-form-label" htmlFor="rate-limit">
64 className="form-control col-12"
66 value={rateLimitValue}
67 onInput={handleRateLimit}
69 <label className="col-12 col-form-label" htmlFor="rate-limit-per-second">
70 {i18n.t("per_second")}
74 id="rate-limit-per-second"
75 className="form-control col-12"
77 value={rateLimitPerSecondValue}
78 onInput={handleRateLimitPerSecond}
84 function handleRateLimitChange(
85 { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
88 ctx.setState(prev => ({
92 [rateLimitType]: Number(event.target.value),
97 function handlePerSecondChange(
98 { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
101 ctx.setState(prev => ({
105 [`${rateLimitType}_per_second`]: Number(event.target.value),
110 function submitRateLimitForm(i: RateLimitsForm, event: any) {
111 event.preventDefault();
112 const auth = myAuth() ?? "TODO";
113 const form: EditSite = Object.entries(i.state.form).reduce(
114 (acc, [key, val]) => {
115 acc[`rate_limit_${key}`] = val;
118 { auth, application_question: i.props.applicationQuestion }
121 i.setState({ loading: true });
123 WebSocketService.Instance.send(wsClient.editSite(form));
126 export default class RateLimitsForm extends Component<
130 state: RateLimitFormState = {
134 constructor(props: RateLimitFormProps, context) {
135 super(props, context);
150 } = props.localSiteRateLimit;
173 <form onSubmit={linkEvent(this, submitRateLimitForm)}>
174 <h5>Rate Limit Options</h5>
176 tabs={rateLimitTypes.map(rateLimitType => ({
178 label: rateLimitType,
181 handleRateLimit={linkEvent(
182 { rateLimitType, ctx: this },
183 handleRateLimitChange
185 handleRateLimitPerSecond={linkEvent(
186 { rateLimitType, ctx: this },
187 handlePerSecondChange
189 rateLimitLabel={i18n.t(`rate_limit_${rateLimitType}`)}
190 rateLimitValue={this.state.form[rateLimitType]}
191 rateLimitPerSecondValue={
192 this.state.form[`${rateLimitType}_per_second`]
198 <div className="form-group row">
199 <div className="col-12">
202 className="btn btn-secondary mr-2"
203 disabled={this.state.loading}
205 {this.state.loading ? (
208 capitalizeFirstLetter(i18n.t("save"))
217 componentDidUpdate({ localSiteRateLimit }: RateLimitFormProps) {
219 this.state.loading &&
220 Object.entries(localSiteRateLimit).some(
221 ([key, val]) => this.state.form[key] !== val
224 this.setState({ loading: false });