From 8bda3123dadf280643cf79bcec2caed6b641b4b9 Mon Sep 17 00:00:00 2001
From: Paul Makles <paulmakles@gmail.com>
Date: Sat, 15 Jan 2022 12:52:11 +0000
Subject: [PATCH] fix(unreads): allow dynamic unread changes

---
 src/lib/eventEmitter.ts        |  1 +
 src/pages/channels/Channel.tsx | 32 +++++++++++++++++++++++---------
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/lib/eventEmitter.ts b/src/lib/eventEmitter.ts
index b4f86958..1ad13148 100644
--- a/src/lib/eventEmitter.ts
+++ b/src/lib/eventEmitter.ts
@@ -30,3 +30,4 @@ export function internalEmit(ns: string, event: string, ...args: unknown[]) {
 // - Modal/close
 // - PWA/update
 // - NewMessages/hide
+// - NewMessages/mark
diff --git a/src/pages/channels/Channel.tsx b/src/pages/channels/Channel.tsx
index ea1f5a5c..cd550257 100644
--- a/src/pages/channels/Channel.tsx
+++ b/src/pages/channels/Channel.tsx
@@ -7,9 +7,10 @@ import { Channel as ChannelI } from "revolt.js/dist/maps/Channels";
 import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
-import { useEffect, useMemo } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 import ErrorBoundary from "../../lib/ErrorBoundary";
+import { internalSubscribe } from "../../lib/eventEmitter";
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
 import { useApplicationState } from "../../mobx/State";
@@ -123,17 +124,30 @@ export function Channel({ id, server_id }: { id: string; server_id: string }) {
 const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
     const layout = useApplicationState().layout;
 
-    // Cache the unread location.
-    const last_id = useMemo(
+    // Store unread location.
+    const [lastId, setLastId] = useState<string | undefined>(undefined);
+
+    useEffect(
         () =>
-            (channel.unread
-                ? channel.client.unreads?.getUnread(channel._id)?.last_id
-                : undefined) ?? undefined,
-        [channel],
+            internalSubscribe("NewMessages", "hide", () =>
+                setLastId(undefined),
+            ),
+        [],
+    );
+
+    useEffect(
+        () => internalSubscribe("NewMessages", "mark", setLastId as any),
+        [],
     );
 
     // Mark channel as read.
     useEffect(() => {
+        setLastId(
+            channel.unread
+                ? channel.client.unreads?.getUnread(channel._id)?.last_id
+                : undefined ?? undefined,
+        );
+
         const checkUnread = () =>
             channel.unread &&
             channel.client.unreads!.markRead(
@@ -165,8 +179,8 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
                 <ErrorBoundary section="renderer">
                     <ChannelContent>
                         <VoiceHeader id={channel._id} />
-                        <NewMessages channel={channel} last_id={last_id} />
-                        <MessageArea channel={channel} last_id={last_id} />
+                        <NewMessages channel={channel} last_id={lastId} />
+                        <MessageArea channel={channel} last_id={lastId} />
                         <TypingIndicator channel={channel} />
                         <JumpToBottom channel={channel} />
                         <MessageBox channel={channel} />