agora-appbuilder-core 4.0.0-spl.24 → 4.0.0-spl.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-spl.24",
+  "version": "4.0.0-spl.26",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/_package-lock.json

@@ -17,6 +17,7 @@
         "@sentry/react-native": "2.4.3",
         "@sentry/tracing": "6.2.1",
         "@supersami/rn-foreground-service": "^1.1.1",
+        "@types/lodash": "^4.17.6",
         "agora-react-native-rtm": "1.5.1",
         "agora-rtc-sdk-ng": "4.16.1",
         "agora-rtm-sdk": "1.5.1",
@@ -26,6 +27,7 @@
         "exponential-backoff": "3.1.0",
         "fetch-retry": "^5.0.6",
         "graphql": "15.5.0",
+        "lodash": "^4.17.21",
         "nanoevents": "7.0.1",
         "nanoid": "4.0.0",
         "nosleep.js": "0.12.0",
@@ -6110,6 +6112,11 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.6.tgz",
+      "integrity": "sha512-OpXEVoCKSS3lQqjx9GGGOapBeuW5eUboYHRlHP9urXPX25IKZ6AnP5ZRxtVf63iieUbsHxLn8NQ5Nlftc6yzAA=="
+    },
     "node_modules/@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -34130,6 +34137,11 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "@types/lodash": {
+      "version": "4.17.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.6.tgz",
+      "integrity": "sha512-OpXEVoCKSS3lQqjx9GGGOapBeuW5eUboYHRlHP9urXPX25IKZ6AnP5ZRxtVf63iieUbsHxLn8NQ5Nlftc6yzAA=="
+    },
     "@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",

package/template/customization-api/__tests__/module-boundaries.test.js

@@ -0,0 +1,112 @@
+const fs = require('fs');
+const path = require('path');
+const babel = require('@babel/core');
+
+const templateRoot = path.resolve(__dirname, '../..');
+
+const compile = (relativePath) => {
+  const filename = path.join(templateRoot, relativePath);
+
+  return babel.transformSync(fs.readFileSync(filename, 'utf8'), {
+    babelrc: false,
+    configFile: false,
+    filename,
+    presets: [
+      '@babel/preset-react',
+      [
+        '@babel/preset-typescript',
+        {
+          allExtensions: true,
+          isTSX: true,
+        },
+      ],
+      [
+        '@babel/preset-env',
+        {
+          targets: {
+            node: 'current',
+          },
+        },
+      ],
+    ],
+  }).code;
+};
+
+const runtimeDependencies = (compiledCode) =>
+  Array.from(compiledCode.matchAll(/require\(["']([^"']+)["']\)/g), (match) =>
+    match[1],
+  );
+
+describe('web module boundaries', () => {
+  test('SDK method events do not load the DeviceConfigure React component', () => {
+    const dependencies = runtimeDependencies(
+      compile('src/utils/SdkMethodEvents.ts'),
+    );
+
+    expect(dependencies).not.toContain('../components/DeviceConfigure');
+  });
+
+  test('customization app state delegates core hook creation to a leaf module', () => {
+    const dependencies = runtimeDependencies(
+      compile('customization-api/app-state.ts'),
+    );
+
+    expect(dependencies).not.toContain('../agora-rn-uikit');
+    expect(dependencies).toContain('./core-contexts');
+  });
+
+  test.each([
+    'src/app-state/useLocalUserInfo.ts',
+    'src/subComponents/recording/useRecording.tsx',
+    'src/components/chat-messages/useChatMessages.tsx',
+    'src/components/useUserPreference.tsx',
+  ])('%s does not load the public customization API barrel', (filename) => {
+    const dependencies = runtimeDependencies(compile(filename));
+
+    expect(dependencies).not.toContain('customization-api');
+  });
+
+  test.each([
+    [
+      'src/components/meeting-info/useMeetingInfo.tsx',
+      '../../../customization-implementation/createHook',
+    ],
+    [
+      'src/subComponents/recording/useRecording.tsx',
+      '../../../customization-implementation/createHook',
+    ],
+    [
+      'src/components/chat-ui/useChatUIControl.tsx',
+      '../../../customization-implementation/createHook',
+    ],
+    [
+      'src/components/chat-notification/useChatNotification.tsx',
+      '../../../customization-implementation/createHook',
+    ],
+    [
+      'src/components/chat-messages/useChatMessages.tsx',
+      '../../../customization-implementation/createHook',
+    ],
+    [
+      'src/components/useUserPreference.tsx',
+      '../../customization-implementation/createHook',
+    ],
+    [
+      'src/utils/useLayout.tsx',
+      '../../customization-implementation/createHook',
+    ],
+    [
+      'src/utils/useSidePanel.tsx',
+      '../../customization-implementation/createHook',
+    ],
+  ])(
+    '%s imports createHook without loading the customization implementation barrel',
+    (filename, createHookPath) => {
+      const dependencies = runtimeDependencies(compile(filename));
+
+      expect(dependencies).not.toContain('customization-implementation');
+      expect(dependencies).toContain(createHookPath);
+    },
+  );
+
+});

