src/shared/components/common/listing-type-select.tsx

   1 import { Component, linkEvent } from "inferno";
   2 import { ListingType } from "lemmy-js-client";
   3 import { i18n } from "../../i18next";
   4 import { UserService } from "../../services";
   5 import { randomStr } from "../../utils";
   6
   7 interface ListingTypeSelectProps {
   8   type_: ListingType;
   9   showLocal: boolean;
  10   showSubscribed: boolean;
  11   onChange(val: ListingType): void;
  12 }
  13
  14 interface ListingTypeSelectState {
  15   type_: ListingType;
  16 }
  17
  18 export class ListingTypeSelect extends Component<
  19   ListingTypeSelectProps,
  20   ListingTypeSelectState
  21 > {
  22   private id = `listing-type-input-${randomStr()}`;
  23
  24   state: ListingTypeSelectState = {
  25     type_: this.props.type_,
  26   };
  27
  28   constructor(props: any, context: any) {
  29     super(props, context);
  30   }
  31
  32   static getDerivedStateFromProps(
  33     props: ListingTypeSelectProps
  34   ): ListingTypeSelectState {
  35     return {
  36       type_: props.type_,
  37     };
  38   }
  39
  40   render() {
  41     return (
  42       <div className="btn-group btn-group-toggle flex-wrap mb-2">
  43         {this.props.showSubscribed && (
  44           <label
  45             title={i18n.t("subscribed_description")}
  46             className={`btn btn-outline-secondary
  47             ${this.state.type_ == "Subscribed" && "active"}
  48             ${!UserService.Instance.myUserInfo ? "disabled" : "pointer"}
  49           `}
  50           >
  51             <input
  52               id={`${this.id}-subscribed`}
  53               type="radio"
  54               value={"Subscribed"}
  55               checked={this.state.type_ == "Subscribed"}
  56               onChange={linkEvent(this, this.handleTypeChange)}
  57               disabled={!UserService.Instance.myUserInfo}
  58             />
  59             {i18n.t("subscribed")}
  60           </label>
  61         )}
  62         {this.props.showLocal && (
  63           <label
  64             title={i18n.t("local_description")}
  65             className={`pointer btn btn-outline-secondary ${
  66               this.state.type_ == "Local" && "active"
  67             }`}
  68           >
  69             <input
  70               id={`${this.id}-local`}
  71               type="radio"
  72               value={"Local"}
  73               checked={this.state.type_ == "Local"}
  74               onChange={linkEvent(this, this.handleTypeChange)}
  75             />
  76             {i18n.t("local")}
  77           </label>
  78         )}
  79         <label
  80           title={i18n.t("all_description")}
  81           className={`pointer btn btn-outline-secondary ${
  82             (this.state.type_ == "All" && "active") ||
  83             (!this.props.showLocal && this.state.type_ == "Local" && "active")
  84           }`}
  85         >
  86           <input
  87             id={`${this.id}-all`}
  88             type="radio"
  89             value={"All"}
  90             checked={this.state.type_ == "All"}
  91             onChange={linkEvent(this, this.handleTypeChange)}
  92           />
  93           {i18n.t("all")}
  94         </label>
  95       </div>
  96     );
  97   }
  98
  99   handleTypeChange(i: ListingTypeSelect, event: any) {
 100     i.props.onChange(event.target.value);
 101   }
 102 }