OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Refactor GroupFilterPanel to typescript

pull/21833/head
Dariusz Niemczyk 2021-08-17 15:25:10 +02:00
parent a2797795b2
commit bdb5f3bb9f
No known key found for this signature in database
GPG Key ID: 28DFE7164F497CB6
1 changed files with 39 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/structures/GroupFilterPanel.js → src/components/structures/GroupFilterPanel.tsx
View File

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