100 error milestone.

Remove hooks completely. :)
This commit is contained in:
Paul 2021-07-30 21:20:42 +01:00
parent 3184269ba4
commit c21453b281
22 changed files with 257 additions and 506 deletions

View file

@ -1,17 +1,14 @@
import { Money } from "@styled-icons/boxicons-regular";
import { Envelope, Edit, UserPlus, Shield } from "@styled-icons/boxicons-solid";
import { Link, useHistory } from "react-router-dom";
import { Users } from "revolt.js/dist/api/objects";
import { Profile, RelationshipStatus } from "revolt-api/types/Users";
import { UserPermission } from "revolt.js/dist/api/permissions";
import { Route } from "revolt.js/dist/api/routes";
import { decodeTime } from "ulid";
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";
@ -27,14 +24,13 @@ import {
StatusContext,
useClient,
} from "../../revoltjs/RevoltClient";
import { useForceUpdate, useUserPermission } from "../../revoltjs/hooks";
import { useIntermediate } from "../Intermediate";
interface Props {
user_id: string;
dummy?: boolean;
onClose: () => void;
dummyProfile?: Users.Profile;
dummyProfile?: Profile;
}
enum Badges {
@ -48,7 +44,7 @@ enum Badges {
export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
const { openScreen, writeClipboard } = useIntermediate();
const [profile, setProfile] = useState<undefined | null | Users.Profile>(
const [profile, setProfile] = useState<undefined | null | Profile>(
undefined,
);
const [mutual, setMutual] = useState<
@ -60,22 +56,18 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
const status = useContext(StatusContext);
const [tab, setTab] = useState("profile");
const ctx = useForceUpdate();
const permissions = useUserPermission(client.user!._id, ctx);
const store = useData();
if (!store.users.has(user_id)) {
const user = client.users.get(user_id);
if (!user) {
useEffect(onClose, []);
return null;
}
const user = store.users.get(user_id)!;
const users = mutual?.users.map((id) => store.users.get(id));
const users = mutual?.users.map((id) => client.users.get(id));
const mutualGroups = [...store.channels.values()].filter(
const mutualGroups = [...client.channels.values()].filter(
(channel) =>
channel?.channel_type === "Group" &&
channel.recipients!.includes(user_id),
channel.recipient_ids!.includes(user_id),
);
useLayoutEffect(() => {
@ -94,7 +86,7 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
if (dummy) return;
if (status === ClientStatus.ONLINE && typeof mutual === "undefined") {
setMutual(null);
client.users.fetchMutual(user_id).then((data) => setMutual(data));
user.fetchMutual().then(setMutual);
}
}, [mutual, status]);
@ -103,10 +95,9 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
if (status === ClientStatus.ONLINE && typeof profile === "undefined") {
setProfile(null);
if (permissions & UserPermission.ViewProfile) {
client.users
.fetchProfile(user_id)
.then((data) => setProfile(data))
if (user.permission & UserPermission.ViewProfile) {
user.fetchProfile()
.then(setProfile)
.catch(() => {});
}
}
@ -114,10 +105,8 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
const backgroundURL =
profile &&
client.users.getBackgroundURL(profile, { width: 1000 }, true);
const badges =
(user.badges ?? 0) |
(decodeTime(user._id) < 1623751765790 ? Badges.EarlyAdopter : 0);
client.generateFileURL(profile.background, { width: 1000 }, true);
const badges = user.badges ?? 0;
return (
<Modal
@ -150,7 +139,7 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
</span>
)}
</div>
{user.relationship === Users.Relationship.Friend && (
{user.relationship === RelationshipStatus.Friend && (
<Localizer>
<Tooltip
content={
@ -166,7 +155,7 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
</Tooltip>
</Localizer>
)}
{user.relationship === Users.Relationship.User && (
{user.relationship === RelationshipStatus.User && (
<IconButton
onClick={() => {
onClose();
@ -176,12 +165,9 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
<Edit size={28} />
</IconButton>
)}
{(user.relationship === Users.Relationship.Incoming ||
user.relationship === Users.Relationship.None) && (
<IconButton
onClick={() =>
client.users.addFriend(user.username)
}>
{(user.relationship === RelationshipStatus.Incoming ||
user.relationship === RelationshipStatus.None) && (
<IconButton onClick={() => user.addFriend()}>
<UserPlus size={28} />
</IconButton>
)}
@ -192,7 +178,7 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
onClick={() => setTab("profile")}>
<Text id="app.special.popovers.user_profile.profile" />
</div>
{user.relationship !== Users.Relationship.User && (
{user.relationship !== RelationshipStatus.User && (
<>
<div
data-active={tab === "friends"}

View file

@ -1,6 +1,8 @@
import { autorun } from "mobx";
import { Route, Switch, useHistory, useParams } from "react-router-dom";
import { Message, SYSTEM_USER_ID, User } from "revolt.js";
import { Users } from "revolt.js/dist/api/objects";
import { Presence, RelationshipStatus } from "revolt-api/types/Users";
import { SYSTEM_USER_ID } from "revolt.js";
import { Message } from "revolt.js/dist/maps/Messages";
import { decodeTime } from "ulid";
import { useContext, useEffect } from "preact/hooks";
@ -50,41 +52,36 @@ function Notifier({ options, notifs }: Props) {
const playSound = useContext(SoundContext);
async function message(msg: Message) {
if (msg.author === client.user!._id) return;
if (msg.channel === channel_id && document.hasFocus()) return;
if (client.user!.status?.presence === Users.Presence.Busy) return;
if (msg.author_id === client.user!._id) return;
if (msg.channel_id === channel_id && document.hasFocus()) return;
if (client.user!.status?.presence === Presence.Busy) return;
if (msg.author?.relationship === RelationshipStatus.Blocked) return;
const channel = client.channels.get(msg.channel);
const author = client.users.get(msg.author);
if (!channel) return;
if (author?.relationship === Users.Relationship.Blocked) return;
const notifState = getNotificationState(notifs, channel);
const notifState = getNotificationState(notifs, msg.channel!);
if (!shouldNotify(notifState, msg, client.user!._id)) return;
playSound("message");
if (!showNotification) return;
let title;
switch (channel.channel_type) {
switch (msg.channel?.channel_type) {
case "SavedMessages":
return;
case "DirectMessage":
title = `@${author?.username}`;
title = `@${msg.author?.username}`;
break;
case "Group":
if (author?._id === SYSTEM_USER_ID) {
title = channel.name;
if (msg.author?._id === SYSTEM_USER_ID) {
title = msg.channel.name;
} else {
title = `@${author?.username} - ${channel.name}`;
title = `@${msg.author?.username} - ${msg.channel.name}`;
}
break;
case "TextChannel":
const server = client.servers.get(channel.server);
title = `@${author?.username} (#${channel.name}, ${server?.name})`;
title = `@${msg.author?.username} (#${msg.channel.name}, ${msg.channel.server?.name})`;
break;
default:
title = msg.channel;
title = msg.channel?._id;
break;
}
@ -103,12 +100,14 @@ function Notifier({ options, notifs }: Props) {
let body, icon;
if (typeof msg.content === "string") {
body = client.markdownToText(msg.content);
icon = client.users.getAvatarURL(msg.author, { max_side: 256 });
icon = msg.author?.generateAvatarURL({ max_side: 256 });
} else {
const users = client.users;
switch (msg.content.type) {
case "user_added":
case "user_remove":
{
let user = users.get(msg.content.id);
body = translate(
`app.main.channel.system.${
msg.content.type === "user_added"
@ -116,27 +115,33 @@ function Notifier({ options, notifs }: Props) {
: "removed_by"
}`,
{
user: users.get(msg.content.id)?.username,
user: user?.username,
other_user: users.get(msg.content.by)?.username,
},
);
icon = client.users.getAvatarURL(msg.content.id, {
icon = user?.generateAvatarURL({
max_side: 256,
});
}
break;
case "user_joined":
case "user_left":
case "user_kicked":
case "user_banned":
{
let user = users.get(msg.content.id);
body = translate(
`app.main.channel.system.${msg.content.type}`,
{ user: users.get(msg.content.id)?.username },
{ user: user?.username },
);
icon = client.users.getAvatarURL(msg.content.id, {
icon = user?.generateAvatarURL({
max_side: 256,
});
}
break;
case "channel_renamed":
{
let user = users.get(msg.content.by);
body = translate(
`app.main.channel.system.channel_renamed`,
{
@ -144,29 +149,33 @@ function Notifier({ options, notifs }: Props) {
name: msg.content.name,
},
);
icon = client.users.getAvatarURL(msg.content.by, {
icon = user?.generateAvatarURL({
max_side: 256,
});
}
break;
case "channel_description_changed":
case "channel_icon_changed":
{
let user = users.get(msg.content.by);
body = translate(
`app.main.channel.system.${msg.content.type}`,
{ user: users.get(msg.content.by)?.username },
);
icon = client.users.getAvatarURL(msg.content.by, {
icon = user?.generateAvatarURL({
max_side: 256,
});
}
break;
}
}
const notif = await createNotification(title, {
const notif = await createNotification(title!, {
icon,
image,
body,
timestamp: decodeTime(msg._id),
tag: msg.channel,
tag: msg.channel?._id,
badge: "/assets/icons/android-chrome-512x512.png",
silent: true,
});
@ -174,7 +183,7 @@ function Notifier({ options, notifs }: Props) {
if (notif) {
notif.addEventListener("click", () => {
window.focus();
const id = msg.channel;
const id = msg.channel_id;
if (id !== channel_id) {
const channel = client.channels.get(id);
if (channel) {
@ -189,15 +198,15 @@ function Notifier({ options, notifs }: Props) {
}
});
notifications[msg.channel] = notif;
notifications[msg.channel_id] = notif;
notif.addEventListener(
"close",
() => delete notifications[msg.channel],
() => delete notifications[msg.channel_id],
);
}
}
async function relationship(user: User, property: string) {
/*async function relationship(user: User, property: string) {
if (client.user?.status?.presence === Users.Presence.Busy) return;
if (property !== "relationship") return;
if (!showNotification) return;
@ -219,7 +228,7 @@ function Notifier({ options, notifs }: Props) {
}
const notif = await createNotification(event, {
icon: client.users.getAvatarURL(user._id, { max_side: 256 }),
icon: user.generateAvatarURL({ max_side: 256 }),
badge: "/assets/icons/android-chrome-512x512.png",
timestamp: +new Date(),
});
@ -227,15 +236,17 @@ function Notifier({ options, notifs }: Props) {
notif?.addEventListener("click", () => {
history.push(`/friends`);
});
}
}*/
useEffect(() => {
// ! FIXME: need event from client about relationship
client.addListener("message", message);
client.users.addListener("mutation", relationship);
// client.users.addListener("mutation", relationship);
return () => {
client.removeListener("message", message);
client.users.removeListener("mutation", relationship);
// client.users.removeListener("mutation", relationship);
};
}, [client, playSound, guild_id, channel_id, showNotification, notifs]);

View file

@ -8,7 +8,6 @@ import { useContext, useEffect, useMemo, useState } from "preact/hooks";
import { SingletonMessageRenderer } from "../../lib/renderer/Singleton";
import { useData } from "../../mobx/State";
import { dispatch } from "../../redux";
import { connectState } from "../../redux/connector";
import { AuthState } from "../../redux/reducers/auth";
@ -36,8 +35,6 @@ export interface ClientOperations {
logout: (shouldRequest?: boolean) => Promise<void>;
loggedIn: () => boolean;
ready: () => boolean;
openDM: (user_id: string) => Promise<string>;
}
// By the time they are used, they should all be initialized.
@ -53,7 +50,6 @@ type Props = {
};
function Context({ auth, children }: Props) {
const history = useHistory();
const { openScreen } = useIntermediate();
const [status, setStatus] = useState(ClientStatus.INIT);
const [client, setClient] = useState<Client>(
@ -89,7 +85,6 @@ function Context({ auth, children }: Props) {
autoReconnect: false,
apiURL: import.meta.env.VITE_API_URL,
debug: import.meta.env.DEV,
db,
});
setClient(client);
@ -150,11 +145,6 @@ function Context({ auth, children }: Props) {
loggedIn: () => typeof auth.active !== "undefined",
ready: () =>
operations.loggedIn() && typeof client.user !== "undefined",
openDM: async (user_id: string) => {
const channel = await client.users.openDM(user_id);
history.push(`/channel/${channel!._id}`);
return channel!._id;
},
};
}, [client, auth.active]);
@ -165,10 +155,6 @@ function Context({ auth, children }: Props) {
useEffect(() => {
(async () => {
if (client.db) {
await client.restore();
}
if (auth.active) {
dispatch({ type: "QUEUE_FAIL_ALL" });

View file

@ -1,7 +1,7 @@
/**
* This file monitors the message cache to delete any queued messages that have already sent.
*/
import { Message } from "revolt.js";
import { Message } from "revolt.js/dist/maps/Messages";
import { useContext, useEffect } from "preact/hooks";

View file

@ -2,7 +2,7 @@
* This file monitors changes to settings and syncs them to the server.
*/
import isEqual from "lodash.isequal";
import { Sync } from "revolt.js/dist/api/objects";
import { UserSettings } from "revolt-api/types/Sync";
import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
import { useContext, useEffect } from "preact/hooks";
@ -31,7 +31,7 @@ type Props = {
const lastValues: { [key in SyncKeys]?: any } = {};
export function mapSync(
packet: Sync.UserSettings,
packet: UserSettings,
revision?: Record<string, number>,
) {
const update: { [key in SyncKeys]?: [number, SyncData[key]] } = {};

View file

@ -1,10 +1,9 @@
import { Client, Message } from "revolt.js/dist";
import { Client } from "revolt.js/dist";
import { Message } from "revolt.js/dist/maps/Messages";
import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
import { StateUpdater } from "preact/hooks";
import { DataStore } from "../../mobx";
import { useData } from "../../mobx/State";
import { dispatch } from "../../redux";
import { ClientOperations, ClientStatus } from "./RevoltClient";
@ -78,10 +77,10 @@ export function registerEvents(
},
message: (message: Message) => {
if (message.mentions?.includes(client.user!._id)) {
if (message.mention_ids?.includes(client.user!._id)) {
dispatch({
type: "UNREADS_MENTION",
channel: message.channel,
channel: message.channel_id,
message: message._id,
});
}
@ -110,13 +109,6 @@ export function registerEvents(
console.log("(o) Object mutated", target, "\nChanged:", key);
}
if (import.meta.env.DEV) {
client.users.addListener("mutation", logMutation);
client.servers.addListener("mutation", logMutation);
client.channels.addListener("mutation", logMutation);
client.members.addListener("mutation", logMutation);
}
const online = () => {
if (operations.ready()) {
setStatus(ClientStatus.RECONNECTING);
@ -144,13 +136,6 @@ export function registerEvents(
);
}
if (import.meta.env.DEV) {
client.users.removeListener("mutation", logMutation);
client.servers.removeListener("mutation", logMutation);
client.channels.removeListener("mutation", logMutation);
client.members.removeListener("mutation", logMutation);
}
window.removeEventListener("online", online);
window.removeEventListener("offline", offline);
};

View file

@ -1,102 +0,0 @@
import { Client, PermissionCalculator } from "revolt.js";
import { useContext, useEffect, useState } from "preact/hooks";
//#region Hooks v1 (deprecated)
import { AppContext } from "./RevoltClient";
export interface HookContext {
client: Client;
forceUpdate: () => void;
}
export function useForceUpdate(context?: HookContext): HookContext {
const client = useContext(AppContext);
if (context) return context;
const H = useState(0);
let updateState: (_: number) => void;
if (Array.isArray(H)) {
const [, u] = H;
updateState = u;
} else {
console.warn("Failed to construct using useState.");
updateState = () => {};
}
return { client, forceUpdate: () => updateState(Math.random()) };
}
export function useUserPermission(id: string, context?: HookContext) {
const ctx = useForceUpdate(context);
const mutation = (target: string) => target === id && ctx.forceUpdate();
useEffect(() => {
ctx.client.users.addListener("update", mutation);
return () => ctx.client.users.removeListener("update", mutation);
}, [id]);
const calculator = new PermissionCalculator(ctx.client);
return calculator.forUser(id);
}
export function useChannelPermission(id: string, context?: HookContext) {
const ctx = useForceUpdate(context);
const channel = ctx.client.channels.get(id);
const server =
channel &&
(channel.channel_type === "TextChannel" ||
channel.channel_type === "VoiceChannel")
? channel.server
: undefined;
const mutation = (target: string) => target === id && ctx.forceUpdate();
const mutationServer = (target: string) =>
target === server && ctx.forceUpdate();
const mutationMember = (target: string) =>
target.substr(26) === ctx.client.user!._id && ctx.forceUpdate();
useEffect(() => {
ctx.client.channels.addListener("update", mutation);
if (server) {
ctx.client.servers.addListener("update", mutationServer);
ctx.client.members.addListener("update", mutationMember);
}
return () => {
ctx.client.channels.removeListener("update", mutation);
if (server) {
ctx.client.servers.removeListener("update", mutationServer);
ctx.client.members.removeListener("update", mutationMember);
}
};
}, [id]);
const calculator = new PermissionCalculator(ctx.client);
return calculator.forChannel(id);
}
export function useServerPermission(id: string, context?: HookContext) {
const ctx = useForceUpdate(context);
const mutation = (target: string) => target === id && ctx.forceUpdate();
const mutationMember = (target: string) =>
target.substr(26) === ctx.client.user!._id && ctx.forceUpdate();
useEffect(() => {
ctx.client.servers.addListener("update", mutation);
ctx.client.members.addListener("update", mutationMember);
return () => {
ctx.client.servers.removeListener("update", mutation);
ctx.client.members.removeListener("update", mutationMember);
};
}, [id]);
const calculator = new PermissionCalculator(ctx.client);
return calculator.forServer(id);
}
//#endregion

View file

@ -12,18 +12,17 @@ import {
} from "@styled-icons/boxicons-regular";
import { Cog, UserVoice } from "@styled-icons/boxicons-solid";
import { useHistory } from "react-router-dom";
import {
Attachment,
Channels,
Message,
Servers,
Users,
} from "revolt.js/dist/api/objects";
import { Attachment } from "revolt-api/types/Autumn";
import { Presence, RelationshipStatus } from "revolt-api/types/Users";
import {
ChannelPermission,
ServerPermission,
UserPermission,
} from "revolt.js/dist/api/permissions";
import { Channel } from "revolt.js/dist/maps/Channels";
import { Message } from "revolt.js/dist/maps/Messages";
import { Server } from "revolt.js/dist/maps/Servers";
import { User } from "revolt.js/dist/maps/Users";
import {
ContextMenu,
@ -34,8 +33,6 @@ import {
import { Text } from "preact-i18n";
import { useContext } from "preact/hooks";
import { Channel, Server, User } from "../mobx";
import { useData } from "../mobx/State";
import { dispatch } from "../redux";
import { connectState } from "../redux/connector";
import {
@ -52,12 +49,6 @@ import {
StatusContext,
useClient,
} from "../context/revoltjs/RevoltClient";
import {
useChannelPermission,
useForceUpdate,
useServerPermission,
useUserPermission,
} from "../context/revoltjs/hooks";
import { takeError } from "../context/revoltjs/util";
import Tooltip from "../components/common/Tooltip";
@ -91,13 +82,13 @@ type Action =
| { action: "reply_message"; id: string }
| { action: "quote_message"; content: string }
| { action: "edit_message"; id: string }
| { action: "delete_message"; target: Channels.Message }
| { action: "delete_message"; target: Message }
| { action: "open_file"; attachment: Attachment }
| { action: "save_file"; attachment: Attachment }
| { action: "copy_file_link"; attachment: Attachment }
| { action: "open_link"; link: string }
| { action: "copy_link"; link: string }
| { action: "remove_member"; channel: string; user: User }
| { action: "remove_member"; channel: Channel; user: User }
| { action: "kick_member"; target: Server; user: User }
| { action: "ban_member"; target: Server; user: User }
| { action: "view_profile"; user: User }
@ -107,7 +98,7 @@ type Action =
| { action: "add_friend"; user: User }
| { action: "remove_friend"; user: User }
| { action: "cancel_friend"; user: User }
| { action: "set_presence"; presence: Users.Presence }
| { action: "set_presence"; presence: Presence }
| { action: "set_status" }
| { action: "clear_status" }
| { action: "create_channel"; target: Server }
@ -196,7 +187,8 @@ function ContextMenus(props: Props) {
});
client.channels
.sendMessage(data.message.channel, {
.get(data.message.channel)!
.sendMessage({
nonce: data.message.id,
content: data.message.data.content as string,
replies: data.message.data.replies,
@ -313,10 +305,7 @@ function ContextMenus(props: Props) {
case "remove_member":
{
client.channels.removeMember(
data.channel,
data.user._id,
);
data.channel.removeMember(data.user._id);
}
break;
@ -326,9 +315,7 @@ function ContextMenus(props: Props) {
case "message_user":
{
const channel = await client.users.openDM(
data.user._id,
);
const channel = await data.user.openDM();
if (channel) {
history.push(`/channel/${channel._id}`);
}
@ -337,7 +324,7 @@ function ContextMenus(props: Props) {
case "add_friend":
{
await client.users.addFriend(data.user.username);
await data.user.addFriend();
}
break;
@ -349,7 +336,7 @@ function ContextMenus(props: Props) {
});
break;
case "unblock_user":
await client.users.unblockUser(data.user._id);
await data.user.unblockUser();
break;
case "remove_friend":
openScreen({
@ -359,12 +346,12 @@ function ContextMenus(props: Props) {
});
break;
case "cancel_friend":
await client.users.removeFriend(data.user._id);
await data.user.removeFriend();
break;
case "set_presence":
{
await client.users.editUser({
await client.users.edit({
status: {
...client.user?.status,
presence: data.presence,
@ -383,7 +370,7 @@ function ContextMenus(props: Props) {
case "clear_status":
{
const { text, ...status } = client.user?.status ?? {};
await client.users.editUser({ status });
await client.users.edit({ status });
}
break;
@ -463,9 +450,6 @@ function ContextMenus(props: Props) {
unread,
contextualChannel: cxid,
}: ContextMenuData) => {
const store = useData();
const forceUpdate = useForceUpdate();
const elements: Children[] = [];
let lastDivider = false;
@ -495,11 +479,8 @@ function ContextMenus(props: Props) {
}
if (server_list) {
const server = store.servers.get(server_list);
const permissions = useServerPermission(
server_list,
forceUpdate,
);
const server = client.servers.get(server_list)!;
const permissions = server.permission;
if (server) {
if (permissions & ServerPermission.ManageChannels)
generateAction({
@ -526,13 +507,13 @@ function ContextMenus(props: Props) {
pushDivider();
}
const channel = cid ? store.channels.get(cid) : undefined;
const channel = cid ? client.channels.get(cid) : undefined;
const contextualChannel = cxid
? store.channels.get(cxid)
? client.channels.get(cxid)
: undefined;
const targetChannel = channel ?? contextualChannel;
const user = uid ? store.users.get(uid) : undefined;
const user = uid ? client.users.get(uid) : undefined;
const serverChannel =
targetChannel &&
(targetChannel.channel_type === "TextChannel" ||
@ -540,23 +521,17 @@ function ContextMenus(props: Props) {
? targetChannel
: undefined;
const s = serverChannel ? serverChannel.server! : sid;
const server = s ? store.servers.get(s) : undefined;
const s = serverChannel ? serverChannel.server_id! : sid;
const server = s ? client.servers.get(s) : undefined;
const channelPermissions = targetChannel
? useChannelPermission(targetChannel._id, forceUpdate)
: 0;
const serverPermissions = server
? useServerPermission(server._id, forceUpdate)
const channelPermissions = targetChannel?.permission || 0;
const serverPermissions =
(server
? server.permission
: serverChannel
? useServerPermission(
serverChannel.server!,
forceUpdate,
)
: 0;
const userPermissions = user
? useUserPermission(user._id, forceUpdate)
: 0;
? serverChannel.server?.permission
: 0) || 0;
const userPermissions = (user ? user.permission : 0) || 0;
if (channel && unread) {
generateAction({ action: "mark_as_read", channel });
@ -576,29 +551,29 @@ function ContextMenus(props: Props) {
if (user) {
let actions: Action["action"][];
switch (user.relationship) {
case Users.Relationship.User:
case RelationshipStatus.User:
actions = [];
break;
case Users.Relationship.Friend:
case RelationshipStatus.Friend:
actions = ["remove_friend", "block_user"];
break;
case Users.Relationship.Incoming:
case RelationshipStatus.Incoming:
actions = [
"add_friend",
"cancel_friend",
"block_user",
];
break;
case Users.Relationship.Outgoing:
case RelationshipStatus.Outgoing:
actions = ["cancel_friend", "block_user"];
break;
case Users.Relationship.Blocked:
case RelationshipStatus.Blocked:
actions = ["unblock_user"];
break;
case Users.Relationship.BlockedOther:
case RelationshipStatus.BlockedOther:
actions = ["block_user"];
break;
case Users.Relationship.None:
case RelationshipStatus.None:
default:
actions = ["add_friend", "block_user"];
}
@ -629,12 +604,12 @@ function ContextMenus(props: Props) {
if (contextualChannel) {
if (contextualChannel.channel_type === "Group" && uid) {
if (
contextualChannel.owner === userId &&
contextualChannel.owner_id === userId &&
userId !== uid
) {
generateAction({
action: "remove_member",
channel: contextualChannel._id,
channel: contextualChannel,
user: user!,
});
}
@ -697,7 +672,7 @@ function ContextMenus(props: Props) {
});
}
if (message.author === userId) {
if (message.author_id === userId) {
generateAction({
action: "edit_message",
id: message._id,
@ -705,7 +680,7 @@ function ContextMenus(props: Props) {
}
if (
message.author === userId ||
message.author_id === userId ||
channelPermissions &
ChannelPermission.ManageMessages
) {
@ -820,7 +795,7 @@ function ContextMenus(props: Props) {
generateAction(
{
action: "open_server_channel_settings",
server: channel.server!,
server: channel.server_id!,
id: channel._id,
},
"open_channel_settings",
@ -885,9 +860,7 @@ function ContextMenus(props: Props) {
onClose={contextClick}
className="Status">
{() => {
const store = useData();
const user = store.users.get(client.user!._id)!;
const user = client.user!;
return (
<>
<div className="header">
@ -927,7 +900,7 @@ function ContextMenus(props: Props) {
<MenuItem
data={{
action: "set_presence",
presence: Users.Presence.Online,
presence: Presence.Online,
}}
disabled={!isOnline}>
<div className="indicator online" />
@ -936,7 +909,7 @@ function ContextMenus(props: Props) {
<MenuItem
data={{
action: "set_presence",
presence: Users.Presence.Idle,
presence: Presence.Idle,
}}
disabled={!isOnline}>
<div className="indicator idle" />
@ -945,7 +918,7 @@ function ContextMenus(props: Props) {
<MenuItem
data={{
action: "set_presence",
presence: Users.Presence.Busy,
presence: Presence.Busy,
}}
disabled={!isOnline}>
<div className="indicator busy" />
@ -954,7 +927,7 @@ function ContextMenus(props: Props) {
<MenuItem
data={{
action: "set_presence",
presence: Users.Presence.Invisible,
presence: Presence.Invisible,
}}
disabled={!isOnline}>
<div className="indicator invisible" />
@ -982,7 +955,7 @@ function ContextMenus(props: Props) {
<ContextMenuWithData
id="NotificationOptions"
onClose={contextClick}>
{({ channel }: { channel: Channels.Channel }) => {
{({ channel }: { channel: Channel }) => {
const state = props.notifications[channel._id];
const actual = getNotificationState(
props.notifications,

View file

@ -1,5 +1,6 @@
import EventEmitter3 from "eventemitter3";
import { Client, Message } from "revolt.js";
import { Client } from "revolt.js";
import { Message } from "revolt.js/dist/maps/Messages";
import { useEffect, useState } from "preact/hooks";

View file

@ -1,5 +1,3 @@
import { mapMessage } from "../../../context/revoltjs/util";
import { SMOOTH_SCROLL_ON_RECEIVE } from "../Singleton";
import { RendererRoutines } from "../types";
@ -8,14 +6,10 @@ export const SimpleRenderer: RendererRoutines = {
if (renderer.client!.websocket.connected) {
if (nearby)
renderer
.client!.channels.fetchMessagesWithUsers(
id,
{ nearby, limit: 100 },
true,
)
.then(({ messages: data }) => {
data.sort((a, b) => a._id.localeCompare(b._id));
const messages = data.map((x) => mapMessage(x));
.client!.channels.get(id)!
.fetchMessagesWithUsers({ nearby, limit: 100 })
.then(({ messages }) => {
messages.sort((a, b) => a._id.localeCompare(b._id));
renderer.setState(
id,
{
@ -29,16 +23,16 @@ export const SimpleRenderer: RendererRoutines = {
});
else
renderer
.client!.channels.fetchMessagesWithUsers(id, {}, true)
.then(({ messages: data }) => {
data.reverse();
const messages = data.map((x) => mapMessage(x));
.client!.channels.get(id)!
.fetchMessagesWithUsers({})
.then(({ messages }) => {
messages.reverse();
renderer.setState(
id,
{
type: "RENDER",
messages,
atTop: data.length < 50,
atTop: messages.length < 50,
atBottom: true,
},
{ type: "ScrollToBottom", smooth },
@ -54,7 +48,7 @@ export const SimpleRenderer: RendererRoutines = {
if (renderer.state.messages.find((x) => x._id === message._id)) return;
if (!renderer.state.atBottom) return;
let messages = [...renderer.state.messages, mapMessage(message)];
let messages = [...renderer.state.messages, message];
let atTop = renderer.state.atTop;
if (messages.length > 150) {
messages = messages.slice(messages.length - 150);
@ -62,7 +56,7 @@ export const SimpleRenderer: RendererRoutines = {
}
renderer.setState(
message.channel,
message.channel_id,
{
...renderer.state,
messages,
@ -72,7 +66,8 @@ export const SimpleRenderer: RendererRoutines = {
);
},
edit: async (renderer, id, patch) => {
const channel = renderer.channel;
// ! FIXME: verify if this is needed anymore
/*const channel = renderer.channel;
if (!channel) return;
if (renderer.state.type !== "RENDER") return;
@ -91,7 +86,7 @@ export const SimpleRenderer: RendererRoutines = {
},
{ type: "StayAtBottom" },
);
}
}*/
},
delete: async (renderer, id) => {
const channel = renderer.channel;
@ -122,14 +117,11 @@ export const SimpleRenderer: RendererRoutines = {
if (state.type !== "RENDER") return;
if (state.atTop) return;
const { messages: data } =
await renderer.client!.channels.fetchMessagesWithUsers(
channel,
{
const { messages: data } = await renderer
.client!.channels.get(channel)!
.fetchMessagesWithUsers({
before: state.messages[0]._id,
},
true,
);
});
if (data.length === 0) {
return renderer.setState(channel, {
@ -139,7 +131,7 @@ export const SimpleRenderer: RendererRoutines = {
}
data.reverse();
let messages = [...data.map((x) => mapMessage(x)), ...state.messages];
let messages = [...data, ...state.messages];
let atTop = false;
if (data.length < 50) {
@ -166,15 +158,12 @@ export const SimpleRenderer: RendererRoutines = {
if (state.type !== "RENDER") return;
if (state.atBottom) return;
const { messages: data } =
await renderer.client!.channels.fetchMessagesWithUsers(
channel,
{
const { messages: data } = await renderer
.client!.channels.get(channel)!
.fetchMessagesWithUsers({
after: state.messages[state.messages.length - 1]._id,
sort: "Oldest",
},
true,
);
});
if (data.length === 0) {
return renderer.setState(channel, {
@ -183,7 +172,7 @@ export const SimpleRenderer: RendererRoutines = {
});
}
let messages = [...state.messages, ...data.map((x) => mapMessage(x))];
let messages = [...state.messages, ...data];
let atBottom = false;
if (data.length < 50) {

View file

@ -1,6 +1,4 @@
import { Message } from "revolt.js";
import { MessageObject } from "../../context/revoltjs/util";
import { Message } from "revolt.js/dist/maps/Messages";
import { SingletonRenderer } from "./Singleton";
@ -20,7 +18,7 @@ export type RenderState =
type: "RENDER";
atTop: boolean;
atBottom: boolean;
messages: MessageObject[];
messages: Message[];
};
export interface RendererRoutines {

View file

@ -29,15 +29,15 @@ export default function Open() {
useEffect(() => {
if (id === "saved") {
for (const channel of client.channels.toArray()) {
for (const channel of [...client.channels.values()]) {
if (channel?.channel_type === "SavedMessages") {
history.push(`/channel/${channel._id}`);
return;
}
}
client.users
.openDM(client.user?._id as string)
client
.user!.openDM()
.then((channel) => history.push(`/channel/${channel?._id}`))
.catch((error) => openScreen({ id: "error", error }));
@ -46,19 +46,20 @@ export default function Open() {
let user = client.users.get(id);
if (user) {
const channel: string | undefined = client.channels
.toArray()
.find(
const channel: string | undefined = [
...client.channels.values(),
].find(
(channel) =>
channel?.channel_type === "DirectMessage" &&
channel.recipients.includes(id),
channel.recipient_ids!.includes(id),
)?._id;
if (channel) {
history.push(`/channel/${channel}`);
} else {
client.users
.openDM(id)
.get(id)
?.openDM()
.then((channel) => history.push(`/channel/${channel?._id}`))
.catch((error) => openScreen({ id: "error", error }));
}

View file

@ -1,16 +1,16 @@
import { observer } from "mobx-react-lite";
import { useParams, useHistory } from "react-router-dom";
import { Channels } from "revolt.js/dist/api/objects";
import { useParams } from "react-router-dom";
import { Channel as ChannelI } from "revolt.js/dist/maps/Channels";
import styled from "styled-components";
import { useState } from "preact/hooks";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { Channel as MobXChannel } from "../../mobx";
import { useData } from "../../mobx/State";
import { dispatch, getState } from "../../redux";
import { useClient } from "../../context/revoltjs/RevoltClient";
import AgeGate from "../../components/common/AgeGate";
import MessageBox from "../../components/common/messaging/MessageBox";
import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
@ -37,8 +37,8 @@ const ChannelContent = styled.div`
`;
export function Channel({ id }: { id: string }) {
const store = useData();
const channel = store.channels.get(id);
const client = useClient();
const channel = client.channels.get(id);
if (!channel) return null;
if (channel.channel_type === "VoiceChannel") {
@ -49,7 +49,7 @@ export function Channel({ id }: { id: string }) {
}
const MEMBERS_SIDEBAR_KEY = "sidebar_members";
const TextChannel = observer(({ channel }: { channel: MobXChannel }) => {
const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
const [showMembers, setMembers] = useState(
getState().sectionToggle[MEMBERS_SIDEBAR_KEY] ?? true,
);
@ -101,7 +101,7 @@ const TextChannel = observer(({ channel }: { channel: MobXChannel }) => {
);
});
function VoiceChannel({ channel }: { channel: MobXChannel }) {
function VoiceChannel({ channel }: { channel: ChannelI }) {
return (
<>
<ChannelHeader channel={channel} />

View file

@ -1,18 +1,13 @@
import { At, Hash, Menu } from "@styled-icons/boxicons-regular";
import { Notepad, Group } from "@styled-icons/boxicons-solid";
import { observable } from "mobx";
import { observer } from "mobx-react-lite";
import { Channel } from "revolt.js/dist/maps/Channels";
import { User } from "revolt.js/dist/maps/Users";
import styled from "styled-components";
import { useContext } from "preact/hooks";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { Channel, User } from "../../mobx";
import { useData } from "../../mobx/State";
import { useIntermediate } from "../../context/intermediate/Intermediate";
import { AppContext, useClient } from "../../context/revoltjs/RevoltClient";
import { getChannelName } from "../../context/revoltjs/util";
import { useStatusColour } from "../../components/common/user/UserIcon";
@ -71,10 +66,8 @@ const Info = styled.div`
export default observer(({ channel, toggleSidebar }: ChannelHeaderProps) => {
const { openScreen } = useIntermediate();
const client = useClient();
const state = useData();
const name = getChannelName(client, channel);
const name = getChannelName(channel);
let icon, recipient: User | undefined;
switch (channel.channel_type) {
case "SavedMessages":
@ -82,8 +75,7 @@ export default observer(({ channel, toggleSidebar }: ChannelHeaderProps) => {
break;
case "DirectMessage":
icon = <At size={24} />;
const uid = client.channels.getRecipient(channel._id);
recipient = state.users.get(uid);
recipient = channel.recipient;
break;
case "Group":
icon = <Group size={24} />;

View file

@ -29,7 +29,6 @@ export default function HeaderActions({
toggleSidebar,
}: ChannelHeaderProps) {
const { openScreen } = useIntermediate();
const client = useContext(AppContext);
const history = useHistory();
return (
@ -41,13 +40,10 @@ export default function HeaderActions({
onClick={() =>
openScreen({
id: "user_picker",
omit: channel.recipients!,
omit: channel.recipient_ids!,
callback: async (users) => {
for (const user of users) {
await client.channels.addMember(
channel._id,
user,
);
await channel.addMember(user);
}
},
})

View file

@ -3,8 +3,6 @@ import styled from "styled-components";
import { Text } from "preact-i18n";
import { useData } from "../../../mobx/State";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import { getChannelName } from "../../../context/revoltjs/util";
@ -28,14 +26,13 @@ interface Props {
}
export default observer(({ id }: Props) => {
const store = useData();
const client = useClient();
const channel = store.channels.get(id);
const channel = client.channels.get(id);
if (!channel) return null;
return (
<StartBase>
<h1>{getChannelName(client, channel, true)}</h1>
<h1>{getChannelName(channel, true)}</h1>
<h4>
<Text id="app.main.channel.start.group" />
</h4>

View file

@ -1,3 +1,4 @@
import { Message } from "revolt.js/dist/maps/Messages";
import styled from "styled-components";
import { useContext, useEffect, useState } from "preact/hooks";
@ -10,7 +11,6 @@ import {
useIntermediate,
} from "../../../context/intermediate/Intermediate";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { MessageObject } from "../../../context/revoltjs/util";
import AutoComplete, {
useAutoComplete,
@ -44,7 +44,7 @@ const EditorBase = styled.div`
`;
interface Props {
message: MessageObject;
message: Message;
finish: () => void;
}
@ -52,7 +52,6 @@ export default function MessageEditor({ message, finish }: Props) {
const [content, setContent] = useState((message.content as string) ?? "");
const { focusTaken } = useContext(IntermediateContext);
const { openScreen } = useIntermediate();
const client = useContext(AppContext);
async function save() {
finish();
@ -60,13 +59,11 @@ export default function MessageEditor({ message, finish }: Props) {
if (content.length === 0) {
openScreen({
id: "special_prompt",
// @ts-expect-error
type: "delete_message",
// @ts-expect-error
target: message,
});
} else if (content !== message.content) {
await client.channels.editMessage(message.channel, message._id, {
await message.editMessage({
content,
});
}

View file

@ -1,5 +1,7 @@
import { X } from "@styled-icons/boxicons-regular";
import { Users } from "revolt.js/dist/api/objects";
import { RelationshipStatus } from "revolt-api/types/Users";
import { SYSTEM_USER_ID } from "revolt.js";
import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
import styled from "styled-components";
import { decodeTime } from "ulid";
@ -15,7 +17,6 @@ import { QueuedMessage } from "../../../redux/reducers/queue";
import RequiresOnline from "../../../context/revoltjs/RequiresOnline";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { MessageObject } from "../../../context/revoltjs/util";
import Message from "../../../components/common/messaging/Message";
import { SystemMessage } from "../../../components/common/messaging/SystemMessage";
@ -60,7 +61,7 @@ function MessageRenderer({ id, state, queue, highlight }: Props) {
function editLast() {
if (state.type !== "RENDER") return;
for (let i = state.messages.length - 1; i >= 0; i--) {
if (state.messages[i].author === userId) {
if (state.messages[i].author_id === userId) {
setEditing(state.messages[i]._id);
internalEmit("MessageArea", "jump_to_bottom");
return;
@ -129,10 +130,15 @@ function MessageRenderer({ id, state, queue, highlight }: Props) {
for (const message of state.messages) {
if (previous) {
compare(message._id, message.author, previous._id, previous.author);
compare(
message._id,
message.author_id,
previous._id,
previous.author_id,
);
}
if (message.author === "00000000000000000000000000") {
if (message.author_id === SYSTEM_USER_ID) {
render.push(
<SystemMessage
key={message._id}
@ -143,10 +149,7 @@ function MessageRenderer({ id, state, queue, highlight }: Props) {
);
} else {
// ! FIXME: temp solution
if (
client.users.get(message.author)?.relationship ===
Users.Relationship.Blocked
) {
if (message.author?.relationship === RelationshipStatus.Blocked) {
blocked++;
} else {
if (blocked > 0) pushBlocked();
@ -183,7 +186,7 @@ function MessageRenderer({ id, state, queue, highlight }: Props) {
if (nonces.includes(msg.id)) continue;
if (previous) {
compare(msg.id, userId!, previous._id, previous.author);
compare(msg.id, userId!, previous._id, previous.author_id);
previous = {
_id: msg.id,
@ -191,7 +194,8 @@ function MessageRenderer({ id, state, queue, highlight }: Props) {
} as any;
}
render.push(
// ! FIXME: add queued messages back
/* render.push(
<Message
message={{
...msg.data,
@ -202,7 +206,7 @@ function MessageRenderer({ id, state, queue, highlight }: Props) {
head={head}
attachContext
/>,
);
); */
}
} else {
render.push(

View file

@ -6,8 +6,6 @@ import styled from "styled-components";
import { Text } from "preact-i18n";
import { useContext } from "preact/hooks";
import { useData } from "../../../mobx/State";
import {
VoiceContext,
VoiceOperationsContext,
@ -77,14 +75,13 @@ export default observer(({ id }: Props) => {
const { isProducing, startProducing, stopProducing, disconnect } =
useContext(VoiceOperationsContext);
const store = useData();
const client = useClient();
const self = store.users.get(client.user!._id);
const self = client.users.get(client.user!._id);
//const ctx = useForceUpdate();
//const self = useSelf(ctx);
const keys = participants ? Array.from(participants.keys()) : undefined;
const users = keys?.map((key) => store.users.get(key));
const users = keys?.map((key) => client.users.get(key));
return (
<VoiceBase>

View file

@ -1,7 +1,5 @@
import { Wrench } from "@styled-icons/boxicons-solid";
import { isObservable, isObservableProp } from "mobx";
import { observer } from "mobx-react-lite";
import { Channels } from "revolt.js/dist/api/objects";
import { useContext } from "preact/hooks";
@ -9,17 +7,13 @@ import PaintCounter from "../../lib/PaintCounter";
import { TextReact } from "../../lib/i18n";
import { AppContext } from "../../context/revoltjs/RevoltClient";
import { useUserPermission } from "../../context/revoltjs/hooks";
import UserIcon from "../../components/common/user/UserIcon";
import Header from "../../components/ui/Header";
import { useData } from "../../mobx/State";
export default function Developer() {
// const voice = useContext(VoiceContext);
const client = useContext(AppContext);
const userPermission = useUserPermission(client.user!._id);
const userPermission = client.user!.permission;
return (
<div>
@ -40,10 +34,6 @@ export default function Developer() {
fields={{ provider: <b>GAMING!</b> }}
/>
</div>
<ObserverTest />
<ObserverTest2 />
<ObserverTest3 />
<ObserverTest4 />
<div style={{ padding: "16px" }}>
{/*<span>
<b>Voice Status:</b> {VoiceStatus[voice.status]}
@ -62,67 +52,3 @@ export default function Developer() {
</div>
);
}
const ObserverTest = observer(() => {
const client = useContext(AppContext);
const store = useData();
return (
<div style={{ padding: "16px" }}>
<p>
username:{" "}
{store.users.get(client.user!._id)?.username ?? "no user!"}
<PaintCounter small />
</p>
</div>
);
});
const ObserverTest2 = observer(() => {
const client = useContext(AppContext);
const store = useData();
return (
<div style={{ padding: "16px" }}>
<p>
status:{" "}
{JSON.stringify(store.users.get(client.user!._id)?.status) ??
"none"}
<PaintCounter small />
</p>
</div>
);
});
const ObserverTest3 = observer(() => {
const client = useContext(AppContext);
const store = useData();
return (
<div style={{ padding: "16px" }}>
<p>
avatar{" "}
<UserIcon
size={64}
attachment={
store.users.get(client.user!._id)?.avatar ?? undefined
}
/>
<PaintCounter small />
</p>
</div>
);
});
const ObserverTest4 = observer(() => {
const client = useContext(AppContext);
const store = useData();
return (
<div style={{ padding: "16px" }}>
<p>
status text:{" "}
{JSON.stringify(
store.users.get(client.user!._id)?.status?.text,
) ?? "none"}
<PaintCounter small />
</p>
</div>
);
});

View file

@ -1,6 +1,7 @@
import { X, Plus } from "@styled-icons/boxicons-regular";
import { PhoneCall, Envelope, UserX } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom";
import { RelationshipStatus } from "revolt-api/types/Users";
import { User } from "revolt.js/dist/maps/Users";
@ -30,9 +31,8 @@ interface Props {
}
export const Friend = observer(({ user }: Props) => {
const client = useContext(AppContext);
const history = useHistory();
const { openScreen } = useIntermediate();
const { openDM } = useContext(OperationsContext);
const { connect } = useContext(VoiceOperationsContext);
const actions: Children[] = [];
@ -46,14 +46,29 @@ export const Friend = observer(({ user }: Props) => {
type="circle"
className={classNames(styles.button, styles.success)}
onClick={(ev) =>
stopPropagation(ev, openDM(user._id).then(connect))
stopPropagation(
ev,
user.openDM().then((channel) => {
connect(channel._id);
history.push(`/channel/${channel._id}`);
}),
)
}>
<PhoneCall size={20} />
</IconButton>
<IconButton
type="circle"
className={styles.button}
onClick={(ev) => stopPropagation(ev, openDM(user._id))}>
onClick={(ev) =>
stopPropagation(
ev,
user
.openDM()
.then((channel) =>
history.push(`/channel/${channel._id}`),
),
)
}>
<Envelope size={20} />
</IconButton>
</>,

View file

@ -14,7 +14,6 @@ import {
StatusContext,
useClient,
} from "../../../context/revoltjs/RevoltClient";
import { useForceUpdate } from "../../../context/revoltjs/hooks";
import Tooltip from "../../../components/common/Tooltip";
import UserIcon from "../../../components/common/user/UserIcon";