From 777da508eda762f1df10358b370d2caa825fe63f Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Mon, 17 Jul 2023 13:48:59 -0700
Subject: [PATCH] fix(chat): fix chat not using the correct messages selector. 
 (#3180)

* fix(chat): fix chat not using the correct messages selector. Closes #3166

* fix(chat): initial state was incorrect when hiding/showing messages
---
 web/components/stores/ClientConfigStore.tsx | 8 +++-----
 web/components/ui/Content/Content.tsx       | 4 ++--
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/web/components/stores/ClientConfigStore.tsx b/web/components/stores/ClientConfigStore.tsx
index 4bb53f6ea..50c5926c3 100644
--- a/web/components/stores/ClientConfigStore.tsx
+++ b/web/components/stores/ClientConfigStore.tsx
@@ -174,7 +174,7 @@ export const ClientConfigStore: FC = () => {
   const setAppState = useSetRecoilState<AppStateOptions>(appStateAtom);
   const setGlobalFatalErrorMessage = useSetRecoilState<DisplayableError>(fatalErrorStateAtom);
   const setWebsocketService = useSetRecoilState<WebsocketService>(websocketServiceAtom);
-  const [hiddenMessageIds, setHiddenMessageIds] = useRecoilState<string[]>(removedMessageIdsAtom);
+  const setHiddenMessageIds = useSetRecoilState<string[]>(removedMessageIdsAtom);
   const [hasLoadedConfig, setHasLoadedConfig] = useState(false);
 
   let ws: WebsocketService;
@@ -279,11 +279,9 @@ export const ClientConfigStore: FC = () => {
   const handleMessageVisibilityChange = (message: MessageVisibilityEvent) => {
     const { ids, visible } = message;
     if (visible) {
-      const updatedIds = hiddenMessageIds.filter(id => !ids.includes(id));
-      setHiddenMessageIds(updatedIds);
+      setHiddenMessageIds(currentState => currentState.filter(id => !ids.includes(id)));
     } else {
-      const updatedIds = [...hiddenMessageIds, ...ids];
-      setHiddenMessageIds(updatedIds);
+      setHiddenMessageIds(currentState => [...currentState, ...ids]);
     }
   };
 
diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx
index 496e4464b..ffdef5e76 100644
--- a/web/components/ui/Content/Content.tsx
+++ b/web/components/ui/Content/Content.tsx
@@ -10,7 +10,6 @@ import { canPushNotificationsBeSupported } from '../../../utils/browserPushNotif
 
 import {
   clientConfigStateAtom,
-  chatMessagesAtom,
   currentUserAtom,
   ChatState,
   chatStateAtom,
@@ -19,6 +18,7 @@ import {
   isMobileAtom,
   serverStatusState,
   isChatAvailableSelector,
+  visibleChatMessagesSelector,
 } from '../../stores/ClientConfigStore';
 import { ClientConfig } from '../../../interfaces/client-config.model';
 
@@ -103,7 +103,7 @@ export const Content: FC = () => {
   const currentUser = useRecoilValue(currentUserAtom);
   const serverStatus = useRecoilValue<ServerStatus>(serverStatusState);
   const [isMobile, setIsMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
-  const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
+  const messages = useRecoilValue<ChatMessage[]>(visibleChatMessagesSelector);
   const online = useRecoilValue<boolean>(isOnlineSelector);
   const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);