agora-appbuilder-core 3.0.8 → 4.0.0-api.0

package/template/src/components/StorageContext.tsx

@@ -10,11 +10,23 @@
 *********************************************
 */
 import React, {createContext, ReactChildren, useEffect, useState} from 'react';
-import AsyncStorage from '@react-native-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage'; // '@react-native-community/async-storage';
 import useMount from './useMount';
 
+type rememberedDevicesListEntries = Record<
+  string,
+  'switch-on-connect' | 'ignore-on-connect'
+>;
+
 export interface StoreInterface {
-  [key: string]: string | null;
+  token: string;
+  displayName: string;
+  selectedLanguageCode: string;
+  rememberedDevicesList: Record<
+    MediaDeviceInfo['kind'],
+    rememberedDevicesListEntries
+  >;
+  activeDeviceId: Record<MediaDeviceInfo['kind'], string>;
 }
 
 export interface StorageContextInterface {
@@ -26,6 +38,16 @@ export const initStoreValue: StoreInterface = {
   token: null,
   displayName: '',
   selectedLanguageCode: '',
+  rememberedDevicesList: {
+    audioinput: {},
+    audiooutput: {},
+    videoinput: {},
+  },
+  activeDeviceId: {
+    audioinput: '',
+    audiooutput: '',
+    videoinput: '',
+  },
 };
 
 const initStorageContextValue = {
@@ -54,7 +76,12 @@ export const StorageProvider = (props: {children: React.ReactNode}) => {
           await AsyncStorage.setItem('store', JSON.stringify(initStoreValue));
           setReady(true);
         } else {
-          setStore(JSON.parse(storeString));
+          const storeFromStorage = JSON.parse(storeString);
+          Object.keys(initStoreValue).forEach((key) => {
+            if (!storeFromStorage[key])
+              storeFromStorage[key] = initStoreValue[key];
+          });
+          setStore(storeFromStorage);
           setReady(true);
         }
         console.log('store hydrated', storeString);

package/template/src/components/ToastComponent.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import Toast from '../../react-native-toast-message';
+import ToastConfig from '../subComponents/ToastConfig';
+
+const ToastComponent = () => {
+  return <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />;
+};
+export default ToastComponent;

package/template/src/components/chat-messages/useChatMessages.tsx

@@ -10,18 +10,24 @@
 *********************************************
 */
 import {createHook} from 'customization-implementation';
-import React, {useState, useEffect, useRef} from 'react';
-import {useRender} from 'customization-api';
+import React, {useState, useEffect, useRef, useContext} from 'react';
+import {useContent} from 'customization-api';
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
-import {useLocalUid, UidType} from '../../../agora-rn-uikit';
-import events, {EventPersistLevel} from '../../rtm-events-api';
+import {
+  useLocalUid,
+  UidType,
+  ContentInterface,
+  DispatchContext,
+} from '../../../agora-rn-uikit';
+import events, {PersistanceLevel} from '../../rtm-events-api';
 import {EventNames} from '../../rtm-events';
-import {useChatUIControl} from '../chat-ui/useChatUIControl';
+import {ChatType, useChatUIControls} from '../chat-ui/useChatUIControls';
 import {useChatNotification} from '../chat-notification/useChatNotification';
 import Toast from '../../../react-native-toast-message';
 import {timeNow} from '../../rtm/utils';
 import {useSidePanel} from '../../utils/useSidePanel';
 import getUniqueID from '../../utils/getUniqueID';
+import {trimText} from '../../utils/common';
 
 enum ChatMessageActionEnum {
   Create = 'Create_Chat_Message',
@@ -49,6 +55,7 @@ interface ChatMessagesInterface {
   sendChatMessage: (msg: string, toUid?: UidType) => void;
   editChatMessage: (msgId: string, msg: string, toUid?: UidType) => void;
   deleteChatMessage: (msgId: string, toUid?: UidType) => void;
+  openPrivateChat: (toUid: UidType) => void;
 }
 
 const ChatMessagesContext = React.createContext<ChatMessagesInterface>({
@@ -57,19 +64,16 @@ const ChatMessagesContext = React.createContext<ChatMessagesInterface>({
   sendChatMessage: () => {},
   editChatMessage: () => {},
   deleteChatMessage: () => {},
+  openPrivateChat: () => {},
 });
 
 const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
-  const {renderList} = useRender();
+  const {dispatch} = useContext(DispatchContext);
+  const {defaultContent} = useContent();
   const localUid = useLocalUid();
   const {setSidePanel} = useSidePanel();
-  const {
-    groupActive,
-    selectedChatUserId,
-    setGroupActive,
-    setPrivateActive,
-    setSelectedChatUserId,
-  } = useChatUIControl();
+  const {chatType, setChatType, privateChatUser, setPrivateChatUser} =
+    useChatUIControls();
   const {
     setUnreadGroupMessageCount,
     setUnreadIndividualMessageCount,
@@ -82,24 +86,50 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
     [key: string]: messageStoreInterface[];
   }>({});
 
-  const renderListRef = useRef({renderList: renderList});
+  const defaultContentRef = useRef({defaultContent: defaultContent});
   const groupActiveRef = useRef<boolean>();
   const individualActiveRef = useRef<string | number>();
 
   //commented for v1 release
   //const fromText = useString('messageSenderNotificationLabel');
-  const fromText = (name: string) => `From : ${name}`;
+  const fromText = (name: string) => `${name} commented in the public chat`;
+  const privateMessageLabel = 'You’ve received a private message';
   useEffect(() => {
-    renderListRef.current.renderList = renderList;
-  }, [renderList]);
+    defaultContentRef.current.defaultContent = defaultContent;
+  }, [defaultContent]);
 
   useEffect(() => {
-    groupActiveRef.current = groupActive;
-  }, [groupActive]);
+    groupActiveRef.current = chatType === ChatType.Group;
+  }, [chatType]);
 
   useEffect(() => {
-    individualActiveRef.current = selectedChatUserId;
-  }, [selectedChatUserId]);
+    individualActiveRef.current = privateChatUser;
+  }, [privateChatUser]);
+
+  const openPrivateChat = (uidAsNumber) => {
+    //move this logic into ChatContainer
+    // setUnreadPrivateMessageCount(
+    //   unreadPrivateMessageCount -
+    //     (unreadIndividualMessageCount[uidAsNumber] || 0),
+    // );
+    // setUnreadIndividualMessageCount((prevState) => {
+    //   return {
+    //     ...prevState,
+    //     [uidAsNumber]: 0,
+    //   };
+    // });
+
+    setPrivateChatUser(uidAsNumber);
+    setChatType(ChatType.Private);
+    setSidePanel(SidePanelType.Chat);
+  };
+
+  const updateRenderListState = (
+    uid: number,
+    data: Partial<ContentInterface>,
+  ) => {
+    dispatch({type: 'UpdateRenderList', value: [uid, data]});
+  };
 
   React.useEffect(() => {
     const showMessageNotification = (
@@ -107,36 +137,44 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
       uid: string,
       isPrivateMessage: boolean = false,
     ) => {
+      //don't show group message notification if group chat is open
+      if (!isPrivateMessage && groupActiveRef.current) {
+        return;
+      }
       const uidAsNumber = parseInt(uid);
+      //don't show private message notification if private chat is open
+      if (isPrivateMessage && uidAsNumber === individualActiveRef.current) {
+        return;
+      }
       Toast.show({
-        type: 'success',
-        text1: msg.length > 30 ? msg.slice(0, 30) + '...' : msg,
-        text2: renderListRef.current.renderList[uidAsNumber]?.name
-          ? fromText(renderListRef.current.renderList[uidAsNumber]?.name)
+        primaryBtn: null,
+        secondaryBtn: null,
+        type: 'info',
+        text1: isPrivateMessage
+          ? privateMessageLabel
+          : defaultContentRef.current.defaultContent[uidAsNumber]?.name
+          ? fromText(
+              trimText(
+                defaultContentRef.current.defaultContent[uidAsNumber]?.name,
+              ),
+            )
           : '',
-        visibilityTime: 1000,
+        text2: isPrivateMessage
+          ? ''
+          : msg.length > 30
+          ? msg.slice(0, 30) + '...'
+          : msg,
+        visibilityTime: 3000,
         onPress: () => {
           if (isPrivateMessage) {
-            setUnreadPrivateMessageCount(
-              unreadPrivateMessageCount -
-                (unreadIndividualMessageCount[uidAsNumber] || 0),
-            );
-            setUnreadIndividualMessageCount((prevState) => {
-              return {
-                ...prevState,
-                [uidAsNumber]: 0,
-              };
-            });
-            setGroupActive(false);
-            setSelectedChatUserId(uidAsNumber);
-            setPrivateActive(true);
+            openPrivateChat(uidAsNumber);
           } else {
-            setUnreadGroupMessageCount(0);
-            setPrivateActive(false);
-            setSelectedChatUserId(0);
-            setGroupActive(true);
+            //move this logic into ChatContainer
+            // setUnreadGroupMessageCount(0);
+            setPrivateChatUser(0);
+            setChatType(ChatType.Group);
+            setSidePanel(SidePanelType.Chat);
           }
-          setSidePanel(SidePanelType.Chat);
         },
       });
     };
@@ -211,6 +249,14 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
       const messageData = payload.value;
       switch (messageAction) {
         case ChatMessageActionEnum.Create:
+          //To order chat participant based on recent message
+          try {
+            updateRenderListState(data.sender, {
+              lastMessageTimeStamp: new Date().getTime(),
+            });
+          } catch (error) {
+            console.log("ERROR : couldn't update the last message timestamp");
+          }
           showMessageNotification(messageData.msg, `${data.sender}`, true);
           addMessageToPrivateStore(
             data.sender,
@@ -358,7 +404,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
           value: messageData,
           action: ChatMessageActionEnum.Create,
         }),
-        EventPersistLevel.LEVEL1,
+        PersistanceLevel.None,
         toUid,
       );
       addMessageToPrivateStore(toUid, messageData, true);
@@ -375,7 +421,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
           value: messageData,
           action: ChatMessageActionEnum.Create,
         }),
