Zero error milestone.

src/components/navigation/left/HomeSidebar.tsx

@@ -6,8 +6,7 @@ import {
 } 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";
+import { RelationshipStatus } from "revolt-api/types/Users";
 
 import { Text } from "preact-i18n";
 import { useContext, useEffect } from "preact/hooks";
@@ -16,7 +15,6 @@ 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";
@@ -42,8 +40,7 @@ const HomeSidebar = observer((props: Props) => {
     const { channel } = useParams<{ channel: string }>();
     const { openScreen } = useIntermediate();
 
-    const store = useData();
-    const channels = [...store.channels.values()]
+    const channels = [...client.channels.values()]
         .filter(
             (x) =>
                 x.channel_type === "DirectMessage" ||
@@ -51,7 +48,7 @@ const HomeSidebar = observer((props: Props) => {
         )
         .map((x) => mapChannelWithUnread(x, props.unreads));
 
-    const obj = store.channels.get(channel);
+    const obj = client.channels.get(channel);
     if (channel && !obj) return <Redirect to="/" />;
     if (obj) useUnreads({ ...props, channel: obj });
 
@@ -87,10 +84,10 @@ const HomeSidebar = observer((props: Props) => {
                             <ButtonItem
                                 active={pathname === "/friends"}
                                 alert={
-                                    typeof [...store.users.values()].find(
+                                    typeof [...client.users.values()].find(
                                         (user) =>
                                             user?.relationship ===
-                                            UsersNS.Relationship.Incoming,
+                                            RelationshipStatus.Incoming,
                                     ) !== "undefined"
                                         ? "unread"
                                         : undefined
@@ -139,11 +136,7 @@ const HomeSidebar = observer((props: Props) => {
                     let user;
                     if (x.channel.channel_type === "DirectMessage") {
                         if (!x.channel.active) return null;
-
-                        const recipient = client.channels.getRecipient(
-                            x.channel._id,
-                        );
-                        user = store.users.get(recipient);
+                        user = x.channel.recipient;
 
                         if (!user) {
                             console.warn(

src/components/navigation/left/ServerListSidebar.tsx

@@ -1,7 +1,7 @@
 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 { RelationshipStatus } from "revolt-api/types/Users";
 import styled, { css } from "styled-components";
 
 import { attachContextMenu, openContextMenu } from "preact-context-menu";
@@ -10,7 +10,6 @@ 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";
@@ -175,14 +174,12 @@ interface Props {
 }
 
 export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
-    const store = useData();
     const client = useClient();
-    const self = store.users.get(client.user!._id);
 
     const { server: server_id } = useParams<{ server?: string }>();
-    const server = server_id ? store.servers.get(server_id) : undefined;
-    const activeServers = [...store.servers.values()];
-    const channels = [...store.channels.values()].map((x) =>
+    const server = server_id ? client.servers.get(server_id) : undefined;
+    const activeServers = [...client.servers.values()];
+    const channels = [...client.channels.values()].map((x) =>
         mapChannelWithUnread(x, unreads),
     );
 
@@ -192,7 +189,7 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
 
     const servers = activeServers.map((server) => {
         let alertCount = 0;
-        for (const id of server.channels) {
+        for (const id of server.channel_ids) {
             const channel = channels.find((x) => x.channel?._id === id);
             if (channel?.alertCount) {
                 alertCount += channel.alertCount;
@@ -201,7 +198,7 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
 
         return {
             server,
-            unread: (typeof server.channels.find((x) =>
+            unread: (typeof server.channel_ids.find((x) =>
                 unreadChannels.includes(x),
             ) !== "undefined"
                 ? alertCount > 0
@@ -230,8 +227,8 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
     }
 
     if (
-        [...store.users.values()].find(
-            (x) => x.relationship === Users.Relationship.Incoming,
+        [...client.users.values()].find(
+            (x) => x.relationship === RelationshipStatus.Incoming,
         )
     ) {
         alertCount++;
@@ -254,9 +251,13 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
                             onClick={() =>
                                 homeActive && openContextMenu("Status")
                             }>
-                            <UserHover user={self}>
+                            <UserHover user={client.user}>
                                 <Icon size={42} unread={homeUnread}>
-                                    <UserIcon target={self} size={32} status />
+                                    <UserIcon
+                                        target={client.user}
+                                        size={32}
+                                        status
+                                    />
                                 </Icon>
                             </UserHover>
                         </div>

src/components/navigation/left/ServerSidebar.tsx

@@ -1,6 +1,5 @@
 import { observer } from "mobx-react-lite";
 import { Redirect, useParams } from "react-router";
-import { Channels } from "revolt.js/dist/api/objects";
 import styled from "styled-components";
 
 import { attachContextMenu } from "preact-context-menu";
@@ -9,11 +8,12 @@ import { useEffect } from "preact/hooks";
 import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
 
-import { useData } from "../../../mobx/State";
 import { dispatch } from "../../../redux";
 import { connectState } from "../../../redux/connector";
 import { Unreads } from "../../../redux/reducers/unreads";
 
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+
 import CollapsibleSection from "../../common/CollapsibleSection";
 import ServerHeader from "../../common/ServerHeader";
 import Category from "../../ui/Category";
@@ -50,14 +50,14 @@ const ServerList = styled.div`
 `;
 
 const ServerSidebar = observer((props: Props) => {
-    const store = useData();
+    const client = useClient();
     const { server: server_id, channel: channel_id } =
         useParams<{ server: string; channel?: string }>();
 
-    const server = store.servers.get(server_id);
+    const server = client.servers.get(server_id);
     if (!server) return <Redirect to="/" />;
 
-    const channel = channel_id ? store.channels.get(channel_id) : undefined;
+    const channel = channel_id ? client.channels.get(channel_id) : undefined;
     if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
     if (channel) useUnreads({ ...props, channel });
 
@@ -71,11 +71,11 @@ const ServerSidebar = observer((props: Props) => {
         });
     }, [channel_id]);
 
-    const uncategorised = new Set(server.channels);
+    const uncategorised = new Set(server.channel_ids);
     const elements = [];
 
     function addChannel(id: string) {
-        const entry = store.channels.get(id);
+        const entry = client.channels.get(id);
         if (!entry) return;
 
         const active = channel?._id === entry._id;

src/components/navigation/left/common.ts

@@ -1,11 +1,12 @@
+import { autorun } from "mobx";
+import { Channel } from "revolt.js/dist/maps/Channels";
+
 import { useLayoutEffect } from "preact/hooks";
 
-import { Channel } from "../../../mobx";
 import { dispatch } from "../../../redux";
 import { Unreads } from "../../../redux/reducers/unreads";
 
 import { useClient } from "../../../context/revoltjs/RevoltClient";
-import { HookContext, useForceUpdate } from "../../../context/revoltjs/hooks";
 
 type UnreadProps = {
     channel: Channel;
@@ -16,7 +17,10 @@ export function useUnreads({ channel, unreads }: UnreadProps) {
     const client = useClient();
 
     useLayoutEffect(() => {
-        function checkUnread(target?: Channel) {
+        function checkUnread(
+            target: Channel,
+            last_message: Channel["last_message"],
+        ) {
             if (!target) return;
             if (target._id !== channel._id) return;
             if (
@@ -46,10 +50,7 @@ export function useUnreads({ channel, unreads }: UnreadProps) {
             }
         }
 
-        checkUnread(channel);
-
-        client.channels.addListener("mutation", checkUnread);
-        return () => client.channels.removeListener("mutation", checkUnread);
+        return autorun(() => checkUnread(channel!, channel!.last_message));
     }, [channel, unreads]);
 }