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>

src/components/navigation/right/ChannelDebugInfo.tsx

@@ -1,14 +1,16 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { useRenderState } from "../../../lib/renderer/Singleton";
+import { observer } from "mobx-react-lite";
+import { Channel } from "revolt.js/dist/maps/Channels";
+
+import { getRenderer } from "../../../lib/renderer/Singleton";
 
 interface Props {
-    id: string;
+    channel: Channel;
 }
 
-export function ChannelDebugInfo({ id }: Props) {
+export const ChannelDebugInfo = observer(({ channel }: Props) => {
     if (process.env.NODE_ENV !== "development") return null;
-    const view = useRenderState(id);
-    if (!view) return null;
+    const renderer = getRenderer(channel);
 
     return (
         <span style={{ display: "block", padding: "12px 10px 0 10px" }}>
@@ -22,20 +24,26 @@ export function ChannelDebugInfo({ id }: Props) {
                 Channel Info
             </span>
             <p style={{ fontSize: "10px", userSelect: "text" }}>
-                State: <b>{view.type}</b> <br />
-                {view.type === "RENDER" && view.messages.length > 0 && (
+                State: <b>{renderer.state}</b> <br />
+                Stale: <b>{renderer.stale ? "Yes" : "No"}</b> <br />
+                Fetching: <b>{renderer.fetching ? "Yes" : "No"}</b> <br />
+                <br />
+                {renderer.state === "RENDER" && renderer.messages.length > 0 && (
                     <>
-                        Start: <b>{view.messages[0]._id}</b> <br />
+                        Start: <b>{renderer.messages[0]._id}</b> <br />
                         End:{" "}
                         <b>
-                            {view.messages[view.messages.length - 1]._id}
+                            {
+                                renderer.messages[renderer.messages.length - 1]
+                                    ._id
+                            }
                         </b>{" "}
                         <br />
-                        At Top: <b>{view.atTop ? "Yes" : "No"}</b> <br />
-                        At Bottom: <b>{view.atBottom ? "Yes" : "No"}</b>
+                        At Top: <b>{renderer.atTop ? "Yes" : "No"}</b> <br />
+                        At Bottom: <b>{renderer.atBottom ? "Yes" : "No"}</b>
                     </>
                 )}
             </p>
         </span>
     );
-}
+});

src/components/navigation/right/MemberSidebar.tsx

@@ -90,7 +90,7 @@ export const GroupMemberSidebar = observer(
         return (
             <GenericSidebarBase>
                 <GenericSidebarList>
-                    <ChannelDebugInfo id={channel._id} />
+                    <ChannelDebugInfo channel={channel} />
                     <Search channel={channel} />
 
                     {/*voiceActive && voiceParticipants.length !== 0 && (
@@ -202,7 +202,7 @@ export const ServerMemberSidebar = observer(
         return (
             <GenericSidebarBase>
                 <GenericSidebarList>
-                    <ChannelDebugInfo id={channel._id} />
+                    <ChannelDebugInfo channel={channel} />
                     <Search channel={channel} />
                     <div>{users.length === 0 && <Preloader type="ring" />}</div>
                     {users.length > 0 && (