agora-appbuilder-core 2.3.0-beta.9 → 3.0.0

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

@@ -9,51 +9,78 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 import React, {useState, useEffect, useRef} from 'react';
-import {useRenderContext} from 'fpe-api';
+import {useRender} from 'customization-api';
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
 import {useLocalUid, UidType} from '../../../agora-rn-uikit';
-import CustomEvents from '../../custom-events';
+import events, {EventPersistLevel} from '../../rtm-events-api';
 import {EventNames} from '../../rtm-events';
 import {useChatUIControl} from '../chat-ui/useChatUIControl';
 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';
+
+enum ChatMessageActionEnum {
+  Create = 'Create_Chat_Message',
+  Update = 'Update_Chat_Message',
+  Delete = 'Delete_Chat_Message',
+}
 
 interface ChatMessagesProviderProps {
   children: React.ReactNode;
 }
-interface messageInterface {
-  ts: number;
+export interface messageInterface {
+  createdTimestamp: number;
+  updatedTimestamp?: number;
   msg: string;
+  msgId: string;
+  isDeleted: boolean;
 }
-interface messageStoreInterface extends messageInterface {
+export interface messageStoreInterface extends messageInterface {
   uid: UidType;
 }
 
 interface ChatMessagesInterface {
-  messageStore: messageStoreInterface | any;
-  privateMessageStore: any;
+  messageStore: messageStoreInterface[];
+  privateMessageStore: {[key: string]: messageStoreInterface[]};
   sendChatMessage: (msg: string, toUid?: UidType) => void;
+  editChatMessage: (msgId: string, msg: string, toUid?: UidType) => void;
+  deleteChatMessage: (msgId: string, toUid?: UidType) => void;
 }
 
 const ChatMessagesContext = React.createContext<ChatMessagesInterface>({
   messageStore: [],
   privateMessageStore: {},
   sendChatMessage: () => {},
+  editChatMessage: () => {},
+  deleteChatMessage: () => {},
 });
 
 const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
-  const {renderList} = useRenderContext();
+  const {renderList} = useRender();
   const localUid = useLocalUid();
   const {setSidePanel} = useSidePanel();
-  const {groupActive, selectedChatUserId, setGroupActive} = useChatUIControl();
-  const {setUnreadGroupMessageCount, setUnreadIndividualMessageCount} =
-    useChatNotification();
+  const {
+    groupActive,
+    selectedChatUserId,
+    setGroupActive,
+    setPrivateActive,
+    setSelectedChatUserId,
+  } = useChatUIControl();
+  const {
+    setUnreadGroupMessageCount,
+    setUnreadIndividualMessageCount,
+    unreadPrivateMessageCount,
+    unreadIndividualMessageCount,
+    setUnreadPrivateMessageCount,
+  } = useChatNotification();
   const [messageStore, setMessageStore] = useState<messageStoreInterface[]>([]);
-  const [privateMessageStore, setPrivateMessageStore] = useState({});
+  const [privateMessageStore, setPrivateMessageStore] = useState<{
+    [key: string]: messageStoreInterface[];
+  }>({});
 
   const renderListRef = useRef({renderList: renderList});
   const groupActiveRef = useRef<boolean>();
@@ -75,70 +102,210 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
   }, [selectedChatUserId]);
 
   React.useEffect(() => {
-    const showMessageNotification = (msg: string, uid: string) => {
+    const showMessageNotification = (
+      msg: string,
+      uid: string,
+      isPrivateMessage: boolean = false,
+    ) => {
+      const uidAsNumber = parseInt(uid);
       Toast.show({
         type: 'success',
         text1: msg.length > 30 ? msg.slice(0, 30) + '...' : msg,
-        text2: renderListRef.current.renderList[parseInt(uid)]?.name
-          ? fromText(renderListRef.current.renderList[parseInt(uid)]?.name)
+        text2: renderListRef.current.renderList[uidAsNumber]?.name
+          ? fromText(renderListRef.current.renderList[uidAsNumber]?.name)
           : '',
         visibilityTime: 1000,
         onPress: () => {
+          if (isPrivateMessage) {
+            setUnreadPrivateMessageCount(
+              unreadPrivateMessageCount -
+                (unreadIndividualMessageCount[uidAsNumber] || 0),
+            );
+            setUnreadIndividualMessageCount((prevState) => {
+              return {
+                ...prevState,
+                [uidAsNumber]: 0,
+              };
+            });
+            setGroupActive(false);
+            setSelectedChatUserId(uidAsNumber);
+            setPrivateActive(true);
+          } else {
+            setUnreadGroupMessageCount(0);
+            setPrivateActive(false);
+            setSelectedChatUserId(0);
+            setGroupActive(true);
+          }
           setSidePanel(SidePanelType.Chat);
-          setUnreadGroupMessageCount(0);
-          setGroupActive(true);
         },
       });
     };
-    CustomEvents.on(EventNames.PUBLIC_CHAT_MESSAGE, (data) => {
-      showMessageNotification(data.payload.value, data.sender);
-      addMessageToStore(parseInt(data.sender), {
-        msg: data.payload.value,
-        ts: data.ts,
-      });
-      /**
-       * if chat group window is not active.
-       * then we will increment the unread count
-       */
-      if (!groupActiveRef.current) {
-        setUnreadGroupMessageCount((prevState) => {
-          return prevState + 1;
-        });
+    events.on(EventNames.PUBLIC_CHAT_MESSAGE, (data) => {
+      const payload = JSON.parse(data.payload);
+      const messageAction = payload.action;
+      const messageData = payload.value;
+      switch (messageAction) {
+        case ChatMessageActionEnum.Create:
+          showMessageNotification(messageData.msg, `${data.sender}`);
+          addMessageToStore(data.sender, {
+            msg: messageData.msg,
+            createdTimestamp: messageData.createdTimestamp,
+            isDeleted: messageData.isDeleted,
+            msgId: messageData.msgId,
+          });
+          /**
+           * if chat group window is not active.
+           * then we will increment the unread count
+           */
+          if (!groupActiveRef.current) {
+            setUnreadGroupMessageCount((prevState) => {
+              return prevState + 1;
+            });
+          }
+          break;
+        case ChatMessageActionEnum.Update:
+          setMessageStore((prevState) => {
+            const newState = prevState.map((item) => {
+              if (
+                item.msgId === messageData.msgId &&
+                item.uid === data.sender
+              ) {
+                return {
+                  ...item,
+                  msg: messageData.msg,
+                  updatedTimestamp: messageData.updatedTimestamp,
+                };
+              } else {
+                return item;
+              }
+            });
+            return newState;
+          });
+          break;
+        case ChatMessageActionEnum.Delete:
+          setMessageStore((prevState) => {
+            const newState = prevState.map((item) => {
+              if (
+                item.msgId === messageData.msgId &&
+                item.uid === data.sender
+              ) {
+                return {
+                  ...item,
+                  isDeleted: true,
+                  updatedTimestamp: messageData.updatedTimestamp,
+                };
+              } else {
+                return item;
+              }
+            });
+            return newState;
+          });
+          break;
+        default:
+          break;
       }
     });
-    CustomEvents.on(EventNames.PRIVATE_CHAT_MESSAGE, (data) => {
-      showMessageNotification(data.payload.value, data.sender);
-      addMessageToPrivateStore(
-        parseInt(data.sender),
-        {
-          msg: data.payload.value,
-          ts: data.ts,
-        },
-        false,
-      );
-      /**
-       * if user's private window is active.
-       * then we will not increment the unread count
-       */
-
-      if (!(individualActiveRef.current === parseInt(data.sender))) {
-        setUnreadIndividualMessageCount((prevState) => {
-          const prevCount =
-            prevState && prevState[parseInt(data.sender)]
-              ? prevState[parseInt(data.sender)]
-              : 0;
-          return {
-            ...prevState,
-            [parseInt(data.sender)]: prevCount + 1,
-          };
-        });
+    events.on(EventNames.PRIVATE_CHAT_MESSAGE, (data) => {
+      const payload = JSON.parse(data.payload);
+      const messageAction = payload.action;
+      const messageData = payload.value;
+      switch (messageAction) {
+        case ChatMessageActionEnum.Create:
+          showMessageNotification(messageData.msg, `${data.sender}`, true);
+          addMessageToPrivateStore(
+            data.sender,
+            {
+              msg: messageData.msg,
+              createdTimestamp: messageData.createdTimestamp,
+              msgId: messageData.msgId,
+              isDeleted: messageData.isDeleted,
+            },
+            false,
+          );
+          /**
+           * if user's private window is active.
+           * then we will not increment the unread count
+           */
+
+          if (!(individualActiveRef.current === data.sender)) {
+            setUnreadIndividualMessageCount((prevState) => {
+              const prevCount =
+                prevState && prevState[data.sender]
+                  ? prevState[data.sender]
+                  : 0;
+              return {
+                ...prevState,
+                [data.sender]: prevCount + 1,
+              };
+            });
+          }
+          break;
+        case ChatMessageActionEnum.Update:
+          setPrivateMessageStore((prevState) => {
+            const privateChatOfUid = prevState[data.sender];
+            const updatedData = privateChatOfUid.map((item) => {
+              if (
+                item.msgId === messageData.msgId &&
+                item.uid === data.sender
+              ) {
+                return {
+                  ...item,
+                  msg: messageData.msg,
+                  updatedTimestamp: messageData.updatedTimestamp,
+                };
+              } else {
+                return item;
+              }
+            });
+            const newState = {
+              ...prevState,
+              [data.sender]: updatedData,
+            };
+            return newState;
+          });
+          break;
+        case ChatMessageActionEnum.Delete:
+          setPrivateMessageStore((prevState) => {
+            const privateChatOfUid = prevState[data.sender];
+            const updatedData = privateChatOfUid.map((item) => {
+              if (
+                item.msgId === messageData.msgId &&
+                item.uid === data.sender
+              ) {
+                return {
+                  ...item,
+                  isDeleted: true,
+                  updatedTimestamp: messageData.updatedTimestamp,
+                };
+              } else {
+                return item;
+              }
+            });
+            const newState = {
+              ...prevState,
+              [data.sender]: updatedData,
+            };
+            return newState;
+          });
+          break;
+        default:
+          break;
       }
     });
   }, []);
 
   const addMessageToStore = (uid: UidType, body: messageInterface) => {
     setMessageStore((m: messageStoreInterface[]) => {
-      return [...m, {ts: body.ts, uid, msg: body.msg}];
+      return [
+        ...m,
+        {
+          createdTimestamp: body.createdTimestamp,
+          uid,
+          msg: body.msg,
+          msgId: body.msgId,
+          isDeleted: body.isDeleted,
+        },
+      ];
     });
   };
 
@@ -147,16 +314,30 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
     body: messageInterface,
     local: boolean,
   ) => {
-    setPrivateMessageStore((state: any) => {
+    setPrivateMessageStore((state) => {
       let newState = {...state};
       newState[uid] !== undefined
         ? (newState[uid] = [
             ...newState[uid],
-            {ts: body.ts, uid: local ? localUid : uid, msg: body.msg},
+            {
+              createdTimestamp: body.createdTimestamp,
+              uid: local ? localUid : uid,
+              msg: body.msg,
+              msgId: body.msgId,
+              isDeleted: body.isDeleted,
+            },
           ])
         : (newState = {
             ...newState,
-            [uid]: [{ts: body.ts, uid: local ? localUid : uid, msg: body.msg}],
+            [uid]: [
+              {
+                createdTimestamp: body.createdTimestamp,
+                uid: local ? localUid : uid,
+                msg: body.msg,
+                msgId: body.msgId,
+                isDeleted: body.isDeleted,
+              },
+            ],
           });
       return {...newState};
     });
@@ -165,29 +346,163 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
   const sendChatMessage = (msg: string, toUid?: UidType) => {
     if (typeof msg == 'string' && msg.trim() === '') return;
     if (toUid) {
-      CustomEvents.send(
+      const messageData = {
+        msg,
+        createdTimestamp: timeNow(),
+        msgId: getUniqueID(),
+        isDeleted: false,
+      };
+      events.send(
         EventNames.PRIVATE_CHAT_MESSAGE,
-        {
-          value: msg,
-        },
+        JSON.stringify({
+          value: messageData,
+          action: ChatMessageActionEnum.Create,
+        }),
+        EventPersistLevel.LEVEL1,
         toUid,
       );
-      addMessageToPrivateStore(
-        toUid,
-        {
-          msg: msg,
-          ts: timeNow(),
-        },
-        true,
+      addMessageToPrivateStore(toUid, messageData, true);
+    } else {
+      const messageData = {
+        msg,
+        msgId: getUniqueID(),
+        isDeleted: false,
+        createdTimestamp: timeNow(),
+      };
+      events.send(
+        EventNames.PUBLIC_CHAT_MESSAGE,
+        JSON.stringify({
+          value: messageData,
+          action: ChatMessageActionEnum.Create,
+        }),
+        EventPersistLevel.LEVEL1,
+      );
+      addMessageToStore(localUid, messageData);
+    }
+  };
+
+  const editChatMessage = (msgId: string, msg: string, toUid?: UidType) => {
+    if (typeof msg == 'string' && msg.trim() === '') return;
+    if (toUid) {
+      const checkData = privateMessageStore[toUid].filter(
+        (item) => item.msgId === msgId && item.uid === localUid,
       );
+      if (checkData && checkData.length) {
+        const editMsgData = {msg, updatedTimestamp: timeNow()};
+        events.send(
+          EventNames.PRIVATE_CHAT_MESSAGE,
+          JSON.stringify({
+            value: {msgId, ...editMsgData},
+            action: ChatMessageActionEnum.Update,
+          }),
+          EventPersistLevel.LEVEL1,
+          toUid,
+        );
+        setPrivateMessageStore((prevState) => {
+          const privateChatOfUid = prevState[toUid];
+          const updatedData = privateChatOfUid.map((item) => {
+            if (item.msgId === msgId) {
+              return {...item, ...editMsgData};
+            } else {
+              return item;
+            }
+          });
+          const newState = {...prevState, [toUid]: updatedData};
+          return newState;
+        });
+      } else {
+        console.log("You don't have permission to edit");
+      }
     } else {
-      CustomEvents.send(EventNames.PUBLIC_CHAT_MESSAGE, {
-        value: msg,
-      });
-      addMessageToStore(localUid, {
-        msg: msg,
-        ts: timeNow(),
-      });
+      //check if user has permission to edit
+      const checkData = messageStore.filter(
+        (item) => item.msgId === msgId && item.uid === localUid,
+      );
+      if (checkData && checkData.length) {
+        const editMsgData = {msg, updatedTimestamp: timeNow()};
+        events.send(
+          EventNames.PUBLIC_CHAT_MESSAGE,
+          JSON.stringify({
+            value: {msgId, ...editMsgData},
+            action: ChatMessageActionEnum.Update,
+          }),
+          EventPersistLevel.LEVEL1,
+        );
+        setMessageStore((prevState) => {
+          const newState = prevState.map((item) => {
+            if (item.msgId === msgId) {
+              return {...item, ...editMsgData};
+            } else {
+              return item;
+            }
+          });
+          return newState;
+        });
+      } else {
+        console.log("You don't have permission to edit");
+      }
+    }
+  };
+
+  const deleteChatMessage = (msgId: string, toUid?: UidType) => {
+    if (toUid) {
+      const checkData = privateMessageStore[toUid].filter(
+        (item) => item.msgId === msgId && item.uid === localUid,
+      );
+      if (checkData && checkData.length) {
+        const deleteMsgData = {updatedTimestamp: timeNow()};
+        events.send(
+          EventNames.PRIVATE_CHAT_MESSAGE,
+          JSON.stringify({
+            value: {msgId, ...deleteMsgData},
+            action: ChatMessageActionEnum.Delete,
+          }),
+          EventPersistLevel.LEVEL1,
+          toUid,
+        );
+        setPrivateMessageStore((prevState) => {
+          const privateChatOfUid = prevState[toUid];
+          const updatedData = privateChatOfUid.map((item) => {
+            if (item.msgId === msgId) {
+              return {...item, isDeleted: true, ...deleteMsgData};
+            } else {
+              return item;
+            }
+          });
+          const newState = {...prevState, [toUid]: updatedData};
+          return newState;
+        });
+      } else {
+        console.log("You don't have permission to delete");
+      }
+    } else {
+      //check if user has permission to delete
+      const checkData = messageStore.filter(
+        (item) => item.msgId === msgId && item.uid === localUid,
+      );
+      if (checkData && checkData.length) {
+        const deleteMsgData = {updatedTimestamp: timeNow()};
+        events.send(
+          EventNames.PUBLIC_CHAT_MESSAGE,
+          JSON.stringify({
+            value: {msgId, ...deleteMsgData},
+            action: ChatMessageActionEnum.Delete,
+          }),
+          EventPersistLevel.LEVEL1,
+        );
+        setMessageStore((prevState) => {
+          const newState = prevState.map((item) => {
+            if (item.msgId === msgId) {
+              return {...item, isDeleted: true, ...deleteMsgData};
+            } else {
+              return item;
+            }
+          });
+          return newState;
+        });
+      } else {
+        console.log("You don't have permission to delete");
+      }
     }
   };
 
@@ -197,6 +512,8 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
         messageStore,
         privateMessageStore,
         sendChatMessage,
+        editChatMessage,
+        deleteChatMessage,
       }}>
       {props.children}
     </ChatMessagesContext.Provider>

package/template/src/components/chat-notification/useChatNotification.tsx

@@ -9,10 +9,10 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 import React, {SetStateAction, useState, useEffect} from 'react';
 
-interface individualUnreadMessageCount {
+export interface individualUnreadMessageCount {
   [key: number]: number;
 }
 

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

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 import React, {SetStateAction, useState} from 'react';
 import {UidType} from '../../../agora-rn-uikit';
 

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

@@ -13,12 +13,13 @@
 import React from 'react';
 import {View, StyleSheet} from 'react-native';
 import Logo from '../../subComponents/Logo';
-import {hasBrandLogo} from '../../utils/common';
+import {useHasBrandLogo} from '../../utils/common';
 
 const CommonLogo: React.FC = () => {
+  const hasBrandLogo = useHasBrandLogo();
   return (
     <View style={style.nav}>
-      {hasBrandLogo && <Logo />}
+      {hasBrandLogo() && <Logo />}
       {/* <OpenInNativeButton /> */}
     </View>
   );

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

@@ -1,12 +1,12 @@
 import {UidType} from '../../../agora-rn-uikit';
 import React, {createContext, useState, useContext} from 'react';
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 import LiveStreamContext, {
   raiseHandListInterface,
 } from '../../components/livestream';
 import {ClientRole, useLocalUid} from '../../../agora-rn-uikit';
 import {filterObject} from '../../utils';
-import useUserList from '../../utils/useUserList';
+import {useRender} from 'customization-api';
 
 export interface LiveStreamDataObjectInterface {
   [key: number]: {
@@ -30,7 +30,7 @@ interface ScreenShareProviderProps {
   children: React.ReactNode;
 }
 const LiveStreamDataProvider = (props: ScreenShareProviderProps) => {
-  const {renderList} = useUserList();
+  const {renderList} = useRender();
   const {raiseHandList} = useContext(LiveStreamContext);
   const [hostUids, setHostUids] = useState<UidType[]>([]);
   const [audienceUids, setAudienceUids] = useState<UidType[]>([]);

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

@@ -6,12 +6,13 @@ import React, {
   useContext,
   useState,
 } from 'react';
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 
 export interface ScreenShareObjectInterface {
   [key: string | number]: {
     name: string;
     isActive: boolean;
+    ts: number;
   };
 }
 export interface ScreenShareContextInterface {
@@ -33,6 +34,7 @@ const ScreenShareProvider = (props: ScreenShareProviderProps) => {
       [rtcProps?.screenShareUid]: {
         name: '',
         isActive: false,
+        ts: 0,
       },
     });