-        EventPersistLevel.LEVEL1,
+        PersistanceLevel.None,
       );
       addMessageToStore(localUid, messageData);
     }
@@ -395,7 +441,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
             value: {msgId, ...editMsgData},
             action: ChatMessageActionEnum.Update,
           }),
-          EventPersistLevel.LEVEL1,
+          PersistanceLevel.None,
           toUid,
         );
         setPrivateMessageStore((prevState) => {
@@ -426,7 +472,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
             value: {msgId, ...editMsgData},
             action: ChatMessageActionEnum.Update,
           }),
-          EventPersistLevel.LEVEL1,
+          PersistanceLevel.None,
         );
         setMessageStore((prevState) => {
           const newState = prevState.map((item) => {
@@ -457,7 +503,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
             value: {msgId, ...deleteMsgData},
             action: ChatMessageActionEnum.Delete,
           }),
-          EventPersistLevel.LEVEL1,
+          PersistanceLevel.None,
           toUid,
         );
         setPrivateMessageStore((prevState) => {
@@ -488,7 +534,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
             value: {msgId, ...deleteMsgData},
             action: ChatMessageActionEnum.Delete,
           }),
-          EventPersistLevel.LEVEL1,
+          PersistanceLevel.None,
         );
         setMessageStore((prevState) => {
           const newState = prevState.map((item) => {
@@ -514,6 +560,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
         sendChatMessage,
         editChatMessage,
         deleteChatMessage,
+        openPrivateChat,
       }}>
       {props.children}
     </ChatMessagesContext.Provider>

package/template/src/components/chat-ui/useChatUIControls.tsx

@@ -0,0 +1,76 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import {createHook} from 'customization-implementation';
+import React, {SetStateAction, useState} from 'react';
+import {UidType} from '../../../agora-rn-uikit';
+
+export enum ChatType {
+  Group,
+  //todo confirm memberlist with vineeth
+  MemberList,
+  Private,
+}
+
+export interface ChatUIControlsInterface {
+  chatType: ChatType;
+  privateChatUser: UidType;
+  inputActive?: boolean;
+  setChatType: (chatType: ChatType) => void;
+  setPrivateChatUser: React.Dispatch<SetStateAction<UidType>>;
+  setInputActive: React.Dispatch<SetStateAction<boolean>>;
+  message: string;
+  setMessage: React.Dispatch<SetStateAction<string>>;
+}
+
+const ChatUIControlsContext = React.createContext<ChatUIControlsInterface>({
+  chatType: ChatType.Group,
+  privateChatUser: 0,
+  message: '',
+  setChatType: () => {},
+  setPrivateChatUser: () => {},
+  setMessage: () => {},
+  inputActive: false,
+  setInputActive: () => {},
+});
+
+interface ChatUIControlsProviderProps {
+  children: React.ReactNode;
+}
+
+const ChatUIControlsProvider = (props: ChatUIControlsProviderProps) => {
+  const [chatType, setChatType] = useState<ChatType>(ChatType.Group);
+  const [inputActive, setInputActive] = useState(false);
+  const [privateChatUser, setPrivateChatUser] = useState<UidType>(0);
+  const [message, setMessage] = useState('');
+  return (
+    <ChatUIControlsContext.Provider
+      value={{
+        chatType,
+        setChatType,
+        privateChatUser,
+        setPrivateChatUser,
+        message,
+        setMessage,
+        inputActive,
+        setInputActive,
+      }}>
+      {props.children}
+    </ChatUIControlsContext.Provider>
+  );
+};
+
+/**
+ * The ChatUIControl app state governs the chat ui.
+ */
+const useChatUIControls = createHook(ChatUIControlsContext);
+
+export {ChatUIControlsProvider, useChatUIControls};

package/template/src/components/common/Error.tsx

@@ -10,7 +10,8 @@
 *********************************************
 */
 
-import React, {useContext, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
+import Toast from '../../../react-native-toast-message';
 import Error from '../../subComponents/Error';
 type ErrorType = {
   name: string;
@@ -44,11 +45,24 @@ const ErrorProvider = (props: {children: React.ReactNode}) => {
 
 const CommonError: React.FC = () => {
   const {error} = useContext(ErrorContext);
-  return error && (error.name || error.message) ? (
-    <Error error={error} showBack={true} />
-  ) : (
-    <></>
-  );
+  useEffect(() => {
+    if (error?.name || error?.message) {
+      Toast.show({
+        type: 'error',
+        text1: error.name,
+        text2: error.message,
+        visibilityTime: 1000 * 10,
+        primaryBtn: null,
+        secondaryBtn: null,
+      });
+    }
+  }, [error]);
+  return <></>;
+  // return error && (error.name || error.message) ? (
+  //    <Error error={error} showBack={true} />
+  // ) : (
+  //   <></>
+  // );
 };
 export {ErrorContext, ErrorProvider};
 export default CommonError;

package/template/src/components/common/Logo.tsx

@@ -11,26 +11,27 @@
 */
 
 import React from 'react';
-import {View, StyleSheet} from 'react-native';
-import Logo from '../../subComponents/Logo';
+import {StyleSheet, Image} from 'react-native';
 import {useHasBrandLogo} from '../../utils/common';
-
-const CommonLogo: React.FC = () => {
+const Logo: React.FC = () => {
   const hasBrandLogo = useHasBrandLogo();
+  const hasLogo = hasBrandLogo();
+  if (!hasLogo) {
+    return null;
+  }
+
   return (
-    <View style={style.nav}>
-      {hasBrandLogo() && <Logo />}
-      {/* <OpenInNativeButton /> */}
-    </View>
+    <Image
+      source={{uri: $config.LOGO}}
+      style={style.logo}
+      resizeMode="contain"
+    />
   );
 };
-export default CommonLogo;
+export default Logo;
 const style = StyleSheet.create({
-  nav: {
-    flex: 1,
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
+  logo: {
+    width: 54,
+    height: 19,
   },
 });

package/template/src/components/contexts/LiveStreamDataContext.tsx

@@ -1,12 +1,18 @@
 import {UidType} from '../../../agora-rn-uikit';
-import React, {createContext, useState, useContext} from 'react';
+import React, {
+  createContext,
+  useState,
+  useContext,
+  useReducer,
+  useEffect,
+} from 'react';
 import {createHook} from 'customization-implementation';
 import LiveStreamContext, {
   raiseHandListInterface,
 } from '../../components/livestream';
 import {ClientRole, useLocalUid} from '../../../agora-rn-uikit';
 import {filterObject} from '../../utils';
-import {useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 
 export interface LiveStreamDataObjectInterface {
   [key: number]: {
@@ -30,26 +36,25 @@ interface ScreenShareProviderProps {
   children: React.ReactNode;
 }
 const LiveStreamDataProvider = (props: ScreenShareProviderProps) => {
-  const {renderList} = useRender();
+  const {defaultContent} = useContent();
   const {raiseHandList} = useContext(LiveStreamContext);
   const [hostUids, setHostUids] = useState<UidType[]>([]);
   const [audienceUids, setAudienceUids] = useState<UidType[]>([]);
 
   React.useEffect(() => {
-    if (Object.keys(renderList).length !== 0) {
+    if (Object.keys(defaultContent).length !== 0) {
       const hostList = filterObject(
-        renderList,
+        defaultContent,
         ([k, v]) =>
-          (v?.type === 'rtc' ||
-            v?.type === 'live' ||
-            (v?.type === 'screenshare' && v?.video == 1)) &&
+          (v?.type === 'rtc' || v?.type === 'live') && //||
+          //(v?.type === 'screenshare' && v?.video == 1)
           (raiseHandList[k]
             ? raiseHandList[k]?.role == ClientRole.Broadcaster
             : true) &&
           !v?.offline,
       );
       const audienceList = filterObject(
-        renderList,
+        defaultContent,
         ([k, v]) =>
           (v?.type === 'rtc' || v?.type === 'live') &&
           raiseHandList[k]?.role == ClientRole.Audience &&
@@ -61,13 +66,13 @@ const LiveStreamDataProvider = (props: ScreenShareProviderProps) => {
       setHostUids(hUids);
       setAudienceUids(aUids);
     }
-  }, [renderList, raiseHandList]);
+  }, [defaultContent, raiseHandList]);
 
   return (
     <LiveStreamDataContext.Provider
       value={{
         liveStreamData: raiseHandList,
-        hostUids,
+        hostUids: hostUids,
         audienceUids,
       }}>
       {props.children}

package/template/src/components/contexts/VideoMeetingDataContext.tsx

@@ -1,10 +1,18 @@
-import React, {createContext, useState, useEffect, useContext} from 'react';
+import React, {
+  createContext,
+  useState,
+  useEffect,
+  useContext,
+  useReducer,
+  useRef,
+} from 'react';
 import {createHook} from 'customization-implementation';
 import {UidType, useLocalUid} from '../../../agora-rn-uikit';
-import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
-import events, {EventPersistLevel} from '../../rtm-events-api';
+import {useRoomInfo} from '../room-info/useRoomInfo';
+import events, {PersistanceLevel} from '../../rtm-events-api';
 import {EventNames} from '../../rtm-events';
 import ChatContext from '../ChatContext';
+import {useContent} from 'customization-api';
 
 export interface VideoMeetingDataInterface {
   hostUids: UidType[];
@@ -21,11 +29,23 @@ interface VideoMeetingDataProviderProps {
 const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
   const {
     data: {isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
+  const {activeUids} = useContent();
   const {hasUserJoinedRTM} = useContext(ChatContext);
   const localUid = useLocalUid();
   const [hostUids, setHostUids] = useState<UidType[]>([]);
   const [attendeeUids, setAttendeeUids] = useState<UidType[]>([]);
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+  const hostUidsRef = useRef({hostUids});
+  const attendeeUidsRef = useRef({attendeeUids});
+
+  useEffect(() => {
+    hostUidsRef.current.hostUids = hostUids;
+  }, [hostUids]);
+
+  useEffect(() => {
+    attendeeUidsRef.current.attendeeUids = attendeeUids;
+  }, [attendeeUids]);
 
   useEffect(() => {
     //set local uid
@@ -36,8 +56,8 @@ const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
     events.on(EventNames.VIDEO_MEETING_HOST, (data) => {
       const payload = JSON.parse(data?.payload);
       const hostUid = payload?.uid;
-      if (hostUid && hostUids.indexOf(hostUid) === -1) {
-        setHostUids((prevState) => [...prevState, hostUid]);
+      if (hostUid && hostUidsRef?.current?.hostUids.indexOf(hostUid) === -1) {
+        setHostUids([...hostUidsRef?.current?.hostUids, hostUid]);
       }
     });
 
@@ -45,8 +65,14 @@ const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
     events.on(EventNames.VIDEO_MEETING_ATTENDEE, (data) => {
       const payload = JSON.parse(data?.payload);
       const attendeeUid = payload?.uid;
-      if (attendeeUid && attendeeUids.indexOf(attendeeUid) === -1) {
-        setAttendeeUids((prevState) => [...prevState, attendeeUid]);
+      if (
+        attendeeUid &&
+        attendeeUidsRef?.current?.attendeeUids?.indexOf(attendeeUid) === -1
+      ) {
+        setAttendeeUids([
+          ...attendeeUidsRef?.current?.attendeeUids,
+          attendeeUid,
+        ]);
       }
     });
 
@@ -65,16 +91,20 @@ const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
           ? EventNames.VIDEO_MEETING_HOST
           : EventNames.VIDEO_MEETING_ATTENDEE,
         JSON.stringify({uid: localUid}),
-        EventPersistLevel.LEVEL2,
+        PersistanceLevel.Sender,
       );
     }
   }, [isHost, hasUserJoinedRTM]);
 
+  useEffect(() => {
+    forceUpdate();
+  }, [activeUids]);
+
   return (
     <VideoMeetingData.Provider
       value={{
-        hostUids,
-        attendeeUids,
+        hostUids: hostUids.filter((i) => activeUids.indexOf(i) !== -1),
+        attendeeUids: attendeeUids.filter((i) => activeUids.indexOf(i) !== -1),
       }}>
       {props.children}
     </VideoMeetingData.Provider>

package/template/src/components/contexts/WhiteboardContext.tsx

@@ -1,14 +1,14 @@
-import {UidType} from '../../../agora-rn-uikit';
+import {DispatchContext, UidType} from '../../../agora-rn-uikit';
 import React, {
   createContext,
   Dispatch,
   SetStateAction,
+  useContext,
   useEffect,
   useState,
 } from 'react';
 import {createHook} from 'customization-implementation';
 import {filterObject} from '../../utils/index';
-import {useRtc} from 'customization-api';
 
 export interface WhiteboardObjectInterface {
   [key: number]: {
@@ -32,7 +32,7 @@ interface WhiteboardProviderProps {
 const WhiteboardProvider = (props: WhiteboardProviderProps) => {
   const [whiteboardData, setWhiteboardData] =
     useState<WhiteboardObjectInterface>({});
-  const {dispatch} = useRtc();
+  const {dispatch} = useContext(DispatchContext);
 
   useEffect(() => {
     const activeData = filterObject(