1 import { randomStr } from "@utils/helpers";
2 import classNames from "classnames";
3 import { Component, linkEvent } from "inferno";
4 import { ListingType } from "lemmy-js-client";
5 import { I18NextService, UserService } from "../../services";
7 interface ListingTypeSelectProps {
10 showSubscribed: boolean;
11 onChange(val: ListingType): void;
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(
33 props: ListingTypeSelectProps,
34 ): ListingTypeSelectState {
43 className="listing-type-select btn-group btn-group-toggle flex-wrap"
46 {this.props.showSubscribed && (
49 id={`${this.id}-subscribed`}
53 checked={this.state.type_ === "Subscribed"}
54 onChange={linkEvent(this, this.handleTypeChange)}
55 disabled={!UserService.Instance.myUserInfo}
58 htmlFor={`${this.id}-subscribed`}
59 title={I18NextService.i18n.t("subscribed_description")}
60 className={classNames("btn btn-outline-secondary", {
61 active: this.state.type_ === "Subscribed",
62 disabled: !UserService.Instance.myUserInfo,
63 pointer: UserService.Instance.myUserInfo,
66 {I18NextService.i18n.t("subscribed")}
70 {this.props.showLocal && (
73 id={`${this.id}-local`}
77 checked={this.state.type_ === "Local"}
78 onChange={linkEvent(this, this.handleTypeChange)}
81 htmlFor={`${this.id}-local`}
82 title={I18NextService.i18n.t("local_description")}
83 className={classNames("pointer btn btn-outline-secondary", {
84 active: this.state.type_ === "Local",
87 {I18NextService.i18n.t("local")}
96 checked={this.state.type_ === "All"}
97 onChange={linkEvent(this, this.handleTypeChange)}
100 title={I18NextService.i18n.t("all_description")}
101 htmlFor={`${this.id}-all`}
102 className={classNames("pointer btn btn-outline-secondary", {
104 this.state.type_ === "All" ||
105 (!this.props.showLocal && this.state.type_) === "Local",
108 {I18NextService.i18n.t("all")}
114 handleTypeChange(i: ListingTypeSelect, event: any) {
115 i.props.onChange(event.target.value);