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

   1 import { randomStr } from "@utils/helpers";
   2 import classNames from "classnames";
   3 import { Component, linkEvent } from "inferno";
   4 import { ListingType } from "lemmy-js-client";
   5 import { I18NextService, UserService } from "../../services";
   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
  43         className="listing-type-select btn-group btn-group-toggle flex-wrap"
  44         role="group"
  45       >
  46         {this.props.showSubscribed && (
  47           <>
  48             <input
  49               id={`${this.id}-subscribed`}
  50               type="radio"
  51               className="btn-check"
  52               value={"Subscribed"}
  53               checked={this.state.type_ === "Subscribed"}
  54               onChange={linkEvent(this, this.handleTypeChange)}
  55               disabled={!UserService.Instance.myUserInfo}
  56             />
  57             <label
  58               htmlFor={`${this.id}-subscribed`}
  59               title={I18NextService.i18n.t("subscribed_description")}
  60               className={classNames("btn btn-outline-secondary", {
  61                 active: this.state.type_ === "Subscribed",
  62                 disabled: !UserService.Instance.myUserInfo,
  63                 pointer: UserService.Instance.myUserInfo,
  64               })}
  65             >
  66               {I18NextService.i18n.t("subscribed")}
  67             </label>
  68           </>
  69         )}
  70         {this.props.showLocal && (
  71           <>
  72             <input
  73               id={`${this.id}-local`}
  74               type="radio"
  75               className="btn-check"
  76               value={"Local"}
  77               checked={this.state.type_ === "Local"}
  78               onChange={linkEvent(this, this.handleTypeChange)}
  79             />
  80             <label
  81               htmlFor={`${this.id}-local`}
  82               title={I18NextService.i18n.t("local_description")}
  83               className={classNames("pointer btn btn-outline-secondary", {
  84                 active: this.state.type_ === "Local",
  85               })}
  86             >
  87               {I18NextService.i18n.t("local")}
  88             </label>
  89           </>
  90         )}
  91         <input
  92           id={`${this.id}-all`}
  93           type="radio"
  94           className="btn-check"
  95           value={"All"}
  96           checked={this.state.type_ === "All"}
  97           onChange={linkEvent(this, this.handleTypeChange)}
  98         />
  99         <label
 100           title={I18NextService.i18n.t("all_description")}
 101           htmlFor={`${this.id}-all`}
 102           className={classNames("pointer btn btn-outline-secondary", {
 103             active:
 104               this.state.type_ === "All" ||
 105               (!this.props.showLocal && this.state.type_) === "Local",
 106           })}
 107         >
 108           {I18NextService.i18n.t("all")}
 109         </label>
 110       </div>
 111     );
 112   }
 113
 114   handleTypeChange(i: ListingTypeSelect, event: any) {
 115     i.props.onChange(event.target.value);
 116   }
 117 }