Use http client (#1081)

[lemmy-ui.git] / src / shared / components / common / listing-type-select.tsx

diff --git a/src/shared/components/common/listing-type-select.tsx b/src/shared/components/common/listing-type-select.tsx
index 1493f64998685c922a28ea6b6431bd767917c9cd..3e534d341c86056954ae61416d0136191e1e03a7 100644 (file)
--- a/src/shared/components/common/listing-type-select.tsx
+++ b/src/shared/components/common/listing-type-select.tsx
@@ -6,8 +6,9 @@ import { randomStr } from "../../utils";
 
 interface ListingTypeSelectProps {
   type_: ListingType;
-  showLocal?: boolean;
-  onChange?(val: ListingType): any;
+  showLocal: boolean;
+  showSubscribed: boolean;
+  onChange(val: ListingType): void;
 }
 
 interface ListingTypeSelectState {
@@ -20,58 +21,56 @@ export class ListingTypeSelect extends Component<
 > {
   private id = `listing-type-input-${randomStr()}`;
 
-  private emptyState: ListingTypeSelectState = {
+  state: ListingTypeSelectState = {
     type_: this.props.type_,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
-    this.state = this.emptyState;
   }
 
-  static getDerivedStateFromProps(props: any): ListingTypeSelectProps {
+  static getDerivedStateFromProps(
+    props: ListingTypeSelectProps
+  ): ListingTypeSelectState {
     return {
       type_: props.type_,
-      showLocal: props.showLocal,
     };
   }
 
   render() {
     return (
-      <div class="btn-group btn-group-toggle flex-wrap mb-2">
-        <label
-          title={i18n.t("subscribed_description")}
-          className={`btn btn-outline-secondary 
-            ${this.state.type_ == ListingType.Subscribed && "active"}
-            ${
-              UserService.Instance.localUserView == undefined
-                ? "disabled"
-                : "pointer"
-            }
+      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+        {this.props.showSubscribed && (
+          <label
+            title={i18n.t("subscribed_description")}
+            className={`btn btn-outline-secondary 
+            ${this.state.type_ == "Subscribed" && "active"}
+            ${!UserService.Instance.myUserInfo ? "disabled" : "pointer"}
           `}
-        >
-          <input
-            id={`${this.id}-subscribed`}
-            type="radio"
-            value={ListingType.Subscribed}
-            checked={this.state.type_ == ListingType.Subscribed}
-            onChange={linkEvent(this, this.handleTypeChange)}
-            disabled={UserService.Instance.localUserView == undefined}
-          />
-          {i18n.t("subscribed")}
-        </label>
+          >
+            <input
+              id={`${this.id}-subscribed`}
+              type="radio"
+              value={"Subscribed"}
+              checked={this.state.type_ == "Subscribed"}
+              onChange={linkEvent(this, this.handleTypeChange)}
+              disabled={!UserService.Instance.myUserInfo}
+            />
+            {i18n.t("subscribed")}
+          </label>
+        )}
         {this.props.showLocal && (
           <label
             title={i18n.t("local_description")}
             className={`pointer btn btn-outline-secondary ${
-              this.state.type_ == ListingType.Local && "active"
+              this.state.type_ == "Local" && "active"
             }`}
           >
             <input
               id={`${this.id}-local`}
               type="radio"
-              value={ListingType.Local}
-              checked={this.state.type_ == ListingType.Local}
+              value={"Local"}
+              checked={this.state.type_ == "Local"}
               onChange={linkEvent(this, this.handleTypeChange)}
             />
             {i18n.t("local")}
@@ -80,17 +79,15 @@ export class ListingTypeSelect extends Component<
         <label
           title={i18n.t("all_description")}
           className={`pointer btn btn-outline-secondary ${
-            (this.state.type_ == ListingType.All && "active") ||
-            (!this.props.showLocal &&
-              this.state.type_ == ListingType.Local &&
-              "active")
+            (this.state.type_ == "All" && "active") ||
+            (!this.props.showLocal && this.state.type_ == "Local" && "active")
           }`}
         >
           <input
             id={`${this.id}-all`}
             type="radio"
-            value={ListingType.All}
-            checked={this.state.type_ == ListingType.All}
+            value={"All"}
+            checked={this.state.type_ == "All"}
             onChange={linkEvent(this, this.handleTypeChange)}
           />
           {i18n.t("all")}