ui/src/components/listing-type-select.tsx

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