cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-05 23:25:44 -05:00
Code Issues Projects Releases Packages Wiki Activity

Work towards removing useUsers.

Browse source
This commit is contained in:
Paul 2021-07-29 15:11:21 +01:00
parent cf3930b094
commit 4dffaad6c1
25 changed files with 580 additions and 501 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
.prettierrc.js
View file

@ -1,8 +1,14 @@
module.exports = {
"tabWidth": 4,
"trailingComma": "all",
"jsxBracketSameLine": true,
"importOrder": ["preact|classnames|.scss$", "/(lib)", "/(redux)", "/(context)", "/(ui|common)|.svg$", "^[./]"],
"importOrderSeparation": true,
}
tabWidth: 4,
trailingComma: "all",
jsxBracketSameLine: true,
importOrder: [
"preact|classnames|.scss$",
"/(lib)",
"/(redux|mobx)",
"/(context)",
"/(ui|common)|.svg$",
"^[./]",
],
importOrderSeparation: true,
};

4
src/components/common/user/UserHover.tsx
View file

@ -1,7 +1,7 @@
import { InfoCircle } from "@styled-icons/boxicons-regular";
import { User } from "revolt.js";
import styled from "styled-components";
import { User } from "../../../mobx";
import { Children } from "../../../types/Preact";
import Tooltip from "../Tooltip";
import { Username } from "./UserShort";

25
src/components/common/user/UserIcon.tsx
View file

@ -1,5 +1,5 @@
import { MicrophoneOff } from "@styled-icons/boxicons-regular";
import { User } from "revolt.js";
import { observer } from "mobx-react-lite";
import { Users } from "revolt.js/dist/api/objects";
import styled, { css } from "styled-components";
@ -8,6 +8,7 @@ import { useContext } from "preact/hooks";
import { ThemeContext } from "../../../context/Theme";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { User } from "../../../mobx";
import IconBase, { IconBaseProps } from "../IconBase";
import fallback from "../assets/user.png";
@ -50,9 +51,8 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
`}
`;
export default function UserIcon(
props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>,
) {
export default observer(
(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) => {
const client = useContext(AppContext);
const {
@ -72,7 +72,8 @@ export default function UserIcon(
target?.avatar ?? attachment,
{ max_side: 256 },
animate,
) ?? (target ? client.users.getDefaultAvatarURL(target._id) : fallback);
) ??
(target ? client.users.getDefaultAvatarURL(target._id) : fallback);
return (
<IconBase
@ -90,15 +91,23 @@ export default function UserIcon(
{<img src={iconURL} draggable={false} loading="lazy" />}
</foreignObject>
{props.status && (
<circle cx="27" cy="27" r="5" fill={useStatusColour(target)} />
<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} />}
{props.voice === "muted" && (
<MicrophoneOff size={6} />
)}
</VoiceIndicator>
</foreignObject>
)}
</IconBase>
);
}
},
);

12
src/components/common/user/UserShort.tsx
View file

