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

package/template/src/language/useLanguage.tsx

@@ -0,0 +1,92 @@
+/*
+********************************************
+ 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, {createContext, useContext, useEffect, useState} from 'react';
+import {createHook} from 'fpe-implementation';
+import {useFpe} from 'fpe-api';
+import {DEFAULT_I18_DATA} from './index';
+import StorageContext from '../components/StorageContext';
+
+export interface LanguageContextInterface {
+  languageCode: string;
+  setLanguageCode: (code: string) => void;
+}
+
+export interface LanguagePropsInterface {
+  children: React.ReactNode;
+}
+
+const LanguageContext = createContext<LanguageContextInterface>({
+  languageCode: DEFAULT_I18_DATA.locale,
+  setLanguageCode: () => {},
+});
+
+const LanguageProvider = (props: LanguagePropsInterface) => {
+  const {store, setStore} = useContext(StorageContext);
+  const i18nData = useFpe((data) => data?.i18n);
+
+  //If language code is stored in the localstorage no longer available in fpe data
+  //then we will update the localstorage value to default value
+  let storedCode =
+    i18nData && Array.isArray(i18nData) && i18nData.length
+      ? i18nData?.find((item) => item.locale === store.selectedLanguageCode)
+        ? store.selectedLanguageCode
+        : undefined
+      : undefined;
+
+  const [languageCode, setLanguageCodeLocal] = useState(
+    storedCode ||
+      (i18nData && Array.isArray(i18nData) && i18nData.length
+        ? i18nData[0].locale
+        : false) ||
+      DEFAULT_I18_DATA.locale,
+  );
+
+  useEffect(() => {
+    if (setStore) {
+      setStore((prevState) => {
+        return {
+          ...prevState,
+          selectedLanguageCode: languageCode,
+        };
+      });
+    }
+  }, [languageCode]);
+
+  useEffect(() => {
+    let storedCode =
+      i18nData && Array.isArray(i18nData) && i18nData.length
+        ? i18nData?.find((item) => item.locale === store.selectedLanguageCode)
+          ? store.selectedLanguageCode
+          : undefined
+        : undefined;
+    setLanguageCodeLocal(
+      storedCode ||
+        (i18nData && Array.isArray(i18nData) && i18nData.length
+          ? i18nData[0].locale
+          : false) ||
+        DEFAULT_I18_DATA.locale,
+    );
+  }, [i18nData]);
+
+  const setLanguageCode = (langCode: string) => {
+    setLanguageCodeLocal(langCode);
+  };
+
+  return (
+    <LanguageContext.Provider value={{languageCode, setLanguageCode}}>
+      {props.children}
+    </LanguageContext.Provider>
+  );
+};
+const useLanguage = createHook(LanguageContext);
+
+export {LanguageProvider, useLanguage};

package/template/src/pages/Authenticate.tsx

@@ -9,28 +9,36 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState} from 'react';
+import React, {useContext, useState} from 'react';
 import {
   View,
   Text,
   ImageBackground,
   StyleSheet,
-  Dimensions,
+  LayoutChangeEvent,
 } from 'react-native';
 import Logo from '../subComponents/Logo';
 import OAuth from '../components/OAuth';
 import Illustration from '../subComponents/Illustration';
-import hasBrandLogo from '../utils/hasBrandLogo';
+import {hasBrandLogo} from '../utils/common';
+import DimensionContext from '../components/dimension/DimensionContext';
+import {useString} from '../utils/useString';
 
 const Authenticate = () => {
-  const [dim, setDim] = useState([
-    Dimensions.get('window').width,
-    Dimensions.get('window').height,
-    Dimensions.get('window').width > Dimensions.get('window').height,
-  ]);
-  let onLayout = (e: any) => {
-    setDim([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
+  const {getDimensionData} = useContext(DimensionContext);
+  const [isDesktop, setIsDesktop] = useState(false);
+  let onLayout = (e: LayoutChangeEvent) => {
+    const {isDesktop} = getDimensionData(
+      e.nativeEvent.layout.width,
+      e.nativeEvent.layout.height,
+    );
+    setIsDesktop(isDesktop);
   };
+  //commented for v1 release
+  // const oauthLoginLabel = useString('oauthLoginLabel')();
+  // const oauthProviderLabel = useString('oauthProviderLabel')();
+  const oauthLoginLabel = 'Login using OAuth';
+  const oauthProviderLabel = 'Please select an OAuth provider to login.';
   return (
     <ImageBackground
       onLayout={onLayout}
@@ -41,13 +49,11 @@ const Authenticate = () => {
         <View style={style.nav}>{hasBrandLogo && <Logo />}</View>
         <View style={style.content}>
           <View style={style.leftContent}>
-            <Text style={style.heading}>Login using OAuth</Text>
-            <Text style={style.headline}>
-              Please select an OAuth provider to login.
-            </Text>
+            <Text style={style.heading}>{oauthLoginLabel}</Text>
+            <Text style={style.headline}>{oauthProviderLabel}</Text>
             <OAuth />
           </View>
-          {dim[0] > dim[1] + 150 ? (
+          {isDesktop ? (
             <View style={style.full}>
               <Illustration />
             </View>

package/template/src/pages/Create.tsx

@@ -9,200 +9,217 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useEffect, useState} from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  Dimensions,
-  ScrollView,
-  Platform,
-} from 'react-native';
+import React, {useEffect, useState, useContext} from 'react';
+import {View, Text, StyleSheet, ScrollView} from 'react-native';
 import {useHistory} from '../components/Router';
 import Checkbox from '../subComponents/Checkbox';
-import {gql, useMutation} from '@apollo/client';
-import Logo from '../subComponents/Logo';
-// import OpenInNativeButton from '../subComponents/OpenInNativeButton';
-import Share from '../components/Share';
-// import ColorContext from '../components/ColorContext';
-// import Illustration from '../subComponents/Illustration';
-// import {textInput} from '../../theme.json';
 import PrimaryButton from '../atoms/PrimaryButton';
 import SecondaryButton from '../atoms/SecondaryButton';
 import HorizontalRule from '../atoms/HorizontalRule';
 import TextInput from '../atoms/TextInput';
-import Error from '../subComponents/Error';
 import Toast from '../../react-native-toast-message';
-import hasBrandLogo from '../utils/hasBrandLogo';
+import {ErrorContext} from '../components/common';
+import ShareLink from '../components/Share';
+import Logo from '../components/common/Logo';
+import {isWeb, isValidReactComponent} from '../utils/common';
+import {useFpe, useMeetingInfo} from 'fpe-api';
+import {useString} from '../utils/useString';
+import useCreateMeeting from '../utils/useCreateMeeting';
+import {CreateProvider} from './create/useCreate';
+import useJoinMeeting from '../utils/useJoinMeeting';
+import SDKEvents from '../utils/SdkEvents';
 
-type PasswordInput = {
-  host: string;
-  view: string;
-};
+const Create = () => {
+  const {CreateComponent} = useFpe((data) => {
+    let components: {
+      CreateComponent?: React.ElementType;
+    } = {};
+    // commented for v1 release
+    // if (
+    //   data?.components?.create &&
+    //   typeof data?.components?.create !== 'object'
+    // ) {
+    //   if (
+    //     data?.components?.create &&
+    //     isValidReactComponent(data?.components?.create)
+    //   )
+    //     components.CreateComponent = data?.components?.create;
+    // }
+    return components;
+  });
 
-const CREATE_CHANNEL = gql`
-  mutation CreateChannel(
-    $title: String!
-    $backendURL: String!
-    $enablePSTN: Boolean
-  ) {
-    createChannel(
-      title: $title
-      backendURL: $backendURL
-      enablePSTN: $enablePSTN
-    ) {
-      passphrase {
-        host
-        view
-      }
-      channel
-      title
-      pstn {
-        number
-        dtmf
-      }
-    }
-  }
-`;
+  const useJoin = useJoinMeeting();
 
-const Create = () => {
-  // const {primaryColor} = useContext(ColorContext);
+  const {setGlobalErrorMessage} = useContext(ErrorContext);
   const history = useHistory();
+  const [loading, setLoading] = useState(false);
   const [roomTitle, onChangeRoomTitle] = useState('');
   const [pstnCheckbox, setPstnCheckbox] = useState(false);
   const [hostControlCheckbox, setHostControlCheckbox] = useState(true);
-  const [urlView, setUrlView] = useState(null);
-  const [urlHost, setUrlHost] = useState(null);
-  const [pstn, setPstn] = useState(null);
   const [roomCreated, setRoomCreated] = useState(false);
-  const [joinPhrase, setJoinPhrase] = useState(null);
-  const [createChannel, {data, loading, error}] = useMutation(CREATE_CHANNEL);
+  const createRoomFun = useCreateMeeting();
+  const {
+    meetingPassphrase: {attendee, host, pstn},
+  } = useMeetingInfo();
+  //commented for v1 release
+  // const createdText = useString('meetingCreatedNotificationLabel')();
+  // const hostControlsToggle = useString<boolean>('hostControlsToggle');
+  // const pstnToggle = useString<boolean>('pstnToggle');
+  // const loadingWithDots = useString('loadingWithDots')();
+  // const createMeetingButton = useString('createMeetingButton')();
+  // const haveMeetingID = useString('haveMeetingID')();
 
-  console.log('mutation data', data);
+  const createdText = 'Created';
+  const hostControlsToggle = (toggle: boolean) =>
+    toggle
+      ? 'Restrict Host Controls (Separate host link)'
+      : 'Restrict Host Controls (Everyone is a Host)';
+  const pstnToggle = () => 'Use PSTN (Join by dialing a number)';
+  const meetingNameInputPlaceholder = useString(
+    'meetingNameInputPlaceholder',
+  )();
+  const loadingWithDots = 'Loading...';
+  const createMeetingButton = 'Create Meeting';
+  const haveMeetingID = 'Have a Meeting ID?';
 
   useEffect(() => {
-    if (Platform.OS === 'web') {
+    if (isWeb) {
       document.title = $config.APP_NAME;
     }
+    SDKEvents.on('joinMeetingWithPhrase', (phrase) => {
+      console.log(
+        'DEBUG(aditya)-SDKEvents: joinMeetingWithPhrase event called',
+      );
+      useJoin(phrase);
+    });
+    return () => {
+      SDKEvents.off('joinMeetingWithPhrase');
+    };
   }, []);
 
-  const createRoom = () => {
+  const showShareScreen = () => {
+    setRoomCreated(true);
+  };
+
+  useEffect(() => {
+    if (attendee) {
+      SDKEvents.emit('create', host, attendee, pstn);
+    }
+  }, [attendee]);
+
+  const createRoomAndNavigateToShare = async (
+    roomTitle: string,
+    enablePSTN: boolean,
+    isSeparateHostLink: boolean,
+  ) => {
     if (roomTitle !== '') {
-      console.log('Create room invoked');
-      createChannel({
-        variables: {
-          title: roomTitle,
-          backendURL: $config.BACKEND_ENDPOINT,
-          enablePSTN: pstnCheckbox,
-        },
-      })
-        .then((res: any) => {
-          Toast.show({
-            text1: 'Created: ' + roomTitle,
-            visibilityTime: 1000,
-          });
-          console.log('promise data', res);
-          setUrlView(res.data.createChannel.passphrase.view);
-          setUrlHost(res.data.createChannel.passphrase.host);
-          setPstn(res.data.createChannel.pstn);
-          setJoinPhrase(res.data.createChannel.passphrase.host);
-          setRoomCreated(true);
-        })
-        .catch((e) => {
-          console.log(e);
+      setLoading(true);
+      try {
+        await createRoomFun(roomTitle, enablePSTN, isSeparateHostLink);
+        setLoading(false);
+        Toast.show({
+          type: 'success',
+          text1: createdText + ': ' + roomTitle,
+          visibilityTime: 1000,
         });
+        showShareScreen();
+      } catch (error) {
+        setLoading(false);
+        setGlobalErrorMessage(error);
+      }
     }
   };
 
-  const [dim, setDim] = useState([
-    Dimensions.get('window').width,
-    Dimensions.get('window').height,
-    Dimensions.get('window').width > Dimensions.get('window').height,
-  ]);
-  let onLayout = (e: any) => {
-    setDim([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
-  };
-
   return (
-    // <ImageBackground
-    //   style={style.full}
-    //   resizeMode={'cover'}>
-    // <KeyboardAvoidingView behavior={'height'} style={style.main}>
-    <ScrollView contentContainerStyle={style.main}>
-      <View style={style.nav}>
-        {hasBrandLogo && <Logo />}
-        {error ? <Error error={error} /> : <></>}
-        {/* <OpenInNativeButton /> */}
-      </View>
+    <CreateProvider
+      value={{
+        showShareScreen,
+      }}>
       {!roomCreated ? (
-        <View style={style.content} onLayout={onLayout}>
-          <View style={style.leftContent}>
-            <Text style={style.heading}>{$config.APP_NAME}</Text>
-            <Text style={style.headline}>{$config.LANDING_SUB_HEADING}</Text>
-            <View style={style.inputs}>
-              <TextInput
-                value={roomTitle}
-                onChangeText={(text) => onChangeRoomTitle(text)}
-                onSubmitEditing={() => createRoom()}
-                placeholder="Name your meeting"
-              />
-              <View style={{paddingVertical: 10}}>
-                <View style={style.checkboxHolder}>
-                  {$config.EVENT_MODE ? (
-                    <></>
-                  ) : (
-                    <>
-                      <Checkbox
-                        disabled={$config.EVENT_MODE}
-                        value={hostControlCheckbox}
-                        onValueChange={setHostControlCheckbox}
-                      />
-                      <Text style={style.checkboxTitle}>
-                        Restrict Host Controls (Separate host link)
-                      </Text>
-                    </>
-                  )}
-                </View>
-                {$config.PSTN ? (
-                  <View style={style.checkboxHolder}>
-                    <Checkbox
-                      value={pstnCheckbox}
-                      onValueChange={setPstnCheckbox}
+        CreateComponent ? (
+          <CreateComponent />
+        ) : (
+          <ScrollView contentContainerStyle={style.main}>
+            <Logo />
+            <View style={style.content}>
+              <View style={style.leftContent}>
+                <Text style={style.heading}>{$config.APP_NAME}</Text>
+                <Text style={style.headline}>
+                  {$config.LANDING_SUB_HEADING}
+                </Text>
+                <View style={style.inputs}>
+                  <TextInput
+                    value={roomTitle}
+                    onChangeText={(text) => onChangeRoomTitle(text)}
+                    onSubmitEditing={() =>
+                      createRoomAndNavigateToShare(
+                        roomTitle,
+                        pstnCheckbox,
+                        hostControlCheckbox,
+                      )
+                    }
+                    placeholder={meetingNameInputPlaceholder}
+                  />
+                  <View style={{paddingVertical: 10}}>
+                    <View style={style.checkboxHolder}>
+                      {$config.EVENT_MODE ? (
+                        <></>
+                      ) : (
+                        <>
+                          <Checkbox
+                            disabled={$config.EVENT_MODE}
+                            value={hostControlCheckbox}
+                            onValueChange={setHostControlCheckbox}
+                          />
+                          <Text style={style.checkboxTitle}>
+                            {/* Restrict Host Controls (Separate host link) */}
+                            {hostControlsToggle(hostControlCheckbox)}
+                          </Text>
+                        </>
+                      )}
+                    </View>
+                    {$config.PSTN ? (
+                      <View style={style.checkboxHolder}>
+                        <Checkbox
+                          value={pstnCheckbox}
+                          onValueChange={setPstnCheckbox}
+                        />
+                        <Text style={style.checkboxTitle}>
+                          {pstnToggle(pstnCheckbox)}
+                        </Text>
+                      </View>
+                    ) : (
+                      <></>
+                    )}
+                  </View>
+                  <View style={style.btnContainer}>
+                    <PrimaryButton
+                      disabled={roomTitle === '' || loading}
+                      onPress={() =>
+                        createRoomAndNavigateToShare(
+                          roomTitle,
+                          pstnCheckbox,
+                          hostControlCheckbox,
+                        )
+                      }
+                      text={loading ? loadingWithDots : createMeetingButton}
+                    />
+                    <HorizontalRule />
+                    <SecondaryButton
+                      onPress={() => history.push('/join')}
+                      text={haveMeetingID}
                     />
-                    <Text style={style.checkboxTitle}>
-                      Use PSTN (Join by dialing a number)
-                    </Text>
                   </View>
-                ) : (
-                  <></>
-                )}
-              </View>
-              <View style={style.btnContainer}>
-                <PrimaryButton
-                  disabled={roomTitle === '' || loading}
-                  onPress={() => createRoom()}
-                  text={loading ? 'Loading...' : 'Create Meeting'}
-                />
-                <HorizontalRule />
-                <SecondaryButton
-                  onPress={() => history.push('/join')}
-                  text={'Have a Meeting ID?'}
-                />
+                </View>
               </View>
             </View>
-          </View>
-        </View>
+          </ScrollView>
+        )
       ) : (
-        <Share
-          urlView={urlView}
-          urlHost={urlHost}
-          pstn={pstn}
-          hostControlCheckbox={hostControlCheckbox}
-          joinPhrase={joinPhrase}
-          roomTitle={roomTitle}
-        />
+        <></>
       )}
