Reduce re-renders of sidebars.

This commit is contained in:
Paul 2021-06-19 23:12:27 +01:00
parent 014512440f
commit a1d3b3503b
2 changed files with 33 additions and 8 deletions

View file

@ -7,7 +7,7 @@ import { WithDispatcher } from "../../../redux/reducers";
import { Unreads } from "../../../redux/reducers/unreads";
import { connectState } from "../../../redux/connector";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { useChannels, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
import { useChannels, useDMs, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
import { Users as UsersNS } from 'revolt.js/dist/api/objects';
import { mapChannelWithUnread, useUnreads } from "./common";
import { Channels } from "revolt.js/dist/api/objects";
@ -47,22 +47,24 @@ function HomeSidebar(props: Props) {
const { pathname } = useLocation();
const client = useContext(AppContext);
const { channel } = useParams<{ channel: string }>();
const { openScreen, writeClipboard } = useIntermediate();
const { openScreen } = useIntermediate();
const ctx = useForceUpdate();
const users = useUsers(undefined, ctx);
const channels = useChannels(undefined, ctx);
const channels = useDMs(ctx);
const obj = channels.find(x => x?._id === channel);
if (channel && !obj) return <Redirect to="/" />;
if (obj) useUnreads({ ...props, channel: obj });
const channelsArr = (channels
.filter(
x => x && (x.channel_type === "Group" || (x.channel_type === 'DirectMessage' && x.active))
) as (Channels.GroupChannel | Channels.DirectMessageChannel)[])
const channelsArr = channels
.filter(x => x.channel_type !== 'SavedMessages')
.map(x => mapChannelWithUnread(x, props.unreads));
const users = useUsers(
(channelsArr as (Channels.DirectMessageChannel | Channels.GroupChannel)[])
.reduce((prev: any, cur) => [ ...prev, ...cur.recipients ], [])
, ctx);
channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
return (

View file

@ -68,6 +68,29 @@ export function useServers(ids?: string[], context?: HookContext) {
return useObject('servers', ids, context) as (Readonly<Servers.Server> | undefined)[];
}
export function useDMs(context?: HookContext) {
const ctx = useForceUpdate(context);
function mutation(target: string) {
let channel = ctx.client.channels.get(target);
if (channel) {
if ((channel.channel_type === 'DirectMessage' && channel.active) || channel.channel_type === 'Group') {
ctx.forceUpdate();
}
}
}
const map = ctx.client.channels;
useEffect(() => {
map.addListener("update", mutation);
return () => map.removeListener("update", mutation);
}, []);
return map
.toArray()
.filter(x => x.channel_type === 'DirectMessage' || x.channel_type === 'Group' || x.channel_type === 'SavedMessages') as (Channels.GroupChannel | Channels.DirectMessageChannel | Channels.SavedMessagesChannel)[];
}
export function useUserPermission(id: string, context?: HookContext) {
const ctx = useForceUpdate(context);