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): any;
  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   private emptyState: ListingTypeSelectState = {
  25     type_: this.props.type_,
  26   };
  27
  28   constructor(props: any, context: any) {
  29     super(props, context);
  30     this.state = this.emptyState;
  31   }
  32
  33   static getDerivedStateFromProps(props: any): ListingTypeSelectProps {
  34     return {
  35       type_: props.type_,
  36       showLocal: props.showLocal,
  37       showSubscribed: props.showSubscribed,
  38     };
  39   }
  40
  41   render() {
  42     return (
  43       <div class="btn-group btn-group-toggle flex-wrap mb-2">
  44         {this.props.showSubscribed && (
  45           <label
  46             title={i18n.t("subscribed_description")}
  47             className={`btn btn-outline-secondary
  48             ${this.state.type_ == ListingType.Subscribed && "active"}
  49             ${
  50               UserService.Instance.myUserInfo == undefined
  51                 ? "disabled"
  52                 : "pointer"
  53             }
  54           `}
  55           >
  56             <input
  57               id={`${this.id}-subscribed`}
  58               type="radio"
  59               value={ListingType.Subscribed}
  60               checked={this.state.type_ == ListingType.Subscribed}
  61               onChange={linkEvent(this, this.handleTypeChange)}
  62               disabled={UserService.Instance.myUserInfo == undefined}
  63             />
  64             {i18n.t("subscribed")}
  65           </label>
  66         )}
  67         {this.props.showLocal && (
  68           <label
  69             title={i18n.t("local_description")}
  70             className={`pointer btn btn-outline-secondary ${
  71               this.state.type_ == ListingType.Local && "active"
  72             }`}
  73           >
  74             <input
  75               id={`${this.id}-local`}
  76               type="radio"
  77               value={ListingType.Local}
  78               checked={this.state.type_ == ListingType.Local}
  79               onChange={linkEvent(this, this.handleTypeChange)}
  80             />
  81             {i18n.t("local")}
  82           </label>
  83         )}
  84         <label
  85           title={i18n.t("all_description")}
  86           className={`pointer btn btn-outline-secondary ${
  87             (this.state.type_ == ListingType.All && "active") ||
  88             (!this.props.showLocal &&
  89               this.state.type_ == ListingType.Local &&
  90               "active")
  91           }`}
  92         >
  93           <input
  94             id={`${this.id}-all`}
  95             type="radio"
  96             value={ListingType.All}
  97             checked={this.state.type_ == ListingType.All}
  98             onChange={linkEvent(this, this.handleTypeChange)}
  99           />
 100           {i18n.t("all")}
 101         </label>
 102       </div>
 103     );
 104   }
 105
 106   handleTypeChange(i: ListingTypeSelect, event: any) {
 107     i.props.onChange(event.target.value);
 108   }
 109 }