-    </ScrollView>
+      {roomCreated ? <ShareLink /> : <></>}
+    </CreateProvider>
   );
 };
 

package/template/src/pages/Join.tsx

@@ -9,54 +9,66 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext, useState} from 'react';
+// @ts-nocheck
+import React, {useState} from 'react';
 import {View, Text, StyleSheet, ScrollView} from 'react-native';
 import {useHistory} from '../components/Router';
-import SessionContext from '../components/SessionContext';
-// import OpenInNativeButton from '../subComponents/OpenInNativeButton';
 import Logo from '../subComponents/Logo';
-import hasBrandLogo from '../utils/hasBrandLogo';
+import {
+  isValidReactComponent,
+  shouldAuthenticate,
+  hasBrandLogo,
+} from '../utils/common';
 import LogoutButton from '../subComponents/LogoutButton';
-import ColorContext from '../components/ColorContext';
-// import Illustration from '../subComponents/Illustration';
-// import {secondaryBtn} from '../../theme.json';
 import PrimaryButton from '../atoms/PrimaryButton';
 import SecondaryButton from '../atoms/SecondaryButton';
 import HorizontalRule from '../atoms/HorizontalRule';
 import TextInput from '../atoms/TextInput';
 import Error from '../subComponents/Error';
-import shouldAuthenticate from '../utils/shouldAuthenticate';
-// const joinFlag = 0;
-interface joinProps {
-  phrase: string;
-  onChangePhrase: (text: string) => void;
-}
-const Join = (props: joinProps) => {
+import {useString} from '../utils/useString';
+import useNavigateTo from '../utils/useNavigateTo';
+import {useFpe} from 'fpe-api';
+
+const Join = () => {
+  //commented for v1 release
+  // const meetingIdInputPlaceholder = useString('meetingIdInputPlaceholder')();
+  // const enterMeetingButton = useString('enterMeetingButton')();
+  // const createMeetingButton = useString('createMeetingButton')();
+  const meetingIdInputPlaceholder = 'Enter Meeting ID';
+  const enterMeetingButton = 'Enter Meeting';
+  const createMeetingButton = 'Create Meeting';
   const history = useHistory();
-  const {primaryColor} = useContext(ColorContext);
-  const {joinSession} = useContext(SessionContext);
+  const [phrase, setPhrase] = useState('');
+  const navigateTo = useNavigateTo();
   const [error, setError] = useState<null | {name: string; message: string}>(
     null,
   );
-  // const [dim, setDim] = useState([
-  //   Dimensions.get('window').width,
-  //   Dimensions.get('window').height,
-  //   Dimensions.get('window').width > Dimensions.get('window').height,
-  // ]);
-  // let onLayout = (e: any) => {
-  //   setDim([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
-  // };
+
   const createMeeting = () => {
     history.push('/create');
   };
 
-  const phrase = props.phrase;
-  const onChangePhrase = props.onChangePhrase;
   const startCall = async () => {
-    joinSession({phrase});
+    navigateTo(phrase);
   };
+  const {JoinComponent} = useFpe((data) => {
+    let components: {
+      JoinComponent?: React.ComponentType;
+    } = {};
+    // commented for v1 release
+    // if (
+    //   data?.components?.join &&
+    //   typeof data?.components?.join !== 'object' &&
+    //   isValidReactComponent(data?.components?.join)
+    // ) {
+    //   components.JoinComponent = data?.components?.join;
+    // }
+    return components;
+  });
 
-  return (
+  return JoinComponent ? (
+    <JoinComponent />
+  ) : (
     <ScrollView contentContainerStyle={style.main}>
       <View style={style.nav}>
         {hasBrandLogo && <Logo />}
@@ -69,20 +81,20 @@ const Join = (props: joinProps) => {
           <View style={style.inputs}>
             <TextInput
               value={phrase}
-              onChangeText={(text) => onChangePhrase(text)}
+              onChangeText={(text) => setPhrase(text)}
               onSubmitEditing={() => startCall()}
-              placeholder="Enter Meeting ID"
+              placeholder={meetingIdInputPlaceholder}
             />
             <View style={{height: 10}} />
             <PrimaryButton
               disabled={phrase === ''}
               onPress={() => startCall()}
-              text={'Enter Meeting'}
+              text={enterMeetingButton}
             />
             <HorizontalRule />
             <SecondaryButton
               onPress={() => createMeeting()}
-              text={'Create a meeting'}
+              text={createMeetingButton}
             />
             {shouldAuthenticate ? (
               <LogoutButton setError={setError} /> //setError not available in logout?