Remove shared state in the chat provider to let the class state be in sync

custom/fitness-demo/components/Call/ChatAside.js

@@ -40,8 +40,6 @@ export const ChatAside = () => {
     }
   }, [chatHistory?.length]);
 
-  const isLocalUser = (id) => id === localParticipant.user_id;
-
   if (!showAside || showAside !== CHAT_ASIDE) {
     return null;
   }
@@ -51,7 +49,7 @@ export const ChatAside = () => {
       <div className="messages-container" ref={chatWindowRef}>
         {chatHistory?.map((chatItem) => (
           <div
-            className={isLocalUser(chatItem.senderID) ? 'message local' : 'message'}
+            className={chatItem.isLocal ? 'message local' : 'message'}
             key={chatItem.id}
           >
             <span className="content">{chatItem.message}</span>

custom/fitness-demo/contexts/ChatProvider.js

@@ -6,7 +6,6 @@ import React, {
   useState,
 } from 'react';
 import { useCallState } from '@custom/shared/contexts/CallProvider';
-import { useSharedState } from '@custom/shared/hooks/useSharedState';
 import { nanoid } from 'nanoid';
 import PropTypes from 'prop-types';
 
@@ -14,12 +13,7 @@ export const ChatContext = createContext();
 
 export const ChatProvider = ({ children }) => {
   const { callObject } = useCallState();
-  const { sharedState, setSharedState } = useSharedState({
+  const [chatHistory, setChatHistory] = useState([]);
-    initialValues: {
-      chatHistory: [],
-    },
-    broadcast: false,
-  });
   const [hasNewMessages, setHasNewMessages] = useState(false);
 
   const handleNewMessage = useCallback(
@@ -30,51 +24,44 @@ export const ChatProvider = ({ children }) => {
         ? participants[e.fromId].user_name
         : 'Guest';
 
-      setSharedState(values => ({
+      setChatHistory((oldState) => [
-        ...values,
+        ...oldState,
-        chatHistory: [
+        { sender, message: e.data.message, id: nanoid() },
-          ...values?.chatHistory,
+      ]);
-          // nanoid - we use it to generate unique ID string
-          { sender, senderID: e.fromId, message: e.data.message, id: nanoid() },
-        ]
-      }));
 
       setHasNewMessages(true);
     },
-    [callObject, setSharedState]
+    [callObject]
   );
 
-
   const sendMessage = useCallback(
     (message) => {
-      if (!callObject) return;
+      if (!callObject) {
+        return false;
+      }
 
       console.log('💬 Sending app message');
 
       callObject.sendAppMessage({ message }, '*');
 
-      const participants = callObject.participants();
       // Get the sender (local participant) name
-      const sender = participants.local.user_name
+      const sender = callObject.participants().local.user_name
-        ? participants.local.user_name
+        ? callObject.participants().local.user_name
         : 'Guest';
-      const senderID = participants.local.user_id;
 
-      // Update shared state chat history
+      // Update local chat history
-      return setSharedState(values => ({
+      return setChatHistory((oldState) => [
-        ...values,
+        ...oldState,
-        chatHistory: [
+        { sender, message, id: nanoid(), isLocal: true },
-          ...values?.chatHistory,
+      ]);
-          // nanoid - we use it to generate unique ID string
-          { sender, senderID, message, id: nanoid() }
-        ]
-      }));
     },
-    [callObject, setSharedState]
+    [callObject]
   );
 
   useEffect(() => {
-    if (!callObject) return;
+    if (!callObject) {
+      return false;
+    }
 
     console.log(`💬 Chat provider listening for app messages`);
 
@@ -87,7 +74,7 @@ export const ChatProvider = ({ children }) => {
     <ChatContext.Provider
       value={{
         sendMessage,
-        chatHistory: sharedState.chatHistory,
+        chatHistory,
         hasNewMessages,
         setHasNewMessages,
       }}
@@ -101,4 +88,4 @@ ChatProvider.propTypes = {
   children: PropTypes.node,
 };
 
-export const useChat = () => useContext(ChatContext);
+export const useChat = () => useContext(ChatContext);