src/shared/components/home/rate-limit-form.tsx

   1 import { Component, FormEventHandler, linkEvent } from "inferno";
   2 import { LocalSiteRateLimit } from "lemmy-js-client";
   3 import { i18n } from "../../i18next";
   4 import Tabs from "../common/tabs";
   5
   6 const rateLimitTypes = [
   7   "message",
   8   "post",
   9   "image",
  10   "comment",
  11   "search",
  12   "register",
  13 ] as const;
  14
  15 interface RateLimitsProps {
  16   handleRateLimit: FormEventHandler<HTMLInputElement>;
  17   handleRateLimitPerSecond: FormEventHandler<HTMLInputElement>;
  18   rateLimitLabel: string;
  19   rateLimitValue?: number;
  20   rateLimitPerSecondValue?: number;
  21 }
  22
  23 interface RateLimitFormProps {
  24   localSiteRateLimit: LocalSiteRateLimit;
  25 }
  26
  27 interface RateLimitFormState {
  28   message?: number;
  29   message_per_second?: number;
  30   post?: number;
  31   post_per_second?: number;
  32   comment?: number;
  33   comment_per_second?: number;
  34   image?: number;
  35   image_per_second?: number;
  36   search?: number;
  37   search_per_second?: number;
  38   register?: number;
  39   register_per_second?: number;
  40 }
  41
  42 function RateLimits({
  43   handleRateLimit,
  44   handleRateLimitPerSecond,
  45   rateLimitLabel,
  46   rateLimitPerSecondValue,
  47   rateLimitValue,
  48 }: RateLimitsProps) {
  49   return (
  50     <div className="form-group row">
  51       <label className="col-12 col-form-label" htmlFor="rate-limit">
  52         {rateLimitLabel}
  53       </label>
  54       <input
  55         type="number"
  56         id="rate-limit"
  57         className="form-control col-12"
  58         min={0}
  59         value={rateLimitValue}
  60         onInput={handleRateLimit}
  61       />
  62       <label className="col-12 col-form-label" htmlFor="rate-limit-per-second">
  63         {i18n.t("per_second")}
  64       </label>
  65       <input
  66         type="number"
  67         id="rate-limit-per-second"
  68         className="form-control col-12"
  69         min={0}
  70         value={rateLimitPerSecondValue}
  71         onInput={handleRateLimitPerSecond}
  72       />
  73     </div>
  74   );
  75 }
  76
  77 function handleRateLimitChange(
  78   { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
  79   event: any
  80 ) {
  81   ctx.setState({
  82     [rateLimitType]: Number(event.target.value),
  83   });
  84 }
  85
  86 function handlePerSecondChange(
  87   { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
  88   event: any
  89 ) {
  90   ctx.setState({
  91     [`${rateLimitType}_per_second`]: Number(event.target.value),
  92   });
  93 }
  94
  95 export default class RateLimitsForm extends Component<
  96   RateLimitFormProps,
  97   RateLimitFormState
  98 > {
  99   state: RateLimitFormState = {};
 100   constructor(props: RateLimitFormProps, context) {
 101     super(props, context);
 102
 103     const {
 104       comment,
 105       comment_per_second,
 106       image,
 107       image_per_second,
 108       message,
 109       message_per_second,
 110       post,
 111       post_per_second,
 112       register,
 113       register_per_second,
 114       search,
 115       search_per_second,
 116     } = props.localSiteRateLimit;
 117
 118     this.state = {
 119       comment,
 120       comment_per_second,
 121       image,
 122       image_per_second,
 123       message,
 124       message_per_second,
 125       post,
 126       post_per_second,
 127       register,
 128       register_per_second,
 129       search,
 130       search_per_second,
 131     };
 132   }
 133
 134   render() {
 135     return (
 136       <Tabs
 137         tabs={rateLimitTypes.map(rateLimitType => ({
 138           key: rateLimitType,
 139           label: rateLimitType,
 140           getNode: () => (
 141             <RateLimits
 142               handleRateLimit={linkEvent(
 143                 { rateLimitType, ctx: this },
 144                 handleRateLimitChange
 145               )}
 146               handleRateLimitPerSecond={linkEvent(
 147                 { rateLimitType, ctx: this },
 148                 handlePerSecondChange
 149               )}
 150               rateLimitLabel={i18n.t(`rate_limit_${rateLimitType}`)}
 151               rateLimitValue={this.state[rateLimitType]}
 152               rateLimitPerSecondValue={
 153                 this.state[`${rateLimitType}_per_second`]
 154               }
 155             />
 156           ),
 157         }))}
 158       />
 159     );
 160   }
 161 }