@ -1,8 +1,10 @@
import { observer } from "mobx-react-lite";
import { useParams } from "react-router-dom";
import { User } from "revolt.js";
import { Text } from "preact-i18n";
import { User } from "../../../mobx";
import {
useForceUpdate,
useMember,
@ -11,10 +13,11 @@ import {
import UserIcon from "./UserIcon";
export function Username({
export const Username = observer(
({
user,
...otherProps
}: { user?: User } & JSX.HTMLAttributes<HTMLElement>) {
}: { user?: User } & JSX.HTMLAttributes<HTMLElement>) => {
let username = user?.username;
let color;
@ -48,7 +51,8 @@ export function Username({
{username ?? <Text id="app.main.channel.unknown_user" />}
</span>
);
}
},
);
export default function UserShort({
user,

7
src/components/common/user/UserStatus.tsx
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 { Text } from "preact-i18n";
import { User } from "../../../mobx";
import Tooltip from "../Tooltip";
interface Props {
@ -10,7 +11,7 @@ interface Props {
tooltip?: boolean;
}
export default function UserStatus({ user, tooltip }: Props) {
export default observer(({ user, tooltip }: Props) => {
if (user?.online) {
if (user.status?.text) {
if (tooltip) {
@ -40,4 +41,4 @@ export default function UserStatus({ user, tooltip }: Props) {
}
return <Text id="app.status.offline" />;
}
});

11
src/components/navigation/items/ButtonItem.tsx
View file

@ -1,4 +1,5 @@
import { X, Crown } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { Channels, Users } from "revolt.js/dist/api/objects";
import styles from "./Item.module.scss";
@ -9,6 +10,8 @@ import { Localizer, Text } from "preact-i18n";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { stopPropagation } from "../../../lib/stopPropagation";
import { User } from "../../../mobx";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import ChannelIcon from "../../common/ChannelIcon";
@ -30,12 +33,12 @@ type CommonProps = Omit<
};
type UserProps = CommonProps & {
user: Users.User;
user: User;
context?: Channels.Channel;
channel?: Channels.DirectMessageChannel;
};
export function UserButton(props: UserProps) {
export const UserButton = observer((props: UserProps) => {
const { active, alert, alertCount, user, context, channel, ...divProps } =
props;
const { openScreen } = useIntermediate();
@ -109,11 +112,11 @@ export function UserButton(props: UserProps) {
</div>
</div>
);
}
});
type ChannelProps = CommonProps & {
channel: Channels.Channel & { unread?: string };
user?: Users.User;
user?: User;
compact?: boolean;
};

12
src/components/navigation/left/HomeSidebar.tsx
View file

@ -4,6 +4,7 @@ import {
Wrench,
Notepad,
} from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link, Redirect, useLocation, useParams } from "react-router-dom";
import { Channels } from "revolt.js/dist/api/objects";
import { Users as UsersNS } from "revolt.js/dist/api/objects";
@ -15,6 +16,7 @@ import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useData } from "../../../mobx/State";
import { dispatch } from "../../../redux";
import { connectState } from "../../../redux/connector";
import { Unreads } from "../../../redux/reducers/unreads";
@ -39,7 +41,7 @@ type Props = {
unreads: Unreads;
};
function HomeSidebar(props: Props) {
const HomeSidebar = observer((props: Props) => {
const { pathname } = useLocation();
const client = useContext(AppContext);
const { channel } = useParams<{ channel: string }>();
@ -66,7 +68,7 @@ function HomeSidebar(props: Props) {
.filter((x) => x.channel_type !== "SavedMessages")
.map((x) => mapChannelWithUnread(x, props.unreads));
const users = useUsers(undefined, ctx);
const store = useData();
channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
return (
@ -89,7 +91,7 @@ function HomeSidebar(props: Props) {
<ButtonItem
active={pathname === "/friends"}
alert={
typeof users.find(
typeof [...store.users.values()].find(
(user) =>
user?.relationship ===
UsersNS.Relationship.Incoming,
@ -143,7 +145,7 @@ function HomeSidebar(props: Props) {
if (!x.active) return null;
const recipient = client.channels.getRecipient(x._id);
user = users.find((x) => x?._id === recipient);
user = store.users.get(recipient);
if (!user) {
console.warn(
@ -171,7 +173,7 @@ function HomeSidebar(props: Props) {
</GenericSidebarList>
</GenericSidebarBase>
);
}
});
export default connectState(
HomeSidebar,

21
src/components/navigation/left/ServerListSidebar.tsx
View file

@ -1,4 +1,5 @@
import { Plus } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { useLocation, useParams } from "react-router-dom";
import { Channel, Servers, Users } from "revolt.js/dist/api/objects";
import styled, { css } from "styled-components";
@ -9,17 +10,17 @@ import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useData } from "../../../mobx/State";
import { connectState } from "../../../redux/connector";
import { LastOpened } from "../../../redux/reducers/last_opened";
import { Unreads } from "../../../redux/reducers/unreads";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import {
useChannels,
useForceUpdate,
useSelf,
useServers,
useUsers,
} from "../../../context/revoltjs/hooks";
import logoSVG from "../../../assets/logo.svg";
@ -178,14 +179,16 @@ interface Props {
lastOpened: LastOpened;
}
export function ServerListSidebar({ unreads, lastOpened }: Props) {
export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
const store = useData();
const client = useClient();
const self = store.users.get(client.user!._id);
const ctx = useForceUpdate();
const self = useSelf(ctx);
const activeServers = useServers(undefined, ctx) as Servers.Server[];
const channels = (useChannels(undefined, ctx) as Channel[]).map((x) =>
mapChannelWithUnread(x, unreads),
);
const users = useUsers(undefined, ctx);
const unreadChannels = channels.filter((x) => x.unread).map((x) => x._id);
@ -230,7 +233,11 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
}
}
if (users.find((x) => x?.relationship === Users.Relationship.Incoming)) {
if (
[...store.users.values()].find(
(x) => x.relationship === Users.Relationship.Incoming,
)
) {
alertCount++;
}
@ -298,7 +305,7 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
</ServerList>
</ServersBase>
);
}
});
export default connectState(ServerListSidebar, (state) => {
return {

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

@ -1,3 +1,4 @@
import { observer } from "mobx-react-lite";
import { useParams } from "react-router";
import { Link } from "react-router-dom";
import { User } from "revolt.js";
@ -7,6 +8,7 @@ import { ClientboundNotification } from "revolt.js/dist/websocket/notifications"
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { useData } from "../../../mobx/State";
import { getState } from "../../../redux";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
@ -52,15 +54,14 @@ export default function MemberSidebar(props: { channel?: Channels.Channel }) {
}
}
export function GroupMemberSidebar({
channel,
ctx,
}: Props & { channel: Channels.GroupChannel }) {
export const GroupMemberSidebar = observer(
({ channel }: Props & { channel: Channels.GroupChannel }) => {
const { openScreen } = useIntermediate();
const users = useUsers(undefined, ctx);
const store = useData();
const members = channel.recipients
.map((x) => users.find((y) => y?._id === x))
.filter((x) => typeof x !== "undefined") as User[];
?.map((member) => store.users.get(member)!)
.filter((x) => typeof x !== "undefined");
/*const voice = useContext(VoiceContext);
const voiceActive = voice.roomId === channel._id;
@ -81,12 +82,14 @@ export function GroupMemberSidebar({
// ! FIXME: should probably rewrite all this code
const l =
+(
(a.online && a.status?.presence !== Users.Presence.Invisible) ??
(a.online &&
a.status?.presence !== Users.Presence.Invisible) ??
false
) | 0;
const r =
+(
(b.online && b.status?.presence !== Users.Presence.Invisible) ??
(b.online &&
b.status?.presence !== Users.Presence.Invisible) ??
false
) | 0;
@ -138,8 +141,8 @@ export function GroupMemberSidebar({
variant="uniform"
text={
<span>
<Text id="app.main.categories.members" /> —{" "}
{channel.recipients.length}
<Text id="app.main.categories.members" />{" "}
— {channel.recipients.length}
</span>
}
/>
@ -167,25 +170,29 @@ export function GroupMemberSidebar({
</GenericSidebarList>
</GenericSidebarBase>
);
}
},
);
export function ServerMemberSidebar({
channel,
ctx,
}: Props & { channel: Channels.TextChannel }) {
export const ServerMemberSidebar = observer(
({ channel }: 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 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") {
if (
status === ClientStatus.ONLINE &&
typeof members === "undefined"
) {
client.members
.fetchMembers(channel.server)
.then((members) => setMembers(members));
@ -221,16 +228,18 @@ export function ServerMemberSidebar({
}, [members]);
// copy paste from above
users.sort((a, b) => {
users?.sort((a, b) => {
// ! FIXME: should probably rewrite all this code
const l =
+(
(a.online && a.status?.presence !== Users.Presence.Invisible) ??
(a.online &&
a.status?.presence !== Users.Presence.Invisible) ??
false
) | 0;
const r =
+(
(b.online && b.status?.presence !== Users.Presence.Invisible) ??
(b.online &&
b.status?.presence !== Users.Presence.Invisible) ??
false
) | 0;
@ -256,13 +265,13 @@ export function ServerMemberSidebar({
summary={
<span>
<Text id="app.main.categories.members" /> —{" "}
{users.length}
{users?.length ?? 0}
</span>
}>
{users.length === 0 && (
{(users?.length ?? 0) === 0 && (
<img src={placeholderSVG} loading="eager" />
)}
{users.map(
{users?.map(
(user) =>
user && (
<UserButton
@ -283,7 +292,8 @@ export function ServerMemberSidebar({
</GenericSidebarList>
</GenericSidebarBase>
);
}
},
);
function Search({ channel }: { channel: string }) {
if (!getState().experiments.enabled?.includes("search")) return null;

12
src/context/intermediate/Intermediate.tsx
View file

@ -13,6 +13,8 @@ import { useContext, useEffect, useMemo, useState } from "preact/hooks";
import { internalSubscribe } from "../../lib/eventEmitter";
import { User } from "../../mobx";
import { Action } from "../../components/ui/Modal";
import { Children } from "../../types/Preact";
@ -42,10 +44,10 @@ export type Screen =
type: "create_invite";
target: Channels.TextChannel | Channels.GroupChannel;
}
| { type: "kick_member"; target: Servers.Server; user: string }
| { type: "ban_member"; target: Servers.Server; user: string }
| { type: "unfriend_user"; target: Users.User }
| { type: "block_user"; target: Users.User }
| { type: "kick_member"; target: Servers.Server; user: User }
| { type: "ban_member"; target: Servers.Server; user: User }
| { type: "unfriend_user"; target: User }
| { type: "block_user"; target: User }
| { type: "create_channel"; target: Servers.Server }
))
| ({ id: "special_input" } & (
@ -82,7 +84,7 @@ export type Screen =
| { id: "modify_account"; field: "username" | "email" | "password" }
| { id: "profile"; user_id: string }
| { id: "channel_info"; channel_id: string }
| { id: "pending_requests"; users: string[] }
| { id: "pending_requests"; users: User[] }
| {
id: "user_picker";
omit?: string[];

31
src/context/intermediate/modals/Prompt.tsx
View file

@ -1,3 +1,4 @@
import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom";
import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
import { ulid } from "ulid";
@ -8,6 +9,9 @@ import { useContext, useEffect, useState } from "preact/hooks";
import { TextReact } from "../../../lib/i18n";
import { User } from "../../../mobx";
import { useData } from "../../../mobx/State";
import Message from "../../../components/common/messaging/Message";
import UserIcon from "../../../components/common/user/UserIcon";
import InputBox from "../../../components/ui/InputBox";
@ -61,14 +65,14 @@ type SpecialProps = { onClose: () => void } & (
type: "create_invite";
target: Channels.TextChannel | Channels.GroupChannel;
}
| { type: "kick_member"; target: Servers.Server; user: string }
| { type: "ban_member"; target: Servers.Server; user: string }
| { type: "unfriend_user"; target: Users.User }
| { type: "block_user"; target: Users.User }
| { type: "kick_member"; target: Servers.Server; user: User }
| { type: "ban_member"; target: Servers.Server; user: User }
| { type: "unfriend_user"; target: User }
| { type: "block_user"; target: User }
| { type: "create_channel"; target: Servers.Server }
);
export function SpecialPromptModal(props: SpecialProps) {
export const SpecialPromptModal = observer((props: SpecialProps) => {
const client = useContext(AppContext);
const [processing, setProcessing] = useState(false);
const [error, setError] = useState<undefined | string>(undefined);
@ -286,8 +290,6 @@ export function SpecialPromptModal(props: SpecialProps) {
);
}
case "kick_member": {
const user = client.users.get(props.user);
return (
<PromptModal
onClose={onClose}
@ -306,7 +308,7 @@ export function SpecialPromptModal(props: SpecialProps) {
try {
await client.members.kickMember(
props.target._id,
props.user,
props.user._id,
);
onClose();
} catch (err) {
@ -324,10 +326,10 @@ export function SpecialPromptModal(props: SpecialProps) {
]}
content={
<div className={styles.column}>
<UserIcon target={user} size={64} />
<UserIcon target={props.user} size={64} />
<Text
id="app.special.modals.prompt.confirm_kick"
fields={{ name: user?.username }}
fields={{ name: props.user?.username }}
/>
</div>
}
@ -338,7 +340,6 @@ export function SpecialPromptModal(props: SpecialProps) {
}
case "ban_member": {
const [reason, setReason] = useState<string | undefined>(undefined);
const user = client.users.get(props.user);
return (
<PromptModal
@ -358,7 +359,7 @@ export function SpecialPromptModal(props: SpecialProps) {
try {
await client.servers.banUser(
props.target._id,
props.user,
props.user._id,
{ reason },
);
onClose();
@ -377,10 +378,10 @@ export function SpecialPromptModal(props: SpecialProps) {
]}
content={
<div className={styles.column}>
<UserIcon target={user} size={64} />
<UserIcon target={props.user} size={64} />
<Text
id="app.special.modals.prompt.confirm_ban"
fields={{ name: user?.username }}
fields={{ name: props.user?.username }}
/>
<Overline>
<Text id="app.special.modals.prompt.confirm_ban_reason" />
@ -477,4 +478,4 @@ export function SpecialPromptModal(props: SpecialProps) {
default:
return null;
}
}
});

17
src/context/intermediate/popovers/PendingRequests.tsx
View file

@ -1,31 +1,30 @@
import { observer } from "mobx-react-lite";
import styles from "./UserPicker.module.scss";
import { Text } from "preact-i18n";
import { User } from "../../../mobx";
import Modal from "../../../components/ui/Modal";
import { Friend } from "../../../pages/friends/Friend";
import { useUsers } from "../../revoltjs/hooks";
interface Props {
users: string[];
users: User[];
onClose: () => void;
}
export function PendingRequests({ users: ids, onClose }: Props) {
const users = useUsers(ids);
export const PendingRequests = observer(({ users, onClose }: Props) => {
return (
<Modal
visible={true}
title={<Text id="app.special.friends.pending" />}
onClose={onClose}>
<div className={styles.list}>
{users
.filter((x) => typeof x !== "undefined")
.map((x) => (
{users.map((x) => (
<Friend user={x!} key={x!._id} />
))}
</div>
</Modal>
);
}
});

18
src/context/intermediate/popovers/UserProfile.tsx
View file

@ -10,6 +10,8 @@ import styles from "./UserProfile.module.scss";
import { Localizer, Text } from "preact-i18n";
import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
import { useData } from "../../../mobx/State";
import ChannelIcon from "../../../components/common/ChannelIcon";
import Tooltip from "../../../components/common/Tooltip";
import UserIcon from "../../../components/common/user/UserIcon";
@ -23,6 +25,7 @@ import {
AppContext,
ClientStatus,
StatusContext,
useClient,
} from "../../revoltjs/RevoltClient";
import {
useChannels,
@ -58,25 +61,22 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
>(undefined);
const history = useHistory();
const client = useContext(AppContext);
const client = useClient();
const status = useContext(StatusContext);
const [tab, setTab] = useState("profile");
const ctx = useForceUpdate();
const all_users = useUsers(undefined, ctx);
const channels = useChannels(undefined, ctx);
const permissions = useUserPermission(client.user!._id, ctx);
const user = all_users.find((x) => x!._id === user_id);
const users = mutual?.users
? all_users.filter((x) => mutual.users.includes(x!._id))
: undefined;
if (!user) {
const store = useData();
if (!store.users.has(user_id)) {
useEffect(onClose, []);
return null;
}
const permissions = useUserPermission(user!._id, ctx);
const user = store.users.get(user_id)!;
const users = mutual?.users.map((id) => store.users.get(id));
useLayoutEffect(() => {
if (!user_id) return;

5
src/context/revoltjs/hooks.ts
View file

@ -82,11 +82,6 @@ export function useUser(id?: string, context?: HookContext) {
return useObject("users", id, context) as Readonly<Users.User> | undefined;
}
export function useSelf(context?: HookContext) {
const ctx = useForceUpdate(context);
return useUser(ctx.client.user!._id, ctx);
}
export function useUsers(ids?: string[], context?: HookContext) {
return useObject("users", ids, context) as (
| Readonly<Users.User>

77
src/lib/ContextMenus.tsx
View file

@ -34,6 +34,8 @@ import {
import { Text } from "preact-i18n";
import { useContext } from "preact/hooks";
import { User } from "../mobx";
import { useData } from "../mobx/State";
import { dispatch } from "../redux";
import { connectState } from "../redux/connector";
import {
@ -48,6 +50,7 @@ import {
AppContext,
ClientStatus,
StatusContext,
useClient,
} from "../context/revoltjs/RevoltClient";
import {
useChannel,
@ -55,7 +58,6 @@ import {
useForceUpdate,
useServer,
useServerPermission,
useUser,
useUserPermission,
} from "../context/revoltjs/hooks";
import { takeError } from "../context/revoltjs/util";
@ -97,16 +99,16 @@ type Action =
| { action: "copy_file_link"; attachment: Attachment }
| { action: "open_link"; link: string }
| { action: "copy_link"; link: string }
| { action: "remove_member"; channel: string; user: string }
| { action: "kick_member"; target: Servers.Server; user: string }
| { action: "ban_member"; target: Servers.Server; user: string }
| { action: "view_profile"; user: string }
| { action: "message_user"; user: string }
| { action: "block_user"; user: Users.User }
| { action: "unblock_user"; user: Users.User }
| { action: "add_friend"; user: Users.User }
| { action: "remove_friend"; user: Users.User }
| { action: "cancel_friend"; user: Users.User }
| { action: "remove_member"; channel: string; user: User }
| { action: "kick_member"; target: Servers.Server; user: User }
| { action: "ban_member"; target: Servers.Server; user: User }
| { action: "view_profile"; user: User }
| { action: "message_user"; user: User }
| { action: "block_user"; user: User }
| { action: "unblock_user"; user: User }
| { action: "add_friend"; user: User }
| { action: "remove_friend"; user: User }
| { action: "cancel_friend"; user: User }
| { action: "set_presence"; presence: Users.Presence }
| { action: "set_status" }
| { action: "clear_status" }
@ -141,6 +143,7 @@ type Props = {
notifications: Notifications;
};
// ! FIXME: no observers here!
function ContextMenus(props: Props) {
const { openScreen, writeClipboard } = useIntermediate();
const client = useContext(AppContext);
@ -313,17 +316,22 @@ function ContextMenus(props: Props) {
case "remove_member":
{
client.channels.removeMember(data.channel, data.user);
client.channels.removeMember(
data.channel,
data.user._id,
);
}
break;
case "view_profile":
openScreen({ id: "profile", user_id: data.user });
openScreen({ id: "profile", user_id: data.user._id });
break;
case "message_user":
{
const channel = await client.users.openDM(data.user);
const channel = await client.users.openDM(
data.user._id,
);
if (channel) {
history.push(`/channel/${channel._id}`);
}
@ -458,6 +466,8 @@ function ContextMenus(props: Props) {
unread,
contextualChannel: cxid,
}: ContextMenuData) => {
const store = useData();
const forceUpdate = useForceUpdate();
const elements: Children[] = [];
let lastDivider = false;
@ -523,7 +533,7 @@ function ContextMenus(props: Props) {
const contextualChannel = useChannel(cxid, forceUpdate);
const targetChannel = channel ?? contextualChannel;
const user = useUser(uid, forceUpdate);
const user = uid ? store.users.get(uid) : undefined;
const serverChannel =
targetChannel &&
(targetChannel.channel_type === "TextChannel" ||
@ -595,7 +605,7 @@ function ContextMenus(props: Props) {
if (userPermissions & UserPermission.ViewProfile) {
generateAction({
action: "view_profile",
user: user._id,
user,
});
}
@ -605,7 +615,7 @@ function ContextMenus(props: Props) {
) {
generateAction({
action: "message_user",
user: user._id,
user,
});
}
@ -624,7 +634,7 @@ function ContextMenus(props: Props) {
generateAction({
action: "remove_member",
channel: contextualChannel._id,
user: uid,
user: user!,
});
}
}
@ -641,14 +651,14 @@ function ContextMenus(props: Props) {
generateAction({
action: "kick_member",
target: server,
user: uid,
user: user!,
});
if (serverPermissions & ServerPermission.BanMembers)
generateAction({
action: "ban_member",
target: server,
user: uid,
user: user!,
});
}
}
@ -873,32 +883,41 @@ function ContextMenus(props: Props) {
id="Status"
onClose={contextClick}
className="Status">
{() => (
{() => {
const store = useData();
const user = store.users.get(client.user!._id)!;
return (
<>
<div className="header">
<div className="main">
<div
className="username"
onClick={() =>
writeClipboard(client.user!.username)
writeClipboard(
client.user!.username,
)
}>
<Tooltip
content={
<Text id="app.special.copy_username" />
}>
@{client.user!.username}
@{user.username}
</Tooltip>
</div>
<div
className="status"
onClick={() =>
contextClick({ action: "set_status" })
contextClick({
action: "set_status",
})
}>
<UserStatus user={client.user!} />
<UserStatus user={user} />
</div>
</div>
<IconButton>
<MenuItem data={{ action: "open_settings" }}>
<MenuItem
data={{ action: "open_settings" }}>
<Cog size={22} />
</MenuItem>
</IconButton>
@ -948,14 +967,16 @@ function ContextMenus(props: Props) {
<Text id={`app.context_menu.custom_status`} />
{client.user!.status?.text && (
<IconButton>
<MenuItem data={{ action: "clear_status" }}>
<MenuItem
data={{ action: "clear_status" }}>
<Trash size={18} />
</MenuItem>
</IconButton>
)}
</MenuItem>
</>
)}
);
}}
</ContextMenuWithData>
<ContextMenuWithData
id="NotificationOptions"

2
src/mobx/index.ts
View file

@ -18,7 +18,7 @@ function toNullable<T>(data?: T) {
return typeof data === "undefined" ? null : data;
}
class User {
export class User {
_id: string;
username: string;

29
src/pages/channels/ChannelHeader.tsx
View file

@ -1,14 +1,18 @@
import { At, Hash, Menu } from "@styled-icons/boxicons-regular";
import { Notepad, Group } from "@styled-icons/boxicons-solid";
import { Channel, User } from "revolt.js";
import { observable } from "mobx";
import { Channel } from "revolt.js";
import styled from "styled-components";
import { useContext } from "preact/hooks";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { User } from "../../mobx";
import { useData } from "../../mobx/State";
import { useIntermediate } from "../../context/intermediate/Intermediate";
import { AppContext } from "../../context/revoltjs/RevoltClient";
import { AppContext, useClient } from "../../context/revoltjs/RevoltClient";
import { getChannelName } from "../../context/revoltjs/util";
import { useStatusColour } from "../../components/common/user/UserIcon";
@ -65,15 +69,13 @@ const Info = styled.div`
}
`;
export default function ChannelHeader({
channel,
toggleSidebar,
}: ChannelHeaderProps) {
export default observable(({ channel, toggleSidebar }: ChannelHeaderProps) => {
const { openScreen } = useIntermediate();
const client = useContext(AppContext);
const client = useClient();
const state = useData();
const name = getChannelName(client, channel);
let icon, recipient;
let icon, recipient: User | undefined;
switch (channel.channel_type) {
case "SavedMessages":
icon = <Notepad size={24} />;
@ -81,7 +83,7 @@ export default function ChannelHeader({
case "DirectMessage":
icon = <At size={24} />;
const uid = client.channels.getRecipient(channel._id);
recipient = client.users.get(uid);
recipient = state.users.get(uid);
break;
case "Group":
icon = <Group size={24} />;
@ -109,12 +111,11 @@ export default function ChannelHeader({
<div
className="status"
style={{
backgroundColor: useStatusColour(
recipient as User,
),
backgroundColor:
useStatusColour(recipient),
}}
/>
<UserStatus user={recipient as User} />
<UserStatus user={recipient} />
</span>
</>
)}
@ -145,4 +146,4 @@ export default function ChannelHeader({
<HeaderActions channel={channel} toggleSidebar={toggleSidebar} />
</Header>
);
}
});

23
src/pages/channels/voice/VoiceHeader.tsx
View file

@ -1,19 +1,18 @@
import { BarChart } from "@styled-icons/boxicons-regular";
import { observable } from "mobx";
import styled from "styled-components";
import { Text } from "preact-i18n";
import { useContext } from "preact/hooks";
import { useData } from "../../../mobx/State";
import {
VoiceContext,
VoiceOperationsContext,
VoiceStatus,
} from "../../../context/Voice";
import {
useForceUpdate,
useSelf,
useUsers,
} from "../../../context/revoltjs/hooks";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import UserIcon from "../../../components/common/user/UserIcon";
import Button from "../../../components/ui/Button";
@ -70,17 +69,21 @@ const VoiceBase = styled.div`
}
`;
export default function VoiceHeader({ id }: Props) {
export default observable(({ id }: Props) => {
const { status, participants, roomId } = useContext(VoiceContext);
if (roomId !== id) return null;
const { isProducing, startProducing, stopProducing, disconnect } =
useContext(VoiceOperationsContext);
const ctx = useForceUpdate();
const self = useSelf(ctx);
const store = useData();
const client = useClient();
const self = store.users.get(client.user!._id);
//const ctx = useForceUpdate();
//const self = useSelf(ctx);
const keys = participants ? Array.from(participants.keys()) : undefined;
const users = keys ? useUsers(keys, ctx) : undefined;
const users = keys?.map((key) => store.users.get(key));
return (
<VoiceBase>
@ -135,7 +138,7 @@ export default function VoiceHeader({ id }: Props) {
</div>
</VoiceBase>
);
}
});
/**{voice.roomId === id && (
<div className={styles.rtc}>

9
src/pages/friends/Friend.tsx
View file

@ -1,6 +1,7 @@
import { X, Plus } from "@styled-icons/boxicons-regular";
import { PhoneCall, Envelope, UserX } from "@styled-icons/boxicons-solid";
import { User, Users } from "revolt.js/dist/api/objects";
import { observer } from "mobx-react-lite";
import { Users } from "revolt.js/dist/api/objects";
import styles from "./Friend.module.scss";
import classNames from "classnames";
@ -10,6 +11,8 @@ import { useContext } from "preact/hooks";
import { stopPropagation } from "../../lib/stopPropagation";
import { User } from "../../mobx";
import { VoiceOperationsContext } from "../../context/Voice";
import { useIntermediate } from "../../context/intermediate/Intermediate";
import {
@ -27,7 +30,7 @@ interface Props {
user: User;
}
export function Friend({ user }: Props) {
export const Friend = observer(({ user }: Props) => {
const client = useContext(AppContext);
const { openScreen } = useIntermediate();
const { openDM } = useContext(OperationsContext);
@ -133,4 +136,4 @@ export function Friend({ user }: Props) {
<div className={styles.actions}>{actions}</div>
</div>
);
}
});

19
src/pages/friends/Friends.tsx
View file

@ -4,7 +4,8 @@ import {
ListPlus,
} from "@styled-icons/boxicons-regular";
import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
import { User, Users } from "revolt.js/dist/api/objects";
import { observer } from "mobx-react-lite";
import { Users } from "revolt.js/dist/api/objects";
import styles from "./Friend.module.scss";
import { Text } from "preact-i18n";
@ -12,30 +13,30 @@ import { Text } from "preact-i18n";
import { TextReact } from "../../lib/i18n";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { User } from "../../mobx";
import { useData } from "../../mobx/State";
import { useIntermediate } from "../../context/intermediate/Intermediate";
import { useUsers } from "../../context/revoltjs/hooks";
import CollapsibleSection from "../../components/common/CollapsibleSection";
import Tooltip from "../../components/common/Tooltip";
import UserIcon from "../../components/common/user/UserIcon";
import Details from "../../components/ui/Details";
import Header from "../../components/ui/Header";
import IconButton from "../../components/ui/IconButton";
import Overline from "../../components/ui/Overline";
import { Children } from "../../types/Preact";
import { Friend } from "./Friend";
export default function Friends() {
export default observer(() => {
const { openScreen } = useIntermediate();
const users = useUsers() as User[];
const store = useData();
const users = [...store.users.values()];
users.sort((a, b) => a.username.localeCompare(b.username));
const friends = users.filter(
(x) => x.relationship === Users.Relationship.Friend,
);
const lists = [
[
"",
@ -138,7 +139,7 @@ export default function Friends() {
onClick={() =>
openScreen({
id: "pending_requests",
users: incoming.map((x) => x._id),
users: incoming,
})
}>
<div className={styles.avatars}>
@ -216,4 +217,4 @@ export default function Friends() {
</div>
</>
);
}
});

21
src/pages/settings/panes/Account.tsx
View file

@ -1,5 +1,6 @@
import { At } from "@styled-icons/boxicons-regular";
import { Envelope, Key, HelpCircle } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link, useHistory } from "react-router-dom";
import { Users } from "revolt.js/dist/api/objects";
@ -7,26 +8,28 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { useData } from "../../../mobx/State";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import {
ClientStatus,
StatusContext,
useClient,
} from "../../../context/revoltjs/RevoltClient";
import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
import { useForceUpdate } from "../../../context/revoltjs/hooks";
import Tooltip from "../../../components/common/Tooltip";
import UserIcon from "../../../components/common/user/UserIcon";
import Button from "../../../components/ui/Button";
import Overline from "../../../components/ui/Overline";
import Tip from "../../../components/ui/Tip";
export function Account() {
export const Account = observer(() => {
const { openScreen, writeClipboard } = useIntermediate();
const status = useContext(StatusContext);
const ctx = useForceUpdate();
const user = useSelf(ctx);
if (!user) return null;
const client = useClient();
const store = useData();
const user = store.users.get(client.user!._id)!;
const [email, setEmail] = useState("...");
const [revealEmail, setRevealEmail] = useState(false);
@ -41,13 +44,13 @@ export function Account() {
useEffect(() => {
if (email === "..." && status === ClientStatus.ONLINE) {
ctx.client
client
.req("GET", "/auth/user")
.then((account) => setEmail(account.email));
}
if (profile === undefined && status === ClientStatus.ONLINE) {
ctx.client.users
client.users
.fetchProfile(user._id)
.then((profile) => setProfile(profile ?? {}));
}
@ -180,4 +183,4 @@ export function Account() {
</Tip>
</div>
);
}
});

6
src/pages/settings/panes/Feedback.tsx
View file

@ -2,7 +2,7 @@ import styles from "./Panes.module.scss";
import { Localizer, Text } from "preact-i18n";
import { useState } from "preact/hooks";
import { useSelf } from "../../../context/revoltjs/hooks";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import Button from "../../../components/ui/Button";
import InputBox from "../../../components/ui/InputBox";
@ -10,7 +10,7 @@ import Radio from "../../../components/ui/Radio";
import TextArea from "../../../components/ui/TextArea";
export function Feedback() {
const user = useSelf();
const client = useClient();
const [other, setOther] = useState("");
const [description, setDescription] = useState("");
const [state, setState] = useState<"ready" | "sending" | "sent">("ready");
@ -28,7 +28,7 @@ export function Feedback() {
checked,
other,
description,
name: user?.username ?? "Unknown User",
name: client.user!.username,
}),
mode: "no-cors",
});

34
src/pages/settings/panes/Profile.tsx
View file

@ -11,8 +11,8 @@ import { FileUploader } from "../../../context/revoltjs/FileUploads";
import {
ClientStatus,
StatusContext,
useClient,
} from "../../../context/revoltjs/RevoltClient";
import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
import AutoComplete, {
useAutoComplete,
@ -23,9 +23,7 @@ export function Profile() {
const { intl } = useContext(IntlContext);
const status = useContext(StatusContext);
const ctx = useForceUpdate();
const user = useSelf();
if (!user) return null;
const client = useClient();
const [profile, setProfile] = useState<undefined | Users.Profile>(
undefined,
@ -34,8 +32,8 @@ export function Profile() {
// ! FIXME: temporary solution
// ! we should just announce profile changes through WS
function refreshProfile() {
ctx.client.users
.fetchProfile(user!._id)
client.users
.fetchProfile(client.user!._id)
.then((profile) => setProfile(profile ?? {}));
}
@ -69,7 +67,7 @@ export function Profile() {
</h3>
<div className={styles.preview}>
<UserProfile
user_id={user._id}
user_id={client.user!._id}
dummy={true}
dummyProfile={profile}
onClose={() => {}}
@ -87,19 +85,17 @@ export function Profile() {
fileType="avatars"
behaviour="upload"
maxFileSize={4_000_000}
onUpload={(avatar) =>
ctx.client.users.editUser({ avatar })
}
onUpload={(avatar) => client.users.editUser({ avatar })}
remove={() =>
ctx.client.users.editUser({ remove: "Avatar" })
client.users.editUser({ remove: "Avatar" })
}
defaultPreview={ctx.client.users.getAvatarURL(
user._id,
defaultPreview={client.users.getAvatarURL(
client.user!._id,
{ max_side: 256 },
true,
)}
previewURL={ctx.client.users.getAvatarURL(
user._id,
previewURL={client.users.getAvatarURL(
client.user!._id,
{ max_side: 256 },
true,
true,
@ -117,20 +113,20 @@ export function Profile() {
fileType="backgrounds"
maxFileSize={6_000_000}
onUpload={async (background) => {
await ctx.client.users.editUser({
await client.users.editUser({
profile: { background },
});
refreshProfile();
}}
remove={async () => {
await ctx.client.users.editUser({
await client.users.editUser({
remove: "ProfileBackground",
});
setProfile({ ...profile, background: undefined });
}}
previewURL={
profile?.background
? ctx.client.users.getBackgroundURL(
? client.users.getBackgroundURL(
profile,
{ width: 1000 },
true,
@ -173,7 +169,7 @@ export function Profile() {
contrast
onClick={() => {
setChanged(false);
ctx.client.users.editUser({
client.users.editUser({
profile: { content: profile?.content },
});
}}

19
src/pages/settings/server/Invites.tsx
View file

@ -1,10 +1,14 @@
import { XCircle } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { Invites as InvitesNS, Servers } from "revolt.js/dist/api/objects";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { useData } from "../../../mobx/State";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import {
useChannels,
useForceUpdate,
@ -20,16 +24,19 @@ interface Props {
server: Servers.Server;
}
export function Invites({ server }: Props) {
export const Invites = observer(({ server }: Props) => {
const [deleting, setDelete] = useState<string[]>([]);
const [invites, setInvites] = useState<
InvitesNS.ServerInvite[] | undefined
>(undefined);
const ctx = useForceUpdate();
const [deleting, setDelete] = useState<string[]>([]);
const users = useUsers(invites?.map((x) => x.creator) ?? [], ctx);
const channels = useChannels(invites?.map((x) => x.channel) ?? [], ctx);
const store = useData();
const client = useClient();
const users = invites?.map((invite) => store.users.get(invite.creator));
useEffect(() => {
ctx.client.servers
.fetchInvites(server._id)
@ -53,8 +60,8 @@ export function Invites({ server }: Props) {
</span>
</div>
{typeof invites === "undefined" && <Preloader type="ring" />}
{invites?.map((invite) => {
const creator = users.find((x) => x?._id === invite.creator);
{invites?.map((invite, index) => {
const creator = users![index];
const channel = channels.find((x) => x?._id === invite.channel);
return (
@ -93,4 +100,4 @@ export function Invites({ server }: Props) {
})}
</div>
);
}
});

25
src/pages/settings/server/Members.tsx
View file

@ -1,11 +1,15 @@
import { ChevronDown } from "@styled-icons/boxicons-regular";
import { isEqual } from "lodash";
import { observer } from "mobx-react-lite";
import { Servers } from "revolt.js/dist/api/objects";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { useData } from "../../../mobx/State";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
import UserIcon from "../../../components/common/user/UserIcon";
@ -18,17 +22,18 @@ interface Props {
server: Servers.Server;
}
export function Members({ server }: Props) {
export const Members = observer(({ server }: Props) => {
const [selected, setSelected] = useState<undefined | string>();
const [members, setMembers] = useState<Servers.Member[] | undefined>(
undefined,
);
const ctx = useForceUpdate();
const [selected, setSelected] = useState<undefined | string>();
const users = useUsers(members?.map((x) => x._id.user) ?? [], ctx);
const store = useData();
const client = useClient();
const users = members?.map((member) => store.users.get(member._id.user));
useEffect(() => {
ctx.client.members
client.members
.fetchMembers(server._id)
.then((members) => setMembers(members));
}, []);
@ -50,10 +55,10 @@ export function Members({ server }: Props) {
{members &&
members.length > 0 &&
members
.map((x) => {
.map((member, index) => {
return {
member: x,
user: users.find((y) => y?._id === x._id.user),
member,
user: users![index],
};
})
.map(({ member, user }) => (
@ -126,7 +131,7 @@ export function Members({ server }: Props) {
roles,
)}
onClick={async () => {
await ctx.client.members.editMember(
await client.members.editMember(
server._id,
member._id.user,
{
@ -154,4 +159,4 @@ export function Members({ server }: Props) {
))}
</div>
);
}
});