HMC/handmade-revolt
2
0
Fork 0
forked from abner/for-legacy-web
Code Pull Requests Actions Activity

Work towards removing useUsers.

Browse Source
This commit is contained in:
Paul
2021-07-29 15:11:21 +01:00
parent cf3930b094
commit 4dffaad6c1
25 changed files with 580 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files

342
src/components/navigation/right/MemberSidebar.tsx
View File

@@ -1,3 +1,4 @@
import { observer } from "mobx-react-lite";
import { useParams } from "react-router";
import { Link } from "react-router-dom";
import { User } from "revolt.js";
@@ -7,6 +8,7 @@ import { ClientboundNotification } from "revolt.js/dist/websocket/notifications"
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { useData } from "../../../mobx/State";
import { getState } from "../../../redux";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
@@ -52,17 +54,16 @@ export default function MemberSidebar(props: { channel?: Channels.Channel }) {
}
}
export function GroupMemberSidebar({
channel,
ctx,
}: Props & { channel: Channels.GroupChannel }) {
const { openScreen } = useIntermediate();
const users = useUsers(undefined, ctx);
const members = channel.recipients
.map((x) => users.find((y) => y?._id === x))
.filter((x) => typeof x !== "undefined") as User[];
export const GroupMemberSidebar = observer(
({ channel }: Props & { channel: Channels.GroupChannel }) => {
const { openScreen } = useIntermediate();
/*const voice = useContext(VoiceContext);
const store = useData();
const members = channel.recipients
?.map((member) => store.users.get(member)!)
.filter((x) => typeof x !== "undefined");
/*const voice = useContext(VoiceContext);
const voiceActive = voice.roomId === channel._id;
let voiceParticipants: User[] = [];
@@ -77,34 +78,36 @@ export function GroupMemberSidebar({
voiceParticipants.sort((a, b) => a.username.localeCompare(b.username));
}*/
members.sort((a, b) => {
// ! FIXME: should probably rewrite all this code
const l =
+(
(a.online && a.status?.presence !== Users.Presence.Invisible) ??
false
) | 0;
const r =
+(
(b.online && b.status?.presence !== Users.Presence.Invisible) ??
false
) | 0;
members.sort((a, b) => {
// ! FIXME: should probably rewrite all this code
const l =
+(
(a.online &&
a.status?.presence !== Users.Presence.Invisible) ??
false
) | 0;
const r =
+(
(b.online &&
b.status?.presence !== Users.Presence.Invisible) ??
false
) | 0;
const n = r - l;
if (n !== 0) {
return n;
}
const n = r - l;
if (n !== 0) {
return n;
}
return a.username.localeCompare(b.username);
});
return a.username.localeCompare(b.username);
});
return (
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo id={channel._id} />
<Search channel={channel._id} />
return (
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo id={channel._id} />
<Search channel={channel._id} />
{/*voiceActive && voiceParticipants.length !== 0 && (
{/*voiceActive && voiceParticipants.length !== 0 && (
<Fragment>
<Category
type="members"
@@ -129,140 +132,25 @@ export function GroupMemberSidebar({
)}
</Fragment>
)*/}
<CollapsibleSection
sticky
id="members"
defaultValue
summary={
<Category
variant="uniform"
text={
<span>
<Text id="app.main.categories.members" /> —{" "}
{channel.recipients.length}
</span>
}
/>
}>
{members.length === 0 && (
<img src={placeholderSVG} loading="eager" />
)}
{members.map(
(user) =>
user && (
<UserButton
key={user._id}
user={user}
context={channel}
onClick={() =>
openScreen({
id: "profile",
user_id: user._id,
})
}
/>
),
)}
</CollapsibleSection>
</GenericSidebarList>
</GenericSidebarBase>
);
}
export function ServerMemberSidebar({
channel,
ctx,
}: Props & { channel: Channels.TextChannel }) {
const [members, setMembers] = useState<Servers.Member[] | undefined>(
undefined,
);
const users = useUsers(members?.map((x) => x._id.user) ?? []).filter(
(x) => typeof x !== "undefined",
ctx,
) as Users.User[];
const { openScreen } = useIntermediate();
const status = useContext(StatusContext);
const client = useContext(AppContext);
useEffect(() => {
if (status === ClientStatus.ONLINE && typeof members === "undefined") {
client.members
.fetchMembers(channel.server)
.then((members) => setMembers(members));
}
}, [status]);
// ! FIXME: temporary code
useEffect(() => {
function onPacket(packet: ClientboundNotification) {
if (!members) return;
if (packet.type === "ServerMemberJoin") {
if (packet.id !== channel.server) return;
setMembers([
...members,
{ _id: { server: packet.id, user: packet.user } },
]);
} else if (packet.type === "ServerMemberLeave") {
if (packet.id !== channel.server) return;
setMembers(
members.filter(
(x) =>
!(
x._id.user === packet.user &&
x._id.server === packet.id
),
),
);
}
}
client.addListener("packet", onPacket);
return () => client.removeListener("packet", onPacket);
}, [members]);
// copy paste from above
users.sort((a, b) => {
// ! FIXME: should probably rewrite all this code
const l =
+(
(a.online && a.status?.presence !== Users.Presence.Invisible) ??
false
) | 0;
const r =
+(
(b.online && b.status?.presence !== Users.Presence.Invisible) ??
false
) | 0;
const n = r - l;
if (n !== 0) {
return n;
}
return a.username.localeCompare(b.username);
});
return (
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo id={channel._id} />
<Search channel={channel._id} />
<div>{!members && <Preloader type="ring" />}</div>
{members && (
<CollapsibleSection
//sticky //will re-add later, need to fix css
sticky
id="members"
defaultValue
summary={
<span>
<Text id="app.main.categories.members" /> —{" "}
{users.length}
</span>
<Category
variant="uniform"
text={
<span>
<Text id="app.main.categories.members" />{" "}
— {channel.recipients.length}
</span>
}
/>
}>
{users.length === 0 && (
{members.length === 0 && (
<img src={placeholderSVG} loading="eager" />
)}
{users.map(
{members.map(
(user) =>
user && (
<UserButton
@@ -279,11 +167,133 @@ export function ServerMemberSidebar({
),
)}
</CollapsibleSection>
)}
</GenericSidebarList>
</GenericSidebarBase>
);
}
</GenericSidebarList>
</GenericSidebarBase>
);
},
);
export const ServerMemberSidebar = observer(
({ channel }: Props & { channel: Channels.TextChannel }) => {
const [members, setMembers] = useState<Servers.Member[] | undefined>(
undefined,
);
const store = useData();
const users = members
?.map((member) => store.users.get(member._id.user)!)
.filter((x) => typeof x !== "undefined");
const { openScreen } = useIntermediate();
const status = useContext(StatusContext);
const client = useContext(AppContext);
useEffect(() => {
if (
status === ClientStatus.ONLINE &&
typeof members === "undefined"
) {
client.members
.fetchMembers(channel.server)
.then((members) => setMembers(members));
}
}, [status]);
// ! FIXME: temporary code
useEffect(() => {
function onPacket(packet: ClientboundNotification) {
if (!members) return;
if (packet.type === "ServerMemberJoin") {
if (packet.id !== channel.server) return;
setMembers([
...members,
{ _id: { server: packet.id, user: packet.user } },
]);
} else if (packet.type === "ServerMemberLeave") {
if (packet.id !== channel.server) return;
setMembers(
members.filter(
(x) =>
!(
x._id.user === packet.user &&
x._id.server === packet.id
),
),
);
}
}
client.addListener("packet", onPacket);
return () => client.removeListener("packet", onPacket);
}, [members]);
// copy paste from above
users?.sort((a, b) => {
// ! FIXME: should probably rewrite all this code
const l =
+(
(a.online &&
a.status?.presence !== Users.Presence.Invisible) ??
false
) | 0;
const r =
+(
(b.online &&
b.status?.presence !== Users.Presence.Invisible) ??
false
) | 0;
const n = r - l;
if (n !== 0) {
return n;
}
return a.username.localeCompare(b.username);
});
return (
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo id={channel._id} />
<Search channel={channel._id} />
<div>{!members && <Preloader type="ring" />}</div>
{members && (
<CollapsibleSection
//sticky //will re-add later, need to fix css
id="members"
defaultValue
summary={
<span>
<Text id="app.main.categories.members" /> —{" "}
{users?.length ?? 0}
</span>
}>
{(users?.length ?? 0) === 0 && (
<img src={placeholderSVG} loading="eager" />
)}
{users?.map(
(user) =>
user && (
<UserButton
key={user._id}
user={user}
context={channel}
onClick={() =>
openScreen({
id: "profile",
user_id: user._id,
})
}
/>
),
)}
</CollapsibleSection>
)}
</GenericSidebarList>
</GenericSidebarBase>
);
},
);
function Search({ channel }: { channel: string }) {
if (!getState().experiments.enabled?.includes("search")) return null;