cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-22 07:00:58 -05:00
Code Issues Projects Releases Packages Wiki Activity

Reduce re-renders of sidebars.

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/navigation/left/HomeSidebar.tsx
View file

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

23
src/context/revoltjs/hooks.ts
View file

@ -68,6 +68,29 @@ export function useServers(ids?: string[], context?: HookContext) {
return useObject('servers', ids, context) as (Readonly<Servers.Server> | undefined)[]; 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) { export function useUserPermission(id: string, context?: HookContext) {
const ctx = useForceUpdate(context); const ctx = useForceUpdate(context);