mirror of
https://github.com/revoltchat/revite.git
synced 2024-12-25 15:12:08 -05:00
Work towards removing useUsers.
This commit is contained in:
Paul
parent
cf3930b094
commit
4dffaad6c1
25 changed files with 580 additions and 501 deletions
|
|
@ -1,8 +1,14 @@
|
|||
module.exports = {
|
||||
"tabWidth": 4,
|
||||
"trailingComma": "all",
|
||||
"jsxBracketSameLine": true,
|
||||
"importOrder": ["preact|classnames|.scss$", "/(lib)", "/(redux)", "/(context)", "/(ui|common)|.svg$", "^[./]"],
|
||||
"importOrderSeparation": true,
|
||||
}
|
||||
|
||||
tabWidth: 4,
|
||||
trailingComma: "all",
|
||||
jsxBracketSameLine: true,
|
||||
importOrder: [
|
||||
"preact|classnames|.scss$",
|
||||
"/(lib)",
|
||||
"/(redux|mobx)",
|
||||
"/(context)",
|
||||
"/(ui|common)|.svg$",
|
||||
"^[./]",
|
||||
],
|
||||
importOrderSeparation: true,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { InfoCircle } from "@styled-icons/boxicons-regular";
|
||||
import { User } from "revolt.js";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { User } from "../../../mobx";
|
||||
|
||||
import { Children } from "../../../types/Preact";
|
||||
import Tooltip from "../Tooltip";
|
||||
import { Username } from "./UserShort";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { MicrophoneOff } from "@styled-icons/boxicons-regular";
|
||||
import { User } from "revolt.js";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Users } from "revolt.js/dist/api/objects";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
|
|
@ -8,6 +8,7 @@ import { useContext } from "preact/hooks";
|
|||
import { ThemeContext } from "../../../context/Theme";
|
||||
import { AppContext } from "../../../context/revoltjs/RevoltClient";
|
||||
|
||||
import { User } from "../../../mobx";
|
||||
import IconBase, { IconBaseProps } from "../IconBase";
|
||||
import fallback from "../assets/user.png";
|
||||
|
||||
|
|
@ -50,55 +51,63 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
|
|||
`}
|
||||
`;
|
||||
|
||||
export default function UserIcon(
|
||||
props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>,
|
||||
) {
|
||||
const client = useContext(AppContext);
|
||||
export default observer(
|
||||
(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) => {
|
||||
const client = useContext(AppContext);
|
||||
|
||||
const {
|
||||
target,
|
||||
attachment,
|
||||
size,
|
||||
voice,
|
||||
status,
|
||||
animate,
|
||||
mask,
|
||||
children,
|
||||
as,
|
||||
...svgProps
|
||||
} = props;
|
||||
const iconURL =
|
||||
client.generateFileURL(
|
||||
target?.avatar ?? attachment,
|
||||
{ max_side: 256 },
|
||||
const {
|
||||
target,
|
||||
attachment,
|
||||
size,
|
||||
voice,
|
||||
status,
|
||||
animate,
|
||||
) ?? (target ? client.users.getDefaultAvatarURL(target._id) : fallback);
|
||||
mask,
|
||||
children,
|
||||
as,
|
||||
...svgProps
|
||||
} = props;
|
||||
const iconURL =
|
||||
client.generateFileURL(
|
||||
target?.avatar ?? attachment,
|
||||
{ max_side: 256 },
|
||||
animate,
|
||||
) ??
|
||||
(target ? client.users.getDefaultAvatarURL(target._id) : fallback);
|
||||
|
||||
return (
|
||||
<IconBase
|
||||
{...svgProps}
|
||||
width={size}
|
||||
height={size}
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 32 32">
|
||||
<foreignObject
|
||||
x="0"
|
||||
y="0"
|
||||
width="32"
|
||||
height="32"
|
||||
mask={mask ?? (status ? "url(#user)" : undefined)}>
|
||||
{<img src={iconURL} draggable={false} loading="lazy" />}
|
||||
</foreignObject>
|
||||
{props.status && (
|
||||
<circle cx="27" cy="27" r="5" fill={useStatusColour(target)} />
|
||||
)}
|
||||
{props.voice && (
|
||||
<foreignObject x="22" y="22" width="10" height="10">
|
||||
<VoiceIndicator status={props.voice}>
|
||||
{props.voice === "muted" && <MicrophoneOff size={6} />}
|
||||
</VoiceIndicator>
|
||||
return (
|
||||
<IconBase
|
||||
{...svgProps}
|
||||
width={size}
|
||||
height={size}
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 32 32">
|
||||
<foreignObject
|
||||
x="0"
|
||||
y="0"
|
||||
width="32"
|
||||
height="32"
|
||||
mask={mask ?? (status ? "url(#user)" : undefined)}>
|
||||
{<img src={iconURL} draggable={false} loading="lazy" />}
|
||||
</foreignObject>
|
||||
)}
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
{props.status && (
|
||||
<circle
|
||||
cx="27"
|
||||
cy="27"
|
||||
r="5"
|
||||
fill={useStatusColour(target)}
|
||||
/>
|
||||
)}
|
||||
{props.voice && (
|
||||
<foreignObject x="22" y="22" width="10" height="10">
|
||||
<VoiceIndicator status={props.voice}>
|
||||
{props.voice === "muted" && (
|
||||
<MicrophoneOff size={6} />
|
||||
)}
|
||||
</VoiceIndicator>
|
||||
</foreignObject>
|
||||
)}
|
||||
</IconBase>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import { observer } from "mobx-react-lite";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { User } from "revolt.js";
|
||||
|
||||
import { Text } from "preact-i18n";
|
||||
|
||||
import { User } from "../../../mobx";
|
||||
|
||||
import {
|
||||
useForceUpdate,
|
||||
useMember,
|
||||
|
|
@ -11,44 +13,46 @@ import {
|
|||
|
||||
import UserIcon from "./UserIcon";
|
||||
|
||||
export function Username({
|
||||
user,
|
||||
...otherProps
|
||||
}: { user?: User } & JSX.HTMLAttributes<HTMLElement>) {
|
||||
let username = user?.username;
|
||||
let color;
|
||||
export const Username = observer(
|
||||
({
|
||||
user,
|
||||
...otherProps
|
||||
}: { user?: User } & JSX.HTMLAttributes<HTMLElement>) => {
|
||||
let username = user?.username;
|
||||
let color;
|
||||
|
||||
// ! FIXME: this must be really bad for perf.
|
||||
if (user) {
|
||||
let { server } = useParams<{ server?: string }>();
|
||||
if (server) {
|
||||
let ctx = useForceUpdate();
|
||||
let member = useMember(`${server}${user._id}`, ctx);
|
||||
if (member) {
|
||||
if (member.nickname) {
|
||||
username = member.nickname;
|
||||
}
|
||||
// ! FIXME: this must be really bad for perf.
|
||||
if (user) {
|
||||
let { server } = useParams<{ server?: string }>();
|
||||
if (server) {
|
||||
let ctx = useForceUpdate();
|
||||
let member = useMember(`${server}${user._id}`, ctx);
|
||||
if (member) {
|
||||
if (member.nickname) {
|
||||
username = member.nickname;
|
||||
}
|
||||
|
||||
if (member.roles && member.roles.length > 0) {
|
||||
let s = useServer(server, ctx);
|
||||
for (let role of member.roles) {
|
||||
let c = s?.roles?.[role].colour;
|
||||
if (c) {
|
||||
color = c;
|
||||
continue;
|
||||
if (member.roles && member.roles.length > 0) {
|
||||
let s = useServer(server, ctx);
|
||||
for (let role of member.roles) {
|
||||
let c = s?.roles?.[role].colour;
|
||||
if (c) {
|
||||
color = c;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<span {...otherProps} style={{ color }}>
|
||||
{username ?? <Text id="app.main.channel.unknown_user" />}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span {...otherProps} style={{ color }}>
|
||||
{username ?? <Text id="app.main.channel.unknown_user" />}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export default function UserShort({
|
||||
user,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { User } from "revolt.js";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Users } from "revolt.js/dist/api/objects";
|
||||
|
||||
import { Text } from "preact-i18n";
|
||||
|
||||
import { User } from "../../../mobx";
|
||||
import Tooltip from "../Tooltip";
|
||||
|
||||
interface Props {
|
||||
|
|
@ -10,7 +11,7 @@ interface Props {
|
|||
tooltip?: boolean;
|
||||
}
|
||||
|
||||
export default function UserStatus({ user, tooltip }: Props) {
|
||||
export default observer(({ user, tooltip }: Props) => {
|
||||
if (user?.online) {
|
||||
if (user.status?.text) {
|
||||
if (tooltip) {
|
||||
|
|
@ -40,4 +41,4 @@ export default function UserStatus({ user, tooltip }: Props) {
|
|||
}
|
||||
|
||||
return <Text id="app.status.offline" />;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { X, Crown } from "@styled-icons/boxicons-regular";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Channels, Users } from "revolt.js/dist/api/objects";
|
||||
|
||||
import styles from "./Item.module.scss";
|
||||
|
|
@ -9,6 +10,8 @@ import { Localizer, Text } from "preact-i18n";
|
|||
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
|
||||
import { stopPropagation } from "../../../lib/stopPropagation";
|
||||
|
||||
import { User } from "../../../mobx";
|
||||
|
||||
import { useIntermediate } from "../../../context/intermediate/Intermediate";
|
||||
|
||||
import ChannelIcon from "../../common/ChannelIcon";
|
||||
|
|
@ -30,12 +33,12 @@ type CommonProps = Omit<
|
|||
};
|
||||
|
||||
type UserProps = CommonProps & {
|
||||
user: Users.User;
|
||||
user: User;
|
||||
context?: Channels.Channel;
|
||||
channel?: Channels.DirectMessageChannel;
|
||||
};
|
||||
|
||||
export function UserButton(props: UserProps) {
|
||||
export const UserButton = observer((props: UserProps) => {
|
||||
const { active, alert, alertCount, user, context, channel, ...divProps } =
|
||||
props;
|
||||
const { openScreen } = useIntermediate();
|
||||
|
|
@ -109,11 +112,11 @@ export function UserButton(props: UserProps) {
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
type ChannelProps = CommonProps & {
|
||||
channel: Channels.Channel & { unread?: string };
|
||||
user?: Users.User;
|
||||
user?: User;
|
||||
compact?: boolean;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import {
|
|||
Wrench,
|
||||
Notepad,
|
||||
} from "@styled-icons/boxicons-solid";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Link, Redirect, useLocation, useParams } from "react-router-dom";
|
||||
import { Channels } from "revolt.js/dist/api/objects";
|
||||
import { Users as UsersNS } from "revolt.js/dist/api/objects";
|
||||
|
|
@ -15,6 +16,7 @@ import ConditionalLink from "../../../lib/ConditionalLink";
|
|||
import PaintCounter from "../../../lib/PaintCounter";
|
||||
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
|
||||
|
||||
import { useData } from "../../../mobx/State";
|
||||
import { dispatch } from "../../../redux";
|
||||
import { connectState } from "../../../redux/connector";
|
||||
import { Unreads } from "../../../redux/reducers/unreads";
|
||||
|
|
@ -39,7 +41,7 @@ type Props = {
|
|||
unreads: Unreads;
|
||||
};
|
||||
|
||||
function HomeSidebar(props: Props) {
|
||||
const HomeSidebar = observer((props: Props) => {
|
||||
const { pathname } = useLocation();
|
||||
const client = useContext(AppContext);
|
||||
const { channel } = useParams<{ channel: string }>();
|
||||
|
|
@ -66,7 +68,7 @@ function HomeSidebar(props: Props) {
|
|||
.filter((x) => x.channel_type !== "SavedMessages")
|
||||
.map((x) => mapChannelWithUnread(x, props.unreads));
|
||||
|
||||
const users = useUsers(undefined, ctx);
|
||||
const store = useData();
|
||||
channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
|
||||
|
||||
return (
|
||||
|
|
@ -89,7 +91,7 @@ function HomeSidebar(props: Props) {
|
|||
<ButtonItem
|
||||
active={pathname === "/friends"}
|
||||
alert={
|
||||
typeof users.find(
|
||||
typeof [...store.users.values()].find(
|
||||
(user) =>
|
||||
user?.relationship ===
|
||||
UsersNS.Relationship.Incoming,
|
||||
|
|
@ -143,7 +145,7 @@ function HomeSidebar(props: Props) {
|
|||
if (!x.active) return null;
|
||||
|
||||
const recipient = client.channels.getRecipient(x._id);
|
||||
user = users.find((x) => x?._id === recipient);
|
||||
user = store.users.get(recipient);
|
||||
|
||||
if (!user) {
|
||||
console.warn(
|
||||
|
|
@ -171,7 +173,7 @@ function HomeSidebar(props: Props) {
|
|||
</GenericSidebarList>
|
||||
</GenericSidebarBase>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default connectState(
|
||||
HomeSidebar,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Plus } from "@styled-icons/boxicons-regular";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useLocation, useParams } from "react-router-dom";
|
||||
import { Channel, Servers, Users } from "revolt.js/dist/api/objects";
|
||||
import styled, { css } from "styled-components";
|
||||
|
|
@ -9,17 +10,17 @@ import ConditionalLink from "../../../lib/ConditionalLink";
|
|||
import PaintCounter from "../../../lib/PaintCounter";
|
||||
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
|
||||
|
||||
import { useData } from "../../../mobx/State";
|
||||
import { connectState } from "../../../redux/connector";
|
||||
import { LastOpened } from "../../../redux/reducers/last_opened";
|
||||
import { Unreads } from "../../../redux/reducers/unreads";
|
||||
|
||||
import { useIntermediate } from "../../../context/intermediate/Intermediate";
|
||||
import { useClient } from "../../../context/revoltjs/RevoltClient";
|
||||
import {
|
||||
useChannels,
|
||||
useForceUpdate,
|
||||
useSelf,
|
||||
useServers,
|
||||
useUsers,
|
||||
} from "../../../context/revoltjs/hooks";
|
||||
|
||||
import logoSVG from "../../../assets/logo.svg";
|
||||
|
|
@ -178,14 +179,16 @@ interface Props {
|
|||
lastOpened: LastOpened;
|
||||
}
|
||||
|
||||
export function ServerListSidebar({ unreads, lastOpened }: Props) {
|
||||
export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
|
||||
const store = useData();
|
||||
const client = useClient();
|
||||
const self = store.users.get(client.user!._id);
|
||||
|
||||
const ctx = useForceUpdate();
|
||||
const self = useSelf(ctx);
|
||||
const activeServers = useServers(undefined, ctx) as Servers.Server[];
|
||||
const channels = (useChannels(undefined, ctx) as Channel[]).map((x) =>
|
||||
mapChannelWithUnread(x, unreads),
|
||||
);
|
||||
const users = useUsers(undefined, ctx);
|
||||
|
||||
const unreadChannels = channels.filter((x) => x.unread).map((x) => x._id);
|
||||
|
||||
|
|
@ -230,7 +233,11 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
|
|||
}
|
||||
}
|
||||
|
||||
if (users.find((x) => x?.relationship === Users.Relationship.Incoming)) {
|
||||
if (
|
||||
[...store.users.values()].find(
|
||||
(x) => x.relationship === Users.Relationship.Incoming,
|
||||
)
|
||||
) {
|
||||
alertCount++;
|
||||
}
|
||||
|
||||
|
|
@ -298,7 +305,7 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
|
|||
</ServerList>
|
||||
</ServersBase>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default connectState(ServerListSidebar, (state) => {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@ import { useContext, useEffect, useMemo, useState } from "preact/hooks";
|
|||
|
||||
import { internalSubscribe } from "../../lib/eventEmitter";
|
||||
|
||||
import { User } from "../../mobx";
|
||||
|
||||
import { Action } from "../../components/ui/Modal";
|
||||
|
||||
import { Children } from "../../types/Preact";
|
||||
|
|
@ -42,10 +44,10 @@ export type Screen =
|
|||
type: "create_invite";
|
||||
target: Channels.TextChannel | Channels.GroupChannel;
|
||||
}
|
||||
| { type: "kick_member"; target: Servers.Server; user: string }
|
||||
| { type: "ban_member"; target: Servers.Server; user: string }
|
||||
| { type: "unfriend_user"; target: Users.User }
|
||||
| { type: "block_user"; target: Users.User }
|
||||
| { type: "kick_member"; target: Servers.Server; user: User }
|
||||
| { type: "ban_member"; target: Servers.Server; user: User }
|
||||
| { type: "unfriend_user"; target: User }
|
||||
| { type: "block_user"; target: User }
|
||||
| { type: "create_channel"; target: Servers.Server }
|
||||
))
|
||||
| ({ id: "special_input" } & (
|
||||
|
|
@ -82,7 +84,7 @@ export type Screen =
|
|||
| { id: "modify_account"; field: "username" | "email" | "password" }
|
||||
| { id: "profile"; user_id: string }
|
||||
| { id: "channel_info"; channel_id: string }
|
||||
| { id: "pending_requests"; users: string[] }
|
||||
| { id: "pending_requests"; users: User[] }
|
||||
| {
|
||||
id: "user_picker";
|
||||
omit?: string[];
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { observer } from "mobx-react-lite";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
|
||||
import { ulid } from "ulid";
|
||||
|
|
@ -8,6 +9,9 @@ import { useContext, useEffect, useState } from "preact/hooks";
|
|||
|
||||
import { TextReact } from "../../../lib/i18n";
|
||||
|
||||
import { User } from "../../../mobx";
|
||||
import { useData } from "../../../mobx/State";
|
||||
|
||||
import Message from "../../../components/common/messaging/Message";
|
||||
import UserIcon from "../../../components/common/user/UserIcon";
|
||||
import InputBox from "../../../components/ui/InputBox";
|
||||
|
|
@ -61,14 +65,14 @@ type SpecialProps = { onClose: () => void } & (
|
|||
type: "create_invite";
|
||||
target: Channels.TextChannel | Channels.GroupChannel;
|
||||
}
|
||||
| { type: "kick_member"; target: Servers.Server; user: string }
|
||||
| { type: "ban_member"; target: Servers.Server; user: string }
|
||||
| { type: "unfriend_user"; target: Users.User }
|
||||
| { type: "block_user"; target: Users.User }
|
||||
| { type: "kick_member"; target: Servers.Server; user: User }
|
||||
| { type: "ban_member"; target: Servers.Server; user: User }
|
||||
| { type: "unfriend_user"; target: User }
|
||||
| { type: "block_user"; target: User }
|
||||
| { type: "create_channel"; target: Servers.Server }
|
||||
);
|
||||
|
||||
export function SpecialPromptModal(props: SpecialProps) {
|
||||
export const SpecialPromptModal = observer((props: SpecialProps) => {
|
||||
const client = useContext(AppContext);
|
||||
const [processing, setProcessing] = useState(false);
|
||||
const [error, setError] = useState<undefined | string>(undefined);
|
||||
|
|
@ -286,8 +290,6 @@ export function SpecialPromptModal(props: SpecialProps) {
|
|||
);
|
||||
}
|
||||
case "kick_member": {
|
||||
const user = client.users.get(props.user);
|
||||
|
||||
return (
|
||||
<PromptModal
|
||||
onClose={onClose}
|
||||
|
|
@ -306,7 +308,7 @@ export function SpecialPromptModal(props: SpecialProps) {
|
|||
try {
|
||||
await client.members.kickMember(
|
||||
props.target._id,
|
||||
props.user,
|
||||
props.user._id,
|
||||
);
|
||||
onClose();
|
||||
} catch (err) {
|
||||
|
|
@ -324,10 +326,10 @@ export function SpecialPromptModal(props: SpecialProps) {
|
|||
]}
|
||||
content={
|
||||
<div className={styles.column}>
|
||||
<UserIcon target={user} size={64} />
|
||||
<UserIcon target={props.user} size={64} />
|
||||
<Text
|
||||
id="app.special.modals.prompt.confirm_kick"
|
||||
fields={{ name: user?.username }}
|
||||
fields={{ name: props.user?.username }}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -338,7 +340,6 @@ export function SpecialPromptModal(props: SpecialProps) {
|
|||
}
|
||||
case "ban_member": {
|
||||
const [reason, setReason] = useState<string | undefined>(undefined);
|
||||
const user = client.users.get(props.user);
|
||||
|
||||
return (
|
||||
<PromptModal
|
||||
|
|
@ -358,7 +359,7 @@ export function SpecialPromptModal(props: SpecialProps) {
|
|||
try {
|
||||
await client.servers.banUser(
|
||||
props.target._id,
|
||||
props.user,
|
||||
props.user._id,
|
||||
{ reason },
|
||||
);
|
||||
onClose();
|
||||
|
|
@ -377,10 +378,10 @@ export function SpecialPromptModal(props: SpecialProps) {
|
|||
]}
|
||||
content={
|
||||
<div className={styles.column}>
|
||||
<UserIcon target={user} size={64} />
|
||||
<UserIcon target={props.user} size={64} />
|
||||
<Text
|
||||
id="app.special.modals.prompt.confirm_ban"
|
||||
fields={{ name: user?.username }}
|
||||
fields={{ name: props.user?.username }}
|
||||
/>
|
||||
<Overline>
|
||||
<Text id="app.special.modals.prompt.confirm_ban_reason" />
|
||||
|
|
@ -477,4 +478,4 @@ export function SpecialPromptModal(props: SpecialProps) {
|
|||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,31 +1,30 @@
|
|||
import { observer } from "mobx-react-lite";
|
||||
|
||||
import styles from "./UserPicker.module.scss";
|
||||
import { Text } from "preact-i18n";
|
||||
|
||||
import { User } from "../../../mobx";
|
||||
|
||||
import Modal from "../../../components/ui/Modal";
|
||||
|
||||
import { Friend } from "../../../pages/friends/Friend";
|
||||
import { useUsers } from "../../revoltjs/hooks";
|
||||
|
||||
interface Props {
|
||||
users: string[];
|
||||
users: User[];
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function PendingRequests({ users: ids, onClose }: Props) {
|
||||
const users = useUsers(ids);
|
||||
|
||||
export const PendingRequests = observer(({ users, onClose }: Props) => {
|
||||
return (
|
||||
<Modal
|
||||
visible={true}
|
||||
title={<Text id="app.special.friends.pending" />}
|
||||
onClose={onClose}>
|
||||
<div className={styles.list}>
|
||||
{users
|
||||
.filter((x) => typeof x !== "undefined")
|
||||
.map((x) => (
|
||||
<Friend user={x!} key={x!._id} />
|
||||
))}
|
||||
{users.map((x) => (
|
||||
<Friend user={x!} key={x!._id} />
|
||||
))}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ import styles from "./UserProfile.module.scss";
|
|||
import { Localizer, Text } from "preact-i18n";
|
||||
import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
|
||||
|
||||
import { useData } from "../../../mobx/State";
|
||||
|
||||
import ChannelIcon from "../../../components/common/ChannelIcon";
|
||||
import Tooltip from "../../../components/common/Tooltip";
|
||||
import UserIcon from "../../../components/common/user/UserIcon";
|
||||
|
|
@ -23,6 +25,7 @@ import {
|
|||
AppContext,
|
||||
ClientStatus,
|
||||
StatusContext,
|
||||
useClient,
|
||||
} from "../../revoltjs/RevoltClient";
|
||||
import {
|
||||
useChannels,
|
||||
|
|
@ -58,25 +61,22 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
|
|||
>(undefined);
|
||||
|
||||
const history = useHistory();
|
||||
const client = useContext(AppContext);
|
||||
const client = useClient();
|
||||
const status = useContext(StatusContext);
|
||||
const [tab, setTab] = useState("profile");
|
||||
|
||||
const ctx = useForceUpdate();
|
||||
const all_users = useUsers(undefined, ctx);
|
||||
const channels = useChannels(undefined, ctx);
|
||||
const permissions = useUserPermission(client.user!._id, ctx);
|
||||
|
||||
const user = all_users.find((x) => x!._id === user_id);
|
||||
const users = mutual?.users
|
||||
? all_users.filter((x) => mutual.users.includes(x!._id))
|
||||
: undefined;
|
||||
|
||||
if (!user) {
|
||||
const store = useData();
|
||||
if (!store.users.has(user_id)) {
|
||||
useEffect(onClose, []);
|
||||
return null;
|
||||
}
|
||||
|
||||
const permissions = useUserPermission(user!._id, ctx);
|
||||
const user = store.users.get(user_id)!;
|
||||
const users = mutual?.users.map((id) => store.users.get(id));
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!user_id) return;
|
||||
|
|
|
|||
|
|
@ -82,11 +82,6 @@ export function useUser(id?: string, context?: HookContext) {
|
|||
return useObject("users", id, context) as Readonly<Users.User> | undefined;
|
||||
}
|
||||
|
||||
export function useSelf(context?: HookContext) {
|
||||
const ctx = useForceUpdate(context);
|
||||
return useUser(ctx.client.user!._id, ctx);
|
||||
}
|
||||
|
||||
export function useUsers(ids?: string[], context?: HookContext) {
|
||||
return useObject("users", ids, context) as (
|
||||
| Readonly<Users.User>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,8 @@ import {
|
|||
import { Text } from "preact-i18n";
|
||||
import { useContext } from "preact/hooks";
|
||||
|
||||
import { User } from "../mobx";
|
||||
import { useData } from "../mobx/State";
|
||||
import { dispatch } from "../redux";
|
||||
import { connectState } from "../redux/connector";
|
||||
import {
|
||||
|
|
@ -48,6 +50,7 @@ import {
|
|||
AppContext,
|
||||
ClientStatus,
|
||||
StatusContext,
|
||||
useClient,
|
||||
} from "../context/revoltjs/RevoltClient";
|
||||
import {
|
||||
useChannel,
|
||||
|
|
@ -55,7 +58,6 @@ import {
|
|||
useForceUpdate,
|
||||
useServer,
|
||||
useServerPermission,
|
||||
useUser,
|
||||
useUserPermission,
|
||||
} from "../context/revoltjs/hooks";
|
||||
import { takeError } from "../context/revoltjs/util";
|
||||
|
|
@ -97,16 +99,16 @@ type Action =
|
|||
| { action: "copy_file_link"; attachment: Attachment }
|
||||
| { action: "open_link"; link: string }
|
||||
| { action: "copy_link"; link: string }
|
||||
| { action: "remove_member"; channel: string; user: string }
|
||||
| { action: "kick_member"; target: Servers.Server; user: string }
|
||||
| { action: "ban_member"; target: Servers.Server; user: string }
|
||||
| { action: "view_profile"; user: string }
|
||||
| { action: "message_user"; user: string }
|
||||
| { action: "block_user"; user: Users.User }
|
||||
| { action: "unblock_user"; user: Users.User }
|
||||
| { action: "add_friend"; user: Users.User }
|
||||
| { action: "remove_friend"; user: Users.User }
|
||||
| { action: "cancel_friend"; user: Users.User }
|
||||
| { action: "remove_member"; channel: string; user: User }
|
||||
| { action: "kick_member"; target: Servers.Server; user: User }
|
||||
| { action: "ban_member"; target: Servers.Server; user: User }
|
||||
| { action: "view_profile"; user: User }
|
||||
| { action: "message_user"; user: User }
|
||||
| { action: "block_user"; user: User }
|
||||
| { action: "unblock_user"; user: User }
|
||||
| { action: "add_friend"; user: User }
|
||||
| { action: "remove_friend"; user: User }
|
||||
| { action: "cancel_friend"; user: User }
|
||||
| { action: "set_presence"; presence: Users.Presence }
|
||||
| { action: "set_status" }
|
||||
| { action: "clear_status" }
|
||||
|
|
@ -141,6 +143,7 @@ type Props = {
|
|||
notifications: Notifications;
|
||||
};
|
||||
|
||||
// ! FIXME: no observers here!
|
||||
function ContextMenus(props: Props) {
|
||||
const { openScreen, writeClipboard } = useIntermediate();
|
||||
const client = useContext(AppContext);
|
||||
|
|
@ -313,17 +316,22 @@ function ContextMenus(props: Props) {
|
|||
|
||||
case "remove_member":
|
||||
{
|
||||
client.channels.removeMember(data.channel, data.user);
|
||||
client.channels.removeMember(
|
||||
data.channel,
|
||||
data.user._id,
|
||||
);
|
||||
}
|
||||
break;
|
||||
|
||||
case "view_profile":
|
||||
openScreen({ id: "profile", user_id: data.user });
|
||||
openScreen({ id: "profile", user_id: data.user._id });
|
||||
break;
|
||||
|
||||
case "message_user":
|
||||
{
|
||||
const channel = await client.users.openDM(data.user);
|
||||
const channel = await client.users.openDM(
|
||||
data.user._id,
|
||||
);
|
||||
if (channel) {
|
||||
history.push(`/channel/${channel._id}`);
|
||||
}
|
||||
|
|
@ -458,6 +466,8 @@ function ContextMenus(props: Props) {
|
|||
unread,
|
||||
contextualChannel: cxid,
|
||||
}: ContextMenuData) => {
|
||||
const store = useData();
|
||||
|
||||
const forceUpdate = useForceUpdate();
|
||||
const elements: Children[] = [];
|
||||
let lastDivider = false;
|
||||
|
|
@ -523,7 +533,7 @@ function ContextMenus(props: Props) {
|
|||
const contextualChannel = useChannel(cxid, forceUpdate);
|
||||
const targetChannel = channel ?? contextualChannel;
|
||||
|
||||
const user = useUser(uid, forceUpdate);
|
||||
const user = uid ? store.users.get(uid) : undefined;
|
||||
const serverChannel =
|
||||
targetChannel &&
|
||||
(targetChannel.channel_type === "TextChannel" ||
|
||||
|
|
@ -595,7 +605,7 @@ function ContextMenus(props: Props) {
|
|||
if (userPermissions & UserPermission.ViewProfile) {
|
||||
generateAction({
|
||||
action: "view_profile",
|
||||
user: user._id,
|
||||
user,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -605,7 +615,7 @@ function ContextMenus(props: Props) {
|
|||
) {
|
||||
generateAction({
|
||||
action: "message_user",
|
||||
user: user._id,
|
||||
user,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -624,7 +634,7 @@ function ContextMenus(props: Props) {
|
|||
generateAction({
|
||||
action: "remove_member",
|
||||
channel: contextualChannel._id,
|
||||
user: uid,
|
||||
user: user!,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -641,14 +651,14 @@ function ContextMenus(props: Props) {
|
|||
generateAction({
|
||||
action: "kick_member",
|
||||
target: server,
|
||||
user: uid,
|
||||
user: user!,
|
||||
});
|
||||
|
||||
if (serverPermissions & ServerPermission.BanMembers)
|
||||
generateAction({
|
||||
action: "ban_member",
|
||||
target: server,
|
||||
user: uid,
|
||||
user: user!,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -873,89 +883,100 @@ function ContextMenus(props: Props) {
|
|||
id="Status"
|
||||
onClose={contextClick}
|
||||
className="Status">
|
||||
{() => (
|
||||
<>
|
||||
<div className="header">
|
||||
<div className="main">
|
||||
<div
|
||||
className="username"
|
||||
onClick={() =>
|
||||
writeClipboard(client.user!.username)
|
||||
}>
|
||||
<Tooltip
|
||||
content={
|
||||
<Text id="app.special.copy_username" />
|
||||
{() => {
|
||||
const store = useData();
|
||||
const user = store.users.get(client.user!._id)!;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="header">
|
||||
<div className="main">
|
||||
<div
|
||||
className="username"
|
||||
onClick={() =>
|
||||
writeClipboard(
|
||||
client.user!.username,
|
||||
)
|
||||
}>
|
||||
@{client.user!.username}
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
content={
|
||||
<Text id="app.special.copy_username" />
|
||||
}>
|
||||
@{user.username}
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
className="status"
|
||||
onClick={() =>
|
||||
contextClick({
|
||||
action: "set_status",
|
||||
})
|
||||
}>
|
||||
<UserStatus user={user} />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="status"
|
||||
onClick={() =>
|
||||
contextClick({ action: "set_status" })
|
||||
}>
|
||||
<UserStatus user={client.user!} />
|
||||
</div>
|
||||
</div>
|
||||
<IconButton>
|
||||
<MenuItem data={{ action: "open_settings" }}>
|
||||
<Cog size={22} />
|
||||
</MenuItem>
|
||||
</IconButton>
|
||||
</div>
|
||||
<LineDivider />
|
||||
<MenuItem
|
||||
data={{
|
||||
action: "set_presence",
|
||||
presence: Users.Presence.Online,
|
||||
}}
|
||||
disabled={!isOnline}>
|
||||
<div className="indicator online" />
|
||||
<Text id={`app.status.online`} />
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
data={{
|
||||
action: "set_presence",
|
||||
presence: Users.Presence.Idle,
|
||||
}}
|
||||
disabled={!isOnline}>
|
||||
<div className="indicator idle" />
|
||||
<Text id={`app.status.idle`} />
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
data={{
|
||||
action: "set_presence",
|
||||
presence: Users.Presence.Busy,
|
||||
}}
|
||||
disabled={!isOnline}>
|
||||
<div className="indicator busy" />
|
||||
<Text id={`app.status.busy`} />
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
data={{
|
||||
action: "set_presence",
|
||||
presence: Users.Presence.Invisible,
|
||||
}}
|
||||
disabled={!isOnline}>
|
||||
<div className="indicator invisible" />
|
||||
<Text id={`app.status.invisible`} />
|
||||
</MenuItem>
|
||||
<LineDivider />
|
||||
<MenuItem
|
||||
data={{ action: "set_status" }}
|
||||
disabled={!isOnline}>
|
||||
<UserVoice size={18} />
|
||||
<Text id={`app.context_menu.custom_status`} />
|
||||
{client.user!.status?.text && (
|
||||
<IconButton>
|
||||
<MenuItem data={{ action: "clear_status" }}>
|
||||
<Trash size={18} />
|
||||
<MenuItem
|
||||
data={{ action: "open_settings" }}>
|
||||
<Cog size={22} />
|
||||
</MenuItem>
|
||||
</IconButton>
|
||||
)}
|
||||
</MenuItem>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<LineDivider />
|
||||
<MenuItem
|
||||
data={{
|
||||
action: "set_presence",
|
||||
presence: Users.Presence.Online,
|
||||
}}
|
||||
disabled={!isOnline}>
|
||||
<div className="indicator online" />
|
||||
<Text id={`app.status.online`} />
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
data={{
|
||||
action: "set_presence",
|
||||
presence: Users.Presence.Idle,
|
||||
}}
|
||||
disabled={!isOnline}>
|
||||
<div className="indicator idle" />
|
||||
<Text id={`app.status.idle`} />
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
data={{
|
||||
action: "set_presence",
|
||||
presence: Users.Presence.Busy,
|
||||
}}
|
||||
disabled={!isOnline}>
|
||||
<div className="indicator busy" />
|
||||
<Text id={`app.status.busy`} />
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
data={{
|
||||
action: "set_presence",
|
||||
presence: Users.Presence.Invisible,
|
||||
}}
|
||||
disabled={!isOnline}>
|
||||
<div className="indicator invisible" />
|
||||
<Text id={`app.status.invisible`} />
|
||||
</MenuItem>
|
||||
<LineDivider />
|
||||
<MenuItem
|
||||
data={{ action: "set_status" }}
|
||||
disabled={!isOnline}>
|
||||
<UserVoice size={18} />
|
||||
<Text id={`app.context_menu.custom_status`} />
|
||||
{client.user!.status?.text && (
|
||||
<IconButton>
|
||||
<MenuItem
|
||||
data={{ action: "clear_status" }}>
|
||||
<Trash size={18} />
|
||||
</MenuItem>
|
||||
</IconButton>
|
||||
)}
|
||||
</MenuItem>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</ContextMenuWithData>
|
||||
<ContextMenuWithData
|
||||
id="NotificationOptions"
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ function toNullable<T>(data?: T) {
|
|||
return typeof data === "undefined" ? null : data;
|
||||
}
|
||||
|
||||
class User {
|
||||
export class User {
|
||||
_id: string;
|
||||
username: string;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,18 @@
|
|||
import { At, Hash, Menu } from "@styled-icons/boxicons-regular";
|
||||
import { Notepad, Group } from "@styled-icons/boxicons-solid";
|
||||
import { Channel, User } from "revolt.js";
|
||||
import { observable } from "mobx";
|
||||
import { Channel } from "revolt.js";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { useContext } from "preact/hooks";
|
||||
|
||||
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
|
||||
|
||||
import { User } from "../../mobx";
|
||||
import { useData } from "../../mobx/State";
|
||||
|
||||
import { useIntermediate } from "../../context/intermediate/Intermediate";
|
||||
import { AppContext } from "../../context/revoltjs/RevoltClient";
|
||||
import { AppContext, useClient } from "../../context/revoltjs/RevoltClient";
|
||||
import { getChannelName } from "../../context/revoltjs/util";
|
||||
|
||||
import { useStatusColour } from "../../components/common/user/UserIcon";
|
||||
|
|
@ -65,15 +69,13 @@ const Info = styled.div`
|
|||
}
|
||||
`;
|
||||
|
||||
export default function ChannelHeader({
|
||||
channel,
|
||||
toggleSidebar,
|
||||
}: ChannelHeaderProps) {
|
||||
export default observable(({ channel, toggleSidebar }: ChannelHeaderProps) => {
|
||||
const { openScreen } = useIntermediate();
|
||||
const client = useContext(AppContext);
|
||||
const client = useClient();
|
||||
const state = useData();
|
||||
|
||||
const name = getChannelName(client, channel);
|
||||
let icon, recipient;
|
||||
let icon, recipient: User | undefined;
|
||||
switch (channel.channel_type) {
|
||||
case "SavedMessages":
|
||||
icon = <Notepad size={24} />;
|
||||
|
|
@ -81,7 +83,7 @@ export default function ChannelHeader({
|
|||
case "DirectMessage":
|
||||
icon = <At size={24} />;
|
||||
const uid = client.channels.getRecipient(channel._id);
|
||||
recipient = client.users.get(uid);
|
||||
recipient = state.users.get(uid);
|
||||
break;
|
||||
case "Group":
|
||||
icon = <Group size={24} />;
|
||||
|
|
@ -109,12 +111,11 @@ export default function ChannelHeader({
|
|||
<div
|
||||
className="status"
|
||||
style={{
|
||||
backgroundColor: useStatusColour(
|
||||
recipient as User,
|
||||
),
|
||||
backgroundColor:
|
||||
useStatusColour(recipient),
|
||||
}}
|
||||
/>
|
||||
<UserStatus user={recipient as User} />
|
||||
<UserStatus user={recipient} />
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -145,4 +146,4 @@ export default function ChannelHeader({
|
|||
<HeaderActions channel={channel} toggleSidebar={toggleSidebar} />
|
||||
</Header>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
import { BarChart } from "@styled-icons/boxicons-regular";
|
||||
import { observable } from "mobx";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Text } from "preact-i18n";
|
||||
import { useContext } from "preact/hooks";
|
||||
|
||||
import { useData } from "../../../mobx/State";
|
||||
|
||||
import {
|
||||
VoiceContext,
|
||||
VoiceOperationsContext,
|
||||
VoiceStatus,
|
||||
} from "../../../context/Voice";
|
||||
import {
|
||||
useForceUpdate,
|
||||
useSelf,
|
||||
useUsers,
|
||||
} from "../../../context/revoltjs/hooks";
|
||||
import { useClient } from "../../../context/revoltjs/RevoltClient";
|
||||
|
||||
import UserIcon from "../../../components/common/user/UserIcon";
|
||||
import Button from "../../../components/ui/Button";
|
||||
|
|
@ -70,17 +69,21 @@ const VoiceBase = styled.div`
|
|||
}
|
||||
`;
|
||||
|
||||
export default function VoiceHeader({ id }: Props) {
|
||||
export default observable(({ id }: Props) => {
|
||||
const { status, participants, roomId } = useContext(VoiceContext);
|
||||
if (roomId !== id) return null;
|
||||
|
||||
const { isProducing, startProducing, stopProducing, disconnect } =
|
||||
useContext(VoiceOperationsContext);
|
||||
|
||||
const ctx = useForceUpdate();
|
||||
const self = useSelf(ctx);
|
||||
const store = useData();
|
||||
const client = useClient();
|
||||
const self = store.users.get(client.user!._id);
|
||||
|
||||
//const ctx = useForceUpdate();
|
||||
//const self = useSelf(ctx);
|
||||
const keys = participants ? Array.from(participants.keys()) : undefined;
|
||||
const users = keys ? useUsers(keys, ctx) : undefined;
|
||||
const users = keys?.map((key) => store.users.get(key));
|
||||
|
||||
return (
|
||||
<VoiceBase>
|
||||
|
|
@ -135,7 +138,7 @@ export default function VoiceHeader({ id }: Props) {
|
|||
</div>
|
||||
</VoiceBase>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
/**{voice.roomId === id && (
|
||||
<div className={styles.rtc}>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { X, Plus } from "@styled-icons/boxicons-regular";
|
||||
import { PhoneCall, Envelope, UserX } from "@styled-icons/boxicons-solid";
|
||||
import { User, Users } from "revolt.js/dist/api/objects";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Users } from "revolt.js/dist/api/objects";
|
||||
|
||||
import styles from "./Friend.module.scss";
|
||||
import classNames from "classnames";
|
||||
|
|
@ -10,6 +11,8 @@ import { useContext } from "preact/hooks";
|
|||
|
||||
import { stopPropagation } from "../../lib/stopPropagation";
|
||||
|
||||
import { User } from "../../mobx";
|
||||
|
||||
import { VoiceOperationsContext } from "../../context/Voice";
|
||||
import { useIntermediate } from "../../context/intermediate/Intermediate";
|
||||
import {
|
||||
|
|
@ -27,7 +30,7 @@ interface Props {
|
|||
user: User;
|
||||
}
|
||||
|
||||
export function Friend({ user }: Props) {
|
||||
export const Friend = observer(({ user }: Props) => {
|
||||
const client = useContext(AppContext);
|
||||
const { openScreen } = useIntermediate();
|
||||
const { openDM } = useContext(OperationsContext);
|
||||
|
|
@ -133,4 +136,4 @@ export function Friend({ user }: Props) {
|
|||
<div className={styles.actions}>{actions}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ import {
|
|||
ListPlus,
|
||||
} from "@styled-icons/boxicons-regular";
|
||||
import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
|
||||
import { User, Users } from "revolt.js/dist/api/objects";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Users } from "revolt.js/dist/api/objects";
|
||||
|
||||
import styles from "./Friend.module.scss";
|
||||
import { Text } from "preact-i18n";
|
||||
|
|
@ -12,30 +13,30 @@ import { Text } from "preact-i18n";
|
|||
import { TextReact } from "../../lib/i18n";
|
||||
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
|
||||
|
||||
import { User } from "../../mobx";
|
||||
import { useData } from "../../mobx/State";
|
||||
|
||||
import { useIntermediate } from "../../context/intermediate/Intermediate";
|
||||
import { useUsers } from "../../context/revoltjs/hooks";
|
||||
|
||||
import CollapsibleSection from "../../components/common/CollapsibleSection";
|
||||
import Tooltip from "../../components/common/Tooltip";
|
||||
import UserIcon from "../../components/common/user/UserIcon";
|
||||
import Details from "../../components/ui/Details";
|
||||
import Header from "../../components/ui/Header";
|
||||
import IconButton from "../../components/ui/IconButton";
|
||||
import Overline from "../../components/ui/Overline";
|
||||
|
||||
import { Children } from "../../types/Preact";
|
||||
import { Friend } from "./Friend";
|
||||
|
||||
export default function Friends() {
|
||||
export default observer(() => {
|
||||
const { openScreen } = useIntermediate();
|
||||
|
||||
const users = useUsers() as User[];
|
||||
const store = useData();
|
||||
const users = [...store.users.values()];
|
||||
users.sort((a, b) => a.username.localeCompare(b.username));
|
||||
|
||||
const friends = users.filter(
|
||||
(x) => x.relationship === Users.Relationship.Friend,
|
||||
);
|
||||
|
||||
const lists = [
|
||||
[
|
||||
"",
|
||||
|
|
@ -138,7 +139,7 @@ export default function Friends() {
|
|||
onClick={() =>
|
||||
openScreen({
|
||||
id: "pending_requests",
|
||||
users: incoming.map((x) => x._id),
|
||||
users: incoming,
|
||||
})
|
||||
}>
|
||||
<div className={styles.avatars}>
|
||||
|
|
@ -216,4 +217,4 @@ export default function Friends() {
|
|||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { At } from "@styled-icons/boxicons-regular";
|
||||
import { Envelope, Key, HelpCircle } from "@styled-icons/boxicons-solid";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Link, useHistory } from "react-router-dom";
|
||||
import { Users } from "revolt.js/dist/api/objects";
|
||||
|
||||
|
|
@ -7,26 +8,28 @@ import styles from "./Panes.module.scss";
|
|||
import { Text } from "preact-i18n";
|
||||
import { useContext, useEffect, useState } from "preact/hooks";
|
||||
|
||||
import { useData } from "../../../mobx/State";
|
||||
|
||||
import { useIntermediate } from "../../../context/intermediate/Intermediate";
|
||||
import {
|
||||
ClientStatus,
|
||||
StatusContext,
|
||||
useClient,
|
||||
} from "../../../context/revoltjs/RevoltClient";
|
||||
import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
|
||||
import { useForceUpdate } from "../../../context/revoltjs/hooks";
|
||||
|
||||
import Tooltip from "../../../components/common/Tooltip";
|
||||
import UserIcon from "../../../components/common/user/UserIcon";
|
||||
import Button from "../../../components/ui/Button";
|
||||
import Overline from "../../../components/ui/Overline";
|
||||
import Tip from "../../../components/ui/Tip";
|
||||
|
||||
export function Account() {
|
||||
export const Account = observer(() => {
|
||||
const { openScreen, writeClipboard } = useIntermediate();
|
||||
const status = useContext(StatusContext);
|
||||
|
||||
const ctx = useForceUpdate();
|
||||
const user = useSelf(ctx);
|
||||
if (!user) return null;
|
||||
const client = useClient();
|
||||
const store = useData();
|
||||
const user = store.users.get(client.user!._id)!;
|
||||
|
||||
const [email, setEmail] = useState("...");
|
||||
const [revealEmail, setRevealEmail] = useState(false);
|
||||
|
|
@ -41,13 +44,13 @@ export function Account() {
|
|||
|
||||
useEffect(() => {
|
||||
if (email === "..." && status === ClientStatus.ONLINE) {
|
||||
ctx.client
|
||||
client
|
||||
.req("GET", "/auth/user")
|
||||
.then((account) => setEmail(account.email));
|
||||
}
|
||||
|
||||
if (profile === undefined && status === ClientStatus.ONLINE) {
|
||||
ctx.client.users
|
||||
client.users
|
||||
.fetchProfile(user._id)
|
||||
.then((profile) => setProfile(profile ?? {}));
|
||||
}
|
||||
|
|
@ -180,4 +183,4 @@ export function Account() {
|
|||
</Tip>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import styles from "./Panes.module.scss";
|
|||
import { Localizer, Text } from "preact-i18n";
|
||||
import { useState } from "preact/hooks";
|
||||
|
||||
import { useSelf } from "../../../context/revoltjs/hooks";
|
||||
import { useClient } from "../../../context/revoltjs/RevoltClient";
|
||||
|
||||
import Button from "../../../components/ui/Button";
|
||||
import InputBox from "../../../components/ui/InputBox";
|
||||
|
|
@ -10,7 +10,7 @@ import Radio from "../../../components/ui/Radio";
|
|||
import TextArea from "../../../components/ui/TextArea";
|
||||
|
||||
export function Feedback() {
|
||||
const user = useSelf();
|
||||
const client = useClient();
|
||||
const [other, setOther] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [state, setState] = useState<"ready" | "sending" | "sent">("ready");
|
||||
|
|
@ -28,7 +28,7 @@ export function Feedback() {
|
|||
checked,
|
||||
other,
|
||||
description,
|
||||
name: user?.username ?? "Unknown User",
|
||||
name: client.user!.username,
|
||||
}),
|
||||
mode: "no-cors",
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ import { FileUploader } from "../../../context/revoltjs/FileUploads";
|
|||
import {
|
||||
ClientStatus,
|
||||
StatusContext,
|
||||
useClient,
|
||||
} from "../../../context/revoltjs/RevoltClient";
|
||||
import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
|
||||
|
||||
import AutoComplete, {
|
||||
useAutoComplete,
|
||||
|
|
@ -23,9 +23,7 @@ export function Profile() {
|
|||
const { intl } = useContext(IntlContext);
|
||||
const status = useContext(StatusContext);
|
||||
|
||||
const ctx = useForceUpdate();
|
||||
const user = useSelf();
|
||||
if (!user) return null;
|
||||
const client = useClient();
|
||||
|
||||
const [profile, setProfile] = useState<undefined | Users.Profile>(
|
||||
undefined,
|
||||
|
|
@ -34,8 +32,8 @@ export function Profile() {
|
|||
// ! FIXME: temporary solution
|
||||
// ! we should just announce profile changes through WS
|
||||
function refreshProfile() {
|
||||
ctx.client.users
|
||||
.fetchProfile(user!._id)
|
||||
client.users
|
||||
.fetchProfile(client.user!._id)
|
||||
.then((profile) => setProfile(profile ?? {}));
|
||||
}
|
||||
|
||||
|
|
@ -69,7 +67,7 @@ export function Profile() {
|
|||
</h3>
|
||||
<div className={styles.preview}>
|
||||
<UserProfile
|
||||
user_id={user._id}
|
||||
user_id={client.user!._id}
|
||||
dummy={true}
|
||||
dummyProfile={profile}
|
||||
onClose={() => {}}
|
||||
|
|
@ -87,19 +85,17 @@ export function Profile() {
|
|||
fileType="avatars"
|
||||
behaviour="upload"
|
||||
maxFileSize={4_000_000}
|
||||
onUpload={(avatar) =>
|
||||
ctx.client.users.editUser({ avatar })
|
||||
}
|
||||
onUpload={(avatar) => client.users.editUser({ avatar })}
|
||||
remove={() =>
|
||||
ctx.client.users.editUser({ remove: "Avatar" })
|
||||
client.users.editUser({ remove: "Avatar" })
|
||||
}
|
||||
defaultPreview={ctx.client.users.getAvatarURL(
|
||||
user._id,
|
||||
defaultPreview={client.users.getAvatarURL(
|
||||
client.user!._id,
|
||||
{ max_side: 256 },
|
||||
true,
|
||||
)}
|
||||
previewURL={ctx.client.users.getAvatarURL(
|
||||
user._id,
|
||||
previewURL={client.users.getAvatarURL(
|
||||
client.user!._id,
|
||||
{ max_side: 256 },
|
||||
true,
|
||||
true,
|
||||
|
|
@ -117,20 +113,20 @@ export function Profile() {
|
|||
fileType="backgrounds"
|
||||
maxFileSize={6_000_000}
|
||||
onUpload={async (background) => {
|
||||
await ctx.client.users.editUser({
|
||||
await client.users.editUser({
|
||||
profile: { background },
|
||||
});
|
||||
refreshProfile();
|
||||
}}
|
||||
remove={async () => {
|
||||
await ctx.client.users.editUser({
|
||||
await client.users.editUser({
|
||||
remove: "ProfileBackground",
|
||||
});
|
||||
setProfile({ ...profile, background: undefined });
|
||||
}}
|
||||
previewURL={
|
||||
profile?.background
|
||||
? ctx.client.users.getBackgroundURL(
|
||||
? client.users.getBackgroundURL(
|
||||
profile,
|
||||
{ width: 1000 },
|
||||
true,
|
||||
|
|
@ -173,7 +169,7 @@ export function Profile() {
|
|||
contrast
|
||||
onClick={() => {
|
||||
setChanged(false);
|
||||
ctx.client.users.editUser({
|
||||
client.users.editUser({
|
||||
profile: { content: profile?.content },
|
||||
});
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
import { XCircle } from "@styled-icons/boxicons-regular";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Invites as InvitesNS, Servers } from "revolt.js/dist/api/objects";
|
||||
|
||||
import styles from "./Panes.module.scss";
|
||||
import { Text } from "preact-i18n";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
import { useData } from "../../../mobx/State";
|
||||
|
||||
import { useClient } from "../../../context/revoltjs/RevoltClient";
|
||||
import {
|
||||
useChannels,
|
||||
useForceUpdate,
|
||||
|
|
@ -20,16 +24,19 @@ interface Props {
|
|||
server: Servers.Server;
|
||||
}
|
||||
|
||||
export function Invites({ server }: Props) {
|
||||
export const Invites = observer(({ server }: Props) => {
|
||||
const [deleting, setDelete] = useState<string[]>([]);
|
||||
const [invites, setInvites] = useState<
|
||||
InvitesNS.ServerInvite[] | undefined
|
||||
>(undefined);
|
||||
|
||||
const ctx = useForceUpdate();
|
||||
const [deleting, setDelete] = useState<string[]>([]);
|
||||
const users = useUsers(invites?.map((x) => x.creator) ?? [], ctx);
|
||||
const channels = useChannels(invites?.map((x) => x.channel) ?? [], ctx);
|
||||
|
||||
const store = useData();
|
||||
const client = useClient();
|
||||
const users = invites?.map((invite) => store.users.get(invite.creator));
|
||||
|
||||
useEffect(() => {
|
||||
ctx.client.servers
|
||||
.fetchInvites(server._id)
|
||||
|
|
@ -53,8 +60,8 @@ export function Invites({ server }: Props) {
|
|||
</span>
|
||||
</div>
|
||||
{typeof invites === "undefined" && <Preloader type="ring" />}
|
||||
{invites?.map((invite) => {
|
||||
const creator = users.find((x) => x?._id === invite.creator);
|
||||
{invites?.map((invite, index) => {
|
||||
const creator = users![index];
|
||||
const channel = channels.find((x) => x?._id === invite.channel);
|
||||
|
||||
return (
|
||||
|
|
@ -93,4 +100,4 @@ export function Invites({ server }: Props) {
|
|||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
import { ChevronDown } from "@styled-icons/boxicons-regular";
|
||||
import { isEqual } from "lodash";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Servers } from "revolt.js/dist/api/objects";
|
||||
|
||||
import styles from "./Panes.module.scss";
|
||||
import { Text } from "preact-i18n";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
import { useData } from "../../../mobx/State";
|
||||
|
||||
import { useClient } from "../../../context/revoltjs/RevoltClient";
|
||||
import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
|
||||
|
||||
import UserIcon from "../../../components/common/user/UserIcon";
|
||||
|
|
@ -18,17 +22,18 @@ interface Props {
|
|||
server: Servers.Server;
|
||||
}
|
||||
|
||||
export function Members({ server }: Props) {
|
||||
export const Members = observer(({ server }: Props) => {
|
||||
const [selected, setSelected] = useState<undefined | string>();
|
||||
const [members, setMembers] = useState<Servers.Member[] | undefined>(
|
||||
undefined,
|
||||
);
|
||||
|
||||
const ctx = useForceUpdate();
|
||||
const [selected, setSelected] = useState<undefined | string>();
|
||||
const users = useUsers(members?.map((x) => x._id.user) ?? [], ctx);
|
||||
const store = useData();
|
||||
const client = useClient();
|
||||
const users = members?.map((member) => store.users.get(member._id.user));
|
||||
|
||||
useEffect(() => {
|
||||
ctx.client.members
|
||||
client.members
|
||||
.fetchMembers(server._id)
|
||||
.then((members) => setMembers(members));
|
||||
}, []);
|
||||
|
|
@ -50,10 +55,10 @@ export function Members({ server }: Props) {
|
|||
{members &&
|
||||
members.length > 0 &&
|
||||
members
|
||||
.map((x) => {
|
||||
.map((member, index) => {
|
||||
return {
|
||||
member: x,
|
||||
user: users.find((y) => y?._id === x._id.user),
|
||||
member,
|
||||
user: users![index],
|
||||
};
|
||||
})
|
||||
.map(({ member, user }) => (
|
||||
|
|
@ -126,7 +131,7 @@ export function Members({ server }: Props) {
|
|||
roles,
|
||||
)}
|
||||
onClick={async () => {
|
||||
await ctx.client.members.editMember(
|
||||
await client.members.editMember(
|
||||
server._id,
|
||||
member._id.user,
|
||||
{
|
||||
|
|
@ -154,4 +159,4 @@ export function Members({ server }: Props) {
|
|||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue