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