agora-appbuilder-core 2.2.0 → 2.3.0-beta.10

package/template/src/AppWrapper.tsx

@@ -0,0 +1,79 @@
+/*
+********************************************
+ 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 React from 'react';
+import {Router} from './components/Router';
+import Navigation from './components/Navigation';
+import {StorageProvider} from './components/StorageContext';
+import GraphQLProvider from './components/GraphQLProvider';
+import {SessionProvider} from './components/SessionContext';
+import {ImageBackground, SafeAreaView, StatusBar, Platform} from 'react-native';
+import ColorConfigure from './components/ColorConfigure';
+import Toast from '../react-native-toast-message';
+import ToastConfig from './subComponents/toastConfig';
+import {isValidReactComponent} from './utils/common';
+import DimensionProvider from './components/dimension/DimensionProvider';
+import Error from './components/common/Error';
+import {ErrorProvider} from './components/common';
+import {useFpe, FpeProvider, fpeConfig, FpeApiInterface} from 'fpe-api';
+import {LanguageProvider} from './language/useLanguage';
+
+interface AppWrapperProps {
+  children: React.ReactNode;
+  fpeConfig?: FpeApiInterface;
+}
+
+const AppWrapper = (props: AppWrapperProps) => {
+  const AppRoot = useFpe((data) => {
+    if (data?.appRoot && isValidReactComponent(data.appRoot)) {
+      return data.appRoot;
+    }
+    return React.Fragment;
+  });
+
+  return (
+    <AppRoot>
+      <ImageBackground
+        source={{uri: $config.BG}}
+        style={{flex: 1}}
+        resizeMode={'cover'}>
+        <SafeAreaView
+          // @ts-ignore textAlign not supported by TS definitions but is applied to web regardless
+          style={[{flex: 1}, Platform.select({web: {textAlign: 'left'}})]}>
+          <StatusBar hidden={true} />
+          <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />
+          <StorageProvider>
+            <GraphQLProvider>
+              <Router>
+                <SessionProvider>
+                  <ColorConfigure>
+                    <DimensionProvider>
+                      <LanguageProvider>
+                        <ErrorProvider>
+                          <Error />
+                          <Navigation />
+                          {props.children}
+                        </ErrorProvider>
+                      </LanguageProvider>
+                    </DimensionProvider>
+                  </ColorConfigure>
+                </SessionProvider>
+              </Router>
+            </GraphQLProvider>
+          </StorageProvider>
+        </SafeAreaView>
+      </ImageBackground>
+    </AppRoot>
+  );
+  // return <div> hello world</div>; {/* isn't join:phrase redundant now, also can we remove joinStore */}
+};
+
+export default AppWrapper;

package/template/src/SDKAppWrapper.tsx

@@ -0,0 +1,67 @@
+import React, {useEffect, useState} from 'react';
+import {fpeConfig, FpeProvider, FpeApiInterface} from 'fpe-api';
+import {installFPE as createFPE} from 'fpe-api/install';
+import SDKEvents from './utils/SdkEvents';
+import App from './App';
+
+export interface userEventsMapInterface {
+  leave: () => void;
+  create: (
+    hostPhrase: string,
+    attendeePhrase?: string,
+    pstnNumer?: string,
+  ) => void;
+  preJoin: (meetingTitle: string, devices: MediaDeviceInfo[]) => void;
+  join: (
+    meetingTitle: string,
+    devices: MediaDeviceInfo[],
+    isHost: boolean,
+  ) => void;
+}
+
+export interface AppBuilderSdkApiInterface {
+  addFPE: (fpe: FpeApiInterface) => void;
+  createFPE: (fpe: FpeApiInterface) => FpeApiInterface;
+  joinMeeting: (joinPhrase: string) => void;
+  on: <T extends keyof userEventsMapInterface>(
+    userEventName: T,
+    callBack: userEventsMapInterface[T],
+  ) => void;
+  off: (userEventName: keyof userEventsMapInterface) => void;
+}
+
+export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
+  addFPE: (fpeConfig: FpeApiInterface) => {
+    SDKEvents.emit('addFpe', fpeConfig);
+  },
+  joinMeeting: (joinPhrase: string) => {
+    SDKEvents.emit('joinMeetingWithPhrase', joinPhrase);
+  },
+  createFPE,
+  on: (userEventName, cb) => {
+    SDKEvents.on(userEventName, cb);
+  },
+  off: (userEventName) => {
+    SDKEvents.off(userEventName);
+  },
+};
+
+const SDKAppWrapper = () => {
+  const [fpe, setFpe] = useState(fpeConfig);
+  useEffect(() => {
+    SDKEvents.on('addFpe', (sdkFpeConfig) => {
+      console.log('DEBUG(aditya)-SDKEvents: addFpe event called');
+      setFpe(sdkFpeConfig);
+    });
+    // Join event consumed in Create.tsx
+  }, []);
+  return (
+    <>
+      <FpeProvider value={fpe}>
+        <App />
+      </FpeProvider>
+    </>
+  );
+};
+
+export default SDKAppWrapper;

