100 error milestone.

Remove hooks completely. :)
2026-03-06 17:11:55 +00:00 · 2021-07-30 21:20:42 +01:00
parent 3184269ba4
commit c21453b281
22 changed files with 257 additions and 506 deletions
--- a/src/pages/Open.tsx
+++ b/src/pages/Open.tsx
@@ -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(
-                    (channel) =>
-                        channel?.channel_type === "DirectMessage" &&
-                        channel.recipients.includes(id),
-                )?._id;
+            const channel: string | undefined = [
+                ...client.channels.values(),
+            ].find(
+                (channel) =>
+                    channel?.channel_type === "DirectMessage" &&
+                    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 }));
            }
--- a/src/pages/channels/Channel.tsx
+++ b/src/pages/channels/Channel.tsx
@@ -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} />
--- a/src/pages/channels/ChannelHeader.tsx
+++ b/src/pages/channels/ChannelHeader.tsx
@@ -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} />;
--- a/src/pages/channels/actions/HeaderActions.tsx
+++ b/src/pages/channels/actions/HeaderActions.tsx
@@ -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);
                                    }
                                },
                            })
--- a/src/pages/channels/messaging/ConversationStart.tsx
+++ b/src/pages/channels/messaging/ConversationStart.tsx
@@ -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>
--- a/src/pages/channels/messaging/MessageEditor.tsx
+++ b/src/pages/channels/messaging/MessageEditor.tsx
@@ -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,
            });
        }
--- a/src/pages/channels/messaging/MessageRenderer.tsx
+++ b/src/pages/channels/messaging/MessageRenderer.tsx
@@ -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(
--- a/src/pages/channels/voice/VoiceHeader.tsx
+++ b/src/pages/channels/voice/VoiceHeader.tsx
@@ -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>
--- a/src/pages/developer/Developer.tsx
+++ b/src/pages/developer/Developer.tsx
@@ -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>
-    );
-});
--- a/src/pages/friends/Friend.tsx
+++ b/src/pages/friends/Friend.tsx
@@ -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>
            </>,
--- a/src/pages/settings/panes/Account.tsx
+++ b/src/pages/settings/panes/Account.tsx
@@ -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";