From 81e1f36c4b3a0b5a260da20f9b84e91083d4f302 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 8 Mar 2021 17:48:08 +0000 Subject: [PATCH] Tidy up TemporaryTile now that it isn't temporary --- .../views/avatars/_DecoratedRoomAvatar.scss | 3 +-- .../{TemporaryTile.tsx => ExtraTile.tsx} | 7 +++-- src/components/views/rooms/RoomList.tsx | 14 +++++----- src/components/views/rooms/RoomSublist.tsx | 26 +++++++++---------- 4 files changed, 23 insertions(+), 27 deletions(-) rename src/components/views/rooms/{TemporaryTile.tsx => ExtraTile.tsx} (92%) diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.scss b/res/css/views/avatars/_DecoratedRoomAvatar.scss index e0afd9de66..2631cbfb40 100644 --- a/res/css/views/avatars/_DecoratedRoomAvatar.scss +++ b/res/css/views/avatars/_DecoratedRoomAvatar.scss @@ -14,8 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -// XXX: We shouldn't be using TemporaryTile anywhere - delete it. -.mx_DecoratedRoomAvatar, .mx_TemporaryTile { +.mx_DecoratedRoomAvatar, .mx_ExtraTile { position: relative; &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar { diff --git a/src/components/views/rooms/TemporaryTile.tsx b/src/components/views/rooms/ExtraTile.tsx similarity index 92% rename from src/components/views/rooms/TemporaryTile.tsx rename to src/components/views/rooms/ExtraTile.tsx index 31d2acbc61..20d12955d5 100644 --- a/src/components/views/rooms/TemporaryTile.tsx +++ b/src/components/views/rooms/ExtraTile.tsx @@ -1,5 +1,5 @@ /* -Copyright 2020 The Matrix.org Foundation C.I.C. +Copyright 2020, 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -36,8 +36,7 @@ interface IState { hover: boolean; } -// TODO: Remove with community invites in the room list: https://github.com/vector-im/element-web/issues/14456 -export default class TemporaryTile extends React.Component { +export default class ExtraTile extends React.Component { constructor(props: IProps) { super(props); @@ -57,8 +56,8 @@ export default class TemporaryTile extends React.Component { public render(): React.ReactElement { // XXX: We copy classes because it's easier const classes = classNames({ + 'mx_ExtraTile': true, 'mx_RoomTile': true, - 'mx_TemporaryTile': true, 'mx_RoomTile_selected': this.props.isSelected, 'mx_RoomTile_minimized': this.props.isMinimized, }); diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index beb85e50ce..7b44647be6 100644 --- a/src/components/views/rooms/RoomList.tsx +++ b/src/components/views/rooms/RoomList.tsx @@ -16,7 +16,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import * as React from "react"; +import React, { ReactComponentElement } from "react"; import { Dispatcher } from "flux"; import { Room } from "matrix-js-sdk/src/models/room"; import * as fbEmitter from "fbemitter"; @@ -34,7 +34,7 @@ import RoomSublist from "./RoomSublist"; import { ActionPayload } from "../../../dispatcher/payloads"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import GroupAvatar from "../avatars/GroupAvatar"; -import TemporaryTile from "./TemporaryTile"; +import ExtraTile from "./ExtraTile"; import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState"; import { NotificationColor } from "../../../stores/notifications/NotificationColor"; import { Action } from "../../../dispatcher/actions"; @@ -422,7 +422,7 @@ export default class RoomList extends React.PureComponent { dis.dispatch({ action: Action.ViewRoomDirectory, initialText }); }; - private renderSuggestedRooms(): JSX.Element[] { + private renderSuggestedRooms(): ReactComponentElement[] { return this.state.suggestedRooms.map(room => { const name = room.name || room.canonical_alias || room.aliases.pop() || _t("Empty room"); const avatar = ( @@ -443,7 +443,7 @@ export default class RoomList extends React.PureComponent { }); }; return ( - { }); } - private renderCommunityInvites(): TemporaryTile[] { + private renderCommunityInvites(): ReactComponentElement[] { // TODO: Put community invites in a more sensible place (not in the room list) // See https://github.com/vector-im/element-web/issues/14456 return MatrixClientPeg.get().getGroups().filter(g => { @@ -476,7 +476,7 @@ export default class RoomList extends React.PureComponent { }); }; return ( - { isMinimized={this.props.isMinimized} onResize={this.props.onResize} showSkeleton={showSkeleton} - extraBadTilesThatShouldntExist={extraTiles} + extraTiles={extraTiles} />); } diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx index a2574bf60c..1a9ff182bc 100644 --- a/src/components/views/rooms/RoomSublist.tsx +++ b/src/components/views/rooms/RoomSublist.tsx @@ -17,7 +17,7 @@ limitations under the License. */ import * as React from "react"; -import {createRef} from "react"; +import { createRef, ReactComponentElement } from "react"; import { Room } from "matrix-js-sdk/src/models/room"; import classNames from 'classnames'; import { RovingAccessibleButton, RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex"; @@ -48,7 +48,7 @@ import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNo import RoomListLayoutStore from "../../../stores/room-list/RoomListLayoutStore"; import { arrayFastClone, arrayHasOrderChange } from "../../../utils/arrays"; import { objectExcluding, objectHasDiff } from "../../../utils/objects"; -import TemporaryTile from "./TemporaryTile"; +import ExtraTile from "./ExtraTile"; import { ListNotificationState } from "../../../stores/notifications/ListNotificationState"; import IconizedContextMenu from "../context_menus/IconizedContextMenu"; @@ -73,9 +73,7 @@ interface IProps { onResize: () => void; showSkeleton?: boolean; - // TODO: Don't use this. It's for community invites, and community invites shouldn't be here. - // You should feel bad if you use this. - extraBadTilesThatShouldntExist?: TemporaryTile[]; + extraTiles?: ReactComponentElement[]; // TODO: Account for https://github.com/vector-im/element-web/issues/14179 } @@ -95,7 +93,7 @@ interface IState { isExpanded: boolean; // used for the for expand of the sublist when the room list is being filtered height: number; rooms: Room[]; - filteredExtraTiles?: TemporaryTile[]; + filteredExtraTiles?: ReactComponentElement[]; } export default class RoomSublist extends React.Component { @@ -153,12 +151,12 @@ export default class RoomSublist extends React.Component { return padding; } - private get extraTiles(): TemporaryTile[] | null { + private get extraTiles(): ReactComponentElement[] | null { if (this.state.filteredExtraTiles) { return this.state.filteredExtraTiles; } - if (this.props.extraBadTilesThatShouldntExist) { - return this.props.extraBadTilesThatShouldntExist; + if (this.props.extraTiles) { + return this.props.extraTiles; } return null; } @@ -177,7 +175,7 @@ export default class RoomSublist extends React.Component { } public componentDidUpdate(prevProps: Readonly, prevState: Readonly) { - const prevExtraTiles = prevState.filteredExtraTiles || prevProps.extraBadTilesThatShouldntExist; + const prevExtraTiles = prevState.filteredExtraTiles || prevProps.extraTiles; // as the rooms can come in one by one we need to reevaluate // the amount of available rooms to cap the amount of requested visible rooms by the layout if (RoomSublist.calcNumTiles(prevState.rooms, prevExtraTiles) !== this.numTiles) { @@ -200,8 +198,8 @@ export default class RoomSublist extends React.Component { // If we're supposed to handle extra tiles, take the performance hit and re-render all the // time so we don't have to consider them as part of the visible room optimization. - const prevExtraTiles = this.props.extraBadTilesThatShouldntExist || []; - const nextExtraTiles = (nextState.filteredExtraTiles || nextProps.extraBadTilesThatShouldntExist) || []; + const prevExtraTiles = this.props.extraTiles || []; + const nextExtraTiles = (nextState.filteredExtraTiles || nextProps.extraTiles) || []; if (prevExtraTiles.length > 0 || nextExtraTiles.length > 0) { return true; } @@ -249,10 +247,10 @@ export default class RoomSublist extends React.Component { private onListsUpdated = () => { const stateUpdates: IState & any = {}; // &any is to avoid a cast on the initializer - if (this.props.extraBadTilesThatShouldntExist) { + if (this.props.extraTiles) { const nameCondition = RoomListStore.instance.getFirstNameFilterCondition(); if (nameCondition) { - stateUpdates.filteredExtraTiles = this.props.extraBadTilesThatShouldntExist + stateUpdates.filteredExtraTiles = this.props.extraTiles .filter(t => nameCondition.matches(t.props.displayName || "")); } else if (this.state.filteredExtraTiles) { stateUpdates.filteredExtraTiles = null;