package/template/src/atoms/PrimaryButton.tsx

@@ -35,14 +35,20 @@ export default function PrimaryButton(props: ButtonProps) {
         {backgroundColor: props.disabled ? primaryColor + '80' : primaryColor},
       ]}
       {...otherProps}>
-      {props.text ? (
-        <Text style={[styles.primaryButtonText as StyleProp<TextStyle>, {color: '#fff'}]}>
-          {props.text}
-        </Text>
-      ) : (
-        <></>
-      )}
-      {children}
+      <>
+        {props.text ? (
+          <Text
+            style={[
+              styles.primaryButtonText as StyleProp<TextStyle>,
+              {color: '#fff'},
+            ]}>
+            {props.text}
+          </Text>
+        ) : (
+          <></>
+        )}
+        {children}
+      </>
     </Pressable>
   );
 }

package/template/src/atoms/TextInput.tsx

@@ -11,6 +11,7 @@
 */
 import React, {useContext} from 'react';
 import {TextInputProps, StyleSheet, TextInput, Platform} from 'react-native';
+import {isWeb} from '../utils/common';
 import {textInput} from '../../theme.json';
 import ColorContext from '../components/ColorContext';
 
@@ -19,7 +20,13 @@ const PrimaryButton = (props: TextInputProps) => {
   const {style, ...otherProps} = props;
   return (
     <TextInput
-      style={[styles.textInput, styles.textWrapFix, style, styles.noOutline, {borderColor: primaryColor, color: $config.PRIMARY_FONT_COLOR}]}
+      style={[
+        styles.textInput,
+        styles.textWrapFix,
+        style,
+        styles.noOutline,
+        {borderColor: primaryColor, color: $config.PRIMARY_FONT_COLOR},
+      ]}
       placeholderTextColor={$config.PRIMARY_FONT_COLOR + '70'}
       {...otherProps}
       autoCorrect={false}
@@ -31,10 +38,11 @@ export default PrimaryButton;
 
 const styles = StyleSheet.create({
   textInput,
-  noOutline: Platform.OS === 'web' ? { outlineStyle: "none" } : {},
+  // @ts-ignore
+  noOutline: isWeb ? {outlineStyle: 'none'} : {},
   textWrapFix: Platform.select({
     ios: {
-      paddingVertical: 5
-    }
-  })
+      paddingVertical: 5,
+    },
+  }),
 });

package/template/src/components/Chat.tsx

@@ -9,25 +9,31 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useContext, useEffect} from 'react';
+import React, {useState, useContext} from 'react';
 import {
   View,
-  Platform,
   Text,
   StyleSheet,
   TouchableOpacity,
   Dimensions,
-  useWindowDimensions,
 } from 'react-native';
-import {RFValue} from 'react-native-responsive-fontsize';
 import ChatContainer from '../subComponents/ChatContainer';
 import ChatInput from '../subComponents/ChatInput';
 import ChatParticipants from '../subComponents/chat/ChatParticipants';
 import ColorContext from './ColorContext';
-import chatContext from './ChatContext';
+import {useChatNotification} from './chat-notification/useChatNotification';
+import {useString} from '../utils/useString';
+import {isIOS, isValidReactComponent, isWeb} from '../utils/common';
+import {useChatUIControl} from './chat-ui/useChatUIControl';
+import {useFpe} from 'fpe-api';
+import {UidType} from '../../agora-rn-uikit';
 
