Manage state per channel. Closes #2

src/components/common/messaging/MessageBox.tsx

@@ -16,7 +16,7 @@ import { internalEmit, internalSubscribe } from "../../../lib/eventEmitter";
 import { useTranslation } from "../../../lib/i18n";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import {
-    SingletonMessageRenderer,
+    getRenderer,
     SMOOTH_SCROLL_ON_RECEIVE,
 } from "../../../lib/renderer/Singleton";
 
@@ -122,6 +122,8 @@ export default observer(({ channel }: Props) => {
     const client = useContext(AppContext);
     const translate = useTranslation();
 
+    const renderer = getRenderer(channel);
+
     if (!(channel.permission & ChannelPermission.SendMessage)) {
         return (
             <Base>
@@ -213,12 +215,7 @@ export default observer(({ channel }: Props) => {
             },
         });
 
-        defer(() =>
-            SingletonMessageRenderer.jumpToBottom(
-                channel._id,
-                SMOOTH_SCROLL_ON_RECEIVE,
-            ),
-        );
+        defer(() => renderer.jumpToBottom(SMOOTH_SCROLL_ON_RECEIVE));
 
         try {
             await channel.sendMessage({
@@ -405,7 +402,7 @@ export default observer(({ channel }: Props) => {
                 }}
             />
             <ReplyBar
-                channel={channel._id}
+                channel={channel}
                 replies={replies}
                 setReplies={setReplies}
             />

src/components/common/messaging/attachments/MessageReply.tsx

@@ -10,7 +10,7 @@ import styled, { css } from "styled-components";
 import { Text } from "preact-i18n";
 import { useLayoutEffect, useState } from "preact/hooks";
 
-import { useRenderState } from "../../../../lib/renderer/Singleton";
+import { getRenderer } from "../../../../lib/renderer/Singleton";
 
 import Markdown from "../../../markdown/Markdown";
 import UserShort from "../../user/UserShort";
@@ -134,8 +134,8 @@ export const ReplyBase = styled.div<{
 `;
 
 export const MessageReply = observer(({ index, channel, id }: Props) => {
-    const view = useRenderState(channel._id);
-    if (view?.type !== "RENDER") return null;
+    const view = getRenderer(channel);
+    if (view.state !== "RENDER") return null;
 
     const [message, setMessage] = useState<Message | undefined>(undefined);
 

src/components/common/messaging/bars/JumpToBottom.tsx

@@ -1,12 +1,11 @@
 import { DownArrowAlt } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
+import { Channel } from "revolt.js/dist/maps/Channels";
 import styled from "styled-components";
 
 import { Text } from "preact-i18n";
 
-import {
-    SingletonMessageRenderer,
-    useRenderState,
-} from "../../../../lib/renderer/Singleton";
+import { getRenderer } from "../../../../lib/renderer/Singleton";
 
 const Bar = styled.div`
     z-index: 10;
@@ -51,14 +50,13 @@ const Bar = styled.div`
     }
 `;
 
-export default function JumpToBottom({ id }: { id: string }) {
-    const view = useRenderState(id);
-    if (!view || view.type !== "RENDER" || view.atBottom) return null;
+export default observer(({ channel }: { channel: Channel }) => {
+    const renderer = getRenderer(channel);
+    if (renderer.state !== "RENDER" || renderer.atBottom) return null;
 
     return (
         <Bar>
-            <div
-                onClick={() => SingletonMessageRenderer.jumpToBottom(id, true)}>
+            <div onClick={() => renderer.jumpToBottom(true)}>
                 <div>
                     <Text id="app.main.channel.misc.viewing_old" />
                 </div>
@@ -69,4 +67,4 @@ export default function JumpToBottom({ id }: { id: string }) {
             </div>
         </Bar>
     );
-}
+});

src/components/common/messaging/bars/ReplyBar.tsx

@@ -2,13 +2,14 @@ import { At, Reply as ReplyIcon } from "@styled-icons/boxicons-regular";
 import { File, XCircle } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { SYSTEM_USER_ID } from "revolt.js";
+import { Channel } from "revolt.js/dist/maps/Channels";
 import styled from "styled-components";
 
 import { Text } from "preact-i18n";
 import { StateUpdater, useEffect } from "preact/hooks";
 
 import { internalSubscribe } from "../../../../lib/eventEmitter";
-import { useRenderState } from "../../../../lib/renderer/Singleton";
+import { getRenderer } from "../../../../lib/renderer/Singleton";
 
 import { Reply } from "../../../../redux/reducers/queue";
 
@@ -20,7 +21,7 @@ import { SystemMessage } from "../SystemMessage";
 import { ReplyBase } from "../attachments/MessageReply";
 
 interface Props {
-    channel: string;
+    channel: Channel;
     replies: Reply[];
     setReplies: StateUpdater<Reply[]>;
 }
@@ -87,11 +88,11 @@ export default observer(({ channel, replies, setReplies }: Props) => {
         );
     }, [replies, setReplies]);
 
-    const view = useRenderState(channel);
-    if (view?.type !== "RENDER") return null;
+    const renderer = getRenderer(channel);
+    if (renderer.state !== "RENDER") return null;
 
     const ids = replies.map((x) => x.id);
-    const messages = view.messages.filter((x) => ids.includes(x._id));
+    const messages = renderer.messages.filter((x) => ids.includes(x._id));
 
     return (
         <div>