package/template/customization-api/app-state.ts

@@ -1,8 +1,7 @@
 /**
  * Core contexts
  */
-import {createHook} from 'customization-implementation';
-import {RtcContext, RenderContext} from '../agora-rn-uikit';
+import {useRtc, useRender} from './core-contexts';
 
 // commented for v1 release
 //import {default as DeviceContext} from '../src/components/DeviceContext';
@@ -10,11 +9,11 @@ import {RtcContext, RenderContext} from '../agora-rn-uikit';
 /**
  * The RTC app state exposes the internal RtcEngine object as well as dispatch interface to perform various actions.
  */
-export const useRtc = createHook(RtcContext);
+export {useRtc};
 /**
  * The Render app state governs the information necessary to render each user content view displayed in the videocall screen.
  */
-export const useRender = createHook(RenderContext);
+export {useRender};
 
 export {useLocalUserInfo} from '../src/app-state/useLocalUserInfo';
 

package/template/customization-api/core-contexts.ts

@@ -0,0 +1,10 @@
+import createHook from '../customization-implementation/createHook';
+import RtcContext from '../agora-rn-uikit/src/Contexts/RtcContext';
+import RenderContext from '../agora-rn-uikit/src/Contexts/RenderContext';
+
+/**
+ * Core hooks live in a dependency-free module so internal application code can
+ * consume them without evaluating the public customization API barrel.
+ */
+export const useRtc = createHook(RtcContext);
+export const useRender = createHook(RenderContext);

package/template/package-lock.json

@@ -17,6 +17,7 @@
         "@sentry/react-native": "2.4.3",
         "@sentry/tracing": "6.2.1",
         "@supersami/rn-foreground-service": "^1.1.1",
+        "@types/lodash": "^4.17.6",
         "agora-react-native-rtm": "1.5.1",
         "agora-rtc-sdk-ng": "4.16.1",
         "agora-rtm-sdk": "1.5.1",
@@ -26,6 +27,7 @@
         "exponential-backoff": "3.1.0",
         "fetch-retry": "^5.0.6",
         "graphql": "15.5.0",
+        "lodash": "^4.17.21",
         "nanoevents": "7.0.1",
         "nanoid": "4.0.0",
         "nosleep.js": "0.12.0",
@@ -6110,6 +6112,11 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.6.tgz",
+      "integrity": "sha512-OpXEVoCKSS3lQqjx9GGGOapBeuW5eUboYHRlHP9urXPX25IKZ6AnP5ZRxtVf63iieUbsHxLn8NQ5Nlftc6yzAA=="
+    },
     "node_modules/@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -34130,6 +34137,11 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "@types/lodash": {
+      "version": "4.17.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.6.tgz",
+      "integrity": "sha512-OpXEVoCKSS3lQqjx9GGGOapBeuW5eUboYHRlHP9urXPX25IKZ6AnP5ZRxtVf63iieUbsHxLn8NQ5Nlftc6yzAA=="
+    },
     "@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",

package/template/package.json

@@ -57,6 +57,7 @@
     "@sentry/react-native": "2.4.3",
     "@sentry/tracing": "6.2.1",
     "@supersami/rn-foreground-service": "^1.1.1",
+    "@types/lodash": "^4.17.6",
     "agora-react-native-rtm": "1.5.1",
     "agora-rtc-sdk-ng": "4.16.1",
     "agora-rtm-sdk": "1.5.1",
