src/shared/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   onChange?(val: ListingType): any;
  10 }
  11
  12 interface ListingTypeSelectState {
  13   type_: ListingType;
  14 }
  15
  16 export class ListingTypeSelect extends Component<
  17   ListingTypeSelectProps,
  18   ListingTypeSelectState
  19 > {
  20   private id = `listing-type-input-${randomStr()}`;
  21
  22   private emptyState: ListingTypeSelectState = {
  23     type_: this.props.type_,
  24   };
  25
  26   constructor(props: any, context: any) {
  27     super(props, context);
  28     this.state = this.emptyState;
  29   }
  30
  31   static getDerivedStateFromProps(props: any): ListingTypeSelectProps {
  32     return {
  33       type_: props.type_,
  34     };
  35   }
  36
  37   render() {
  38     return (
  39       <div class="btn-group btn-group-toggle flex-wrap mb-2">
  40         <label
  41           className={`btn btn-outline-secondary
  42             ${this.state.type_ == ListingType.Subscribed && 'active'}
  43             ${UserService.Instance.user == undefined ? 'disabled' : 'pointer'}
  44           `}
  45         >
  46           <input
  47             id={`${this.id}-subscribed`}
  48             type="radio"
  49             value={ListingType.Subscribed}
  50             checked={this.state.type_ == ListingType.Subscribed}
  51             onChange={linkEvent(this, this.handleTypeChange)}
  52             disabled={UserService.Instance.user == undefined}
  53           />
  54           {i18n.t('subscribed')}
  55         </label>
  56         <label
  57           className={`pointer btn btn-outline-secondary ${
  58             this.state.type_ == ListingType.All && 'active'
  59           }`}
  60         >
  61           <input
  62             id={`${this.id}-all`}
  63             type="radio"
  64             value={ListingType.All}
  65             checked={this.state.type_ == ListingType.All}
  66             onChange={linkEvent(this, this.handleTypeChange)}
  67           />
  68           {i18n.t('all')}
  69         </label>
  70       </div>
  71     );
  72   }
  73
  74   handleTypeChange(i: ListingTypeSelect, event: any) {
  75     i.props.onChange(event.target.value);
  76   }
  77 }