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 showSubscribed: boolean;
11 onChange?(val: ListingType): any;
14 interface ListingTypeSelectState {
18 export class ListingTypeSelect extends Component<
19 ListingTypeSelectProps,
20 ListingTypeSelectState
22 private id = `listing-type-input-${randomStr()}`;
24 state: ListingTypeSelectState = {
25 type_: this.props.type_,
28 constructor(props: any, context: any) {
29 super(props, context);
32 static getDerivedStateFromProps(props: any): ListingTypeSelectProps {
35 showLocal: props.showLocal,
36 showSubscribed: props.showSubscribed,
42 <div className="btn-group btn-group-toggle flex-wrap mb-2">
43 {this.props.showSubscribed && (
45 title={i18n.t("subscribed_description")}
46 className={`btn btn-outline-secondary
47 ${this.state.type_ == "Subscribed" && "active"}
48 ${!UserService.Instance.myUserInfo ? "disabled" : "pointer"}
52 id={`${this.id}-subscribed`}
55 checked={this.state.type_ == "Subscribed"}
56 onChange={linkEvent(this, this.handleTypeChange)}
57 disabled={!UserService.Instance.myUserInfo}
59 {i18n.t("subscribed")}
62 {this.props.showLocal && (
64 title={i18n.t("local_description")}
65 className={`pointer btn btn-outline-secondary ${
66 this.state.type_ == "Local" && "active"
70 id={`${this.id}-local`}
73 checked={this.state.type_ == "Local"}
74 onChange={linkEvent(this, this.handleTypeChange)}
80 title={i18n.t("all_description")}
81 className={`pointer btn btn-outline-secondary ${
82 (this.state.type_ == "All" && "active") ||
83 (!this.props.showLocal && this.state.type_ == "Local" && "active")
90 checked={this.state.type_ == "All"}
91 onChange={linkEvent(this, this.handleTypeChange)}
99 handleTypeChange(i: ListingTypeSelect, event: any) {
100 i.props.onChange?.(event.target.value);