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

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