mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-09 16:53:36 -05:00
fix: try to avoid freezing UI due to members sidebar (at least after first load)
This commit is contained in:
Paul Makles
parent
0609b40f81
commit
136faadcec
2 changed files with 111 additions and 106 deletions
|
|
@ -6,11 +6,10 @@ import { Presence } from "revolt-api/types/Users";
|
|||
import { Channel } from "revolt.js/dist/maps/Channels";
|
||||
import { Server } from "revolt.js/dist/maps/Servers";
|
||||
import { User } from "revolt.js/dist/maps/Users";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
import { useContext, useEffect, useMemo } from "preact/hooks";
|
||||
import { useContext, useEffect, useState } from "preact/hooks";
|
||||
|
||||
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
|
||||
import { defer } from "../../../lib/defer";
|
||||
|
||||
import {
|
||||
ClientStatus,
|
||||
|
|
@ -21,14 +20,14 @@ import {
|
|||
import { GenericSidebarBase } from "../SidebarBase";
|
||||
import MemberList, { MemberListGroup } from "./MemberList";
|
||||
|
||||
export const Container = styled.div`
|
||||
/*export const Container = styled.div`
|
||||
padding-top: 48px;
|
||||
|
||||
${isTouchscreenDevice &&
|
||||
css`
|
||||
padding-top: 0;
|
||||
`}
|
||||
`;
|
||||
`;*/
|
||||
|
||||
export default function MemberSidebar() {
|
||||
const channel = useClient().channels.get(
|
||||
|
|
@ -47,119 +46,125 @@ export default function MemberSidebar() {
|
|||
|
||||
function useEntries(channel: Channel, keys: string[], isServer?: boolean) {
|
||||
const client = channel.client;
|
||||
return useMemo(() => {
|
||||
const categories: { [key: string]: [User, string][] } = {
|
||||
online: [],
|
||||
offline: [],
|
||||
};
|
||||
const [entries, setEntries] = useState<MemberListGroup[]>([]);
|
||||
|
||||
const categoryInfo: { [key: string]: string } = {};
|
||||
useEffect(() => {
|
||||
defer(() => {
|
||||
const categories: { [key: string]: [User, string][] } = {
|
||||
online: [],
|
||||
offline: [],
|
||||
};
|
||||
|
||||
let roles: Server["roles"] | undefined;
|
||||
let roleList: string[];
|
||||
if (
|
||||
channel.channel_type === "TextChannel" ||
|
||||
channel.channel_type === "VoiceChannel"
|
||||
) {
|
||||
roles = channel.server?.roles;
|
||||
if (roles) {
|
||||
const list = Object.keys(roles)
|
||||
.map((id) => {
|
||||
return [id, roles![id], roles![id].rank ?? 0] as [
|
||||
string,
|
||||
Role,
|
||||
number,
|
||||
];
|
||||
})
|
||||
.filter(([, role]) => role.hoist);
|
||||
const categoryInfo: { [key: string]: string } = {};
|
||||
|
||||
list.sort((b, a) => b[2] - a[2]);
|
||||
let roles: Server["roles"] | undefined;
|
||||
let roleList: string[];
|
||||
if (
|
||||
channel.channel_type === "TextChannel" ||
|
||||
channel.channel_type === "VoiceChannel"
|
||||
) {
|
||||
roles = channel.server?.roles;
|
||||
if (roles) {
|
||||
const list = Object.keys(roles)
|
||||
.map((id) => {
|
||||
return [id, roles![id], roles![id].rank ?? 0] as [
|
||||
string,
|
||||
Role,
|
||||
number,
|
||||
];
|
||||
})
|
||||
.filter(([, role]) => role.hoist);
|
||||
|
||||
list.forEach(([id, role]) => {
|
||||
if (categories[id]) return;
|
||||
categories[id] = [];
|
||||
categoryInfo[id] = role.name;
|
||||
});
|
||||
list.sort((b, a) => b[2] - a[2]);
|
||||
|
||||
roleList = list.map((x) => x[0]);
|
||||
}
|
||||
}
|
||||
list.forEach(([id, role]) => {
|
||||
if (categories[id]) return;
|
||||
categories[id] = [];
|
||||
categoryInfo[id] = role.name;
|
||||
});
|
||||
|
||||
keys.forEach((key) => {
|
||||
let u;
|
||||
if (isServer) {
|
||||
const { server, user } = JSON.parse(key);
|
||||
if (server !== channel.server_id) return;
|
||||
u = client.users.get(user);
|
||||
} else {
|
||||
u = client.users.get(key);
|
||||
roleList = list.map((x) => x[0]);
|
||||
}
|
||||
}
|
||||
|
||||
if (!u) return;
|
||||
|
||||
const member = client.members.get(key);
|
||||
const sort = member?.nickname ?? u.username;
|
||||
const entry = [u, sort] as [User, string];
|
||||
|
||||
if (!u.online || u.status?.presence === Presence.Invisible) {
|
||||
categories.offline.push(entry);
|
||||
} else {
|
||||
keys.forEach((key) => {
|
||||
let u;
|
||||
if (isServer) {
|
||||
// Sort users into hoisted roles here.
|
||||
if (member?.roles && roles) {
|
||||
let success = false;
|
||||
for (const role of roleList) {
|
||||
if (member.roles.includes(role)) {
|
||||
categories[role].push(entry);
|
||||
success = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (success) return;
|
||||
}
|
||||
const { server, user } = JSON.parse(key);
|
||||
if (server !== channel.server_id) return;
|
||||
u = client.users.get(user);
|
||||
} else {
|
||||
// Sort users into "participants" list here.
|
||||
// For voice calls.
|
||||
u = client.users.get(key);
|
||||
}
|
||||
|
||||
categories.online.push(entry);
|
||||
}
|
||||
});
|
||||
if (!u) return;
|
||||
|
||||
Object.keys(categories).forEach((key) =>
|
||||
categories[key].sort((a, b) => a[1].localeCompare(b[1])),
|
||||
);
|
||||
const member = client.members.get(key);
|
||||
const sort = member?.nickname ?? u.username;
|
||||
const entry = [u, sort] as [User, string];
|
||||
|
||||
const entries: MemberListGroup[] = [];
|
||||
if (!u.online || u.status?.presence === Presence.Invisible) {
|
||||
categories.offline.push(entry);
|
||||
} else {
|
||||
if (isServer) {
|
||||
// Sort users into hoisted roles here.
|
||||
if (member?.roles && roles) {
|
||||
let success = false;
|
||||
for (const role of roleList) {
|
||||
if (member.roles.includes(role)) {
|
||||
categories[role].push(entry);
|
||||
success = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
Object.keys(categoryInfo).forEach((key) => {
|
||||
if (categories[key].length > 0) {
|
||||
if (success) return;
|
||||
}
|
||||
} else {
|
||||
// Sort users into "participants" list here.
|
||||
// For voice calls.
|
||||
}
|
||||
|
||||
categories.online.push(entry);
|
||||
}
|
||||
});
|
||||
|
||||
Object.keys(categories).forEach((key) =>
|
||||
categories[key].sort((a, b) => a[1].localeCompare(b[1])),
|
||||
);
|
||||
|
||||
const entries: MemberListGroup[] = [];
|
||||
|
||||
Object.keys(categoryInfo).forEach((key) => {
|
||||
if (categories[key].length > 0) {
|
||||
entries.push({
|
||||
type: "role",
|
||||
name: categoryInfo[key],
|
||||
users: categories[key].map((x) => x[0]),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (categories.online.length > 0) {
|
||||
entries.push({
|
||||
type: "role",
|
||||
name: categoryInfo[key],
|
||||
users: categories[key].map((x) => x[0]),
|
||||
type: "online",
|
||||
users: categories.online.map((x) => x[0]),
|
||||
});
|
||||
}
|
||||
|
||||
if (categories.offline.length > 0) {
|
||||
entries.push({
|
||||
type: "offline",
|
||||
users: categories.offline.map((x) => x[0]),
|
||||
});
|
||||
}
|
||||
|
||||
setEntries(entries);
|
||||
});
|
||||
|
||||
if (categories.online.length > 0) {
|
||||
entries.push({
|
||||
type: "online",
|
||||
users: categories.online.map((x) => x[0]),
|
||||
});
|
||||
}
|
||||
|
||||
if (categories.offline.length > 0) {
|
||||
entries.push({
|
||||
type: "offline",
|
||||
users: categories.offline.map((x) => x[0]),
|
||||
});
|
||||
}
|
||||
|
||||
return entries;
|
||||
// eslint-disable-next-line
|
||||
}, [keys]);
|
||||
|
||||
return entries;
|
||||
}
|
||||
|
||||
export const GroupMemberSidebar = observer(
|
||||
|
|
@ -168,10 +173,10 @@ export const GroupMemberSidebar = observer(
|
|||
const entries = useEntries(channel, keys);
|
||||
|
||||
return (
|
||||
<GenericSidebarBase>
|
||||
<Container>
|
||||
{/*{isTouchscreenDevice && <div>Group settings go here</div>}*/}
|
||||
</Container>
|
||||
<GenericSidebarBase data-scroll-offset="with-padding">
|
||||
{/*<Container>
|
||||
{isTouchscreenDevice && <div>Group settings go here</div>}
|
||||
</Container>*/}
|
||||
|
||||
<MemberList entries={entries} context={channel} />
|
||||
</GenericSidebarBase>
|
||||
|
|
@ -205,10 +210,10 @@ export const ServerMemberSidebar = observer(
|
|||
const entries = useEntries(channel, keys, true);
|
||||
|
||||
return (
|
||||
<GenericSidebarBase>
|
||||
<Container>
|
||||
{/*{isTouchscreenDevice && <div>Server settings go here</div>}*/}
|
||||
</Container>
|
||||
<GenericSidebarBase data-scroll-offset="with-padding">
|
||||
{/*<Container>
|
||||
{isTouchscreenDevice && <div>Server settings go here</div>}
|
||||
</Container>*/}
|
||||
<MemberList entries={entries} context={channel} />
|
||||
</GenericSidebarBase>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ export function SearchSidebar({ close }: Props) {
|
|||
}, [sort]);
|
||||
|
||||
return (
|
||||
<GenericSidebarBase>
|
||||
<GenericSidebarBase data-scroll-offset="with-padding">
|
||||
<GenericSidebarList>
|
||||
<SearchBase>
|
||||
<Overline type="accent" block hover>
|
||||
|
|
|
|||
Loading…
Reference in a new issue