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";
7 interface ListingTypeSelectProps {
10 onChange?(val: ListingType): any;
13 interface ListingTypeSelectState {
17 export class ListingTypeSelect extends Component<
18 ListingTypeSelectProps,
19 ListingTypeSelectState
21 private id = `listing-type-input-${randomStr()}`;
23 private emptyState: ListingTypeSelectState = {
24 type_: this.props.type_,
27 constructor(props: any, context: any) {
28 super(props, context);
29 this.state = this.emptyState;
32 static getDerivedStateFromProps(props: any): ListingTypeSelectProps {
35 showLocal: props.showLocal,
41 <div class="btn-group btn-group-toggle flex-wrap mb-2">
43 className={`btn btn-outline-secondary
44 ${this.state.type_ == ListingType.Subscribed && "active"}
46 UserService.Instance.localUserView == undefined
53 id={`${this.id}-subscribed`}
55 value={ListingType.Subscribed}
56 checked={this.state.type_ == ListingType.Subscribed}
57 onChange={linkEvent(this, this.handleTypeChange)}
58 disabled={UserService.Instance.localUserView == undefined}
60 {i18n.t("subscribed")}
62 {this.props.showLocal && (
64 className={`pointer btn btn-outline-secondary ${
65 this.state.type_ == ListingType.Local && "active"
69 id={`${this.id}-local`}
71 value={ListingType.Local}
72 checked={this.state.type_ == ListingType.Local}
73 onChange={linkEvent(this, this.handleTypeChange)}
79 className={`pointer btn btn-outline-secondary ${
80 (this.state.type_ == ListingType.All && "active") ||
81 (!this.props.showLocal &&
82 this.state.type_ == ListingType.Local &&
89 value={ListingType.All}
90 checked={this.state.type_ == ListingType.All}
91 onChange={linkEvent(this, this.handleTypeChange)}
99 handleTypeChange(i: ListingTypeSelect, event: any) {
100 i.props.onChange(event.target.value);