From bdb5f3bb9f0325c755afd9130b4218185dbd001d Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Tue, 17 Aug 2021 15:25:10 +0200
Subject: [PATCH] Refactor GroupFilterPanel to typescript

---
 ...oupFilterPanel.js => GroupFilterPanel.tsx} | 59 ++++++++++++-------
 1 file changed, 39 insertions(+), 20 deletions(-)
 rename src/components/structures/{GroupFilterPanel.js => GroupFilterPanel.tsx} (74%)

diff --git a/src/components/structures/GroupFilterPanel.js b/src/components/structures/GroupFilterPanel.tsx
similarity index 74%
rename from src/components/structures/GroupFilterPanel.js
rename to src/components/structures/GroupFilterPanel.tsx
index 348e1fe497..3e7c6e9b17 100644
--- a/src/components/structures/GroupFilterPanel.js
+++ b/src/components/structures/GroupFilterPanel.tsx
@@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import type { EventSubscription } from "fbemitter";
 import React from 'react';
 import GroupFilterOrderStore from '../../stores/GroupFilterOrderStore';
 
@@ -32,23 +33,41 @@ import UserTagTile from "../views/elements/UserTagTile";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import UIStore from "../../stores/UIStore";
 
-@replaceableComponent("structures.GroupFilterPanel")
-class GroupFilterPanel extends React.Component {
-    static contextType = MatrixClientContext;
+interface IGroupFilterPanelProps {
 
-    state = {
+}
+
+// FIXME: Properly type this after migrating GroupFilterOrderStore.js to Typescript
+type OrderedTagsTemporaryType = Array<{}>;
+// FIXME: Properly type this after migrating GroupFilterOrderStore.js to Typescript
+type SelectedTagsTemporaryType = Array<{}>;
+
+interface IGroupFilterPanelState {
+    // FIXME: Properly type this after migrating GroupFilterOrderStore.js to Typescript
+    orderedTags: OrderedTagsTemporaryType;
+    // FIXME: Properly type this after migrating GroupFilterOrderStore.js to Typescript
+    selectedTags: SelectedTagsTemporaryType;
+}
+
+@replaceableComponent("structures.GroupFilterPanel")
+class GroupFilterPanel extends React.Component<IGroupFilterPanelProps, IGroupFilterPanelState> {
+    public static contextType = MatrixClientContext;
+
+    public state = {
         orderedTags: [],
         selectedTags: [],
     };
 
-    ref = React.createRef()
+    private ref = React.createRef<HTMLDivElement>();
+    private unmounted = false;
+    private groupFilterOrderStoreToken?: EventSubscription;
 
-    componentDidMount() {
+    public componentDidMount() {
         this.unmounted = false;
-        this.context.on("Group.myMembership", this._onGroupMyMembership);
-        this.context.on("sync", this._onClientSync);
+        this.context.on("Group.myMembership", this.onGroupMyMembership);
+        this.context.on("sync", this.onClientSync);
 
-        this._groupFilterOrderStoreToken = GroupFilterOrderStore.addListener(() => {
+        this.groupFilterOrderStoreToken = GroupFilterOrderStore.addListener(() => {
             if (this.unmounted) {
                 return;
             }
@@ -62,22 +81,22 @@ class GroupFilterPanel extends React.Component {
         UIStore.instance.trackElementDimensions("GroupPanel", this.ref.current);
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount() {
         this.unmounted = true;
-        this.context.removeListener("Group.myMembership", this._onGroupMyMembership);
-        this.context.removeListener("sync", this._onClientSync);
-        if (this._groupFilterOrderStoreToken) {
-            this._groupFilterOrderStoreToken.remove();
+        this.context.removeListener("Group.myMembership", this.onGroupMyMembership);
+        this.context.removeListener("sync", this.onClientSync);
+        if (this.groupFilterOrderStoreToken) {
+            this.groupFilterOrderStoreToken.remove();
         }
         UIStore.instance.stopTrackingElementDimensions("GroupPanel");
     }
 
-    _onGroupMyMembership = () => {
+    private onGroupMyMembership = () => {
         if (this.unmounted) return;
         dis.dispatch(GroupActions.fetchJoinedGroups(this.context));
     };
 
-    _onClientSync = (syncState, prevState) => {
+    private onClientSync = (syncState, prevState) => {
         // Consider the client reconnected if there is no error with syncing.
         // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
         const reconnected = syncState !== "ERROR" && prevState !== syncState;
@@ -87,18 +106,18 @@ class GroupFilterPanel extends React.Component {
         }
     };
 
-    onClick = e => {
+    private onClick = e => {
         // only dispatch if its not a no-op
         if (this.state.selectedTags.length > 0) {
             dis.dispatch({ action: 'deselect_tags' });
         }
     };
 
-    onClearFilterClick = ev => {
+    private onClearFilterClick = ev => {
         dis.dispatch({ action: 'deselect_tags' });
     };
 
-    renderGlobalIcon() {
+    private renderGlobalIcon() {
         if (!SettingsStore.getValue("feature_communities_v2_prototypes")) return null;
 
         return (
@@ -109,7 +128,7 @@ class GroupFilterPanel extends React.Component {
         );
     }
 
-    render() {
+    public render() {
         const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
         const ActionButton = sdk.getComponent('elements.ActionButton');