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

patch: prevent re-render on member list render

Browse source
This commit is contained in:
Paul Makles 2022-01-04 14:35:08 +00:00
parent 0543e56678
commit 270624d5ec
1 changed files with 26 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/components/navigation/right/MemberSidebar.tsx
View file

@ -1,4 +1,6 @@
/* eslint-disable react-hooks/rules-of-hooks */ /* eslint-disable react-hooks/rules-of-hooks */
import isEqual from "lodash.isequal";
import { reaction } from "mobx";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Role } from "revolt-api/types/Servers"; import { Role } from "revolt-api/types/Servers";
@ -7,7 +9,7 @@ import { Channel } from "revolt.js/dist/maps/Channels";
import { Server } from "revolt.js/dist/maps/Servers"; import { Server } from "revolt.js/dist/maps/Servers";
import { User } from "revolt.js/dist/maps/Users"; import { User } from "revolt.js/dist/maps/Users";
import { useContext, useEffect, useState } from "preact/hooks"; import { Inputs, useContext, useEffect, useRef, useState } from "preact/hooks";
import { defer } from "../../../lib/defer"; import { defer } from "../../../lib/defer";
@ -44,11 +46,16 @@ export default function MemberSidebar() {
} }
} }
function useEntries(channel: Channel, keys: string[], isServer?: boolean) { function useEntries(
channel: Channel,
keys: string[],
renderListener: (effect: () => void) => () => void,
isServer?: boolean,
) {
const client = channel.client; const client = channel.client;
const [entries, setEntries] = useState<MemberListGroup[]>([]); const [entries, setEntries] = useState<MemberListGroup[]>([]);
useEffect(() => { function sort() {
defer(() => { defer(() => {
const categories: { [key: string]: [User, string][] } = { const categories: { [key: string]: [User, string][] } = {
online: [], online: [],
@ -161,16 +168,23 @@ function useEntries(channel: Channel, keys: string[], isServer?: boolean) {
setEntries(entries); setEntries(entries);
}); });
}
useEffect(() => sort(), []);
useEffect(() => {
return renderListener(sort);
// eslint-disable-next-line // eslint-disable-next-line
}, [keys]); }, [renderListener]);
return entries; return entries;
} }
export const GroupMemberSidebar = observer( export const GroupMemberSidebar = observer(
({ channel }: { channel: Channel }) => { ({ channel }: { channel: Channel }) => {
const keys = [...channel.recipient_ids!]; const entries = useEntries(channel, channel.recipient_ids!, (effect) =>
const entries = useEntries(channel, keys); reaction(() => channel.recipient_ids, effect),
);
return ( return (
<GenericSidebarBase data-scroll-offset="with-padding"> <GenericSidebarBase data-scroll-offset="with-padding">
@ -206,8 +220,12 @@ export const ServerMemberSidebar = observer(
// eslint-disable-next-line // eslint-disable-next-line
}, [status, channel.server_id]); }, [status, channel.server_id]);
const keys = [...client.members.keys()]; const entries = useEntries(
const entries = useEntries(channel, keys, true); channel,
[...client.members.keys()],
(effect) => reaction(() => [...client.members.keys()], effect),
true,
);
return ( return (
<GenericSidebarBase data-scroll-offset="with-padding"> <GenericSidebarBase data-scroll-offset="with-padding">