Work towards removing useUsers.

This commit is contained in:
Paul 2021-07-29 15:11:21 +01:00
parent cf3930b094
commit 4dffaad6c1
25 changed files with 580 additions and 501 deletions

View file

@ -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,
};

View file

@ -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";

View file

@ -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>
);
},
);

View file

@ -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,

View file

@ -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" />;
} });

View file

@ -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;
}; };

View file

@ -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,

View file

@ -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 {

View file

@ -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;

View file

@ -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[];

View file

@ -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;
} }
} });

View file

@ -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>
); );
} });

View file

@ -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;

View file

@ -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>

View file

@ -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"

View file

@ -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;

View file

@ -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>
); );
} });

View file

@ -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}>

View file

@ -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>
); );
} });

View file

@ -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>
</> </>
); );
} });

View file

@ -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>
); );
} });

View file

@ -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",
}); });

View file

@ -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 },
}); });
}} }}

View file

@ -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>
); );
} });

View file

@ -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>
); );
} });