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

   1 import { Component, linkEvent } from 'inferno';
   2 import { ListingType } from '../interfaces';
   3 import { UserService } from '../services';
   4
   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 emptyState: ListingTypeSelectState = {
  21     type_: this.props.type_,
  22   };
  23
  24   constructor(props: any, context: any) {
  25     super(props, context);
  26     this.state = this.emptyState;
  27   }
  28
  29   render() {
  30     return (
  31       <div class="btn-group btn-group-toggle">
  32         <label
  33           className={`btn btn-sm btn-secondary
  34             ${this.state.type_ == ListingType.Subscribed && 'active'}
  35             ${UserService.Instance.user == undefined ? 'disabled' : 'pointer'}
  36           `}
  37         >
  38           <input
  39             type="radio"
  40             value={ListingType.Subscribed}
  41             checked={this.state.type_ == ListingType.Subscribed}
  42             onChange={linkEvent(this, this.handleTypeChange)}
  43             disabled={UserService.Instance.user == undefined}
  44           />
  45           {i18n.t('subscribed')}
  46         </label>
  47         <label
  48           className={`pointer btn btn-sm btn-secondary ${this.state.type_ ==
  49             ListingType.All && 'active'}`}
  50         >
  51           <input
  52             type="radio"
  53             value={ListingType.All}
  54             checked={this.state.type_ == ListingType.All}
  55             onChange={linkEvent(this, this.handleTypeChange)}
  56           />
  57           {i18n.t('all')}
  58         </label>
  59       </div>
  60     );
  61   }
  62
  63   handleTypeChange(i: ListingTypeSelect, event: any) {
  64     i.state.type_ = Number(event.target.value);
  65     i.setState(i.state);
  66     i.props.onChange(i.state.type_);
  67   }
  68 }