1 import { randomStr } from "@utils/helpers";
2 import { Component, linkEvent } from "inferno";
3 import { ListingType } from "lemmy-js-client";
4 import { I18NextService, UserService } from "../../services";
6 interface ListingTypeSelectProps {
9 showSubscribed: boolean;
10 onChange(val: ListingType): void;
13 interface ListingTypeSelectState {
17 export class ListingTypeSelect extends Component<
18 ListingTypeSelectProps,
19 ListingTypeSelectState
21 private id = `listing-type-input-${randomStr()}`;
23 state: ListingTypeSelectState = {
24 type_: this.props.type_,
27 constructor(props: any, context: any) {
28 super(props, context);
31 static getDerivedStateFromProps(
32 props: ListingTypeSelectProps
33 ): ListingTypeSelectState {
41 <div className="listing-type-select btn-group btn-group-toggle flex-wrap">
42 {this.props.showSubscribed && (
44 title={I18NextService.i18n.t("subscribed_description")}
45 className={`btn btn-outline-secondary
46 ${this.state.type_ == "Subscribed" && "active"}
47 ${!UserService.Instance.myUserInfo ? "disabled" : "pointer"}
51 id={`${this.id}-subscribed`}
55 checked={this.state.type_ == "Subscribed"}
56 onChange={linkEvent(this, this.handleTypeChange)}
57 disabled={!UserService.Instance.myUserInfo}
59 {I18NextService.i18n.t("subscribed")}
62 {this.props.showLocal && (
64 title={I18NextService.i18n.t("local_description")}
65 className={`pointer btn btn-outline-secondary ${
66 this.state.type_ == "Local" && "active"
70 id={`${this.id}-local`}
74 checked={this.state.type_ == "Local"}
75 onChange={linkEvent(this, this.handleTypeChange)}
77 {I18NextService.i18n.t("local")}
81 title={I18NextService.i18n.t("all_description")}
82 className={`pointer btn btn-outline-secondary ${
83 (this.state.type_ == "All" && "active") ||
84 (!this.props.showLocal && this.state.type_ == "Local" && "active")
92 checked={this.state.type_ == "All"}
93 onChange={linkEvent(this, this.handleTypeChange)}
95 {I18NextService.i18n.t("all")}
101 handleTypeChange(i: ListingTypeSelect, event: any) {
102 i.props.onChange(event.target.value);