-const Chat = (props: any) => {
-  const {height, width} = useWindowDimensions();
+const Chat = () => {
+  // commented for v1 release
+  // const groupChatLabel = useString('groupChatLabel')();
+  // const privateChatLabel = useString('privateChatLabel')();
+  const groupChatLabel = 'Group';
+  const privateChatLabel = 'Private';
   const [dim, setDim] = useState([
     Dimensions.get('window').width,
     Dimensions.get('window').height,
@@ -35,154 +41,189 @@ const Chat = (props: any) => {
   ]);
   const isSmall = dim[0] < 700;
 
-  const {userList} = useContext(chatContext);
-
   const {
-    setChatDisplayed,
-    pendingPrivateNotification,
-    pendingPublicNotification,
-    lastCheckedPrivateState,
-    privateMessageCountMap,
-    setPrivateMessageLastSeen,
-    setPrivateChatDisplayed,
-  } = props;
+    groupActive,
+    setGroupActive,
+    privateActive,
+    setPrivateActive,
+    setSelectedChatUserId: setSelectedUser,
+  } = useChatUIControl();
+  const {
+    unreadGroupMessageCount,
+    setUnreadGroupMessageCount,
+    unreadPrivateMessageCount,
+    setUnreadPrivateMessageCount,
+    setUnreadIndividualMessageCount,
+    unreadIndividualMessageCount,
+  } = useChatNotification();
+
   const {primaryColor} = useContext(ColorContext);
-  const [groupActive, setGroupActive] = useState(true);
-  const [privateActive, setPrivateActive] = useState(false);
-  const [selectedUserID, setSelectedUser] = useState('');
 
-  //Initally private state should be false
-  useEffect(() => {
-    setPrivateChatDisplayed(false);
+  React.useEffect(() => {
+    return () => {
+      // reset both the active tabs
+      setGroupActive(false);
+      setPrivateActive(false);
+      setSelectedUser(0);
+    };
   }, []);
 
-  useEffect(() => {
-    if (privateActive && selectedUserID) {
-      setPrivateMessageLastSeen({
-        userId: selectedUserID,
-        lastSeenCount: privateMessageCountMap[selectedUserID],
-      });
-    }
-  }, [pendingPrivateNotification]);
-
   const selectGroup = () => {
     setPrivateActive(false);
     setGroupActive(true);
-    setPrivateChatDisplayed(false);
+    setUnreadGroupMessageCount(0);
+    setSelectedUser(0);
   };
   const selectPrivate = () => {
     setGroupActive(false);
-    setPrivateChatDisplayed(true);
+    setSelectedUser(0);
+    setPrivateActive(false);
   };
-  const selectUser = (userUID: any) => {
+  const selectUser = (userUID: UidType) => {
     setSelectedUser(userUID);
     setPrivateActive(true);
+    setUnreadIndividualMessageCount((prevState) => {
+      return {
+        ...prevState,
+        [userUID]: 0,
+      };
+    });
+    setUnreadPrivateMessageCount(
+      unreadPrivateMessageCount - (unreadIndividualMessageCount[userUID] || 0),
+    );
   };
 
+  const {ChatAfterView, ChatBeforeView} = useFpe((data) => {
+    let components: {
+      ChatAfterView: React.ComponentType;
+      ChatBeforeView: React.ComponentType;
+    } = {
+      ChatAfterView: React.Fragment,
+      ChatBeforeView: React.Fragment,
+    };
+    if (
+      data?.components?.videoCall &&
+      typeof data?.components?.videoCall === 'object'
+    ) {
+      // commented for v1 release
+      // if (
+      //   data?.components?.videoCall?.chat &&
+      //   typeof data?.components?.videoCall?.chat === 'object'
+      // ) {
+      //   if (
+      //     data?.components?.videoCall?.chat?.after &&
+      //     isValidReactComponent(data?.components?.videoCall?.chat?.after)
+      //   ) {
+      //     components.ChatAfterView = data?.components?.videoCall?.chat?.after;
+      //   }
+      //   if (
+      //     data?.components?.videoCall?.chat?.before &&
+      //     isValidReactComponent(data?.components?.videoCall?.chat?.before)
+      //   ) {
+      //     components.ChatBeforeView = data?.components?.videoCall?.chat?.before;
+      //   }
+      // }
+    }
+    return components;
+  });
+
   return (
-    <View
-      style={
-        Platform.OS === 'web'
-          ? !isSmall
-            ? style.chatView
+    <>
+      <View
+        style={
+          isWeb
+            ? !isSmall
+              ? style.chatView
+              : style.chatViewNative
             : style.chatViewNative
-          : style.chatViewNative
-      }>
-      <View style={style.chatNav}>
-        <TouchableOpacity
-          onPress={selectGroup}
-          style={
-            groupActive
-              ? [style.groupActive, {borderColor: primaryColor}]
-              : [
-                  style.group,
-                  {
-                    borderColor: primaryColor,
-                    borderTopColor: primaryColor + '80',
-                  },
-                ]
-          }>
-          {pendingPublicNotification !== 0 ? (
-            <View style={style.chatNotification}>
-              <Text>{pendingPublicNotification}</Text>
-            </View>
-          ) : null}
-          <Text style={groupActive ? style.groupTextActive : style.groupText}>
-            Group
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          onPress={selectPrivate}
-          style={
-            !groupActive
-              ? [style.privateActive, {borderColor: primaryColor}]
-              : [
-                  style.private,
-                  {
-                    borderColor: primaryColor,
-                    borderTopColor: primaryColor + '80',
-                  },
-                ]
-          }>
-          {pendingPrivateNotification !== 0 ? (
-            <View style={style.chatNotification}>
-              <Text>{pendingPrivateNotification}</Text>
-            </View>
-          ) : null}
-          <Text style={!groupActive ? style.groupTextActive : style.groupText}>
-            Private
-          </Text>
-        </TouchableOpacity>
-      </View>
-      {groupActive ? (
-        <>
-          <ChatContainer privateActive={privateActive} />
-          <View style={[style.chatInputLineSeparator, {marginBottom: 0}]} />
-          <View>
-            <View style={style.chatInputContainer}>
-              <View style={[style.chatInputLineSeparator, {opacity: 0.3}]} />
-              <ChatInput privateActive={privateActive} />
+        }>
+        {/**
+         * In Native device we are setting absolute view. so placed ChatBeforeView and ChatAfterView inside the main view
+         */}
+        <ChatBeforeView />
+        <View style={style.chatNav}>
+          <TouchableOpacity
+            onPress={selectGroup}
+            style={
+              groupActive
+                ? [style.groupActive, {borderColor: primaryColor}]
+                : [
+                    style.group,
+                    {
+                      borderColor: primaryColor,
+                      borderTopColor: primaryColor + '80',
+                    },
+                  ]
+            }>
+            {unreadGroupMessageCount !== 0 ? (
+              <View style={style.chatNotification}>
+                <Text>{unreadGroupMessageCount}</Text>
+              </View>
+            ) : null}
+            <Text style={groupActive ? style.groupTextActive : style.groupText}>
+              {groupChatLabel}
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={selectPrivate}
+            style={
+              !groupActive
+                ? [style.privateActive, {borderColor: primaryColor}]
+                : [
+                    style.private,
+                    {
+                      borderColor: primaryColor,
+                      borderTopColor: primaryColor + '80',
+                    },
+                  ]
+            }>
+            {unreadPrivateMessageCount !== 0 ? (
+              <View style={style.chatNotification}>
+                <Text>{unreadPrivateMessageCount}</Text>
+              </View>
+            ) : null}
+            <Text
+              style={!groupActive ? style.groupTextActive : style.groupText}>
+              {privateChatLabel}
+            </Text>
+          </TouchableOpacity>
+        </View>
+        {groupActive ? (
+          <>
+            <ChatContainer privateActive={privateActive} />
+            <View style={[style.chatInputLineSeparator, {marginBottom: 0}]} />
+            <View>
+              <View style={style.chatInputContainer}>
+                <View style={[style.chatInputLineSeparator, {opacity: 0.3}]} />
+                <ChatInput />
+              </View>
             </View>
-          </View>
-        </>
-      ) : (
-        <>
-          {!privateActive ? (
-            <ChatParticipants
-              selectUser={selectUser}
-              setPrivateMessageLastSeen={setPrivateMessageLastSeen}
-              privateMessageCountMap={privateMessageCountMap}
-              lastCheckedPrivateState={lastCheckedPrivateState}
-            />
-          ) : (
-            <>
-              <ChatContainer
-                privateActive={privateActive}
-                setPrivateActive={setPrivateActive}
-                selectedUserID={selectedUserID}
-                selectedUsername={
-                  userList[selectedUserID]
-                    ? userList[selectedUserID]?.name + ' '
-                    : 'User '
-                }
-              />
-              <View style={[style.chatInputLineSeparator, {marginBottom: 0}]} />
-              <View>
-                <View style={style.chatInputContainer}>
-                  <View
-                    style={[style.chatInputLineSeparator, {opacity: 0.3}]}
-                  />
-                  <ChatInput
-                    privateActive={privateActive}
-                    selectedUserID={selectedUserID}
-                  />
+          </>
+        ) : (
+          <>
+            {!privateActive ? (
+              <ChatParticipants selectUser={selectUser} />
+            ) : (
+              <>
+                <ChatContainer selectPrivate={selectPrivate} />
+                <View
+                  style={[style.chatInputLineSeparator, {marginBottom: 0}]}
+                />
+                <View>
+                  <View style={style.chatInputContainer}>
+                    <View
+                      style={[style.chatInputLineSeparator, {opacity: 0.3}]}
+                    />
+                    <ChatInput />
+                  </View>
                 </View>
-              </View>
-            </>
-          )}
-        </>
-      )}
-    </View>
+              </>
+            )}
+          </>
+        )}
+        <ChatAfterView />
+      </View>
+    </>
   );
 };
 
@@ -299,7 +340,7 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: $config.PRIMARY_COLOR,
     color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: Platform.OS === 'ios' ? 'Helvetica' : 'sans-serif',
+    fontFamily: isIOS ? 'Helvetica' : 'sans-serif',
     borderRadius: 10,
     position: 'absolute',
     left: 25,
@@ -313,7 +354,7 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: $config.PRIMARY_COLOR,
     color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: Platform.OS === 'ios' ? 'Helvetica' : 'sans-serif',
+    fontFamily: isIOS ? 'Helvetica' : 'sans-serif',
     borderRadius: 10,
     position: 'absolute',
     right: 20,

package/template/src/components/ChatContext.ts

@@ -9,20 +9,26 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import RtmEngine, {RtmAttribute} from 'agora-react-native-rtm';
-import {createContext} from 'react';
-import {rtmEventsInterface} from './RTMEvents';
+import RtmEngine from 'agora-react-native-rtm';
+import {UidType} from '../../agora-rn-uikit';
+import {createContext, SetStateAction} from 'react';
 
-export interface channelMessage {
+export interface ChatBubbleProps {
   isLocal: boolean;
-  msg: string;
-  ts: string;
-  uid: string;
+  message: string;
+  timestamp: string;
+  uid: UidType;
+  render?: (
+    isLocal: boolean,
+    message: string,
+    timestamp: string,
+    uid: UidType,
+  ) => JSX.Element;
 }
 
 export interface messageStoreInterface {
   ts: string;
-  uid: string;
+  uid: UidType;
   msg: string;
 }
 
@@ -49,23 +55,15 @@ export enum attrRequestTypes {
   none = 'NONE',
 }
 
-interface chatContext {
-  messageStore: messageStoreInterface | any;
-  privateMessageStore: any;
+export interface chatContext {
+  hasUserJoinedRTM: boolean;
   sendMessage: (msg: string) => void;
-  sendMessageToUid: (msg: string, uid: number) => void;
+  sendMessageToUid: (msg: string, uid: number | string) => void;
   sendControlMessage: (msg: string) => void;
   sendControlMessageToUid: (msg: string, uid: number) => void;
-  addOrUpdateLocalUserAttributes: (attributes: RtmAttribute[]) => void;
-  broadcastUserAttributes: (
-    attributes: RtmAttribute[],
-    ctrlMsg: controlMessageEnum,
-  ) => void;
   engine: RtmEngine;
-  localUid: string;
-  userList: any;
+  localUid: UidType;
   onlineUsersCount: number;
-  events: rtmEventsInterface;
 }
 
 export enum controlMessageEnum {
@@ -76,8 +74,6 @@ export enum controlMessageEnum {
   kickUser = '5',
   cloudRecordingActive = '6',
   cloudRecordingUnactive = '7',
-  clientRoleChanged = 'CLIENT_ROLE_CHANGED',
-  // TODO move to livestream provider
 }
 
 const ChatContext = createContext(null as unknown as chatContext);

package/template/src/components/ColorConfigure.tsx

@@ -12,7 +12,7 @@
 import React from 'react';
 import ColorContext from './ColorContext';
 
-const ColorConfigure: React.FC = (props: any) => {
+const ColorConfigure = (props: {children: React.ReactNode}) => {
   const primaryColor = $config.PRIMARY_COLOR;
   console.log(primaryColor);
   return (
@@ -20,7 +20,7 @@ const ColorConfigure: React.FC = (props: any) => {
       value={{
         primaryColor: primaryColor,
       }}>
-      {true ? props.children : <></>}
+      {props.children}
     </ColorContext.Provider>
   );
 };