refactor renderSublists for better readability

pull/21833/head
Germain Souquet 2021-04-16 10:17:46 +01:00
parent f1453e8d2b
commit 327983672e
1 changed files with 35 additions and 43 deletions

View File

@ -501,56 +501,48 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
} }
private renderSublists(): React.ReactElement[] { private renderSublists(): React.ReactElement[] {
const components: React.ReactElement[] = [];
const tagOrder = TAG_ORDER.reduce((p, c) => {
if (c === CUSTOM_TAGS_BEFORE_TAG) {
const customTags = Object.keys(this.state.sublists)
.filter(t => isCustomTag(t));
p.push(...customTags);
}
p.push(c);
return p;
}, [] as TagID[]);
// show a skeleton UI if the user is in no rooms and they are not filtering // show a skeleton UI if the user is in no rooms and they are not filtering
const showSkeleton = !this.state.isNameFiltering && const showSkeleton = !this.state.isNameFiltering &&
Object.values(RoomListStore.instance.unfilteredLists).every(list => !list?.length); Object.values(RoomListStore.instance.unfilteredLists).every(list => !list?.length);
for (const orderedTagId of tagOrder) { return TAG_ORDER.reduce((tags, tagId) => {
let extraTiles = null; if (tagId === CUSTOM_TAGS_BEFORE_TAG) {
if (orderedTagId === DefaultTagID.Invite) { const customTags = Object.keys(this.state.sublists)
extraTiles = this.renderCommunityInvites(); .filter(tagId => isCustomTag(tagId));
} else if (orderedTagId === DefaultTagID.Suggested) { tags.push(...customTags);
extraTiles = this.renderSuggestedRooms();
} }
tags.push(tagId);
return tags;
}, [] as TagID[])
.map(orderedTagId => {
let extraTiles = null;
if (orderedTagId === DefaultTagID.Invite) {
extraTiles = this.renderCommunityInvites();
} else if (orderedTagId === DefaultTagID.Suggested) {
extraTiles = this.renderSuggestedRooms();
}
const aesthetics: ITagAesthetics = isCustomTag(orderedTagId) const aesthetics: ITagAesthetics = isCustomTag(orderedTagId)
? customTagAesthetics(orderedTagId) ? customTagAesthetics(orderedTagId)
: this.tagAesthetics[orderedTagId]; : this.tagAesthetics[orderedTagId];
if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`); if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`);
// The cost of mounting/unmounting this component all the time return <RoomSublist
// offsets the memory cost of keeping it at all time and hiding key={`sublist-${orderedTagId}`}
// it when no results are found tagId={orderedTagId}
components.push(<RoomSublist forRooms={true}
key={`sublist-${orderedTagId}`} startAsHidden={aesthetics.defaultHidden}
tagId={orderedTagId} label={aesthetics.sectionLabelRaw ? aesthetics.sectionLabelRaw : _t(aesthetics.sectionLabel)}
forRooms={true} onAddRoom={aesthetics.onAddRoom}
startAsHidden={aesthetics.defaultHidden} addRoomLabel={aesthetics.addRoomLabel ? _t(aesthetics.addRoomLabel) : aesthetics.addRoomLabel}
label={aesthetics.sectionLabelRaw ? aesthetics.sectionLabelRaw : _t(aesthetics.sectionLabel)} addRoomContextMenu={aesthetics.addRoomContextMenu}
onAddRoom={aesthetics.onAddRoom} isMinimized={this.props.isMinimized}
addRoomLabel={aesthetics.addRoomLabel ? _t(aesthetics.addRoomLabel) : aesthetics.addRoomLabel} onResize={this.props.onResize}
addRoomContextMenu={aesthetics.addRoomContextMenu} showSkeleton={showSkeleton}
isMinimized={this.props.isMinimized} extraTiles={extraTiles}
onResize={this.props.onResize} alwaysVisible={!ALWAYS_VISIBLE_TAGS.includes(orderedTagId)}
showSkeleton={showSkeleton} />
extraTiles={extraTiles} });
alwaysVisible={!ALWAYS_VISIBLE_TAGS.includes(orderedTagId)}
/>);
}
return components;
} }
public render() { public render() {