@@ -66,6 +67,7 @@
     "exponential-backoff": "3.1.0",
     "fetch-retry": "^5.0.6",
     "graphql": "15.5.0",
+    "lodash": "^4.17.21",
     "nanoevents": "7.0.1",
     "nanoid": "4.0.0",
     "nosleep.js": "0.12.0",

package/template/src/SDKAppWrapper.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {
   CustomizationApiInterface,
   customize,
@@ -39,6 +39,7 @@ export interface AppBuilderSdkApiInterface {
   createCustomization: (
     customization: CustomizationApiInterface,
   ) => CustomizationApiInterface;
+  clearState: (stateKey: 'join' | 'all') => Promise<void>;
   customEvents: typeof customEvents;
   on: <T extends keyof userEventsMapInterface>(
     userEventName: T,
@@ -81,6 +82,15 @@ export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
   muteVideo: async (state) => {
     return await SDKMethodEventsManager.emit('muteVideo', state);
   },
+  clearState: async (stateKey) => {
+    switch (stateKey) {
+      case 'all':
+      case 'join':
+        return await SDKMethodEventsManager.emit('clearState', stateKey);
+      default:
+        throw new Error('Invalid identifier');
+    }
+  },
   createCustomization: customize,
   on: (userEventName, cb) => {
     console.log('SDKEvents: Event Registered', userEventName);

package/template/src/app-state/useLocalUserInfo.ts

@@ -1,5 +1,5 @@
 import {useLocalUid} from '../../agora-rn-uikit';
-import {useRender} from 'customization-api';
+import {useRender} from '../../customization-api/core-contexts';
 
 /**
  * The LocalUserInfo app state contains the local user information like uid, audio and video mute states etc.

package/template/src/components/SdkApiContext.tsx

@@ -8,6 +8,7 @@ import {
 } from './meeting-info/useMeetingInfo';
 import {CustomizationApiInterface} from 'customization-api';
 import {Unsubscribe} from 'nanoevents';
+import {cloneDeep} from 'lodash';
 
 type extractPromises<T extends (...p: any) => any> = {
   res: Parameters<T>[0];
@@ -57,8 +58,8 @@ type SdkApiContextInterface = {
   onMuteAudio: (callback: _InternalSDKMethodEventsMap['muteAudio']) => void;
   onMuteVideo: (callback: _InternalSDKMethodEventsMap['muteVideo']) => void;
   clearState: (
-    key: keyof _InternalSDKMethodEventsMap | 'enterRoom',
-    param?: any,
+    key: keyof _InternalSDKMethodEventsMap | 'enterRoom' | 'all',
+    hard?: boolean,
   ) => void;
 };
 
@@ -80,7 +81,7 @@ const defaultMuteAllParticipantsListener = ((res, _, param) => {
   res();
 }) as _InternalSDKMethodEventsMap['muteAllParticipants'];
 
-const SdkApiInitState: SdkApiContextInterface = {
+const SdkApiDefaultState: SdkApiContextInterface = {
   enterRoom: {
     set: () => {},
   },
@@ -100,6 +101,19 @@ const SdkApiInitState: SdkApiContextInterface = {
   onMuteAudio: (_) => {},
   clearState: () => {},
 };
+const SdkApiInitState: SdkApiContextInterface = cloneDeep(SdkApiDefaultState);
+
+export const clearStateGlobal = (
+  state: keyof SdkApiContextInterface | 'all',
+) => {
+  if (state === 'all') {
+    for (const key in SdkApiInitState)
+      SdkApiInitState[key] = cloneDeep(SdkApiDefaultState[key]);
+  } else {
+    //@ts-expect-error
+    SdkApiInitState[state] = cloneDeep(SdkApiDefaultState[state]);
+  }
+};
 
 export const READ_ONLY_SdkApiInitState = SdkApiInitState;
 
@@ -111,9 +125,10 @@ export const SdkApiContext =
 let moduleEventsUnsub: any[] = [];
 
 type commonEventHandlers = {
-  [K in keyof Omit<_InternalSDKMethodEventsMap, 'muteVideo' | 'muteAudio'>]?: (
-    setter: (p: SdkApiContextInterface[K]) => void,
-  ) => Unsubscribe;
+  [K in keyof Omit<
+    _InternalSDKMethodEventsMap,
+    'muteVideo' | 'muteAudio' | 'flushQueue'
+  >]?: (setter: (p: SdkApiContextInterface[K]) => void) => Unsubscribe;
 };
 
 const commonEventHandlers: commonEventHandlers = {
@@ -209,6 +224,10 @@ const registerListener = () => {
     ),
     SDKMethodEventsManager.on('muteVideo', defaultMuteListener),
     SDKMethodEventsManager.on('muteAudio', defaultMuteListener),
+    SDKMethodEventsManager.on('clearState', (res, _, queue) => {
+      clearStateGlobal(queue);
+      res();
+    }),
   ];
 };
 
@@ -261,26 +280,31 @@ const SdkApiContextProvider: React.FC = (props) => {
     muteAudioListener.current = value;
   };
 
-  const clearState: SdkApiContextInterface['clearState'] = (key) => {
+  const clearState: SdkApiContextInterface['clearState'] = (key, hard) => {
+    let fallthrough = false;
     switch (key) {
+      case 'all':
+        fallthrough = true;
       case 'join':
-        setJoinState(SdkApiInitState.join);
-        break;
+        setJoinState(hard ? SdkApiDefaultState.join : SdkApiInitState.join);
+        if (!fallthrough) break;
       case 'enterRoom':
         setEnterRoom(null);
-        break;
+        if (!fallthrough) break;
       case 'customize':
-        setUserCustomization(SdkApiInitState.customize);
-        break;
+        setUserCustomization(
+          hard ? SdkApiDefaultState.customize : SdkApiInitState.customize,
+        );
+        if (!fallthrough) break;
       case 'microphoneDevice':
         setMicrophoneDeviceState({});
-        break;
+        if (!fallthrough) break;
       case 'speakerDevice':
         setSpeakerDeviceState({});
-        break;
+        if (!fallthrough) break;
       case 'cameraDevice':
         setCameraDeviceState({});
-        break;
+        if (!fallthrough) break;
       case 'muteAllParticipants':
         setMuteAllParticipantsState((current) => {
           return {
@@ -288,12 +312,13 @@ const SdkApiContextProvider: React.FC = (props) => {
             promise: undefined,
           };
         });
+        if (!fallthrough) break;
       case 'muteVideo':
         setMuteVideoListener(defaultMuteListener);
-        break;
+        if (!fallthrough) break;
       case 'muteAudio':
         setMuteVideoListener(defaultMuteListener);
-        break;
+        if (!fallthrough) break;
     }
   };
 
@@ -353,6 +378,11 @@ const SdkApiContextProvider: React.FC = (props) => {
       SDKMethodEventsManager.on('muteAudio', (...args) => {
         muteAudioListener.current(...args);
       }),
+      SDKMethodEventsManager.on('clearState', (res, _, queue) => {
+        clearStateGlobal(queue);
+        clearState(queue, true);
+        res();
+      }),
     ];
 
     return () => {

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

@@ -9,9 +9,9 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {createHook} from 'customization-implementation';
+import createHook from '../../../customization-implementation/createHook';
 import React, {useState, useEffect, useRef} from 'react';
-import {useRender, useRtc} from 'customization-api';
+import {useRender, useRtc} from '../../../customization-api/core-contexts';
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
 import {useLocalUid, UidType, RenderInterface} from '../../../agora-rn-uikit';
 import events, {EventPersistLevel} from '../../rtm-events-api';

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

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

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

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

package/template/src/components/meeting-info/useMeetingInfo.tsx

@@ -10,7 +10,7 @@
 *********************************************
 */
 import React, {createContext} from 'react';
-import {createHook} from 'customization-implementation';
+import createHook from '../../../customization-implementation/createHook';
 import {UidType} from '../../../agora-rn-uikit';
 export interface MeetingInfoContextInterface {
   isJoinDataFetched?: boolean;

package/template/src/components/popups/InvitePopup.tsx

@@ -25,6 +25,7 @@ import {isMobileUA, useIsDesktop} from '../../utils/common';
 import {useVideoCall} from '../useVideoCall';
 import {useParams} from '../Router';
 import useGetMeetingPhrase from '../../utils/useGetMeetingPhrase';
+import {SDK_MEETING_TAG} from '../SdkApiContext';
 
 const InvitePopup = () => {
   const {setShowInvitePopup, showInvitePopup} = useVideoCall();
@@ -33,8 +34,14 @@ const InvitePopup = () => {
   const {phrase} = useParams<{phrase: string}>();
   const getMeeting = useGetMeetingPhrase();
   useEffect(() => {
-    getMeeting(phrase);
-  }, [phrase]);
+    if (!phrase || phrase === SDK_MEETING_TAG) {
+      return;
+    }
+
+    getMeeting(phrase).catch((error) => {
+      console.error('Unable to load invite information', error);
+    });
+  }, [getMeeting, phrase]);
   return (
     <Popup
       modalVisible={showInvitePopup}

package/template/src/components/useUserPreference.tsx

@@ -16,9 +16,9 @@ import StorageContext from './StorageContext';
 import events, {EventPersistLevel} from '../rtm-events-api';
 import {EventNames} from '../rtm-events';
 import useLocalScreenShareUid from '../utils/useLocalShareScreenUid';
-import {createHook} from 'customization-implementation';
+import createHook from '../../customization-implementation/createHook';
 import ChatContext from './ChatContext';
-import {useRtc} from 'customization-api';
+import {useRtc} from '../../customization-api/core-contexts';
 
 interface UserPreferenceContextInterface {
   displayName: string;

package/template/src/components/useVideoCall.tsx

@@ -73,7 +73,7 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
         setShowLayoutOption,
       }}>
       <StopRecordingPopup />
-      <InvitePopup />
+      {showInvitePopup ? <InvitePopup /> : null}
       {props.children}
     </VideoCallContext.Provider>
   );

package/template/src/subComponents/recording/useRecording.tsx

@@ -21,14 +21,14 @@ import {gql, useMutation} from '@apollo/client';
 import {useParams} from '../../components/Router';
 import {PropsContext} from '../../../agora-rn-uikit';
 import Toast from '../../../react-native-toast-message';
-import {createHook} from 'customization-implementation';
+import createHook from '../../../customization-implementation/createHook';
 import {useString} from '../../utils/useString';
 import ChatContext from '../../components/ChatContext';
 import events, {EventPersistLevel} from '../../rtm-events-api';
 import {EventActions, EventNames} from '../../rtm-events';
 import useRecordingLayoutQuery from './useRecordingLayoutQuery';
 import {useScreenContext} from '../../components/contexts/ScreenShareContext';
-import {useRender} from 'customization-api';
+import {useRender} from '../../../customization-api/core-contexts';
 import {trimText} from '../../utils/common';
 
 export interface RecordingContextInterface {

package/template/src/utils/SdkMethodEvents.ts

@@ -1,9 +1,9 @@
 import {createNanoEvents, Emitter} from 'nanoevents';
-import {
+import type {
   CustomizationApiInterface,
   MeetingInfoContextInterface,
 } from 'customization-api';
-import {deviceId} from '../components/DeviceConfigure';
+import type {deviceId} from '../components/DeviceConfigure';
 
 export interface SdkMethodEvents {
   customize: (customization: CustomizationApiInterface) => void;
@@ -14,9 +14,12 @@ export interface SdkMethodEvents {
   microphoneDevice: (deviceId: deviceId) => void;
   speakerDevice: (deviceId: deviceId) => void;
   cameraDevice: (deviceId: deviceId) => void;
-  muteAllParticipants: (mute: boolean | ((currentMute: boolean) => boolean)) => void;
+  muteAllParticipants: (
+    mute: boolean | ((currentMute: boolean) => boolean),
+  ) => void;
   muteAudio: (mute: boolean | ((currentMute: boolean) => boolean)) => void;
   muteVideo: (mute: boolean | ((currentMute: boolean) => boolean)) => void;
+  clearState: (state: 'join' | 'all') => void;
 }
 
 type EventParameterHelper<T extends keyof SdkMethodEvents> = Parameters<
@@ -61,8 +64,22 @@ class SDKMethodEvents {
     event: T,
     ...params: EventParameterHelper<T>
   ) {
-    if (this.emitCache[event]) {
-      throw new Error(`Event: ${event} already in callstack`);
+    if (event === 'clearState') {
+      const param = params[0];
+      switch (param) {
+        case 'join':
+        case 'clearState':
+          delete this.emitCache[param];
+          delete this.emitCacheDisabled[param];
+          break;
+        case 'all':
+          this.reset();
+        default:
+      }
+    } else {
+      if (this.emitCache[event]) {
+        throw new Error(`Event: ${event} already in callstack`);
+      }
     }
 
     const result = await new Promise<EventReturnTypeHelper<T>>((res, rej) => {
@@ -92,6 +109,11 @@ class SDKMethodEvents {
     this.emitCacheDisabled[event] = true;
     return unsub;
   }
+
+  reset() {
+    this.emitCache = {};
+    this.emitCacheDisabled = {};
+  }
 }
 
 const SDKMethodEventsManager = new SDKMethodEvents();

package/template/src/utils/useGetMeetingPhrase.ts

@@ -1,4 +1,4 @@
-import {useContext} from 'react';
+import {useCallback, useContext} from 'react';
 import {gql} from '@apollo/client';
 import {MeetingInfoContextInterface} from '../components/meeting-info/useMeetingInfo';
 import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
@@ -24,48 +24,51 @@ const SHARE = gql`
 export default function useGetMeetingPhrase() {
   const {setMeetingInfo} = useSetMeetingInfo();
   const {client} = useContext(GraphQLContext);
-  return async (phrase: string) => {
-    const response = await client.query({
-      query: SHARE,
-      variables: {
-        passphrase: phrase,
-      },
-    });
-    if (response.error) {
-      throw response.error;
-    } else {
-      try {
-        if (response && response.data) {
-          let data = response.data;
-          let meetingInfo: Partial<MeetingInfoContextInterface['data']> = {
-            roomId: {attendee: ''},
-          };
-          if (data?.share?.passphrase?.view) {
-            meetingInfo.roomId.attendee = data.share.passphrase.view;
-          }
-          if (data?.share?.passphrase?.host) {
-            meetingInfo.roomId.host = data.share.passphrase.host;
-          }
-          if (data?.share?.pstn) {
-            meetingInfo.pstn = {
-              number: data.share.pstn.number,
-              pin: data.share.pstn.dtmf,
+  return useCallback(
+    async (phrase: string) => {
+      const response = await client.query({
+        query: SHARE,
+        variables: {
+          passphrase: phrase,
+        },
+      });
+      if (response.error) {
+        throw response.error;
+      } else {
+        try {
+          if (response && response.data) {
+            let data = response.data;
+            let meetingInfo: Partial<MeetingInfoContextInterface['data']> = {
+              roomId: {attendee: ''},
             };
+            if (data?.share?.passphrase?.view) {
+              meetingInfo.roomId.attendee = data.share.passphrase.view;
+            }
+            if (data?.share?.passphrase?.host) {
+              meetingInfo.roomId.host = data.share.passphrase.host;
+            }
+            if (data?.share?.pstn) {
+              meetingInfo.pstn = {
+                number: data.share.pstn.number,
+                pin: data.share.pstn.dtmf,
+              };
+            }
+            setMeetingInfo((prevState) => {
+              return {
+                ...prevState,
+                data: {
+                  ...prevState.data,
+                  roomId: meetingInfo.roomId,
+                  pstn: meetingInfo?.pstn,
+                },
+              };
+            });
           }
-          setMeetingInfo((prevState) => {
-            return {
-              ...prevState,
-              data: {
-                ...prevState.data,
-                roomId: meetingInfo.roomId,
-                pstn: meetingInfo?.pstn,
-              },
-            };
-          });
+        } catch (error) {
+          throw new Error('An error occurred in parsing the channel data.');
         }
-      } catch (error) {
-        throw new Error('An error occurred in parsing the channel data.');
       }
-    }
-  };
+    },
+    [client, setMeetingInfo],
+  );
 }

package/template/src/utils/useLayout.tsx

@@ -11,7 +11,7 @@
 */
 
 import React, {SetStateAction} from 'react';
-import {createHook} from 'customization-implementation';
+import createHook from '../../customization-implementation/createHook';
 
 export interface LayoutContextInterface {
   currentLayout: string;

package/template/src/utils/useSidePanel.tsx

@@ -12,7 +12,7 @@
 
 import React, {SetStateAction} from 'react';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
-import {createHook} from 'customization-implementation';
+import createHook from '../../customization-implementation/createHook';
 
 export interface SidePanelContextInterface {
   sidePanel: SidePanelType;