1 import { myAuthRequired } from "@utils/app";
2 import { capitalizeFirstLetter } from "@utils/helpers";
3 import classNames from "classnames";
4 import { Component, FormEventHandler, linkEvent } from "inferno";
5 import { EditSite, LocalSiteRateLimit } from "lemmy-js-client";
6 import { I18NextService } from "../../services";
7 import { Spinner } from "../common/icon";
8 import Tabs from "../common/tabs";
10 const rateLimitTypes = [
19 interface RateLimitsProps {
20 handleRateLimit: FormEventHandler<HTMLInputElement>;
21 handleRateLimitPerSecond: FormEventHandler<HTMLInputElement>;
22 rateLimitValue?: number;
23 rateLimitPerSecondValue?: number;
27 interface RateLimitFormProps {
28 rateLimits: LocalSiteRateLimit;
29 onSaveSite(form: EditSite): void;
33 interface RateLimitFormState {
36 message_per_second?: number;
38 post_per_second?: number;
40 comment_per_second?: number;
42 image_per_second?: number;
44 search_per_second?: number;
46 register_per_second?: number;
52 handleRateLimitPerSecond,
53 rateLimitPerSecondValue,
58 <div role="tabpanel" className={classNames("mb-3 row", className)}>
59 <div className="col-md-6">
60 <label htmlFor="rate-limit">
61 {I18NextService.i18n.t("rate_limit")}
66 className="form-control"
68 value={rateLimitValue}
69 onInput={handleRateLimit}
72 <div className="col-md-6">
73 <label htmlFor="rate-limit-per-second">
74 {I18NextService.i18n.t("per_second")}
78 id="rate-limit-per-second"
79 className="form-control"
81 value={rateLimitPerSecondValue}
82 onInput={handleRateLimitPerSecond}
89 function handleRateLimitChange(
90 { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
93 ctx.setState(prev => ({
97 [rateLimitType]: Number(event.target.value),
102 function handlePerSecondChange(
103 { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
106 ctx.setState(prev => ({
110 [`${rateLimitType}_per_second`]: Number(event.target.value),
115 function submitRateLimitForm(i: RateLimitsForm, event: any) {
116 event.preventDefault();
117 const auth = myAuthRequired();
118 const form: EditSite = Object.entries(i.state.form).reduce(
119 (acc, [key, val]) => {
120 acc[`rate_limit_${key}`] = val;
128 i.props.onSaveSite(form);
131 export default class RateLimitsForm extends Component<
135 state: RateLimitFormState = {
136 form: this.props.rateLimits,
138 constructor(props: RateLimitFormProps, context: any) {
139 super(props, context);
145 className="rate-limit-form"
146 onSubmit={linkEvent(this, submitRateLimitForm)}
148 <h5>{I18NextService.i18n.t("rate_limit_header")}</h5>
150 tabs={rateLimitTypes.map(rateLimitType => ({
152 label: I18NextService.i18n.t(`rate_limit_${rateLimitType}`),
153 getNode: isSelected => (
155 className={classNames("tab-pane show", {
158 handleRateLimit={linkEvent(
159 { rateLimitType, ctx: this },
160 handleRateLimitChange
162 handleRateLimitPerSecond={linkEvent(
163 { rateLimitType, ctx: this },
164 handlePerSecondChange
166 rateLimitValue={this.state.form[rateLimitType]}
167 rateLimitPerSecondValue={
168 this.state.form[`${rateLimitType}_per_second`]
174 <div className="col-12 mb-3">
177 className="btn btn-secondary me-2"
178 disabled={this.props.loading}
180 {this.props.loading ? (
183 capitalizeFirstLetter(I18NextService.i18n.t("save"))